基礎知識常被8：ES6中的相關語法（持續更新中）
在2019年的8月的最後一天，有必要寫點總結的東西，所以今天就來講講ES6中的那點事兒。
let，const，var的對比：
let
1.使用let聲明得變量不能再次聲明
let a = 5;
let a = 6;
console.log(a);
錯誤提示：Uncaught SyntaxError: Identifier 'a' has already been declared
2.具有塊級作用域
{
let a = 5;
console.log(a);
}
console.log(a); //a is not defined
3.let沒有變量提升，必須要先定義在使用
console.log(a); //undefined
var a = 5;
console.log(a); //Cannot access 'a' before initialization
let a = 5;
4.let的聲明不會像var聲明一樣作用到window中
var abc = function(x, y) {
return x + y;
}
console.log(abc(1,2));
console.log(window) // 在這裏window中已經存在abc的屬性了，作用到了abc中
let abc = function(x, y) {
return x + y;
}
console.log(abc(1,2));
console.log(window) // 因爲是let定義的函數，所以在window的屬性中就看不見abc的這個方法了
const
1.const 定義常量必須給初始值
const a;
console.log(a);//Missing initializer in const declaration
2.const 一但定義了就不能修改了
const a = 5;
const a = 10;
console.log(a);Uncaught SyntaxError: Identifier 'a' has already been declared
3.具有塊級作用域（同let）
4.常量是獨立的，和window對象沒有關係（同let）
5.常量必須先定義再使用，沒有提升（同let）
數組的解構：
1.模式=數組
模式=數組
let [a,b,c] = ['測試1','測試2','測試3'];
console.log(a); //測試1
console.log(b); //測試2
console.log(c); //測試3
2.變量多，值少
變量多，值少
let [a,b] = ['測試1','測試2','測試3'];
console.log(a); //測試1
console.log(b); //測試2
3.變量少，值多
變量少，值多
let [a,b,c] = ['測試1','測試2']
console.log(a);//測試1
console.log(b);//測試2
console.log(c);undefined
4.按需取值
按需取值
let [a, , b] = ['測試1', '測試2', '測試3']
console.log(a);//測試1
console.log(b);//測試3
5. 剩餘值
剩餘值
let [a,b,...c] = ['測試1', '測試2', '測試3','測試4']
console.log(a);//測試1
console.log(b);//測試2
console.log(c);//["測試3", "測試4"]
6. 複雜情況
複雜情況
let[,,[a,b],c] = ['aa','bb',['cc','dd'],'ee']
console.log(a)//cc
console.log(b)//dd
console.log(c)//ee
對象的解構：
1. 基本的解構
基本的解構
let {id,name,age} = {id:1,name:"張三",age:18};
console.log(id)//1
console.log(name)//張三
console.log(age)//18
2. 按需取值
按需取值
let {id,name} = {id:1,name:"張三",age:18};
console.log(id)//1
console.log(name)//張三
3.剩餘值
剩餘值
let {id,...c} = {id:1,name:"張三",age:18};
console.log(id) //1
console.log(c)// object{
age:18,
name:"張三"，
}
4. 有衝突，可以爲變量定義其他名字
有衝突，可以爲變量定義其他名字
let id = 5;
let {id} = {id:1,name:"張三 ",age:18};//Identifier 'id' has already been declared
let {id:nameId} = {id:1,name:"張三 ",age:18};//Identifier 'id' has already been declared
console.log(nameId);//張三
5. 複雜的情況
複雜的情況
let {code, data} = {
code: 200,
msg: '成功',
data: [
{id:1, title: 'aaa'},
{id:2, title: 'aaa'},
{id:3, title: 'aaa'}
]
};
console.log(code);
console.log(data);
箭頭函數
樣式：
let fn = () =>{
}
()小括號內放入參數，{}大括號內放入函數體
特點：
- 如果箭頭函數參數只有一個，則小括號可以省略
- 如果箭頭函數的函數體只有一行代碼，則大括號可以省略，並且默認表示返回函數體的值（自帶return效果）
- 箭頭函數的內部沒有arguments對象
- 沒有argument對象那怎麼遍歷呢？
- let abc = (…z) =>{
console.log(z);
}
abc(1,2,3,4,5,6);
- 箭頭函數不能當作構造函數
- 箭頭函數的內部沒有自己的this,箭頭函數的this指向外部作用域的this
函數參數的默認值
（如果某個參數有默認值，則需要把該參數放到參數列表後面）
function abc (x,y=3){
console.log(x+y);
}
內置對象的擴展：
Array
1.拼接
拼接
let arr1 = [1,2,3,4];
let arr2 = [4,5,6,7];
let arr3 = [...arr1,...arr2];
console.log(...arr3); //1,2,3,4,4,5,6,7
2.將爲數組轉換成數組
將爲數組轉換成數組
let weishuzu = {
0:"張三",
1:"李四",
2:"王五",
length:3
}
let arr = Array.from(weishuzu);
console.log(...arr)//張三，李四，王五
3.forEach遍歷
forEach 遍歷
ES5
[1,2,3,4,5,6,7,8,9].forEach(function(item){
console.log(item)
});
ES6
[1,2,3,4,5,6,7,8,9].forEach(item=>console.log(item));
4.find(值)和findIndex(索引)
find(值)和findIndex(索引)
let result = [1,2,3,4,5,6,7,8,9].find(function(item,index,arr){
return item>5;
});
console.log(result);
let result = [1,2,3,4,5,6,7,8,9].findIndex(function(item,index,arr){
return item>5;
});
console.log(result);
5.includes（‘查找的值’,[開始的位置]）
includes
let arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.includes(4,2));//true
console.log(arr.includes(4,9));//false
console.log(arr.includes(10));//false
console.log(arr.includes(1));//true
String
1.模板字符串
模板字符串
let a ="你好";
let b = {
name:"張三",
age:18,
};
let c = `${b.name}${a}今天是一個號好天氣,我今年${b.age}歲`
console.log(c);//張三你好今天是一個號好天氣,我今年18歲
2.includes查找字符串中是否包含了某個字符串
includes查找字符串中是否包含了某個字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.includes('A',0));//true 從索引爲0的地方開始尋找A 返回boolean
console.log(a.includes('A',1));//false
3.startWith() 查找字符串開頭是否含有某個字符串
startWith() 查找字符串開頭是否含有某個字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.startsWith('A'));//true
console.log(a.startsWith('B'));//false
4.endsWith() 查找字符串結尾是否含有某個字符串
endsWith() 查找字符串結尾是否含有某個字符串
let a = 'ABCDEFGHIJKLMN';
console.log(a.endsWith('LMN'));//true
console.log(a.endsWith('kMN'));//false
5.repeat() 重複一個字符串 參數爲重複的次數
repeat() 重複一個字符串 參數爲重複的次數
let a = 'ABCDEFGHIJKLMN';
console.log(a.repeat(10));
6.trim() 去掉字符串兩邊的空白
trim() 去掉字符串兩邊的空白
let a = ' ABCDEFGHIJKLMN ';
console.log(a.trim());
Number
Number.parseInt()
Number.parseFloat()
console.log(Number.parseInt('123abc'));
數據結構Set、Map
set
Set
//Set的特點就是該對象裏面的成員不會有重複。
// - `size`：屬性，獲取 `set` 中成員的個數，相當於數組中的 `length`
// - `add(value)`：添加某個值，返回 Set 結構本身。
// - `delete(value)`：刪除某個值，返回一個布爾值，表示刪除是否成功。
// - `has(value)`：返回一個布爾值，表示該值是否爲`Set`的成員。
// - `clear()`：清除所有成員，沒有返回值。
let s = new Set();
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
arr.forEach(function (item) {
s.add(item) //set的add方法
});
console.log(...s); //去重 方式1
console.log(Array.from(s)); // from是將僞數組變爲數組; 去重 方式2
console.log(s.size) //獲取個數
console.log(s.delete(9)); //刪除數據返回boolean
console.log(...s); //輸出刪除之後的set
console.log(s.has(2)); //返回一個boolean，告知參數是否是set的成員
s.clear(); //清空所有的成員，沒有返回值
console.log(s); //查看清空之後的set
完成字符串去重
let set = new Set('ababbc');
let str = ([...set]).join('');
console.log(str); // abc
遍歷
let arr = ['add', 'delete', 'clear', 'has'];
let list = new Set(arr);
********************1.***********************
for (let key of list.keys()) {
console.log('keys', key);
}
// keys add
// keys delete
// keys clear
// keys has
**********************************************
********************2.***********************
for (let value of list.values()) {
console.log('value', value);
}
// value add
// value delete
// value clear
// value has
**********************************************
********************3.***********************
for (let [key, value] of list.entries()) {
console.log('entries', key, value);
}
// entries add add
// entries delete delete
// entries clear clear
// entries has has
**********************************************
********************4.***********************
list.forEach(function (item) {
console.log(item);
})
//add delete clear has
**********************************************
weakset
- 方法
- WeakSet.prototype.add(value)：向 WeakSet 實例添加一個新成員。
- WeakSet.prototype.delete(value)：清除 WeakSet 實例的指定成員。
- WeakSet.prototype.has(value)：返回一個布爾值，表示某個值是否在 WeakSet 實例之中
- 注意
- WeakSet 沒有size屬性和forEach方法，沒有辦法遍歷它的成員。
- WeakSet的元素只能是對象， WeakSet中的對象是弱引用， 只是把地址拿過來， 沒有clear屬性， 不能遍歷
- 原因：
- WeakSet 不能遍歷，是因爲成員都是弱引用，隨時可能消失，遍歷機制無法保證成員的存在，很可能剛剛遍歷結束，成員就取不到了。WeakSet 的一個用處，是儲存 DOM 節點，而不用擔心這些節點從文檔移除時，會引發內存泄漏。
let weakList = new WeakSet();
let arg = {
a: '1'
};
weakList.add(arg);
weakList.add({
b: '2'
});
console.log('weakList', weakList);
//weakList WeakSet {Object {b: "2"}, Object {a: "1"}}
map
- Map中的key可以是任意數據類型：字符串、數組、對象等 要注意集合Set添加元素用add()，而集合Map添加元素用set()
*******************************1.***************************
let map = new Map();
let arr = ['123'];
map.set(arr, 456);
console.log('map', map, map.get(arr));
************************************************************
*******************************2.***************************
let map = new Map([
['a', 123],
['b', 456]
]);
console.log('map args', map);
//map args Map {"a" => 123, "b" => 456}
//size delete clear方法 與 遍歷同set一樣
console.log('size', map.size); //size 2
console.log('delete', map.delete('a'), map); //delete true Map {"b" => 456}
map.clear();
console.log('clear', map); //clear Map {}
************************************************************
weakmap
- 方法：
-
1.沒有遍歷方法clear()、keys()、values()、entries()、size屬性
-
2.只有get()、set()、has()、delete()
-
- 注意：
- 同WeakSet一樣接收的key值必須是對象， 沒有size屬性， clear方法， 也是不能遍歷
let weakmap = new WeakMap();
let o = {};
weakmap.set(o, 123);
console.log(weakmap.get(o)); //123
定義對象的簡潔方式
let id = 1;
let name = 'zs';
let age = 20;
// 之前定義對象的方案
// let obj = {
// // 屬性: 值
// id: id,
// name: name,
// age: age,
// fn: function () {
// console.log(this.age);
// }
// };
// obj.fn();
// ES6的新方案
let obj = {
id, // 屬性名id和前面的變量id名字相同，則可以省略 :id
name,
nianling: age,
// 下面的函數是上面函數的簡化寫法，可以省略 :function 。但是注意這裏僅僅是上面函數的簡化，不是箭頭函數
fn () {
console.log(this.name);
}
};
obj.fn();
好了，今日就更新到這裏，有時間我會持續更新ES6的最新語法的，歡迎大家前來評論！