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 5let [arr1] = [];
console.log(arr1);
// undefinedlet [a, , c] = [1, 2, 3];
console.log(a); // 1
console.log(c); // 34.基本類型的解構賦值
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); //33.四個方法
//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);
2.set和get
map.set('friends', ['趙六', '力氣']).set(['dog'], '小花');
console.log(map);
console.log(map.get('name'));
console.log(map.get(obj1));
3.delete
map.delete(obj1);
console.log(map.delete('xxxx'));
console.log(map);
4.has
console.log(map.has(obj1)); // true
console.log(map.has(obj2)); //true5.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());
7.遍歷
map.forEach(function(value, index) {
console.log(index + ':' + value);
})
8.注意事項
map.set({}, '呵呵呵呵呵');
map.set({}, '哈哈哈哈');
console.log(map);
console.log({} === {});
五、Symbol
1.定義
let str1 = Symbol();
let str2 = Symbol();
console.log(str1 === str2); // false
console.log(typeof str1); // symbol
console.log(typeof str2); // symbol2.描述
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.構造函數
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
print(){
console.log('我叫' + this.name + ',今年' + this.age + '歲');
}
};
//或
//Person.prototype.print = function() {
// console.log('我叫' + this.name + ',今年' + this.age + '歲');
//}
let person = new Person('張三', 19);
console.log(person);
person.print(); 
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();
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))); // trueArray.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 obj1 = {
name: '張三'
};
let obj2 = {
age: 18
};
let obj3 = {
sex: '男'
};
let obj4 = {
friends: '李四'
};
let obj = {};
Object.assign(obj, obj1, obj2, obj3, obj4);
console.log(Object.assign(obj, obj1, obj2, obj3, obj4)); // {name: "張三", age: 18, sex: "男", friends: "李四"}
console.log(obj); // {name: "張三", age: 18, sex: "男", friends: "李四"}延展操作符
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(); // 302.參數形式 延展操作符
function sum(name, sex, ...nums) {
let result = 0;
console.log(name);
console.log(sex);
for (let value of nums) {
result += value;
}
return result;
}
/* function sum() {
let result = 0;
for(let value of arguments){
result += value;
}
return result;
} */
console.log(sum('張男', '男', 10, 20, 30, 50));
// 張男
// 男
// 1103.箭頭函數 () => {}
let sum = (num1, num2)=>{ return num1 + num2;};
console.log(sum(100, 300)); // 400let 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}箭頭函數的幾個注意事項：
- 函數體內的
this對象就是定義時所在的對象，而不是使用時所在的對象； - 不可以當作構造函數。也就是不可以使用
new命令，否則報錯； - 不可以使用
arguments對象，該對象在函數體內不存在；可以rest參數代替（...參數）； - 不可以使用
yield命令，因此箭頭函數不能用作Generator函數；
九、Iterator遍歷器和for..of循環
Iterator作用：一是爲各種數據結構提供統一的、簡便的訪問接口；二是使得數據結構的成員能夠按某種次序排列；三是ES6創建了一種新的遍歷命令——for...of循環，Iterator接口主要供for...of消費
模擬next方法返回值得例子：
var it = makeIterator(['a', 'b']);
console.log(it.next()); // {value: "a", done: false}
console.log(it.next()); // {value: "b", done: false}
console.log(it.next()); // {value: undefined, done: true}
function makeIterator(array) {
var nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ? {
value: array[nextIndex++],
done: false
} : {
value: undefined,
done: true
}
}
}
}具備Iterator接口的數據結構如下：
ArrayMapSetStringTypedArray函數的arguments對象NodeList對象
下面例子是數組的Symbol.iterator屬性:
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // {value: "a", done: false}
console.log(iter.next()); // {value: "b", done: false}
console.log(iter.next()); // {value: "c", done: false}
console.log(iter.next()); // {value: undefined, done: true}注意：對象（Object）之所以沒有默認部署Iterator接口，是因爲對象屬性的遍歷先後順序是不確定的。
for...of循環
一個數據結構只要部署了Symbol.iterator屬性，就被視爲具有Iterator接口，就可以用for...of循環它的成員。
注意：有些數據結構是在現有數據結構的基礎上計算生成的，比如ES6的數組、Set、Map都部署了一下三個方法，調用後都返回遍歷器對象
-
entries()返回一個遍歷器對象，用於遍歷[鍵名，鍵值]組成的數組。對於數組，鍵名就是索引值；對於Set，鍵名與鍵值相同。Map結構的Iterator接口默認就是調用entries方法 -
keys()返回一個遍歷器對象，用於遍歷所有的鍵名 -
values()返回一個遍歷器對象，用於遍歷所有的鍵值
