首頁(yè) > 博客列表 > ES6 基礎(chǔ)語(yǔ)法總結(jié)

博主信息

博文 49

粉絲 0

評(píng)論 0

訪問量 49513

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

ES6 基礎(chǔ)語(yǔ)法總結(jié)

var let 與 const

var 的不足
1. 可以重復(fù)聲明如已聲明 var a = 10;還可以聲明 var a = 20;
2. 不受區(qū)塊限制如區(qū)塊一中使用了{(lán)var a = 10;} 后面再聲明 var a = 20;最后輸出的是 20
3. 只能被閉包（函數(shù)）限制區(qū)塊
區(qū)別
1. var 有變量提升 let 跟 const 沒有
2. let 聲明的變量可以重新賦值，const 聲明的常量不可以
3. let 可以聲明一個(gè)值為空的變量，const 聲明的常量必須有值
4. 一般情況下 const 聲明的常量全部大寫
存儲(chǔ)地址區(qū)別

所有聲明的變量、常量會(huì)放到棧內(nèi)存每個(gè)內(nèi)存都有一個(gè)地址每個(gè)地址都是 16 進(jìn)制

比較大的數(shù)據(jù)比如 json 都會(huì)在堆內(nèi)存開辟一塊空間，空間里也有各個(gè)內(nèi)存，也會(huì)有一個(gè)地址，但這個(gè) json 所賦值給的 let 的變量或 const 的常量是仍舊存在于棧內(nèi)存的，他在棧內(nèi)存里存的只是堆內(nèi)存的空間里內(nèi)存的首地址，堆內(nèi)空間內(nèi)存的地址不可變，但是里面的內(nèi)容是可變的

const json

模板字符串

