ES6编程风格整理

一. const优于let的几点，多用const

1. const能够提醒你们，不要被改变

2. const比较符合函数式编程，（在函数式编程里面，运算是不能改变值的，只能新建值，有利于分布式编程，由于值不变）

3. js编译器对const进行了优化，有利于程序的运行效率（本质的区别：编译器内部对其处理机制）

let a='22';
   a='11';
console.log(a);//11
    
let c=[];
    c.push('a');
console.log(c);//["a"]
复制代码

二. 对象的解构

数组

const s=['a','b','c'];
const [one,two,three]=s;
console.log(three);//c
复制代码

对象

function test(){
    return{r:1,o:2}
}
const result = test();
const {r,o}  =result;
//const {o,r} =result;
console.log(r);//1
复制代码

三 .字符串模板

const aaa ="hello";
const bbb = "world";
const ccc = `for ${aaa} ${bbb} bar`;
console.log(ccc);//for hello world bar
console.log(ccc.startsWith("for"));//true 以什么开头
console.log(ccc.endsWith("bar"));//true 以什么结尾
console.log(ccc.includes("or"));//true 包含
const ddd = txt `for ${aaa} ${bbb} bar`;
function txt(strs,...values){
    console.log(strs);//["for ", " ", " bar", raw: Array(3)]
    console.log(values);//["hello", "world"]
}
复制代码

四 .对象和数组

const aa = "您好啊";
const resulta =Array.from(aa);
console.log(resulta);//["您", "好", "啊"]
const testa=["水果","水",...aa];
console.log(testa);//["水果", "水", "您", "好", "啊"]
const k = "arr";
const testb ={
    k1:1,
    aa,
    testa,
    q(){
        console.log("企鹅")
    },
    [k+1]:1
}
console.log(testb);//{k1: 1, aa: "您好啊", testa: Array(5), q: ƒ, arr1: 1}
testb.q();//企鹅
复制代码

ps: 下面的两种写法，第一种不建议，建议按第二种写，当初期不知道要不要扩张，能够先写上

const ar={};
Object.assign(a,{x:3});
复制代码

const arb ={x:null};
arb.x=3;
console.log(arb);//{x: 3}
复制代码

判断

console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
复制代码

原型链

const eat = {getEat(){return "鸡腿"}}
const drink = {getDrink(){return "啤酒"}}
let sunday = Object.create(eat);
console.log(sunday.getEat());//鸡腿
console.log(Object.getPrototypeOf(sunday));//{getEat: ƒ}
Object.setPrototypeOf(sunday,drink);
console.log(sunday);//{}>__proto__:>getDrink:ƒ getDrink()+__proto__:Object
console.log(sunday.getDrink());//啤酒
let sundays = {
    __proto__:eat,
    getDrink(){
        return super.getDrink() + "可口可乐"
    }
}
sundays.__proto__=drink;
console.log(sundays.getDrink());//啤酒可口可乐
复制代码

五. 函数

const fn = function pp(argu){
}
console.log(fn.name);//pp
复制代码

箭头函数

(()=>{
    console.log("fn init")//fn init
})();
复制代码

同一个函数的两种写法，第二种为简写

const restles = [1,2,3].map(function(index){
    return index *3
})
console.log(restles);//[3, 6, 9]
复制代码

const restless = [1,2,3].map((index)=>index *3);
console.log(restless);//[3, 6, 9]
复制代码

函数的this指向

window.aas='30';
const aaar ={
    ll:40,
    ps:function(){
        const qqq ={
            ll : 50,
            ptest:()=>{
                console.log(this.ll)
            }
        }
        qqq.ptest();
    },
}
aaar.ps();//40??不懂
复制代码

其余

function testsss(aaaaa=1,{options=true}={}){
    console.log(aaaaa);//30
    console.log(options);//111
}
testsss(30,{options:111});
复制代码

function ssrx (...results){
    //替代了arguments，能够不要用了
    console.log(results)//[30, {…}]
}
ssrx(30,{options:111});
复制代码

六. 遍历

for in(返回的是数组的索引) 和 for of(返回的是数组的值)，PS:不支持json对象

const arr = ["a","b","c"];
const obj ={a:"1",b:"2",c:"3",};
for (let i in arr){
    console.log(i);//1 2 3
}
for (let v of arr){
    console.log(v);//a b c
}
for (let v of obj){
    console.log(v);//obj is not iterable 报错
}
复制代码

七. class 类,命名要大写+set+get+static

class Person{//父类
    constructor(age){
        this.age=age;
    }
    tell(){
        console.log(`小王的年龄是${this.age}`);
    }
}
const xiaowang = new Person(30);
console.log(xiaowang.age);//30
xiaowang.tell();//小王的年龄是30
class Man extends Person{//子类实现了继承了父类
    //想实现重载或重写的话，先调用父类的方法
    constructor(age){
        super(age);this.arr=[];
    }
    //重写tell方法
    tell(){
        //必需要先调一下，否则不支持多个参数的重载
        super.tell();
        console.log("hallo");
    }
    //get和set是不须要主动调用的，外面直接赋值就行
    set menu(data){this.arr.push(data);}
    get menu(){return this.arr;}
    //static
    static init(){
        console.log("static")
    }
}
const xiao= new Man(20);
console.log(xiao.age);//20
xiao.tell();//hallo
xiao.menu = 'get';
console.log(xiao.menu);//["get"]
Man.init();//static
复制代码

八. Set是一个集合 + Map(键值对，没有key)

let arrs = new Set("123");
arrs.add("0");
arrs.add("0");//一样的东西add进来是无论的，只add一个
arrs.delete("2");//删除
for(let data of arrs){
    console.log(data);//1 3 0
}
console.log(arrs);//Set(4) {"1", "2", "3", "0"}
console.log(arrs.size);//4
console.log(arrs.has("1"));//true
console.log(arrs.has("2"));//false
arrs.clear();//清除
console.log(arrs.size);//0
Map

let food = new Map();
let result = {},cook = function(){};//这些均可以做为一个key,也是map神奇的地方
food.set(result,'rr');
food.set(cook,'rrs');
console.log(food);//Map(2) {{…} => "rr", ƒ => "rrs"}
console.log(food.get(result));//rr
console.log(food.get(cook));//rrs
console.log(food.size);//2
food.delete(result);
console.log(food.size);//1
复制代码

九. 数组去重

const arre=[1,2,3,4,5,5,1];
const rest = [...new Set(arre)];
console.log(rest);//(5) [1, 2, 3, 4, 5]
复制代码