ES6基本語法

知識 02-02

ES6是什麼？

JavaScript的第六版，在ES5的基礎上增加了許多特性：箭頭函數、字元串插值、代理、生成器、結構賦值、塊級作用域等等。

一、let和const

1.作用：聲明變數

ES6中明確規定，如果區塊中存在let和const命令，則這個區塊對這些命令聲明的變數從一開始就形成封閉作用域。只要在聲明之前就使用這些變數，就會報錯（暫時性死區）。

2.let使用注意：

作用域只局限於當前代碼塊
使用let聲明的變數作用域不會被提升
在相同的作用域下不能聲明相同的變數
for循環體現let的父子作用域

3.const使用注意：

const聲明一個只讀的常量
只在當前代碼塊中有效
作用域不會被提升
不能重複聲明
聲明的常量必須賦值

二、解構賦值

1.基本用法

let [name, age, sex] = ["李四", 20, "女"];
console.log(name); // 李四
console.log(age); // 20
console.log(sex); // 女

2.對象的結構賦值

let {
name,
age,
friends,
pet
} = {
name: "張三",
age: 55,
friends: ["lulu", "王五"],
pet: {
name: "土豆",
age: 5
}
};
console.log(name); // 張三
console.log(age); // 55
console.log(friends); // ["lulu", "王五"]
console.log(pet); // {name: "土豆", age: 5}

let {
name: str
} = {
name: "張三"
};
console.log(name); //
console.log(str); // 張三

3.數組的解構賦值

let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
console.log(arr1, arr2, arr3, arr4, arr5);
// 1 2 3 4 5

let [arr1] = [];
console.log(arr1);
// undefined

let [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 3

4.基本類型的解構賦值

let [a, b, c, d, e] = "我是中國人";
console.log(a); // 我
console.log(b); // 是
console.log(c); // 中
console.log(d); // 國
console.log(e); // 人

三、數據集合-set

類似於數組，但是成員是唯一的，沒有重複。

1.創建一個集合

let set = new Set(["張三", "李四", "王五", "張三", "李四"]);
console.log(set); //{"張三", "李四", "王五"}
console.log(Array.from(set)); // ["張三", "李四", "王五"]

2.一個屬性

console.log(set.size); //3

3.四個方法

//add
console.log(set.add("劉德華").add("LHH"));
//{"張三", "李四", "王五", "劉德華", "LHH"}
console.log(set);
//{"張三", "李四", "王五", "劉德華", "LHH"}
//delete
console.log(set.delete("張三")); // true
console.log(set.delete("李四")); // true
console.log(set);
//has
console.log(set.has("張三")); // true
console.log(set.has("張三1")); // false
//clear
console.log(set.clear()); // undefined
console.log(set); // {}

4.keys values

console.log(set.keys()); // SetIterator {"張三", "李四", "王五"}
console.log(set.values()); // SetIterator {"張三", "李四", "王五"}

四、數據集合-map

類似於對象，也是鍵值對集合，但「鍵」的範圍不限於字元串，各種類型的值（包括對象）都可以當作鍵.

1. 創建一個Map

let obj1 = {
a: 1
},
obj2 = {
b: 2
};
const map = new Map([
["name", "張三"],
["age", 18],
["sex", "男"],
[obj1, "今天天氣很好"],
[obj2, "適合敲代碼"],
[
[1, 2], "hhh"
]
]);
console.log(map);
console.log(map.size);

ES6基本語法

2.set和get

map.set("friends", ["趙六", "力氣"]).set(["dog"], "小花");
console.log(map);
console.log(map.get("name"));
console.log(map.get(obj1));

ES6基本語法

3.delete

map.delete(obj1);
console.log(map.delete("xxxx"));
console.log(map);

ES6基本語法

4.has

console.log(map.has(obj1)); // true
console.log(map.has(obj2)); //true

5.clear

map.clear();
console.log(map); // {}

6.keys() values() entries()

console.log(map);
console.log(map.keys());
console.log(map.values());
console.log(map.entries());

ES6基本語法

7.遍歷

map.forEach(function(value, index) {
console.log(index + ":" + value);
})

ES6基本語法

8.注意事項

map.set({}, "呵呵呵呵呵");
map.set({}, "哈哈哈哈");
console.log(map);
console.log({} === {});

ES6基本語法

五、Symbol

1.定義

let str1 = Symbol();
let str2 = Symbol();
console.log(str1 === str2); // false
console.log(typeof str1); // symbol
console.log(typeof str2); // symbol

2.描述

let str3 = Symbol("name");
let str4 = Symbol("name");
console.log(str3); // Symbol(name)
console.log(str4); // Symbol(name)
console.log(str3 === str4); // false

3. 對象的屬性名

const obj = {};
obj.name = "張三";
obj.name = "李四";
obj[Symbol("name")] = "張三";
obj[Symbol("name")] = "李四";
let a = Symbol("aa");
let b = Symbol("bb");
obj[a] = "王五"
obj[b] = "kk"
console.log(obj);
console.log(Object.getOwnPropertySymbols(obj)); // 獲取指定對象的所有Symbol屬性名
console.log(Reflect.ownKeys(obj)); // 返回所有類型的鍵名，包括常規鍵名和Symbol鍵名

注意，Symbol函數前不能使用new命令，因為Symbol是一個原始類型的值，不是對象，所以也不能添加屬性。

4.Symbol.for() 和 Symbol.keyfor()

var s1 = Symbol.for("foo");
var s2 = Symbol.for("foo");
s1===s2; // true

上面代碼中，s1和s2都是Symbol的值，但它們都是同樣參數的Symbol.for方法生成的，所有實際上是同一個值。

Symbol.for()與Symbol()這兩種寫法都會生成新的Symbol。它們的區別是，前者會被登記在全局環境中供搜索，而後者不會。Symbol.for()不會再每次調用時都返回一個新的Symbol類型的值，而是會先檢查給定的key是否已經存在，如果不存在才會新建一個值，比如，如果調用Symbol.for("cat")30次，每次都會返回同一個Symbol值，但是調用Symbol("cat")30次則會返回30個不同的Symbol值。

Symbol.keyFor()方法返回一個已登記的Symbol類型值得key

var s1 = Symbol.for("foo");
Symbol.keyFor(s1); // "foo"
var s2 = Symbol("foo");
Symbol.keyFor(s2); // undefined

註：Symbol.for為Symbol值登記的名字是全局環境的，可以在不同的iframe或service worker中取到同一個值。

iframe = document.createElement("iframe");
iframe.src = String(window.location);
document.body.appendchild(iframe);
iframe.contentWindow.Symbol.for("foo") === Symbol.for("foo"); // true

六、class的基本運用

1.構造函數

ES6基本語法

2. 通過class面向對象

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
print() {
console.log("我叫" + this.name + ",今年" + this.age + "歲");
}
}
let person = new Person("張三", 19);
console.log(person);
person.print();

