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屬性的對象。

一、將類數組對象轉換爲真正數組：

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的數組

因而可知，要將一個類數組對象轉換爲一個真正的數組，必須具有如下條件：

一、該類數組對象必須具備length屬性，用於指定數組的長度。若是沒有length屬性，那麼轉換後的數組是一個空數組。

二、該類數組對象的屬性名必須爲數值型或字符串型的數字

ps: 該類數組對象的屬性名能夠加引號，也能夠不加引號

二、將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

第一部分就先告一段落了，後面還有二個部分，附上地址：

javascript的ES6學習總結(第二部分)

javascript的ES6學習總結(第三部分)