用兩個(gè)`反引號(hào)包裹可以使用${}的形式添加變量，相如換行等無需再用 html 代碼替換，直接輸入即可

let name = "zhangsirui";
let age = 30;
let jsx = `我叫${name}
我今年${age}歲`;
console.log(jsx);

輸出：

我叫 zhangsirui
我今年 30 歲

箭頭函數(shù)

一般來說函數(shù)都是用 function 聲明，用箭頭函數(shù)可以使用=>代替 function，使代碼變的更簡(jiǎn)潔

function add (a,b){
    return a + b;
}

// 用箭頭函數(shù)
let add = (a,b)=>{
    return a + b;
};

箭頭函數(shù)使用時(shí)需要注意以下幾點(diǎn)

如果只有一條語(yǔ)句可以不用大括號(hào)，且不用大括號(hào)的時(shí)候 return 也必須省略

let add = (a,b)=>a + b;

沒有參數(shù)或多個(gè)參數(shù)時(shí)，使用小括號(hào)，因?yàn)闆]有參數(shù)的時(shí)候需要拿括號(hào)當(dāng)結(jié)構(gòu)，有多個(gè)參數(shù)需要用逗號(hào)隔開，得用括號(hào)把參數(shù)包裹起來

let info = ()=>'info';
let add = (a,b)=>a + b;

只有單個(gè)參數(shù)的時(shí)候可以省略小括號(hào)

let name = name => `我的名字是${name}`;

如果只有一條語(yǔ)句且這條語(yǔ)句是表達(dá)式或 json 對(duì)象,需要加括號(hào)將內(nèi)容包裹起來

let info = () => ({name:"admin",age:30});

箭頭函數(shù)本身沒有 this，他是借用的父級(jí)的 this

let info = () => this;
//可以看到this一直往上指到了window對(duì)象

數(shù)組

for in 與 for of

for in 是遍歷的數(shù)組的索引 for of 是遍歷的數(shù)組的元素值 for in 更適合遍歷對(duì)象 for of 更適合遍歷數(shù)組

// for in
let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
let goods1 = [];
let sum = 0;
for (n in good) {
  if (good[n] >= 10) {
    goods1.push(good[n]);
  }
}

// for of
let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
for (n of good) {
  if (n >= 0) {
    goods1.push(n * 0.5);
    sum += n * 0.5;
  }
}

filter 過濾器

filter 過濾器把符合條件的值過濾出來

let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
let goods1 = good.filter(function (n) {
  return n >= 10;
});
//   filter過濾器進(jìn)階
let goods1jj = good.filter((n) => n >= 10);

map 映射

map 映射把每個(gè)元素處理處理完了把每個(gè)處理后的結(jié)果返回

let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
let goods1 = good.filter((n) => n >= 10);
let goods2 = goods1.map(function (n) {
  return n * 0.5;
});
//   map 映射進(jìn)階
let goods2jj = goods1.map((n) => n * 0.5);

reduce 累加器

reduce(function(a,b){},c)

a 前一個(gè)元素, b 當(dāng)前元素, c 可選：指定第一個(gè)元素
如果有 c, 那么 a = c,b=數(shù)組內(nèi)第一個(gè)元素
如果沒有 c,那么 a = 數(shù)組內(nèi)第一個(gè)元素,b=數(shù)組內(nèi)第二個(gè)元素

let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
let goods1 = good.filter((n) => n >= 10);
let goods2 = goods1.map((n) => n * 0.5);
let sum = goods2.reduce(function (a, b) {
  return a + b;
});
//   reduce進(jìn)階
let sumjj = goods2.reduce((a, b) => a + b);

startsWith 與 endsWith

startsWith 判斷字符串是否以某些字符開頭
endsWith 判斷字符串是否以某些字符結(jié)尾

let url = ["https://www.baidu.com/", "http://www.baidu.com/", "http://ipnx.cn/"];
url.forEach((item) => {
  if (item.startsWith("https")) {
    console.log("安全");
  } else {
    console.log("err:鏈接不安全，暫不支持");
  }
});
url.forEach((item) => (item.endsWith("cn") ? console.log("網(wǎng)站支持") : console.log("網(wǎng)站不支持")));

鏈?zhǔn)秸{(diào)用

let good = [4, 12, 20, 34, 56, 5, 8, 45, 10];
let sum = good
  .filter((n) => n >= 10)
  .map((n) => n * 0.5)
  .reduce((a, b) => a + b);

class 類

class + 類名聲明
使用 constructor 方法傳入?yún)?shù)
使用 this.name 的方式獲取類里面的成員
聲明方法可以省略 function
使用 class + 子類名 + extends +父類名可以實(shí)現(xiàn)類的繼承
調(diào)用方法使用 new + 類名 + (參數(shù)) 來調(diào)用

class Person {
  constructor(name, age, gender) {
    this.name = "name";
    this.age = age;
    this.gender = gender;
  }
  //聲明方法
  say() {
    console.log(this.name);
  }
}

json 對(duì)象與字符串相互轉(zhuǎn)換

使用 JSON.stringify(json 對(duì)象) 可以把 json 對(duì)象轉(zhuǎn)為字符串，使用 JSON.parse(json 字符串)可以把 json 字符串轉(zhuǎn)為 json 對(duì)象

let a = "aaa";
let b = "bbb";
let c = "ccc";
let d = function () {
  console.log("ddd");
};
// 將a更名為e
const obj = { e: a, b, c, d };
console.log(obj);
let str = JSON.stringify(obj);
console.log(str);
let o = JSON.parse(str);

解構(gòu)賦值

數(shù)組的解構(gòu)賦值是從前往后按順序進(jìn)行賦值

let arr = ["one", "two", "three"];
let [a, b, c] = ["one", "two", "three"];

對(duì)象的解構(gòu)賦值是按名稱來進(jìn)行賦值，跟順序沒有關(guān)系

const { name, gender, age, say } = {
  name: "admin",
  age: 30,
  gender: "男",
  say() {
    return "aaa";
  },
};

解構(gòu)數(shù)組中的對(duì)象

const [a, b, c, { x: g, y }, d, e] = ["a", "b", "c", { x: "aaa", y: "bbb" }, "d", "e"];
console.log(a, b, c, g, y, d, e);

解構(gòu)對(duì)象中的數(shù)組

const {
  a,
  b,
  c,
  d: [x, y],
  e,
} = { a: "a", b: "b", c: "c", d: ["aaa", "bbb"], e: "e" };
console.log(a, b, c, x, y, e);

…展開合并參數(shù)
…在數(shù)組中就是展開，在單值中就是合并

const [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7];
console.log(a, b, c);

function add(...args) {
  return args.reduce((a, b) => a + b);
}
console.log(add(1, 2, 3, 5, 4, 56, 4, 5, 10));
console.log(add(...c));

Module 模塊化編程

one.js

// 使用export將變量跟函數(shù)單個(gè)導(dǎo)出
export let a = 10;
export function add(a, b) {
  return a + b;
}
console.log("one.js");

two.js

let b = 20;
function add(a, b) {
  return a + b;
}
console.log("two.js");
// 使用export將變量跟函數(shù)打包導(dǎo)出
export { b, add };

three.js

let d = 40;
function add(a, b) {
  return a + b;
}
// 進(jìn)行缺省導(dǎo)出，一個(gè)模塊只能有一個(gè)缺省導(dǎo)出
export default function (...args) {
  return args.reduce(function (a, b) {
    return a + b;
  });
}
// 導(dǎo)出的時(shí)候給函數(shù)或者變量更名
export { d, add as fun1 };

four.js

let e = 40;
function add(a, b) {
  return a + b;
}
export default function (...args) {
  return args.reduce(function (a, b) {
    return a + b;
  });
}
export { e, add as fun2 };

index.js

// 使用解構(gòu)賦值的方法 用import將變量及函數(shù)導(dǎo)入
import { a, add } from "./one.js";
// 導(dǎo)入的時(shí)候給變量或函數(shù)更名
import { b, add as sum } from "./two.js";
// 使用*as可以將所有內(nèi)容導(dǎo)入，并存放到一個(gè)變量中
import * as three from "./three.js";
import { e, fun2 } from "./four.js";
let c = 30;
console.log("########");
console.log(add(a, b));
console.log("########");
console.log(sum(b, c));
console.log("########");
// 從導(dǎo)入的所有內(nèi)容中調(diào)用里面的變量及函數(shù)
console.log(three["fun1"](c, three["d"]));
console.log("########");
console.log(three["default"](a, b, c, three["d"]));
console.log("########");
console.log(fun2(a, e));

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 使用module模塊化編程需要加上type="module才能生效 -->
    <script src="index.js" type="module"></script>
  </head>
  <body></body>
</html>

批改老師：

PHPz

批改狀態(tài)：合格

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

git 使用整理

2022-02-22 15:33:52

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