JS - 實用的小技巧（ES6的新特性）

解構實用技巧:

1.賦值

let [a, b, c] = [1, 2, 3];
console.log(a,b,c) //=> 1,2,3

//支持默認值 
let [a, b, c, d = 4] = [1, 2, 3];
console.log(a, b, c, d) //=> 1,2,3,4

2.字符串賦值

let [a, b, c] = "123";
console.log(a,b,c) //=> 1,2,3

3.交換變量

支持多個變量同時交換

let a = 5, b = 6;
[ a, b] = [ b, a];
console.log(a,b);//=> 6,5

4.對象解構賦值

let obj = {a: 1, b: 2};
let {a, b} = obj;
console.log(a,b);//=> a=1,b=2

//支持別名
let obj = {a: 1, b: 2};
let {a:aa, b} = obj;
console.log(aa,b);//=> aa=1,b=2

擴展運算符

擴展運算符：... 將數組用,拆開.

1.拷貝數組

注意：這裏是淺拷貝

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
//arr2是一個新數組，此時就算修改它的值也不會改變arr1的值
arr2[0] = 2;
console.log(arr1) //[1, 2, 3]
console.log(arr2) //[2, 2, 3]

2.拷貝對象

注意：這裏是淺拷貝

let obj = {
    name:"Bob",
    value:20
};
let obj1 = {...obj};
obj.value = 50
console.log(obj);//{name: "Bob", value: 50}
console.log(obj1);//{name: "Bob", value: 20}

3.函數傳參

let arr = [1,2,3,4,5,6];
console.log(...arr) //=> 1,2,3,4,5,6

4.查找數組最大最小值

let arr = [1,5,3,10,20]
let max = Math.max(...arr)
let min = Math.min(...arr)
console.log(max,min);//=> 20 , 1

5.合併數組/對象

//合併數組
let arr1 = [1,2,3],arr2 = [4,5]
let arr3 = [...arr1,...arr2]
console.log(...arr3);//=> 1, 2, 3, 4, 5

//合併對象
let obj1 = {
    name1: "Bob",
    value1: 20,
    num:5
};
let obj2 = {
    name2: "Bob2",
    value2: 24,
    num:10
};
let obj3 = { ...obj1, ...obj2 };
console.log(obj3);//{name1: "Bob", value1: 20, num: 10, name2: "Bob2", value2: 24}

6.結合解構賦值數組（也適用於對象）

注意：這裏的數組賦值只能放在最後一位。

let [first, ...lastArr] = [1, 2, 3, 4, 5];
console.log(first,lastArr);//first = 1 , lastArr = [2, 3, 4, 5]

//錯誤寫法：
let [...first, lastArr] = [1, 2, 3, 4, 5];

7.字符串拆分成數組

let arr = [..."123456"]
console.log(arr)// ["1", "2", "3", "4", "5", "6"]

8.利用Set去重

let arr = [1,5,3,10,20,10,20,5,25]
let newArr = [...new Set(arr)];
console.log(newArr) //[1, 5, 3, 10, 20, 25]

運算與轉換

1.小數轉整數 ~~

//類似 parseInt()
console.log(~~123.243)// 123

2.字符串轉Number +

//類似 Number()
console.log(+"123")// 123

2.冪運算 **

//類似 Math.pow(2,4)
console.log(2**4)// 16

字符串擴展

1.格式化

注意：這裏的字符串是用 ` ` 包裹起來的，變量用 ${} 括起來。

let name = "Bob"
console.log(`hello, ${name}`) //=> hello,Bob

//支持調用方法
function fn() {
    return "Hello World";
}
console.log(`this is ${fn()} !!!`) // this is Hello World !!!

//還支持運算表達式
let a = 1, b = 2;
console.log(`this is ${a + b} !!!`) // this is 4 !!!

2.遍歷字符串

for(let s of '123456'){
  console.log(s);
}

數組擴展

1.填充數組 fill()

適合用來初始化數組

let arr = new Array(5).fill(1)
console.log(arr);//[1, 1, 1, 1, 1]

2.轉換數組 from()

只要具有 Iterator 接口的數據結構都可以用Array.from轉爲數組。
如：Set, Map, 字符串, arguments等等。

//字符串
let arr = Array.from('123456')
console.log(arr);//["1", "2", "3", "4", "5", "6"]

//Set集合
let arr = Array.from(new Set([1,2,3,4,5,6]))
console.log(arr);//["1", "2", "3", "4", "5", "6"]

//arguments
function fun() {
    let arr = Array.from(arguments)
    console.log(arr);//["1", "2", "3", "4", "5", "6"]
}
fun(1,2,3,4,5,6)

3.map(映射)

返回一個計算之後的新數組;

let arr = [1,2,3,4].map((value,index,arr)=>{
    return value * 2
})
console.log(arr);//[2, 4, 6, 8]

4.forEach(遍歷)

遍歷數組

[1,2,3,4].forEach((value,index,arr)=>{
    console.log(value)
})

5.filter(過濾)

過濾出數組符合條件的項,返回新數組

let arr = [1, 2, 3, 4,5].filter((value, index, arr) => {
    return value > 3
})
console.log(arr);// [4, 5]

6.reduce(規約)

讓數組前項和後項做計算,並累計最終值

/**
prev: 上一次回調函數的返回值,或者初始值
currentValue: 當前正在處理的元素
currentIndex: 當前索引
initValue : 初始值
**/
let initValue = 0;
let result = [1,2,3].reduce((prev, currentValue, currentIndex, arr) => {
    return prev + currentValue
}, initValue)
console.log(result);//6

對象的擴展

1.簡潔寫法

let name = "Bob", ege = 18
let obj = { name, ege }
console.log(obj);// {name: "Bob", ege: 18}

2.支持 get set

熟悉java或者c#的都應該比較清楚他們的作用

let obj = {
    _num: 4,
    get num() {
        return this._num;
    },
    set num(value) {
        this._num = value;
    }
}
obj.num = 5;
console.log(obj.num)//5

後續繼續更新…