js高频操作

96 阅读2分钟

扁平化

1 ES6 中的 flat 方法

arr.flat([depth])

depth 表示深度,默认为1,Infinity 表示无论多少层都可以打开。

2 reduce

利用递归,遍历所有层级

const test = [1, [2, [3, [4, [5, [6, [7, [[[[[[8, ['hehe']]]]]]]]]]]]]];
function flatten (test) {
   return test.reduce((prev, curv) => {
      return pre.concat(Array.isArray(curv) ? fatten(curv) : curv);
   }, [])
}
const result = flatten(test);
console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'hehe']

3 扩展运算符

利用对数组进行每一个[]进行解构处理

function flatten(arr) { 
    while (arr.some(item => (Array.isArray(item)))) { 
       arr = [].concat(...arr); 
    } return arr; 
 } 
const result = flatten(testArray); console.log(result); // [ 1, 2, 3, 4, 5, 6, 7, 8, 'hehe'

深拷贝

说明:深拷贝和浅拷贝的区别在于前者是将一个对象从内存中拷贝出来,从堆中内存开辟一个新的空间存放,且修改新对象不会影响原对象。

1 JSON.parse(JSON.stringify())

注:这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则,因为这两者基于JSON.stringifyJSON.parse序列化和反序列化处理后,得到的正则就不再是正则(变为空对象),得到的函数就不再是函数(变为null)了。
如果json里面有时间对象,则序列化结果:时间对象=>字符串的形式;
如果json里有RegExpError对象,则序列化的结果将只得到空对象 RegExpError => {};
如果json里有NaNInfinity和-Infinity,则序列化的结果会变成null

2 lodash 的 _.cloneDeep 方法

let _ = require('lodash'); 
let obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; 
let obj2 = _.cloneDeep(obj1); 
console.log(obj1.b.f === obj2.b.f);// false

浅拷贝

1 Object.assign()

可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

2 loadash 的 clone 方法

let _ = require('lodash'); 
let obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; 
let obj2 = _.clone(obj1); 
console.log(obj1.b.f === obj2.b.f);// true

3 Array.prototype.concat() 和 Array.prototype.slice()

遍历

1 Array.map()

let a = [1,2,3];

let b = a.map(
   function(value){
      return value*value
   }
);
console.log(b); // [1, 4 ,9]

2 Array.filter()

let newArr = [1,2,3,4,5].filter(item =>{ 
if(item > 3) return item 
}) // => [4,5]

3 Array.forEach()

let arr1 = [
   {name:'鸣人',age:16},
   {name:'佐助',age:17}
];
let arr2 = [1,2,3];

arr1.forEach(item => { 
  item.age = item.age + 1}
);

//=> [{name:'鸣人',age:17},{name:'佐助',age:18}]

arr2.forEach(item => {
  item = item * 2}
)

// => [1,2,3]

arr1发生了改变,arr2没有任何改变。所以,可以粗暴得出结论:当值类型,则会改变数组;当数组中元素是值类型,forEach绝对不会改变数组。

4 Array.some()

检测数组中所有元素是否满足制定条件,满足返回true,否则false

5 Array.every()

检测数组中所有元素是否符合指定条件,符合返回true,否则false

6 Array.sort()

用于对数组的元素进行排序。

let arr1=[3,2,1]; arr1.sort() // [1, 2, 3]

let arr2=[40, 20, 100];
arr2.sort()                    // [100, 20, 40] ???

注:1. sort方法会改变原始数组;2. 不传参时,数组的项会被转为字符串再进行比较;