你不知道的JS實踐應用（一）

引文：本文是從工做實踐中積累而來，主要囊括三個方面：
1.業務中難度比較大的需求點，
2.比較容易混淆的知識點
3.更簡潔易懂的書寫方式(但有可能會犧牲一點性能)

建議閱讀這篇文章以前，能夠先本身回答一下

問題1：如何找到兩個數組的交集，差集, 並集（找到兩個數組的重合項和差別項）

const a = [1,2,3],
const b = [2,3,4]

// a和b的交集應該是：[2,3]
// a和b的差集應該是：a:[1] ,b:[4]

第一種解答： es6 Set
const aSet = new Set(a)
const bSet = new Set(b)

// 交集
const intersection= new Set([...a].filter(x => bSet.has(x)))
// 差集
const aTobDifference = new Set([...a].filter(x => !bSet.has(x)))  // a:[1]
const bToaDifference = new Set([...b].filter(x => !aSet.has(x))) // b: [4]

const difference = [...new Set([...a, ...b].filter(x => (!bSet.has(x)) || !aSet.has(x)))]  // [1, 4]
//並集
new Set([...a, ...b]);


第二種解答： es7 includes

// 交集
const intersection = a.filter(x => b.includes(x));
// 差集
const difference_a = a.concat(b).filter(x => !b.includes(x)) // [1]
const differenc_b = a.concat(b).filter(x => !a.includes(x)) // [4]

const different = a.concat(b).filter(x => !a.includes(x) || !b.includes(x)) // [1,4]

第三種：雙重循環方法：兩個for循環交替，不優雅

問題2: 如何對一個數組進行深拷貝

1.對於非引用數組（常見的是非對象數組），好比[1,2,3], ['a','b','c'] ,[false,true,true]這種

解答：

const a = ['a','b','c']
var copy_a = a.map(item => item) // map
var copy_a = [...a] // ...拓展符

1. 對於對象數組，以上方法，所有沒用！

解答：用JSON.parse(JSON.stringfiy(a))的方式（a爲被拷貝對象）

const a = [{key: 'a',value: 1},{key: 'b', value: 2}];
const copy_a = JSON.parse(JSON.stringfiy(a))
copy_a[0].key = 'c'
console.log(copy_a[0].key) // 'c'
console.log(a[0].key) // 'a'

// 用map舉反例
const map_a = a.map(item => item);
map_a[0].key = 'd'
console.log(map_a[0].key) // 'd'
console.log(a[0].key) // 'd'

問題3: 兩個變量快速互換值

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

var obj_a = {key: 1};
var obj_b ={key: 2};
[obj_a,obj_b] = [obj_b, obj_a]
console.log(obj_a) // {key: 2}
console.log(obj_b) // {key: 1}

問題4: vue中，data，computed，watch，created,mounted執行的前後順序是什麼？
解答：
data --> watch(with immediate: true,若是沒有，則在初始化不執行) --> created --> computed(從下往上執行) --> mounted

問題5: vue中如何監控對象數組中某一字段

方法1:
在watch中開啓 deep: true
在watch中的先後變化的對象進行對比，若是是目標字段發生變化，則作相應的操做（具體代碼具體看啦）

方法2:

vm.$watch(attribute, (newValue, oldValue) => {
    //do something...
})

好比：

data() {
   arr:[{a:1}, {a:2}]
},
created() {
    this.arr.forEach((item,index) => {
        this.$watch(`arr[${index}].a`, 
        (newValue, oldValue) => {
            //do something...
        })
    })
    // 若是數組是動態變化的，能夠在watch中加上以上代碼
}