Es6总结

一、var，let和const的区别

1-过去我们是用var来声明变量的 var i=1; 或者直接i=1, 这两种方式有什么区别？
当我们运行下面两段代码：
console.log(i)
var i=1;
console.log(i)
i=1;
输出的结果分别是undefined和not defined可见var有提升变量的作用
注意：虽然不会报错但尽量不要用不加var的方式来声明变量

2-现在Es6又新增了let（变量）和const（常量）两种方式来声明变量，这两种方式声明的变量都是处于块级作用域中，而且let和const并不存在变量提升，所以一定要在定义后使用，否则报错。
所谓的块级作用域就是一个｛｝,运行代码如下：

 {
var a=110;
 let b=666;
 }
 console.log(a)
 console.log(b)
复制代码

输出结果是：110和 not defined

---

二、模板字符串,解决了Es6以前字符串输出功能上的不足

用途一:模板化输出：将表达式嵌入字符串中输出，用法是 `字符串${变量}`。

用途二能够实现多行输出,如下：

var a='zk'
console.log(`
my 
name
i${a}`) 
复制代码

直接就实现了多行输出的效果~

---

三、箭头函数

也就是函数的快捷写法
例如：

x=>x*x;
function f(x){
    return x*x;
}
复制代码

这两种写法表达的函数是一样的。
用法：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return。

注意：箭头函数中是没有this的

---

四、块级作用域代替IIFES

IIFES即函数立即表达式，通常用途是创建一个内部的作用域，而在Es6中我们同样可以用一个块级作用域来实现相同的功能：
如下列代码:

{
let f=()=>console.log("zzzzz~")
}
(function f(){console.log("zzzzz~"})
复制代码

这两个函数作用是相同的

---

五、Es6新增的方法

• Array.from 将把类数组对象转成真正的数组;
• Array.of 作用：将一组值转换为数组。与Array.from功能相似，用来创建数组。主要目的是弥补构造器 Array（）的不足;
• find() 用于找出第一个符合条件的数组元素。找不到则是undefined。注意，它是不会返回多个，只找一个，找到了就返回;
• findIndex() 返回第一个符合条件的数组元素的索引。找不到则是-1;
• includes 判断元素是否在数组/字符串中存在。返回值是true|false，indexOf也可以做类似的工作但是indexOf对NaN的判断是错误的;
• fill 给数组填充指定值。fill 方法用于空数组的初始化非常方便。已有数据会被覆盖。fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置;
• startsWith()返回布尔值，表示参数字符串是否在源字符串的头部；
• endsWith()返回布尔值，表示参数字符串是否在源字符串的尾部；

---

六、 默认参数对 arguments 对象的影响

Arguments是个类似数组但不是数组的伪数组，说他类似数组是因为其具备数组相同的访问性质及方式，能够由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments 对象 用法如下：

function f(a,b,c){
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}
f(1,2,3);
复制代码

在非严格模式下，arguments总是能反映出命名参数的变化。看下面的代码：

 function foo(a, b) {  //非严格模式
 console.log(arguments[0] === a); //true
console.log(arguments[1] === b); //true
a = 10;
b = 20;
 console.log(arguments[0] === a); //true
console.log(arguments[1] === b); //true
    }
    foo(1, 2);
复制代码

• 在ES5的严格模式下，arguments只反映参数的初始值，而不再反映命名参数的变化！

  function foo(a, b) {
    //严格模式
    "use strict"
    console.log(arguments[0] === a); //true
    console.log(arguments[1] === b); //true
    a = 10;
    b = 20;
    console.log(arguments[0] === a); //false。  修改a的值不会影响到arguments[0]的值
    console.log(arguments[1] === b); //false
    }
    foo(1, 2);
复制代码

---

七、扩展运算符

• 把数据结构转成数组：

var arr=[1,2,3];
console.log(...arr); 
//把数组展开后依次输出
var arr2=[...arr];
//把数组展开后再赋值给arr2
复制代码

• 把伪数组转成数组：

function f(a,b,c){
console.log([...arguments])
}
f(1,2,3);
复制代码

• 合并数组：

let arr1=[1,2]
let arr2=[3,4]
console.log([...arr1,...arr2])
//输出合并后的数组
复制代码

• 解构赋值：

let[a,b,c]=[1,2,3]
console.log(a)
console.log(b)
console.log(c)
复制代码

---

八、默认参数

设置函数中形参的默认值 简而言之：

function f(a=1,b=3,c=4){
   console.log(a)
   console.log(b)
   console.log(c)
}
f()
//输出结果是1，3，4
复制代码

---

九、类Class

• 格式：

class 类名{
constructor(参数){
    this.属性=参数;
}
方法名(){}//不是箭头函数
}
复制代码

• extends实现继承,格式如下：

class 子类 extends 父类{
    constructor(参数){
        super(参数)
        this.属性=值
    }
}
复制代码

例如：

class A1{
    constructor(a,b){
        this.a=a;
        this.b=b;
    }
    g(){console.log(this.a+this.b)}
}
class A2 extends A1{
    constructor(a,b,c){
        super(a,b)
        this.c=c;
    }
    s(){console.log(this.c)}
}
复制代码

• 类的静态方法 static 直接通过类名来访问的方法就是静态方法,使用方法直接在方法前加static就可以啦~

---

十、rest参数

rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。如下代码：

function add(...values){
    var sum=0;
    for(var val of values){
sum+=val;
    }
    console.log(sum);
}
add(1,2,3)//6
复制代码

十一、Set数据结构

set和数组差不多，也是一种集合，区别在于：它里面的值都是唯一的，没有重复的，是一个伪数组。

创建方式：

var s1=new Set();
Set s2=[1,2,3,"ad"];
s2.add(4);//使用add来添加元素
复制代码

• 可以使用foreach 和for of来遍历：

s2.forEach(item=>console.log(item));
for(var p of s2){
    console.log(p)
};
复制代码

小技巧：使用set为数组去重：

var s1=new Set([1,1,1,2,2,3,3,4,5,2,1])
console.log([...s1])
复制代码

---

十二、map数据结构

它类似于对象，里面存放也是键值对，区别在于：对象中的键名只能是字符串，如果使用map，它里面的键可以是任意值。 创建Map，如下：

var m=new Map();//1
var n=new Map(["a","hello"],[1,"123"]);//2
复制代码

添加元素：

m.set(2,"asd")
m.set([1,2,3],{1:"asdd"})
复制代码

获取其中元素：

m.get("2")//可以取得数据
m.get([1,2,3])//由于get()时要比较栈区中的地址，而不是堆区中的数据，将无法得到数据
复制代码

注意：如果有重复的键，后面的要把前面的覆盖的