ES6 你母雞啦的事

0.前言

首先价卤，先祝大家圣誕節(jié)快樂掷空，接下來森哥又來開車了啊!!!想上車的盡快買票啊!!!今天想和大家聊一聊我對ES6的新特性理解吭狡，那么宅倒，不懂得編程的人攘宙，心里是不是在想這TM是啥，那好我來告訴你這TM是什么拐迁。

1.簡介

ES6是ECMAScript6.0版本的簡稱蹭劈，因為當前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015线召。它的目標铺韧，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言缓淹。

詳細請點擊這里

2.說說我對ES6新特性的認識

let和const

解構(gòu)賦值
箭頭函數(shù) ()=>{}
展開運算符
includes
class
Set()和Map()

3.代碼實現(xiàn)

3.1 let

let 命令定義變量的

{
          {
            // console.log(b);//undefined
            // console.log(a);//沒有聲明的提升  報錯
            let a = 10;//塊級作用域變量
            var b = "abc";//全局作用域變量
            console.log(a);//10
            console.log(b);//abc
            var b = true;
            console.log(b);//true
            // let a = "aaa"; //報錯
            // let b = "bbb";//報錯
          }
            // console.log(a);//報錯!
}
        // console.log(a);//報錯!
        console.log(b);//true

這些報錯的是為什么呢祟蚀？那么繼續(xù)看下去吧！８盥簟！

ES5
1.var 全局作用域函數(shù)作用域
2."聲明提升"可以在聲明之前或者聲明之后來使用這個變量
ES6 新增
let 聲明塊級作用域變量
** 注意**

let沒有聲明提升患雏，必須先聲明后使用鹏溯。
let聲明的變量不能與前面let var const聲明的變量重名

3.1.2 const

const 命令用來聲明常量(常量不能修改，也可以說成是只讀變量)

const PI = 3.1415926;//只讀變量
        // PI = 200 // 報錯 const聲明的變量必須初始化 一旦初始化完畢就不允許更改
        {
            const VERSION = "1.0.1";
            console.log(VERSION);
        }
        // console.log(VERSION);//報錯

這又是為啥呢淹仑，怎么又會報錯了呢丙挽！因為...

const 是常量修飾符
注意

const聲明的變量肺孵，必須在聲明的同時進行賦值
const聲明的變量也是一個塊級作用域常量；
const聲明的變量沒有聲明提升颜阐，必須先聲明后使用
const聲明的變量不能與前面let var const聲明的變量重名

3.2解構(gòu)賦值

解構(gòu)賦值:對某種結(jié)構(gòu)進行解析平窘，然后將解析出來的值賦值給相關的變量

3.2.1 數(shù)組解構(gòu)賦值

1.
var [a,b,c] = [11,12,13];
console.log(a,b,c);//輸出11,12,13
2.賦值要結(jié)構(gòu)一樣，要不然就會......
var [e,f,g,k] = [[1,[2,3],5]];
console.log(e,f,g,k);//輸出[1, Array[2], 5] undefined undefined undefined
3.正確的賦值
var [e,f,g,k] = [1,2,3,5];
console.log(e,f,g,k);//輸出1,2,3,5

3.2.2 對象解構(gòu)賦值

var {name,age} = {name:"張三",age:"20"}
console.log(name,age);//輸出 張三凳怨，20

3.2.3 字符串解構(gòu)賦值

var [a, b] = "str";
console.log(a,b);//輸出a:s b:t

3.2.4 解析json數(shù)據(jù)

var jsonData = {"name":"tom","age":20,"sex":"男"};
var {name,age,sex} = jsonData;
console.log(name,age,sex);輸出//tom 20 男

3.2.5 應用

//應用
var f1 = 88;
var f2 = 99;
[f1,f2] = [f2,f1];
這里是把f1的值賦給f2瑰艘，f2的值賦給f1.
console.log(f1,f2);//輸出99,88

3.3箭頭函數(shù)

ES6可以使用“箭頭”（=>）定義函數(shù)

3.3.1 具有一個參數(shù)的簡單函數(shù)

var func1 = a => a
console.log(func1("hello, world")) //輸出 hello, world

3.3.2 沒有參數(shù)的函數(shù)

//沒有參數(shù)的函數(shù)
var func2 = ()=>{console.log("沒有參數(shù)");};//輸出 沒有參數(shù)
func2();

3.3.3 多個參數(shù)

//多個參數(shù)的函數(shù)
var func3 = (a,b)=>{console.log(a,b);};//輸出 1000,100
fun3(1000,100);

3.3.4 應用

//打印計算1+2+....+100和
 var fun4 = (sum)=>{
    var sum = 0;
    for(var i = 0; i <= 100; i ++){
        sum += i; 
    }
    console.log(sum);//輸出 5050
}
fun4();

3.4展開運算符

展開運算符就是三個點(...)，可以將數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列

3.4.1 關于數(shù)組展開運算符

// 關于數(shù)組 展開運算符 ...
var arr = [1,2,3,4,5];
正常打印結(jié)果
console.log(arr);//輸出 [1, 2, 3, 4, 5]
加上展開運算符之后打印的結(jié)果
console.log(...arr);//輸出 1 2 3 4 5

