开发常用ES6总结

模板字符串

模板字符串``总的来说很简单，就是将字符串拼进行了简化

${}中可以放置变量、运算、三目运算符、有返回值的函数调用、创建对象、访问数组元素

${}中不可以放置程序分支结构：分支和循环，不能防止没有返回值的函数

let

let作用域

let用法类似于var，但是所声明的变量只在块级作用域内有效{}

let不存在变量提升

let不存在变量提升，因此不能在声明变量之前使用，使用会报错

暂时性死区

只要在块级作用域内用let声明了变量，该变量就绑定在了这个作用域中，不会受外部的影响

console.log(typeof x);//ReferenceError
console.log(typeof y);//undefined
let x=0;

在上述代码中可以看到，由于暂时性死去对typeof也带来了影响。

如果在声明之前对一个let声明的变量进行typeof操作就会报错

如果是未声明的变量返回的则是undefined

所以，在使用Let时，变量一定要在声明之后再使用。

let x = x;//报错
var y = y;//不报错

function bar(x = y,y = 2) {
    return [x, y];
}
bar(); 

在阮一峰大神的书中，介绍了上面两种情况也会因为暂时性死区特性导致的，第一种情况并不难理解，因为x的声明语句并没有完成就使用x，此时会发生报错。

let不允许重复声明

在相同的作用域内，不可以使用let重复声明一个变量。

let x = 0;
let x = 4;

块级作用域

var li = document.querySelectorAll('li');
            for(let i = 0; i < li.length ; i++){
                li[i].onclick = function(){
                    console.log(li[i].innerHTML)
                }
            }

当我们没有使用let去声明 i 而是用var 时，我们都知道，由于点击事件肯定是在循环执行完毕之后才触发的，因此无论点击哪个li，输出的都只会是最后一个li中的内容。但是在使用let声明之后，由于块级作用域的存在，当前大括号的 i 只能在当前大括号范围内使用，不会影响到其他作用域。

const

const的作用为声明常量，需要注意：

1.声明常量，常量就是就是值(内存地址)，是不能变化的

2.具有块级作用域

3.声明常量时必须赋值

4.不存在常量提升

注意：const虽然声明的时常量，是不可改变的。但是当const声明的是一个对象时，对象本身是可以变化的。

const a = 1;
a = 2;
console.log(a);
const arr = [];
arr.push('111');
console.log(arr);

const声明过后，常量保存的是一个地址，这个地址指向它本身的值。当我们直接给这个常量赋值时，相当于要直接去改变地址，这个时候就会报错。但是当常量中声明的是一个对象是，我们对对象进行操作，实际上是操作的对象它本身，没有影响地址，这种情况是不会报错的。如果想要让对象也不可以被修改，可以使用es5中的freeze()方法。

顶层对象(window)

ES6规定，var和function命令声明的全局变量，一九是顶层对象的属性，同时使用Let,const,class声明的全局变量，不属于顶层对象的属性

函数的改变

箭头函数

为了简化语法，ES6给定了一种简便的回调函数的写法-->箭头函数

箭头函数的使用

1.去掉function，在()和{}之间加上=>

2.如果函数体只有一句话，可以省略{}和return。注意，在去掉{}之后需要去掉结尾的;

3.如果室友一个形参，可以省略（）

this指向

箭头简述中内外this是相同的。

var btn = document.getElementsByTagName('button')[0];
btn.onclick=()=>console.log(this)//window

var btn = document.getElementsByTagName('button')[0];
btn.onclick=function(){
        console.log(this) //button
}

参数增强

参数默认值

        function sum(a,b,c=15){
            return a+b+c
        }
        console.log(sum(1,2)) //18
        console.log(sum(1,2,3)) //6

剩余参数

        var arr=[];
        function sum(...arr){
            return arr.reduce((a,b)=>a+b)
        }
        console.log(sum(3,4,5,6))

扩展运算符的用法

1.打散数组

        var arr = [1,2,3,4,5];
        console.log(...arr)

例如：当函数需要调用数组作为参数时，就需要将数组打散传入值

2.复制数组

        var arr = [1,2,3,4,5];
        var arrtwo = [...arr];
        console.log(arrtwo);

使用这种情况复制数组时，无论对新数组进行何种操作都不会影响原数组。

该方法同样适用于对象

3.数组合并

        var arr = [1,2,3,4,5];
        var arrtwo = [6,7,8,9]
        var arrthree = [...arr,...arrtwo];
        console.log(arrthree);

该方法也适用于对象

注意点：

...在形参列表中出现时，是用来收集不确定个数的参数的。

...作为打散数组放在实参列表时，不一定需要放在结尾。

        function sum(a,b,c,d,e,f){
            return a+b+c+d+e+f;
        }
        console.log(sum(...[1,2,3],4,5,6))

注意，这里就算传入的实参比形参多，也不会报错，只是超出部分的形参不会参与计算。

学习心得

JS阶段几乎已经学完了，我感觉收获真的很多，但是，记不住的也真的很多，以后要加强总结，每天把学过的知识点不要只是写日志随便写写，要把日志当作博客来写，争取每天有一篇满意的博客。