es6

ES6
基础内容
let
let的变量声明只在当前块级作用域内有效
let声明的变量不可以重复
不存在变量提升：var可以在声明一个变量前使用它，不会报错，但是let会
let有暂存死区：如果一个作用域里面有let，那么这一个区域就会直接变成一个死域，不会向外查询，这种情况下如果你console.log在let变量之前的话，就会报错
使用let和const声明的变量，不存在重新声明

小example：
生成十个按钮，每个按钮点击的时候弹出1-10

var i =0;
for(i=1;i<=10;i++){
    function(i){
        var btn=document.createElement(“button”);
        btn.innerText=i;
        btn.onclick=function(){
            alert(i)
        };
        document.body.appendchild(btn);
    })(i);
}

块级作用域：
1.直接大括号 ｛｝
2.if语句
3.for语句，但是设置循环变量是一个作用域，里面的又是另外一个域

const
const是指常量
1.变量可以在声明的时候不赋值，但是常量不可以
否则将会报错：Missing initializer in const declaration
2.与let类似
3.常量不可以改变除了为引用类型的时候
const只能保证指向的地址不变，不能保证指向的地址上的值不变

e.g. const xiaoming={
    age:14,
    name:’小明’
｝

xiaoming.age可以改
那怎么防止常量被引用的时候被改呢》
使用Object.freeze();

ES6之前怎么声明常量：

var BASE_COLOR=‘#ff000’;
Object.defineProperty();
e.g.
var CST={};
Object.defineProperty(‘CST’,’BASE_NAME’,{value:’小明’},writable:false});

但是目前这种还是可以通过CST.a来添加属性
那么如何控制使它无法添加属性呢？
Object.seal(CST);
但是它只能保证属性不被扩展

写一个常量的属性

