ES6

let和const

var:

1.  var可以重复声明
   2.  作用域：全局作用域和函数作用域
   3.  会进行预解析

let:

1.  同一作用域下不可以重复声明
2.  作用域：全局作用域和块作用域{}
3.  不会进行预解析

const:

1. 只能声明一次，且必须直接赋值
   2. 作用域：块级作用域
   3. 不会被预解析
   4. 不能重新赋值

解构赋值

对象的解构赋值

let obj = {
    a:1,
    b:2
}
let {a,b} = obj;//这里用c,d就不行，必须和对象的属性名一致
console.log(a,b);//1 2

数组的解构赋值

let arr = ["a","b"];
let [c,d] = arr;//名字可不一样，位置对应了就行
console.log(a,b);//a b

怎么快速交换两个值(用到解构赋值)

let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);//2 1

字符串的解构赋值(没啥用)

let str = "abc";
let [c,d] = str;
console.log(a,b);//a b

展开运算符(…)

扩展：

let arr1 = [1,2,3,4];
let arr2 = ["a",...arr1,"b,"c];//当使用这种方式插入就会很方便

剩余参数

let arr1 = [1,2,3,4];
let [a,b,...c] = arr1;
console.log(c);//[3,4]

以上用法在对象中依然适用，就不再赘述

解决浅复制问题

如果let arr2=arr1

这样直接赋值的话会造成在我修改arr2时，arr1也变了

但如果我用扩展运算符就可以完美避开这个问题

let arr1=[1,2,3,4];
let arr2=[...arr1];
arr2[0]=3;
console.log(arr1[0]);//1

Set

数组去重

let arr = [1,2,3,2,1,4,5];
let s = new Set(arr);
console.log(s);//{1,2,3,4,5} 注意这不是数组
console.log(s.size);//5  size属性：个数
s.clear();//清空所有值
s.delete(4);//传入的是要删除的具体值，而不是数组下标 返回true或false是否删除成功【
s.add(6); //添加也包含去重功能，若添加已有元素则添加不成功，返回set本身 
s.has(5);//检验是否包含，返回true和false
//将s转为数组
arr = [...s];

Map

let arr = [
    ["a",1],
    ["b",2],
    ["c",3]
];//写成一维数组是不得行的，必须写成这样式的俩值
let m = new Map(arr);
console.log(m);//{"a"=>1,"b"=>2,"c=>3"} Map方法将其改变为键值形式
console.log(m.size);//3  size属性：个数
m.clear();//清空所有值
m.delete("a")//传入的是要删除的key值，而不是数组下标 返回true或false是否删除成功 会将key value都删了
m.get("b");//返回key对应的value
m.set("d",4).set("a",2);//添加也可修改 注意不是add 可迭代
m.has(5);//检验是否包含，返回true和false
//将s转为数组
arr = [...m];

箭头函数

箭头函数：

形参=>返回值

let fn=num=>num*2;
console.log(fn(2));//4

(形参，形参)=>返回值

let fn=(num1,num2)=>num1+num2;
console.log(fn(1,2));//3

()=>返回值

let fn=()=>"返回值";
console.log(fn());//"返回值"

()=>{

执行语句

return 返回值(可选)

}

let fn=()=>{
    console.log("a");
};
fn();//"a"

(形参)=>{

执行语句

return 返回值(可选)

}

箭头函数不能用不定参(arguments)

但可以用扩展运算符解决(又叫rest参数)

let fn = (a,b,...arg)=>{
    console.log(arg);
}
fn(1,2,3,4);

箭头函数本身没有this，当调用箭头函数的this时，指向其声明时作用域的this

参数默认值问题

let fn = (a=2,b=10)=>{
    console.log(a*b);
}
fn();//尽管忘记传参数了，也会得到结果20，不会返回undefined

Array.from()

将类数组转换为数组

先康康啥是类数组，就是由下标，有值但他不是数组

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>

let lis=document.querySelectorAll("li");
lis=Array.from(lis);
//当然也可以用展开运算符将类数组转换成数组啦
lis=[...lis];
//接下来lis就可以愉快的使用数组的方法啦，比如forEach啥的

Array.from还有两个可选参数，一个是类似于map方法，另一个就是改变this指向(我觉得没啥用，就不记了)

let lis=document.querySelectorAll("li");
lis=Array.from(lis,(item,index)=>{
       console.log(item,index);
       return index;
});

Array.of()

