ES5，ES6常用方法及語法糖合輯

1.參數默認值

function multiply(a=5,b=1){
    return a*b;
}

multiply(1); //1
multiply(1,5); //5
multiply(,1); //error
multiply(undifined,1);//1

2.模板字符串

let age=1,name="張三";

//採用``定義模板字符串，利用${}引用變量/函數
say=`我叫${name},今年${age*5}歲了`;//"我叫張三,今年5歲了"

//雙重嵌套版本
`<ul>
    ${
        a.map(
            thisA=> `<div>${thisA}</div>`
        )
    }
</ul>`
//"<ul><div>999</div>,<div>998</div>,<div>997</div></ul>"

標籤模板字符串

let name="張三",age="十八歲";

//定義標籤函數
function highLight(strings,...argument){
    let str="";
    let newMap=argument.map(value=>{
         return value.big();
    });
    
    strings.forEach((value,i)=>{
        str+=`${value}${newMap[i]||""}`
    })
    return str;
}

//調用標籤模板字符串
document.body.innerHTML=highLight`${name}今年${age}了`

trim()去除前後空格

let aaa="         ??   "
aaa.trim(); //"??"
aaa.trimLeft();"         ??"
aaa.trimRight();"??   "

join()在數組中添加分隔符來返回字符串

let a=[1,2,3,4];
a.join;//"1,2,3,4"
a.join("/");// "1/2/3/4"
a.join("");// "1234"

在網頁上測試js生成的html

document.body.innerHTML="<h1>hello</h1>"

簡單的字符串校驗

const text="This is a text";

//查詢開頭和結尾是否爲某字符串
text.startsWith("This");//true
text.startsWith("this");//false(大小寫敏感)
text.endsWith("text");//true(敏感)
//查詢是否包含某字符串
text.includes("This");//true(敏感)
//查詢第n位之後是否包含某字符串
text.includes("This",10);//false

重複字符串

"哈".repeat(9);//"哈哈哈哈哈哈哈哈哈"

對象解構

//聲明Tom對象
const Tom={
    name:"Tom Jone",
    age:21,
    hobby:{
        first:"play",
        second:"sleep"
    }
}
//解構
let {name,age}=Tom;
console.log(name);//Tom Jone

//解構並重命名
let {first:f,second}=Tom.hobby;
console.log(f);//play

//解構並附默認值
let {first,second,third="其他就沒了"}=Tom.hobby;
console.log(third);//其他就沒了

//利用對象解構交換變量
[Tom.name,Tom.age]=[Tom.age,Tom.name]

數組解構

const num=[99,98,97,96,95];
//對象用{}，數組用[](數組解構同樣支持默認參數)
let [one,two]=num;
console.log(one);//99
console.log(two);//98
//跳過一些
let [,,three]=num;
console.log(three);//97
//剩餘參數
let [first,...other]=num;
console.log(other);//[ 98, 97, 96, 95 ]

set簡單用法

//Set是一種集合結構，其所存儲的值不能重複
let set=new Set();//創建
set.clear();//清空
set.add("666");//新增
set.add("777");
set.add("888");
set.delete("666");//刪除
set.has("666");//檢索
set.has("777");

//遍歷方法
for(item of set){
    console.log(item);
}

set去重

let a=[1,3,2,4,3,1];
let set=Array.from(new Set(a));

map簡單用法

//Map字典結構與Set類似，都不能存儲重複值，不同的是，Map存入的是鍵值對
let map=new Map();
map.set("name","張三");//增
map.set("age",18);
map.set("age","十八");//重複值會覆蓋前者

map.delete("age");//刪
map.has("name");//查詢
map.get("name");//獲得值

map.clear();//清空

//遍歷方法
for([a,b] of map){
    console.log(a,b);
}

promise對象

let promise=new Promise(function(resolve,reject){
    setTimeout(()=>{
        console.log("任務執行完成");
        resolve();
    },3000);
});
promise.then((success)=>{
  console.log("ok");
})

class關鍵字

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    say(){
        console.log("我的名字是"+this.name);
    }
}

利用class進行繼承

class Student extends Person{
    constructor(name,age,subject){
        super(name,age);
        this.subject=subject;
    }
    teach(){
        console.log("我學習"+this.subject)
    }
}

array.form方法

//將類數組轉化爲數組
let a=[1,3,2,4,3,1];
let set=Array.from(new Set(a));
//將字符串轉化爲數組
let str="hello world";
let newStr=Array.from(str);

擴展運算符（...）

let a=[1,2,3];
let b=[3,4,5];
//使用拓展運算符進行連接
console.log([...a,999,...b]);//[ 1, 2, 3, 999, 3, 4, 5 ]
//使用擴展運算符作爲參數

let attr=["name","age"];
array.push(...attr);

promise對象

//基本寫法
return Promise(function(resolve,reject){})
//取最先完成
Promise.race([promise1,promise2])//返回先完成的promise對象
//全部完成回調
Promise.all(promise1,promise2])//返回promise對象數組

可動態計算的屬性名

//直接使用[]拼接字符串或變量
let i='aaa',j='bbb';
let obj={
    [i+j]:999,
}
//打印obj爲{aaabbb:999}

導入導出模塊

//導出
export{
    varA,varB,funcA
};
//導入
import {varA,varB,funcA} from "xxx.js"