javascript的ES6學習總結(第一部分)
ES6（ESNext學習總結——第一部分）
ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。
ECMA每年6月份，釋出一個版本
2016年6月 ES6.1 ES7 ES2016
2017年6月 ES6.2 ES8 ES2017
2018年6月 ES... ES9 ES2018
1.let、const用法
let 相當於之前的var，let定義的是塊級作用域
{
//塊級作用域
}
if(true){
var a = 12;
}
console.log(a);//12
if(true){
let a = 12;
}
console.log(a);//a is not defined
在花括號中用let定義的變數，作用域只在花括號內生效，只能在當前花括號使用
let注意：
(1)沒有預解析，不存在變數提升
if(true){
alert(a);//TDZ 暫時性死區
let a = 12;
}
console.log(a);//a is not defined
(2)同一個作用域裡，不能重複定義變數
{
let a = 10;
let a = 20;
console.log(a);//Identifier 'a' has already been declared
}
(3)for迴圈中，for迴圈圓括號裡的是父級作用域，花括號中的是子級作用域
for(let i=0;i<3;i++){//父級作用域
let i = 'aaa';//子級作用域
console.log(i);
}
const 常量，定義好了不能改變
1.const的特性和let一樣
const定義的常量必須有值，不能後賦值，也不能修改
注意： var定義的變數是全域性的，屬於window，let、const不同
2.解構賦值
2.1方括號解構賦值
在es6之前，如果我們想要給陣列每一項的值賦給每個變數，是這樣獲取的
var arr = [4,5,6],a = arr[0],b = arr[1],c = arr[2]; console.log(a,b,c); //4,5,6
在es6之後，我們可以寫成這樣
let [a,b,c] = [4,5,6]; console.log(a,b,c); //4,5,6
注意： 左右倆邊，結構格式要保持一致，例如
let [a,[b,c]] = [4,[5,6]]; console.log(a,b,c); //4,5,6
2.2方括號解構賦值預設值
let [a,b,c='暫無'] = ['aa','bb']; console.log(a,b,c);//aa bb 暫無 let [a,b,c='暫無'] = ['aa','bb',undefined]; console.log(a,b,c);//aa bb 暫無
2.3花括號解構賦值
在es6之前，如果我們想要給json資料每一項的值賦給每個變數，是這樣獲取的
var jsonData = {
name:'tom',
age:29,
job:'web'
},
name=jsonData.name,
age=jsonData.age,
job=jsonData.job;
console.log(name,age,job);//tom 29 web
在es6之後，我們可以寫成這樣
let jsonData = {
name:'tom',
age:29,
job:'web'
};
let {name,age,job} = jsonData;
console.log(name,age,job);//tom 29 web
2.4花括號解構賦值起別名(注：只有花括號結構賦值才可以其別名)
let jsonData = {
name:'tom',
age:29,
job:'web'
};
let {name:n,age:a,job:j} = jsonData;
console.log(n,a,j);//tom 29 web
2.5花括號解構賦值其他方式
let a;
{a} = {a:'apple',b:'banana'};
console.log(a);//Uncaught SyntaxError: Unexpected token =
這樣寫會報錯
let a;
({a} = {a:'apple',b:'banana'});
console.log(a);//apple
可以換成這樣寫，一般不推薦這麼做。
2.6利用解構賦值交換位置
let a=12,b=25; [a,b] = [b,a]; console.log(a,b);//25,12
let a=12,b=25; let [c,d] = [b,a]; console.log(c,d);//25,12
2.7函式中的解構
函式引數解構
function show({a,b}){
console.log(a,b);
}
show({
a:1,
b:2
});//1,2
函式引數給預設值
function show({a,b='預設'}){
console.log(a,b);
}
show({
a:1,
b:undefined
});//1,"預設"
function show({a,b='預設'}){
console.log(a,b);
}
show({
a:1
});//1,"預設"
函式呼叫時引數都為空
function show({a='預設1',b='預設2'}){
console.log(a,b);
}
show({});//"預設1,"預設2"
function show({a='預設1',b='預設2'}){
console.log(a,b);
}
show();//會報錯：Uncaught TypeError: Cannot destructure property `a` of 'undefined' or 'null'.
//解決方法：
function show({a='預設1',b='預設2'}={}){
console.log(a,b);
}
show();//"預設1,"預設2"
3.字串模板(``)以及字串新增
3.1 es6新增了``字串模板
es6以前字串拼接都是用以下的形式
var name = 'tom'; var age = 30; var str = '這個人的名字叫'+name+'，年齡是'+age+'歲';//這個人的名字叫tom,年齡是30歲
在es6以後就可以使用以下方式字串模板來拼接字串了
let name = 'tom';
let age = 30;
let str = `這個人的名字叫${name},年齡是${age}歲`;//這個人的名字叫tom,年齡是30歲
注意：
``運算子在鍵盤的這個位置
3.2 es6後新增字串查詢（準確來說是es2016，或者es7）
es6以前字串查詢都是用str.indexOf(‘要查詢的內容') 返回索引(第一次出現的位置)，沒找到返回-1
var fruits = 'apple banana pear';
var str = fruits.indexOf('banana');//6，從下標0開始的第6位
在es6以後就可以使用str.includes('要查詢的內容') 返回布林值 true/false
let fruits = 'apple banana pear';
let str = fruits.includes('banana');//true
3.3 es6後新增字串其他方法
字串以誰開頭：
str.startsWith('檢測的東西') 返回布林值true/false
字串以誰結尾：
str.endsWith('檢測的東西') 返回布林值true/false
重複字串：
str.repeat(重複的次數)
填充字串：
str.padStart(填充後字串的長度，要填充的東西) 在開頭填充
str.padEnd(填充後字串的長度，要填充的東西) 在末尾填充
let str = 'abc'; let padStr = 'tom'; let str1 = str.padStart(str.length+padStr.length,padStr);//tomabc
4.函式預設引數、箭頭函式、剩餘引數
4.1函式預設引數
在es6的函式預設引數沒出來之前，我們寫函式的預設引數是這樣寫的
function goto(a,b){
a = a || 'aaa';
b = b || 'bbb';
console.log(a,b);
}
goto('a',);//aaa,bbb
在es6函式預設引數出來後，我們可以這樣寫
function goto(a='aaa',b='bbb'){
console.log(a,b);
}
goto('aaa',);//aaa,bbb
注意： 函式引數預設已經定義了，所以不能再用let，const來宣告
function goto(a='aaa',b='bbb'){
let a = 12;
let b = 23;
console.log(a,b);
}
goto('aaa',);//Identifier 'a' has already been declared
4.2Spread Operator 拓展運算子(展開運算子)
組裝物件或者陣列
//陣列
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//物件
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}
有時候我們想獲取陣列或者物件除了前幾項或者除了某幾項的其他項
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//物件
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}
對於 Object 而言，還可以用於組合成新的 Object 。(ES2017 新增) 當然如果有重複的屬性名，右邊覆蓋左邊
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
//相當於其他語言的array.merge()功能 只不過這裡是物件的merge
4.3Array.from()將一個類陣列物件或者可遍歷物件轉換成一個真正的陣列
那麼什麼是類陣列物件呢？所謂類陣列物件，最基本的要求就是具有length屬性的物件。
1、將類陣列物件轉換為真正陣列：
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
那麼，如果將上面程式碼中length屬性去掉呢？實踐證明，答案會是一個長度為0的空陣列。
這裡將程式碼再改一下，就是具有length屬性，但是物件的屬性名不再是數字型別的，而是其他字串型的，程式碼如下：
let arrayLike = {
'name': 'tom',
'age': '65',
'sex': '男',
'friends': ['jane','john','Mary'],
length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)// [ undefined, undefined, undefined, undefined ]
會發現結果是長度為4，元素均為undefined的陣列
由此可見，要將一個類陣列物件轉換為一個真正的陣列，必須具備以下條件：
1、該類陣列物件必須具有length屬性，用於指定陣列的長度。如果沒有length屬性，那麼轉換後的陣列是一個空陣列。
2、該類陣列物件的屬性名必須為數值型或字串型的數字
ps: 該類陣列物件的屬性名可以加引號，也可以不加引號
2、將Set結構的資料轉換為真正的陣列：
let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set))// [ 12, 45, 97, 9797, 564, 134, 45642 ]
Array.from 還可以接受第二個引數，作用類似於陣列的 map 方法，用來對每個元素進行處理，將處理後的值放入返回的陣列。如下：
let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]
3.Array.from()還可以將字串轉為陣列
let json = 'hello'; let arr = Array.from(json); arr[0] = 'm'; console.log(arr,json);//["m", "e", "l", "l", "o"] "hello"
在以前我們對映一個數組，可以用如下方法
let json = ['a','b','c']; let arr = json;//引用賦值 arr[0] = 'sss'; console.log(arr,json);//["sss", "b", "c"] (3) ["sss", "b", "c"]
這樣會改變原陣列，如果我們不想改變原陣列，可以使用以下方式
let json = ['a','b','c']; let arr = [...json];//拓展運算子 arr[0] = 'sss'; console.log(arr,json);//["sss", "b", "c"] (3) ["a", "b", "c"]
let json = ['a','b','c']; let arr = Array.from(json); arr[0] = 'sss'; console.log(arr,json);//["sss", "b", "c"] (3) ["a", "b", "c"]
4.4箭頭函式
在es6以前我們定義一個函式都是這樣定義的
function show(){
return 1;
}
console.log(show());//1
在es6之後，引入了箭頭函式的概念，我們可以這樣定義函式
let show = ()=>1; console.log(show());//1
let show = (a,b)=>a+b;
console.log(show(1,2));//3
//以上程式碼相當於
function show(a,b){
return a+b;
}
console.log(show(1,2));//3
let show = a=>a*a;
console.log(show(3));//9
//以上程式碼相當於
function show(a){
return a*a;
}
console.log(show(3));//9
let show = (a=12,b=5)=>{
return a+b;
};
console.log(show());//17
//以上程式碼相當於
function show(a=12,b=5){
return a+b;
}
console.log(show());//17
注意：
1.this問題，定義函式所在的物件，不再是執行時所在的物件
2.arguments，在箭頭函式中沒有arguments
function show(){
console.log(...arguments);
}
show(1,23,4,56);//1 23 4 56
//箭頭函式中沒有arguments，但可以用拓展運算子代替
let show = (...arg)=>{
console.log(...arg);
}
show(1,23,4,56);//1 23 4 56
3.箭頭函式不能當建構函式
function show(){
this.name = 'abc';
}
let s = new show();
console.log(s.name);//abc
//以下程式碼將報錯，因為箭頭函式不能當建構函式用
let show = ()=>{
this.name = 'abc';
}
let s = new show();
console.log(s.name);//show is not a constructor
4.ES2017中，函式引數最後的逗號可以有
function show(a,b,c,d,){
console.log(a,b,c,d);
}
show(1,2,3,4,);//1 2 3 4
第一部分就先告一段落了，後面還有二個部分，會在後面一段時間抽時間總結。
end...