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]
複製代碼