一、 let和const
1.let声明的变量用块作用域 { }包围的，块作用域之外变量是不存在的，let声明的变量仅在自己的块作用域有效。
2.使用const声明的变量是不可以修改的，声明的时候必须赋值。
使用let/const声明的变量，从一开始就形成了封闭作用域，在声明变量之前是无法使用这个变量的，这个特点也是为了弥补var的缺陷（var声明的变量有变量提升）
二、解构赋值
解构，简单来说就是：左边一种结构，右边一种结构，对应一一赋值。
1.数组解构赋值
{
let a,b,rest
[a,b] = [1,2]
console.log(a,b)
}
{
let a,b,rest
[a,b,...rest] = [1,2,3,4,5,6]
console.log(a,b,rest)
}
2.对象解构赋值
{
let a,b
({a,b} = {a:1,b:2})
console.log(a,b)
}
简化变量交换
{
let a = 1;
let b = 2;
[a,b]=[b,a];
console.log(a,b)
}
三、正则拓展
1.构造函数发生变化
{
// ES5两种构造方法
let regex = new RegExp('xyz', 'i')
let regex2 = new RegExp(/xyz/i)
console.log(regex.test('xyz123'),regex2.test('xyz123'));
//ES6
let regex3 = new RegExp(/xyz/ig, 'i')
}
2.正则方法的拓展
{
//1。 y修饰符
let s = 'bbbb_bbb_bb_b';
var a1 = /b+/g;
var a2 = /b+/y;
console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"]
console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null
// g从匹配之后的任意位置匹配都算
// y从匹配之后的下一个位置之后匹配
console.log(a1.sticky, a2.sticky); //表示是否开启了粘连模式
}
{
//2。 u修饰符
console.log('u修饰符',/^\uD83D/.test('\uD83D\uDC2A')); // true
console.log('u修饰符',/^\uD83D/u.test('\uD83D\uDC2A')); // false
// 大括号表示Unicode字符，只有加上u才能识别
// 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符。
// 大于两个字节要加上u去识别，否则会报错
console.log('量词',/a{2}/.test('aa')); // true
console.log('量词',/a{2}/u.test('aa')); // true
console.log('量词',/??{2}/.test('????')); // false
console.log('量词',/??{2}/u.test('????')); // true
}
四、字符串拓展
1.Unicode表示法
可处理两个字节的字符
{
console.log('a',`\u0061`);
// 大于两个字节（0xFFFF）
console.log('s',`\u20BB7`);
// 使用大括号包起来
console.log('s',`\u{20BB7}`);
}
2.字符串遍历器（ for of）
{
let str='\u{20bb7}abc';
for(let i=0;i<str.length;i++){
console.log('es5',str[i]);
}
for(let code of str){
console.log('es6',code);
}
}
3.模版字符串
{
let name="list";
let info="hello world";
let m=`i am ${name},${info}`;
console.log(m);
}
4.标签模版
应对场景：1.xmls攻击；2.多语言
{
let user={
name:'list',
info:'hello world'
};
console.log(abc`i am ${user.name},${user.info}`);
function abc(s,v1,v2){
console.log(s,v1,v2);
return s+v1+v2
}
}
{
console.log(String.raw`Hi\n${1+2}`);
console.log(`Hi\n${1+2}`);
}
五、数值扩展
常用的几个新增方法，判断数据是否溢出；取整；新增的几个数学方法
{
// 2^53~-2^53 数字的上限 边界
console.log(Number.MAX_SAFE_INTEGER,Number.MIN_SAFE_INTEGER);
// 判断数字是否在有效范围Number.isSafeInteger()
// 保证参数传入是数字
console.log('10',Number.isSafeInteger(10));
console.log('a',Number.isSafeInteger('a'));
}
{
// 返回一个小数的整数部分
console.log(4.1,Math.trunc(4.1));
console.log(4.9,Math.trunc(4.9));
}
六、数组扩展
1.Array.from
{
// 伪数字 集合转换为数组
let p =document.querySelectorAll('p')
let pArr = Array.from(p)
pArr.forEach(function(item){
console.log(item.textContent)
})
// 类似map的映射关系
console.log(Array.from([1,3,5],function(item){
return item *2
}))
}
2.Array.of
{
// 一组一样的数据类型，转换为数组
let arr = Array.of(3,4,7,9)
console.log(arr)
}
3.copyWithin
{
// 起始替换位置，读取数据位置，截止位置
console.log([1, 2, 3, 4, 5, 6, 7, 8, 9].copyWithin(0,2,5));
// [3, 4, 5, 4, 5, 6, 7, 8, 9]
}
4.find/findIndex
{
// 只找到第一个满足条件的
console.log([1,2,3,4,5,6].find(function(item){return item>3}));
console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));
}
5.fill
{
// 填充数组
console.log('fill-7',[1,'a',undefined].fill(7));
// 1,3表示起始和截止位置
console.log('fill,pos',['a','b','c','d'].fill(7,1,3));
}
6.entries/keys/values
{
// 返回下标集合
for(let index of ['1','c','ks'].keys()){
console.log('keys',index);
}
// 不使用兼容 浏览器会报错（现在兼容了）
for(let value of ['1','c','ks'].values()){
console.log('values',value);
}
for(let [index,value] of ['1','c','ks'].entries()){
console.log('values',index,value);
}
}
7.inludes
// 寻找满足条件的元素
{
console.log('number',[1,2,NaN].includes(1));
console.log('number',[1,2,NaN].includes(NaN));
}
七、函数扩展
1.参数默认值
{
function test(x, y = 'hello', z='word'){
console.log('默认值',x,y,z);
}
test('hello');
test('hello','hi');
// 默认值后面不能有没有默认值的变量
}
2.rest参数
类似ES5的arguments
{
// 不确定有多少个参数，把参数转换为数组
// rest参数之后不能带有其他参数了
function test3(...arg){
for(let v of arg){
console.log('rest',v);
}
}
test3(1,2,3,4,'a');
}
3.扩展运算符
{
console.log(...[1,2,4]);
console.log('a',...[1,2,4]);
}
4.箭头函数
箭头函数替代了以前需要显式的声明一个变量保存this的操作，使得代码更加的简洁
箭头函数没有自己this，它的this是词法的，引用的是上下文的this，即在你写这行代码的时候就箭头函数的this就已经和外层执行上下文的this绑定了
{
// 箭头函数
let arrow = v => v*2;
let arrow2 = () => 5;
console.log('arrow',arrow(3));
console.log(arrow2());
}
5.尾调用
提升性能，做递归、嵌套别的函数，用尾调用的形式
{
// 尾调用 函数的最后一句话是不是函数？
function tail(x){
console.log('tail',x);
}
function fx(x){
return tail(x)
}
fx(123)
}
6.this绑定
箭头函数中this的指向，同ES5有区别。ES5指函数被调用时的对象所在，箭头函数为定义时所在
八、对象拓展
1.简介表示法
ES6允许当对象的属性和值相同时，省略属性名;ES6允许当一个对象的属性的值是一个函数（即是一个方法），可以使用简写的形式
{
// 简洁表示法
let o=1;
let k=2;
let es5={
o:o,
k:k
};
let es6={
o,
k
};
console.log(es5,es6);
let es5_method={
hello:function(){
console.log('hello');
}
};
let es6_method={
hello(){
console.log('hello');
}
};
console.log(es5_method.hello(),es6_method.hello());
}
2.属性表达式
{
// 属性表达式
let a='b';
let es5_obj={
a:'c',
b:'c'
};
let es6_obj={
[a]:'c'
}
console.log(es5_obj,es6_obj);
}
3.扩展运算符
{
// 扩展运算符
let a={a:'test',b:'kill'};
a ={
...a,
c:'ddd',d:'ccc'
}
console.log(a)
}
4.Object新增方法
Object.is:判断是否相等,等价于 ===
{
console.log('字符串',Object.is('abc','abc'),'abc'==='abc');
}
Object.assign:浅拷贝
{
console.log('拷贝',Object.assign({a:'a'},{b:'b'}));
}
Object.entries:遍历对象
{
let test={k:123,o:456};
for(let [key,value] of Object.entries(test)){
console.log([key,value]);
}
}
