20200921赵鑫

开发常用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阶段几乎已经学完了,我感觉收获真的很多,但是,记不住的也真的很多,以后要加强总结,每天把学过的知识点不要只是写日志随便写写,要把日志当作博客来写,争取每天有一篇满意的博客。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1