ES6基本語法

3.class實現繼承

class Animal {
//構造函數
constructor(props) {
this.name = props.name || "未知";
}
eat() {
alert(this.name + "在吃東西...");
}
}
//class繼承
class Bird extends Animal {
//構造函數
constructor(props) {
//調用實現父類的構造函數
super(props);
this.type = props.type || "未知";
}
fly() {
alert(this.name + "在飛...");
}
}
var myBird = new Bird({
name: "鸚鵡"
})
myBird.eat() // 鸚鵡在吃東西...
myBird.fly() // 鸚鵡在飛...

七、內置對象擴展

1. 模板字元串

let str = "適合敲代碼!";
let className = "test";
let html = `<html>
<head></head>
<body>
<p>今天的天氣很好!</p>
<div class="${className}">${str}</div>
</body>
</html>`;
console.log(html);

2. 數組的擴展

Array.from

// 在body中寫了幾個li節點
let allLis = document.querySelectorAll("li");
console.log(allLis); // NodeList(6) [li, li, li, li, li, li]
console.log(Array.isArray(allLis)); // false
console.log(Array.from(allLis)); // [li, li, li, li, li, li]
console.log(Array.isArray(Array.from(allLis))); // true

Array.of

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
console.log(Array.of("張三", "李四", "王五")); // ["張三", "李四", "王五"]

3. 對象的擴展

key 和 value是一樣的,寫一個就夠了

let name = "張三";
let age = 18;
let person = {
name,
age
};
console.log(person); // {name: "張三", age: 18}

Object.assign()

延展操作符

let str = "今天的天氣很好!";
let strArr = [...str];
console.log(strArr); // ["今", "天", "的", "天", "氣", "很", "好", "!"]

let student = {
name: "張三",
age: 18,
sex: "男"
}
< Person {...student}/>

let myArr = [1, 2, 10, "張三", 20, 2, 1];
console.log(new Set(myArr)); // {1, 2, 10, "張三", 20}
console.log([...new Set(myArr)]); // [1, 2, 10, "張三", 20]

八、函數的擴展

1. 形參設置默認值

function sum(num1 = 20, num2 = 10) {
console.log(num1 + num2);
}
/* function sum(num1, num2) {
num1 = num1 || 10;
num2 = num2 || 10;
console.log(num1 + num2);
} */
sum(10, 30); // 40
sum(); // 30

2.參數形式延展操作符

3.箭頭函數 () => {}

let sum = (num1, num2)=>{ return num1 + num2;};
console.log(sum(100, 300)); // 400

let nameArr = ["張三", "李四", "王五"];
nameArr.forEach((value, index) => {
console.log(index + ":" + value);
});
// 0:張三
// 1:李四
// 2:王五

this的指向不同

function demo() {
setTimeout(function() {
console.log(this);
}, 500);
setTimeout(() => {
console.log(this);
}, 1000);
}
let obj = {
a: 1
};
demo.call(obj);
// Window
// {a: 1}

箭頭函數的幾個注意事項：