ES6 你母鸡啦的事

0.前言

首先，先祝大家圣诞节快乐，接下来森哥又来开车了啊!!!想上车的尽快买票啊!!!今天想和大家聊一聊我对ES6的新特性理解，那么，不懂得编程的人，心里是不是在想这TM是啥，那好我来告诉你这TM是什么。

1.简介

ES6是ECMAScript6.0版本的简称，因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

详细请点击这里

2.说说我对ES6新特性的认识

let和const

解构赋值
箭头函数 ()=>{}
展开运算符
includes
class
Set()和Map()

3.代码实现

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

这些报错的是为什么呢？那么继续看下去吧！！！

ES5
1.var 全局作用域函数作用域
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解构赋值

解构赋值:对某种结构进行解析，然后将解析出来的值赋值给相关的变量

3.2.1 数组解构赋值

1.
var [a,b,c] = [11,12,13];
console.log(a,b,c);//输出11,12,13
2.赋值要结构一样，要不然就会......
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 对象解构赋值

var {name,age} = {name:"张三",age:"20"}
console.log(name,age);//输出 张三，20

3.2.3 字符串解构赋值

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

3.2.4 解析json数据

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箭头函数

ES6可以使用“箭头”（=>）定义函数

3.3.1 具有一个参数的简单函数

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

3.3.2 没有参数的函数

//没有参数的函数
var func2 = ()=>{console.log("没有参数");};//输出 没有参数
func2();

3.3.3 多个参数

//多个参数的函数
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展开运算符

展开运算符就是三个点(...)，可以将数组转为用逗号分隔的参数序列

3.4.1 关于数组展开运算符

// 关于数组 展开运算符 ...
var arr = [1,2,3,4,5];
正常打印结果
console.log(arr);//输出 [1, 2, 3, 4, 5]
加上展开运算符之后打印的结果
console.log(...arr);//输出 1 2 3 4 5

3.4.2函数中传参(传递数组)的时候

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

至于为什么是undefined那么你就要去看看前面的解构赋值了，那么我在这里就不做解释了。

3.5 includes

includes是用来表示某个数组是否包含给定的值

3.5.1 在数组中

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)查找可以输入参数也可以不输入参数，如果不输入参数，就默认从第0位下标处开始查找，如果你输入参数，就从你输入的startIndex下标开始查找，一开始输入的参数3，因为从下标3之后没有e这个字符，所以str3的输出结果是false

3.6 class

class是ES6创建对象的方式

3.6.1 ES5字面量法创建对象

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

3.6.2 ES5构造函数法创建对象

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是怎样创建对象的......

3.6.3 ES6的class命令创建对象

class Dog{
    constructor(name,age,color){
        //构造函数
        //给对象添加普通属性
        this.name = name;
        this.age = age;
        this.color = color;
    }
    //注意：如果不写构造函数，有一个默认的构造函数
    //constructor(){
         //对，如果你不写构造函数，我就是那个默认的构造函数
    //}
    bark(){
        console.log("汪汪汪");
    }
}

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

这时有人该说那么还不懂怎么办，凉拌^_那好，我把绝招也告诉你吧!

3.6.4 ES6创建对象的固定模式

//class创建一个类
class 类名 {
    constructor(){
        //在这里写它应有的属性
    }
    //在这下面写它应有的方法
    method(){

    }
    
}

3.7 Set()和Map()

3.7.1 Set()

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

Set()可以调用 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集合中元素个数

has()

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

delete()

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

clear()

//clear()清空集合
现在添加一个元素到set里，让它里面不是一个元素
s.add(2);
console.log(s);//输出 Set {1，2}
s.clear();
console.log(s);//输出 Set {}  就把Set里面的集合清空了

应用数组去重

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()同样可以调用 add()、has()、delete()、clear()等方法