该文参考阮一峰著的ECMAScript 6 入门第三版
目前主流浏览器已经完美兼容es6，这些新特性都被我们运用到实际的项目中，一些面试官也越来越多的面试喜欢问es6，es7，甚至es2019这些方面的问题，为了不掉队,现在就让我们一起回顾一下这些特性。
es6
let ，const 命令，一个声明变量。一个声明常量
console.log(aa);
var aa=11;
console.log(bb);
let bb=11;
const PI=3.14;
第一个输出aa 是undefined；第二个会报个错 Uncaught ReferenceError: Cannot access 'bb' before initialization 无法在初始化之前找到 bb ；let 没有声明提升，并且不可重复定义 Uncaught SyntaxError: Identifier 'bb' has already been declared 表示bb已经声明 const 一旦声明变量，此变量将不可被更改
在作用域块内定义的变量，外部访问不到 { let aa = 11 }
解构赋值
let [a,b,c,d=6]=[11,22,33];
console.log(a,b,c,d) //11,22,33,6
let [a,b,c,d=6]=[11,22,33,66];
console.log(a,b,c,d) //11,22,33,66
let [a,b,c,d]=[11,22,33];
console.log(a,b,c,d) //11,22,33,undefined
数组的结构赋值要求一对一，如果没有对应则会变成undefined，
对象也可以结构赋值
let {a,b}={a:1,b:2}
console.log(a,b) //1 ,2
let {c,d}={a:1,b:2}
console.log(c,d) //undefined , undefined
let {a:e,b:f}={a:1,b:2}
console.log(e,f) // 1,2
let {foo,bar,p,p:{p1,p2}}=obj;
console.log(foo,bar,p,p1,p2) // 1 2 {p1: 3, p2: 4} 3 4
这说明如果key值和变量名一样，则简写就可以，如果不同，则需 key:变量名
字符串的扩展功能
JSON.stringify()可以对Unicode码进行处理，并增加魔板字符串功能
let foo=123;
let str=`
<div>
` ${foo} `
</div>
`
魔板字符串可以让拼接字符串更方便快捷！
字符串新增方法
String.fromCodePoint()可以识别Unicode返回对应的字符，类似于String.fromCharCode() 相反的则是 CodePointAt() 和charCodeAt()
image.png
String.raw()
image.png
includes(), startsWith(), endsWith()
-
includes() ;判断一个字符串中是否含有某个值，如果含有，则返回true，没有返回false，支持第二参数，第二个参数代表从第几位开始知道结束。;而
indexOf()有则返回字符串的索引值，没有则返回-1
image.png
-
startsWith(), 判断字符串开头是否含有特定字符，返回true or false；支持第二个参数 ，第二个参数代表从第几位开始知道结束。
-
endsWith()；判断字符串结尾是否含有特定字符，返回true or false；支持第二个参数 ，第二个参数代表从开头到第n位结束。
image.png
repeat(),padStart(),padEnd(),trimStart(),trimEnd();matchAll()
-
repeat(); 返回一个被重复过的字符串，里面的参数表示重复几次
-
padStart()，padEnd(),填充字符串，有2个参数，第一个表示返回新字符串的位数，第二个表示需要填充的字符，
-
trimStart(),trimEnd();去除字符串的空格，一个去除字符串头部的空格，一个去除尾部的空格。和
trim()等同。 -
matchAll() 返回的是一个正则字符串遍历器，
RegExpStringIterator {}用展开运算符就可以查看到
image.png
image.png
咱们发一下string;发现输出的是一个函数。那它肯定有个一个原型对象啊
console.log(String)
image.png
console.log(String.property)
image.png
一些Number的方法 如parseInt,parseFloat,都嵌入到Number上了。Number.parseFloat()
image.png
函数的改变
默认值函数，减少代码量，看起来更加清晰
function test (x , y = 'haha'){
console.log(x,y) //1,haha
}
console.log(test(1))
函数的形参也可以结构赋值，接下来让我们来看一看
function test ({x , y = 'haha'}){
console.log(x,y) //2,haha
}
console.log(test({x:2}))
image.png
箭头函数
let test= x=>console.log(x)
test(2) //2 当形参只有一个时，可以省略（），当执行语句只有一条时，可以省略{}，this指向 书写函数的那一层、
数组的扩展
...展开运算符
console.log(...[1,2,3,4,5]) // 1,2,3,4,5
Array.from() 可以把类数组对象，转换为数组
Array.of 可以将一组数，转化为数组
Array.find(),Array.findIndex(),array.copyWithin(target,start,end)
array.fill() 初始化数组，填充数组，
array.includes() 判断一个值是否在数组里
keys(),valus().entries() keys是对键名的遍历，values是对键值进行遍历，entries是对键值对进行遍历，用next().value取得键值
对象的扩展
可以对属性进行简写
let name='张三'；
ley obj={
name
}
console.log(obj.name) //张三
console.log(Object);
image.png
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
image.png
Object.assign() 两个参数，后一个对象复制给前一个对象，相当于浅拷贝、
image.png
Symbol的属性名都是独一无二的，
let sym=Symbol('foo:11')
console.log(sym)
sym.description
es2019新增 一个description方法可以把symbol属性的值变成字符串
image.png
set 和 map
//set里都是不能重复的类数组对象
let arr=new Set([1,2,3])
console.log(arr) // Set(3) {1, 2, 3}
arr.add(4)
arr.add(4,3)
console.log(arr) //Set(4) {1, 2, 3, 4}
Set 有方法 ：has，add，delate ，clear
同理 Map 是对对象进行操作的
Map 有方法 ：get，set，delate，has ，clear
网友评论