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