有关一些数组和对象方法的比较和总结

最近搬砖的时候总觉得自己对一些数组和对象的方法了解不够透彻，所以连着一些lodash的方法放在一起做个比较和总结

Array

元素的添加与删除

▶ posh & pop 数组的栈方法，在数组的末端增加和删除一个元素

1
2
3

let a = [1, 2, 3]
a.posh(4) // [1, 2, 3, 4]
a.pop() // [1, 2, 3]

▶ shift & unshift 数组的队列方法，在数组的第一个位置增加和删除一个元素

1
2
3

let a = [1, 2, 3]
a.shift(0) // [0, 1, 2, 3]
a.unshift() // [1, 2, 3]

▶ splice 用于删除原数组的一部分元素，可以在被删除的位置加入新元素，会改变原数组

1
2
3

let a = [1, 2, 3, 4]
a.splice(2, 3, 5) // [3, 4]
a // [1, 2, 5]

数组的分割与合并

▶ slice 用于提取数组的某个部分，参数是开始位置与结束位置

let a = [1, 2, 3, 4]
a.slice() // 参数为空时相当于复制数组 [1, 2, 3, 4]
a.slice(1) // 只有一个参数时默认提取到最后一个 [2, 3, 4]
a.slice(1, 3) // 结束位置的那个元素并不包括 [2, 3]
a.slice(-2, -1) // 参数为负数时会取倒数第n个元素 [3]
// 正数从0开始而倒数从1开始

▶ concat 用于多个数组的合并，返回新数组，不会改变原数组；同时也可以用于对象的合并。

let a = [1, [2]]
let b = [3, [4]]
a.concat(b) // [1, [2], 3, [4]]

// 在ES6中等同于[..a,..b]

排序

▶ sort 对元素进行排序，会改变原数组

1 2	let a = [1, 3, 2, 4] a.sort() // [1, 2, 3, 4]

▶ reverse 颠倒元素的顺序，会改变原数组

1 2	let a = [3, 2, 1, 4] a.reverse() // [4, 1, 2, 3]

遍历

▶ forEach 遍历，参数分别是当前元素、当前位置和整个数组

[1, 2, 3].forEach((item, index, array) => {
  console.log('[' + index + '] = ' + item)
})
// [0] = 1
// [1] = 2
// [2] = 3

▶ map 遍历，参数分别是当前元素、当前位置和整个数组

[1, 2, 3].map((item, index, array) => {
  return item * index
})
// [0, 2, 6]

▶ filter 过滤数据，遍历数据查找符合输入函数条件的元素，返回一个新的数组

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

▶ some & every 断言，判断数组的每个元素是否符合某条件，返回布尔值

[1, 2, 3, 4].some((item, index, array) => {
  return item >= 3
})
// true
[1, 2, 3, 4].every((item, index, array) => {
  return item >= 3
})
// false

▶ reduce & reduceRight 接受函数作为累加器，让每个值最终合成一个值

[1, 2, 3].reduce((acc, cur, idx, src) => {
  return acc + cur
})
// 6
// reduce(callback, initialValue) 可设置acc第一次计算的默认值，不设置的话是数组第一个元素

查找元素

▶ indexOf 查找某元素的索引，不存在返回-1

1	[1, 3, 5].indexOf(5) // 2

▶ find & findIndex 查找满足条件的元素，返回第一个符合条件的元素，未找到返回undefined，findIndex返回的是索引

[1, 3, 5].find((item, index, array) => {
  return item > 2
})
// 3

▶ includes 判断当前数组是否包含某指定的值，返回布尔值

1	['a', 'b', 'c'].includes('a') // true

字符串相关

▶ join 输入指定分隔符将数组拼成一个字符串

1	['a', 'b', 'c'].join(',') // a,b,c

▶ toString 将数组转换为字符串，间隔符为逗号

1	['a', 'b', 'c'].toString() // a,b,c

其他

▶ from 从一个类似数组或可迭代对象中创建一个新的数组实例（ES6）

Array.from([1, 2, 3], x => x + x) // [2, 4, 6]

// 合并数组并去重
function combine () {
  let arr = [].concat.apply([], arguments)
  // new Set为ES6的新数据结构，类似于数组，但它的成员是唯一的
  return Array.from(new Set(arr))
}

combine([1, 2, 2], [2, 3, 3]) // [1, 2, 3]

▶ copyWithin 将当前数组内部制定位置的成员复制到其他位置，返回当前新数组，原数组改变。接收三个参数【从该位置开始替换|从该位置开始读取数据|到该位置停止读取数据】（ES6）

1	[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]

▶ fill 用给定的值填充一个数组（ES6）

1	['a', 'b', 'c'].fill(7) // [7, 7, 7]

Objcet

▶ Object.assign 合并对象，合并时含有相同属性则后者覆盖前者，会改变目标对象

1 2	Object.assign({a: 1, b: 2}, {b: 3, c: 4}) // {a: 1, b: 3, c: 4}

▶ Object.is 用来判断两个值是否是同一个值

Object.is('haorooms', 'haorooms');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

▶ Object.keys 回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in循环遍历该对象时返回的顺序一致

1 2	let obj = {a: 1, b: 2} Object.keys(obj) // ['a', 'b']

Lodash

由于lodash的方法实在是太多了，只提一下最最最常用的merge，用于两个对象的合并，可以实现深拷贝，但是在合并数组的时候有一个坑

let a = {
  name: 'xm',
  age: 18,
  tag: ['smart', 'happy']
}
let b = {
  form: 'china',
  tag: ['smart']
}
lodash.merge(a, b)
//{
//  name: 'xm',
//  age: 18,
//  tag: ['smart', 'happy'],
//  from: 'china'
//}

由于是深拷贝，合并时数组会把两个对象的数组合并到一起，区别于Object.assign()，但是有的时候确实必须用深拷贝，又要去后一个数组覆盖目标数组，那么在合并之前就必须先移除掉目标对象中的这个属性

lodash.merge(lodash.omit(a, ['tag']), b)
//{
//  name: 'xm',
//  age: 18,
//  tag: ['smart'],
//  from: 'china'
//}