将传入的参数组成一个新数组

console.log(Array.of(1,2,3,4,"a"));//[1,2,3,4,"a"]

Array.isArray()

检测传入的是否是数组

arr.find()

返回数组中第一个满足判断条件的值，若没有就返回undefined

参数是一个回调函数

let arr = [1,2,3,4];
let val = arr.find(item=>{//index,arr可选
    if(item>3){
        return true;
    }
});
//简写
let val = arr.find(item=>item>3);
console.log(val);

arr.findIndex()

除了这个返回的是索引值，剩下的和find方法一样

arr.flat(depth)

扁平化多维数组 depth指要提取嵌套数组的结构深度，默认值是1

当然，当你不知道数组有多少层的时候，可以直接传Infinity

返回“拉开的”数组

let arr = [
    [1,2],
    [1,[3,6,
        [4,5]]]
]
console.log(arr.flat(Infinity));//[1,2,3,6,4,5]

arr.flatMap()

在扁平化的同时想要进行一些操作，比如删除某一项时，可以使用此方法，参数是回调函数 but 这个函数只能处理一层，如果层数太多，需要递归

let arr = [
    ["小明",18]，
    ["小刘",19]
]
let newArr = arr.flatMap(item=>{
    //使用过滤器方法去掉年龄那一项
    item=item.filter((item,index)=>{
        //使索引值为0，来做到删除年龄
        return index==0;
    })
    return item;//注意这里一定要写返回值
})
console.log(newArr);//["小明","小刘"]

arr.fill()

填充作用，一般用于操作二进制

let arr = [0,1,2,3,4];
console.log(arr.fill("a",1,4));//[0,"a","a","a",4]
//三个参数，(替换值，起始位置[可选]，终止位置(不包含，可选))，且终止值默认值为arr.length  不能使数组变长

arr.includes()

判断数组中是否包含一个指定的值

let arr = [1,2,3,4,5];
console.log(arr.includes(1,2));//false 两个参数(查找值，从第几位开始查找(可选))

字符串也有includes方法，用法和参数与数组的完全一致

str.startsWith() str.endsWith()

let str = "肥肥肥最厉害";
console.log(str.startsWith("肥肥",2));//false，第二个参数(可选)代表从第几位开始作为头，本例中应该是肥最
console.log(str.endsWith("肥肥肥",3));//true，第二个参数(可选)代表第几位的前一位为尾

str.repeat()

将字符串重复多少次，不能太大数，比如几亿次啊，浏览器会撑不住

let str = "a";
console.log(str.repeat(3));//"aaa"

模板字符串

插值表达式 ${} (取代字符串拼接中的+””+) , 里面的值只要是表达式即可，可以是函数调用啊，三目运算啊，都可以;首尾用 即可，取代了单双引，且其中可以任意换行而不报错

let name = ()=>{
    var a = "小明";//当然实际运用中可能是一些非常复杂的操作
    return a；
}
let age = 18;
let str = `
      今年${name()}终于${age>15?age:"保密"}了！    
`;
console.log(str);//今年小明终于18了

对象的简洁表示法

let a = 0;
let b = 1;
let obj = {
    a,//a等于a，打印出来就是a:0，等同于a:a
    b,
    c(){//当对象中某一属性值是方法时，可以这么简化，取代之前那种还要写function的
        console.log("a");
    }
}

属性名表达式

let name = "小明";
let obj = {
    [name]:111//给属性赋上变量名
}
console.log(obj);//"小明"：111
//按老办法写
obj[name]=111;

Object.assign()

合并对象，两个参数(源对象，目标对象)

let obj = {
    a:1,
    b:2
}
let obj1 = {
    c:3,
    d:4
}
obj1 = Object.assign({},obj,obj1);

当然，我认为使用扩展运算符更方便一些，不需要考虑位置顺序

Object.is()

传两个参数，判断是否完全相等，和===类似，但是又有不同之处，具体如下

Object.is(NaN,NaN);//true
NaN===NaN;//false
+0===-0;//true
Object.is(+0,-0);//false
Object.is(1,"1");//false 强类型

babel

<head>
 <script src="babel.min.js"></script>
</head>
<script type="text/babel">
</script>

上面只是平时简单的测试，用babel，可以将ES6转化为可兼容的，当然也不是所有ES6新增的他都能转化，使用的还需要小心一点，之前要测试哦；至于应用到项目里的高阶使用方法，以后再说····