3.4.2函數(shù)中傳參(傳遞數(shù)組)的時候

function fun5(a,b,c,d,e,f){
    console.log(a,b,c,d,e,f);
}
正常打印結(jié)果
fun5([1,2,3,4,5,6]);//輸出 [1, 2, 3, 4, 5, 6] undefined undefined undefined undefined undefined
加上展開運算符之后打印的結(jié)果
fun5(...[11,22,33,44,55,66]);//輸出 11 22 33 44 55 66

至于為什么是undefined那么你就要去看看前面的解構(gòu)賦值了肤舞，那么我在這里就不做解釋了紫新。

3.5 includes

includes是用來表示某個數(shù)組是否包含給定的值

3.5.1 在數(shù)組中

var str1 = [1,2,3,4];
console.log(str1.includes(1));//輸出 true

3.5.2 在字符串中

var str2 = "hello";
console.log(str2.includes("e"));//輸出 true
var str3 = "hello";
console.log(str3.includes("e",3));//輸出 false

includes("字符"，startIndex)查找可以輸入?yún)?shù)也可以不輸入?yún)?shù)李剖，如果不輸入?yún)?shù)芒率，就默認從第0位下標處開始查找，如果你輸入?yún)?shù)篙顺，就從你輸入的startIndex下標開始查找偶芍，一開始輸入的參數(shù)3，因為從下標3之后沒有e這個字符德玫，所以str3的輸出結(jié)果是false

3.6 class

class是ES6創(chuàng)建對象的方式

3.6.1 ES5字面量法創(chuàng)建對象

var dog = {
    name:"毛毛",
    age:3,
    color:"yellow",
    bark:function(){
         console.log("汪汪汪");
    }
}
dog.bark();// 汪汪汪
console.log(dog.name);// 毛毛

3.6.2 ES5構(gòu)造函數(shù)法創(chuàng)建對象

function Dog(name,age,color){
    this.name = name;
    this.age = age;
    this.color = color;
}
 Dog.prototype.bark = function(){
    console.log("汪汪汪汪");
 }
實例的對象
var d1 = new Dog("豆豆",2,"black");
console.log(d1);// 輸出Dog {name: "豆豆", age: 2, color: "black"}

下面咱們看一下跟ES5做個比較匪蟀，ES6是怎樣創(chuàng)建對象的......

3.6.3 ES6的class命令創(chuàng)建對象

class Dog{
    constructor(name,age,color){
        //構(gòu)造函數(shù)
        //給對象添加普通屬性
        this.name = name;
        this.age = age;
        this.color = color;
    }
    //注意：如果不寫構(gòu)造函數(shù)，有一個默認的構(gòu)造函數(shù)
    //constructor(){
         //對化焕，如果你不寫構(gòu)造函數(shù)萄窜，我就是那個默認的構(gòu)造函數(shù)
    //}
    bark(){
        console.log("汪汪汪");
    }
}

var d2 = new Dog("花花",1,"white");
console.log(d2);//輸出 Dog {name: "花花", age: 1, color: "white"}
d3.bark();//輸出 汪汪汪

這時有人該說那么還不懂怎么辦，涼拌^_那好撒桨，我把絕招也告訴你吧!

3.6.4 ES6創(chuàng)建對象的固定模式

//class創(chuàng)建一個類
class 類名 {
    constructor(){
        //在這里寫它應有的屬性
    }
    //在這下面寫它應有的方法
    method(){

    }
    
}

3.7 Set()和Map()

3.7.1 Set()

Set()是 ES6新增的有序列表集合(set中的元素是沒有重復的)

Set()可以調(diào)用 add()查刻、has()、delete()凤类、clear()等方法

add()

var s = new Set();
add()向set中添加元素
add(1) ;
console.log(s);// 輸出 Set {1}  這樣我就把1添加到了set這個對象中
console.log(s.size)//輸出 1  size可以獲取set集合中元素個數(shù)

has()

console.log(s.has(1));//輸出 true  判斷指定的值是否在set集合中 存在返回true 不存在返回false

delete()

//delete(value) 刪除指定的元素
s.delete(1);
console.log(s); //輸出  Set {}  就把Set里面的1元素刪除了

clear()

//clear()清空集合
現(xiàn)在添加一個元素到set里穗泵，讓它里面不是一個元素
s.add(2);
console.log(s);//輸出 Set {1，2}
s.clear();
console.log(s);//輸出 Set {}  就把Set里面的集合清空了

應用數(shù)組去重

1.
var s2 = new Set([1,2,2,3,4,4,5]);
console.log(s2);//輸出 Set {1, 2, 3, 4, 5}
2.
var arr = [1,1,2,2,2,3,4,4,5];
arr = Array.from(new Set(arr));
console.log(arr);//輸出 [1, 2, 3, 4, 5]

3.7.2 Map()

Map()是 ES6新增的有序鍵值對集合谜疤，鍵值對是 key 和 value佃延，通過設置 set(key, value) 方法為 Map().

Map()同樣可以調(diào)用 add()、has()夷磕、delete()履肃、clear()等方法