乐趣区

你不知道的JS实践应用一

jiezi

引文：本文是从工作实践中积累而来，主要囊括三个方面：
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 中加上以上代码
}
退出移动版