JavaScript ES6常用基础知识总结
ES6let与const及其相关
块级作用域
ES6新增了块级作用域，总结一句话大致就是：大括号{}包起来的代码块基本山都可以当做块级作用域。
常见的有
直接使用{}包起来：
{
vara=4
}
函数体大括号，if-else大括号，for循环大括号，switch大括号，try-catch大括号等。需要注意的是，for循环，每一次循环时的{}都是一个独立的块级作用域。
for(leti=0;a<5;i++){
letj=i
}
上面代码循环了五次，实际上有五个独立的j。
日常开发中，我们就可以利用这个特性，来创建块级作用域了。
块级作用域变量let与const
使用let或const声明的变量只在当前块级作用域生效，出了这个代码块，就无法访问。
{
leta=5
}
console.log(a)
//UncaughtReferenceError:aisnotdefined
日常开发中，块级作用域中使用的变量，尽量使用let或者const声明。
需要注意的问题:
let和const变量一定要先声明，再使用，避免出错。不要试图利用变量提升的特性。
const声明变量时，一定要初始化，否则会报错。let建议也在声明时初始化。
const声明的变量一旦初始化，以后就不可以在进行赋值操作，但可以对其引用的对象进行更改。
constnoChangeMe; //UncaughtSyntaxError:Missinginitializerinconstdeclaration constnoChangeMe=[1,2,4] noChangeMe=[2,3] //UncaughtTypeError:Assignmenttoconstantvariable noChangeMe[100]=100//everythingisOK
let和const声明的变量不能再重复声明。虽然var可以无限次重复声明，但是并不适用于这两个新的声明方式。
leta=1 leta=2 //Identifier'a'hasalreadybeendeclared
不要用window.xxx去调用let与const声明的变量ES6规定，let、const、class声明的全局变量，不属于顶层对象的属性。
String
使用反引号”`”
使用``将字符串包起来，可以解决下面的问题:
字符串不能换行，如果换行只能使用+号
字符串中的引号如果和最外层相同，需要进行转义
字符串中插入变量，需要用+号以前这样的写法:
varname='world' varstr="小明说:\"hello,"+name+"\""//小明说:"hello,world"
现在可以方便的写作：
varname='world'
strstr=`小明说："hello,${name}"`
总的来说，有三个好处:
不怕字符串中出现的引号；
不怕换行，反引号包起来的字符串可以随便换行；
使用${}将变量或表达式包起来直接放在字符串中，不用写很多+
ES6遍历字符串
使用for...of代替for循环:
varstring='string'
for(variofstring){
console.log(i)
}
includes(),startsWidth(),endsWidth()
不用使用indexOf()判断字符串中是否包含某个值了，使用includes():
varstring='string'
string.includes('i'，0)//true
includes第二个参数表示查找的起始索引。还可以使用startsWidth()和endsWidth()判断字符串是否以某些字符开始或结尾。
ES6函数
参数的默认值
方便地设置函数参数的默认值
functionprint(a=2){
console.log(a)
}
print()//2
ES6扩展运算符…获取其余参数
可以使用...加上变量名保存其他参数全部数量。当只知道函数的前几个具体参数，不确定之后会有多少个参数传入时，可以使用...把其他传入的参数保存到一个数组中。
functionprint(value1,value2,...values){
console.log(values.join('--'))
}
print(1,2,'参数3')//参数3
print(1,2,'参数3','参数4','参数5')//print(1,2,'参数3','参数4','参数5')
ES6使用箭头函数
使用箭头函数有两个好处:
代码更加简洁
静态绑定this箭头函数中，this指向的是定义箭头函数的对象中的this。
varname='outer'
varobj={
name:'inner',
func:()=>{
console.log(this.name)
}
}
varobj2={
name:'inner',
func:function(){
console.log(this.name)
}
}
obj.func()//"outer"
obj2.func()//"inner"
第一个使用了箭头函数，由于箭头函数的this与其所在环境中的this相同，也就是与obj的this相同，而obj处于全局环境的活动对象中，this指向全局对象，这里指window，所以输出outer。注意:obj对象的this与它的属性中的this不一样。第二个使用了寻常函数，作为obj2的一个属性，func方法中的this指向了所在的对象。输出inner。
ES6数组
使用Array.from()把类数组对象转为数组
一般来说，含有length属性的对象就可以当作类数组对象。平时获取多个DOM对象后，不能使用数组中的很多方法。我们可以使用Array.from方便的转换为数组,。
vardivs=Array.from(document.querySelectorAll('div'))
divs.forEach((value,index)=>{})
使用fill()初始化数组
想要以某个值初始化数组，需要遍历。而使用fill()方法，就方便了很多。
vararr=newArray(100)//建立一个100元素的数组
arr.fill('初始值',0,arr.length)
第一个参数是要填充的值，后面两个与一般的数组方法一样，起始索引和结束索引(不包括)。
使用includes方法
和字符串的includes方法一样，看数组中是否有给定值。
对象
使用简单的属性表示和方法表示
varname='John'
vara={
name:name,
sayName:function(){console.log(this.name)}
}
改写为:
varname='John'
vara={
name,
sayName(){console.log(this.name)}
}
记得Object.is()这个方法
其与===的差别:
NaN===NaN//false Object.is(NaN,NaN)//true -0===+0//true Object.is(+0,-0)//false Object.is(+0,0)/true Object.is(-0,0)/false
可以这样理解,遵循的原则:是同一个东西就要相等。NaN与NaN就是一个东西，而-0带了个负号，和0与+0不一样。0和+0相同就像1和+1相同一样。
使用Object.assign()合并多个对象
Object.assign()是用来合并对象的。assign，译作分配,指派。这个方法本意是将某些对象自己的属性拷贝到目标对象上。它不回去复制继承来的属性。比如可以在定义某个配置的时候，定义一个基础配置，在定义两个不同情况下的配置。使用时，进行合并。
varpathConfig={
path:'style/images'
}
vardevConfig={
baseUrl:'http://localhost:8080/'
}
varbuildConfig={
baseUrl:'https://192.128.0.2'
}
//使用时，合并
varmode='dev'
varconfig=Object.assign({},pathConfig,mode==='dev'?devConfig:buildConfig)
只是举个例子。
Object.keys()，Object.values()，Object.entries
这三个方法返回对象自身的，可枚举的，属性名为字符串的属性相关的东西，分别为：
Object.keys():属性名组成的数组
Object.values()：属性值组成的数组
Object.entries:["key","value"]组成的数组。
varjohn={
name:'John',
age:12
}
Object.keys(john)//["name","age"]
Object.values(john)//["John",12]
Object.entries(john)//[["name","John"],["age",12]]
ES6 ...运算符
前面在函数的剩余参数处理中提到了...扩展运算符。总结了一下，感觉有两个用法:
用来读取数组或者对象的时候，是把数组或对象给扩展开；
用来给对象或者数组赋值的时候，自动给对象或数组添加属性或元素。
用来读取
读取的时候就是把数组或者对象给扩展开来。
vara=[...[1,2,3],4]//把数组的每一项都展出来
a//[1,2,3,4]
varobj={
name:'John',
age:12
}
varnewObj={...obj,job:'teacher'}//把某个属性展出来
newObj//{name:"John",age:12,job:"teacher"}
所以可以很方便的用来扩展，合并数组或对象。
用作赋值
用作赋值的时候，是用作解构赋值，含义就是把等号右边表达式的剩余属性或数组项都放到...后面的变量里。
vara,restB
[a,...restB]=[1,3,5]
a//1
restB//[3,5]
varc,restD
{name,...restD}={name:'John',age:12,job:'teacher'}
name//"John"是一个属性的值
restD//{c,...restD}={name:'John',age:12,job:'teacher'}是一个对象
对于对象的解构赋值，会把对应不到的属性全部放进...后面的变量对象中。
注意：因为是把剩下没人要的属性或者数组项都收下，所以...应该放在数组或者对象中的最后，且只能有一个。
以上即是ES6常用基础知识总结，希望对大家有所帮助
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。