Object.defineProperty(Object,’_freezePolyfill’,{value:function(obj){
    var i = 0;
    for(i in obj)
    {
        if(obj.hasOwnProperty(i)){
            Object.defineProperty(Object,i,{
                writable:false
            });
        }
    }
});

解构赋值
数组的解构赋值

const arr=[1,2,3,4];
let [a,b,c,d]=arr;

想对应，一一赋值
更复杂的匹配规则

const arr=[‘a’,’b’,[’c’,’d’,[‘e’,’f’,’g’,]]];

如何拿g？

const [ , , [ , , [ , , g]]]=arr;

只要保持结构一样，肯定可以拿到我们想要的值
扩展运算符

const arr1=[1,2,3]
const arr2=[‘a’,’b’];
const arr3=[‘zz’,1];
const arr4=[arr1,arr2,arr3];

如果想要把每个数组合并在一起，可以使用扩展运算符，在每一个数组前加三个点

const arr=[1,2,3,4];
const[a,b,…c]=arr;

带有扩展运算符的只能放在最后面

默认值

const arr=[1,undefined,undefined];
const [a,b,c,d]=arr;

当匹配到undefined的时候可以设置一个默认值
比如const[a,b=2,c=3,d=4]=arr;
只有undefined的时候才会取默认值

变换变量
let a=29;
let b=10;
let temp;
temp=a;
a=b;
b=temp;
[a,b]=[b,a]————这样就会简单很多了
接收多个函数返回值

function getUserInfo(id){
    return[
        true,
        {
            name;’小明’，
            gender:’女’,
            id=id
        }
        ‘请求成功’
    ];
};
const [status,data,msg]=getUserInfo(123);

对象的结构赋值：
对象的结构赋值

const obj={
    saber:’balbala’,
    archer:’卫生’
};
const{saber,archer1}=obj

archer读取不出来，对象的结构赋值，名字必须一样
对象不需要忽略某一项得到我们想要的，因为它是无序的
e.g.

const player={
    nickname:’感情的戏我没演技’，
    master:’东海龙王’,
    skill:[{
        skillName:’龙吟’，
        mp:’100’,
        time:6000
        },{
        skillName:’龙卷预计’，
        mp:’400’,
        time:3000
        },{
        skillName:’龙腾’，
        mp:’900’,
        time:600000
        }]
};

比如这种复杂的情况，想要读取skill里面的第一个对象内容的话，如何读取呢？
const {skill: [skill1]=player;
如果想要读取第一个skill里的nikename为龙卷预计呢？
const{skill:[skill1 ,{skillName} ] } = player;
如果想拿最后一个skillName呢？并不可以直接把skillName在此写在第三个对象当中，比如
const{skill:[skill1 ,{skillName} ，{skillName} ] } = player;
需要改名，正确的是：
const{skill:[skill1 ,{skillName} ，{skn: skillName} ] } = player;
结合扩展运算符

const obj={
    saber :’…’,
    walwal:’….’,
    balbal:’…’
};

const {saber,…oth}=obj;
这里面如果你打印oth的话，就会出现除了saber剩下的所有内容
如何对已经申明了的变量进行对象的解构赋指

let age;
const obj={
    name:’小明’；
    age:22
};
({obj} =obj );//不建议
let { age}=obj;
默认值
let girlfriend={
    name:’小红’，
    age:22,
};
let{ name, age =24, hobby = [‘xuexi’]} = girlfriend;
age还是22岁，因为它不是undefined
提取对象的属性
const{name,hobby:[hobby1]} ={
    name:’小红’;
    hobby:[‘学习’]
};

拿hobby1是学习
拿name是小红
但是hobby是拿不到的

如果想要拿到hobby的话要改成这样子

const{name,hobby:[hobby1]，hobby} ={
    name:’小红’;
    hobby:[‘学习’]
};

这样才可以打印出hobby是学习
使用对象传入乱序的函数参数

function AJAX({
    url,
    data,
    type=‘get’
}){
    console.log(type);
}
AJAX({
    url:’/getinfo’,
    data:{
           a:1
    },
});

根据属性名匹配，可以乱序
获取多个函数返回值

function getUserInfo(uid){
    return {
        status:true,
        data:{
            name:’小红’
        },
        msg:’请求成功’
    };
};
const{status,data,msg:message}=getUserInfo(123);

打印message会出现请求成功
字符串的结构赋值：

const str =‘I am the bone of my sword’;
cosnt[a,b,c,…..]=str;

默认值和对象的默认值的使用方式是一样的
分解字符串：

const [ …spStr1 ] =str;
const spStr = str.split(‘’);
const spStr3 = [ … str];

提取属性：
const{ length, split} = str;
数值和布尔值的解构赋值

const { valueOf }=1;
cosnt { toString } = false;

函数参数的结构赋值：
函数参数的结构赋值：

function swap([x,y]){
    return [y,x];
};
let arr = [1,2];
arr=swap(arr);

function Computer({
    cpu,
    memory,
    software= [‘ie6’],
    os=‘windows 3.5’
}) {
    console.log(…);
};
new Computer({
    memory: ‘128G’,
    cpu: ‘80286’
});

例子：自定义弹窗

字符串扩展
1.模版字符串的用法
‘’ // “”
模版字符串是用这个符号 ｀
区别：1.可以用$ { }这种方法代替＋
2.部分新方法

－padStart
{
    let str = ‘i’ ;
    let str1 = str.padStart(5, ‘mooc’);
    console.log(str1);
}

结果：mooci
－padend：只不过是反方向而已
－repeat
console.log(‘i’.repeat(10));
repeat不能带负数
但是比如说－0.888这种就会被当成0
－startsWith

{
     const str =‘ A promise is a promise’;
    console.log(str.startsWith(‘B’));
}

－endsWith
－includes

 有的话返回true
没有返回false

for－of
ES6之前遍历数组可以1.使用for循环2.转成数组之后遍历
转成数组后遍历：

    var oStr = Array.prototype.slice.call(str);
    var oStr = str.split(‘’);
    const oStr = [ …Str];
    const [ …oStr] = str;

有时候遍历是为了加密

最后可以用join方法拼成字符串 join(‘’);
如何用for－of遍历字符串呢？

for ( let word of str){
    console.log(word);
}

unicode表示法：
u：代表unicode
es6提供一种功能：在编码周围加上大括号，就可以显示emoji
为了统一所有的语言
.codePointAt(0).toString(16):可以得到字符串的码点
.at(index):根据下标取字符，chrome不支持
正则扩展：

const regexp1 = /^a/g;
const regexp2 = new RegExp( ‘^a’, ‘g’ );
const regexp3 = new RegExp(/^a/g);
u,y修饰符
u：unicode，匹配unicode
y：粘性修饰符，相当于满足条件的必须要连着
数值扩展：
－0o octonary
－0b binary
－Number.parseInt(1.23)
－Number.parseFloat(1.23);
－isFinite
－.isSafeInteger()是不是在js可以的范围内
Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER

－幂运算
**
代表次方
从后往前运算
函数的扩展
1.默认参数
－function add(a,b=999){
}
999就是b的默认值
但是这种情况有一种不可
比如（c，d=c+2)不可
－function People({name ,age =38 }= { }{

console.log(name,age);

}
people();
打印出来的只有age，只会保留有默认值的
但可以在后面的大括号里显示，那个是可以的
2.剩余参数
function op(type,…nums){
}
op(‘sum’,1,23,454,3,67,234);
打印type的话是6
3.
.reduce(function( , ){ },0 ) ;}
回调函数
箭头函数：
1.const add1 =(a,b) =>a+b;
其实就是将a+b return回去
那如果多个加减法呢
那么就把所有的都用大括号扩起来
2.见哦图函数中是没有arguments这个参数的
只能通过扩展运算符来代替
箭头函数也没有自己的this方法
箭头函数的this是自身所处环境的this
对象扩展
1.简介表示法：

const getUserInfo = (id =1 ) => {
        const name=‘xiaoming’;
        const age= 10;
        return{
            name :name,
            age: age ,
            say: function(){
                console.log(this.name + this.age);
            }
        };
    };
    SE6中
    const getUserInfo = (id =1 ) => {
        const name=‘xiaoming’;
        const age= 10;
        return{
            name,
            age ,
            say(){
                console.log(this.name + this.age);
            }
        };
    };

2.属性名表达式
扩展运算符
复制对象时候是浅拷贝
合并对象：
保留靠后的
部分新的方法和属性：
1

.object.is()
object.is(+0,-0); //false
(+0===-0)//true
obejct.is(NaN,NaN)//true
(NaN === NaN) //false    

2.

Object.assign
const obj = {
    a:1,
    b:{
        c:2
    }
};
let newObj = Object.assign({a: 3 },obj );

3.Object.keys
4.Object.values
5.Object.entries
拿到数组和个数
6.__proto__属性
7.Object.setPrototypeof
修改对象原型
8.Object.getPrototypeof
9.super访问到对象的原型
可以访问到原型对象上的属性和方法
不可以用箭头函数
只有对象的简写方式才可以访问
数组扩展

1.Array.from();
const obj = {
    0:1,
    1: ‘dfsa’,
    2: ‘false’ ,
    length:2,
};
console.log(Array.from(obj));

只会打印前两个
2

.Array.of
e.g.
console.log(Array.of(1,2,’123’,false));

3.

let arr = new Array(10).fill(0);
new一个array的长度,每个长度都为0

还可以指定范围
比如new Array(10).fill (0,0,3);
只是说从0到3的这个位置设置为0
4.Array.includes
includes的打印值是boolean
5.keys
const arr = [1,2,3,444];
console.log(arr.keys());
这是一个迭代器接口
for(let i of arr.keys()){

console.log(i);

}
keys出现的是下标
6.values
for( let v of arr.values()) {
console.log(v);
}
7.entries
同时拿到keys和values
生成数组，第一个是下标，第二个是值
8.find方法
根据提供的条件，条件其实就是一个回调函数，按顺序遍历数组，当回调返回true的时候，就返回当前遍历到的值
const res = [1,7,6,3].find (function (value,index,arr){
//我们想要的满足条件的东西，返回value的值
});
9.findIndex
返回下标
const res = [1,7,6,3].findIndex(( value,index,arr) => value % 2 === 0);
indexOf不可以判断NaN
但是findIndex可以用Number.isNaN(value)来判断
生成器函数

const arr = […g()];
new Set 去重复