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

后续继续更新…