Array.form() 实用

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike 想要转换成数组的伪数组对象或可迭代对象；
• mapFn 在最后生成的数组上再执行一次 map 方法后再返回， 箭头函数： () => {}；
• thisArg 可选参数，执行回调函数 mapFn 时 this 对象，很少用。

1、类数组转换数组

const str = 'what'
const strArr = Array.from(str)
console.log(strArr) // ['w', 'h', 'a', 't']

2、生成指定范围数组:

let arr = Array.from(new Array(5), (v, i) => { return i + 1 })
或
let arr = Array.from({length: 5}, (v, i) => i + 1)
或
let str = '01234'
let arr = Array.from(str, (v, i) => i + 1)
// console.log(arr)
// [1, 2, 3, 4, 5]

3、数组拷贝
浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存(浅拷贝过来的数据只有第一层数据不是共享的，第二层乃至第三层的数据和源对象是共享的。)。

深拷贝：会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝：

const arr = [4, 5, 6]
let arrCopy = Array.from(arr)
console.log(arr === arrCopy)  // false
// es6浅拷贝
const res = [...arr]
console.log(arr === res)  // false

// 证明一个浅拷贝第一层数据不共享，第二层乃至第三层的数据和源对象是共享的。
// Object.keys() 返回对象所有key数组
// Object.values() 返回对象所有value数组
const obj = {
  name: '张三',
  phone: '123145',
  childNames: ['张思', '张武']
}
const objArr1 = Object.keys(obj).map(v => { return obj[v] })
const objArr2 = Array.from(objArr1)
// const objArr2 = Array.from(Object.values(obj))
objArr1[0] = '张恒'
objArr1[2][0] = '张海'
console.log(objArr1) // ['张恒', '123145', ['张海', '张武']]
console.log(objArr2) // ['张三', '123145', ['张海', '张武']]

嵌套数组拷贝：

let doubleArr = [[1, 2, 3], [q, w, e]]
function copyArr (val) {
  return Array.isArray(val) ? Array.from(val, copyArr) : val
}
let copyDoubleArr = copyArr(doubleArr)
console.log(copyDoubleArr === doubleArr) // false

4、初始化数组默认值、填充值，对象等

const res = Array.from(Array(3), () => 0)
或
const res = Array(3).fill(0)
// [0, 0, 0] 初始化默认值0

// 填充对象，两种方式的区别
const resA = Array.from(Array(3), () => ({}))
const resB = Array(3).fill({})
// [{}, {}, {}]
resA[0] === resA[1] // false
resB[0] === resB[1] // true
// Array.from 每个返回都执行() => ({}),使用不同空对象实例返回的新对象。
// fill()方法则使用相同的空对象实例创建。
// Array(3).fill().map(v => ({})) 等同于 Array.from(Array(3), () => ({}))

5、数组去重

function unique (arr) {
  return Array.from(new Set(arr))
}
unique([1, 1, 8, 5, 6, 2, 5, 2, 2, 8])

// es6最佳去重写法：
const res = [...new Set([1, 1, 8, 5, 6, 2, 5, 2, 2, 8])]
// [1, 8, 5, 6, 2]

new Set () 实用

ES6 新数据结构Set，特性： 所有元素都是唯一值，不存在重复。

1、去重

const arr = [1, 2, 3, 4, 3, 2, 1]
[...new Set(arr)] 
或
Array.from(new Set(arr))
// [1, 2, 3, 4]

// 字符串去重
[...new Set('qqwerr')] .join('')  // ‘qwer'

new Set('something you know') // ['something', 'you', 'know']
// 合并去重
new Set([...a, ...b])

2、取并集

const a = new Set([1, 2, 3])
const b = new Set([3, 4, 2])
const total= [...new Set([...a, ...b])]
// [1, 2, 3, 4]

3、取交集

const a = new Set([1, 2, 3])
const b = new Set([3, 4, 2])
const intersection = [ ...new Set([...a].filter(v => b.has(v)))]
// [2, 3]

4、取差集

const a = new Set([1, 2, 3])
const b = new Set([3, 4, 2])
const difference = [...new Set([...a].filter(v => !b.has(v)))]
// [1]