几个值得学习的JS实践技巧

说明

这篇文章是一个好朋友写的文章，经授权转载过来。原文地址为：

https://segmentfault.com/a/1190000021003961

正文

本文是从工作实践中积累而来，主要囊括三个方面：

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 interp= 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 interp = 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]

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中加上以上代码
}

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...

• 欢迎关注「前端Q」,认真学前端，做个有专业的技术人...

在看点这里