ES6-数组扩展

• 1. Array.from()
  • 参数分析
  • 操作对象
    • 类数组对象
    • 可迭代对象
• 2. Array.of()
• 3. copyWithin()
• 4. find() 和 findIndex()
• 5. fill()
• 6. for … of循环
• 7. includes()
• 8. 数组合并的几种方式
  • for循环 + push
  • concat()
  • push.apply()
  • push + …(拓展运算符)
  • …(拓展运算符)

1. Array.from()

将一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

参数分析

• Array.from(arrayLike[, mapFn[, thisArg]])
• arrayLike : 被转换的对象
• mapFn : 如果指定了该参数, 新数组中的每个元素会执行该回调函数
• thisArg : 执行回调函数 mapFn 时 this 对象

操作对象

类数组对象

在对类数组进行转换的时候, 不会忽略空位, 会将其转换为undefined
对于无法获取索引序号(0, 1, 2)的类数组, 无法进行转换

let obj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}
let obj1 = {
    1: 2,
    2: 3,
    length: 3    
}
let obj2 = {
    a: 1,
    b: 2,
    length: 2
}
// 原生的转换方法
console.log(Array.prototype.slice.call(obj)) // success [1, 2, 3]
console.log(Array.prototype.slice.call(obj1) // success [empty, 2, 3]
console.log(Array.prototype.slice.call(obj2) // success [empty, empty]

// ES6的新方法
console.log(Array.from(obj)) // success [1, 2, 3]
console.log(Array.from(obj1)) // success [undefined, 2, 3]
console.log(Array.from(obj2)) // success [undefined, undefined]

可迭代对象

可迭代对象指的是部署了Iterator接口的对象, 比如:Set,Map,Array,String

// string字符串
let str = 'foo'
console.log(Array.from(str)) // success ['f', 'o', 'o']

// map对象
let map = new Map([['a', 1], ['b', 2], ['c', 3]])
let map1 = new Map()
                .set('a', 1)
                .set('b', 2)
                .set('c', 3)
console.log(Array.from(map)) // success [['a', 1], ['b', 2], ['c', 3]]
console.log(Array.from(map1)) // success [['a', 1], ['b', 2], ['c', 3]]

// set对象 默认去重
let set = new Set(['foo', 'bar', 'baz', 'foo']);
console.log(...set) // success "foo", "bar", "baz"
console.log(Array.from(set))// success [ "foo", "bar", "baz" ]

// array数组 浅拷贝
let arr = [1, 2, 3, 4, 5, {a: 1}]
let newArr = Array.from(arr)
console.log(newArr) // success [1, 2, 3, 4, 5, {a: 1}]
newArr[5].a = 2
console.log(arr, newArr) // success [1, 2, 3, 4, 5, {a: 2}] * 2

2. Array.of()

将一组值转换为数组,没有参数就返回一个空数组

let arr = Array.of() // success []
let arr1 = Array.of(1, 2, {a: 1}) // success [1, 2, {a: 1}] 

弥补new Array()不能创建一个长度为1的数组并为其赋值

let arr = new Array() // success []
let arr1 = new Array(1) // success [empty] 一个参数表示 创建n个空位empty的数组
let arr2 = new Array(1, 2, 3) // success [1, 2, 3] 多个参数表示 创建由参数组成的数组

3. copyWithin()

指定位置的成员浅复制到其他位置(覆盖)修改数组,不会循环覆盖,数据多出来不会覆盖到前面

• copyWithin(target, [start], [end])
• target: 开始替换数据的位置
• start: 开始读取数据的位置 默认为0 负数表示从末尾开始计算
• end: 结束读取数据的位置(不包括) 默认为数组的长度 负数表示从末尾开始计算
• 注意:start 一定要小于 end(从左往右的顺序), 负数情况下也是; 否则不生效 数组不会发生任何变化

// 一个参数 指定替换位置
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr.copyWithin(3)) // [1, 2, 3, 1, 2, 3]

// 两个参数 指定替换位置和开始读取位置
let arr1 = [1, 2, 3, 4, 5, 6]
console.log(arr1.copyWithin(0, 4)) // [5, 6, 3, 4, 5, 6]

// 三个参数 指定替换位置 开始读取位置 结束读取位置
let arr2 = [1, 2, 3, 4, 5, 6]
console.log(arr2.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5, 6]

// start 大于 end 函数不生效
let arr3 = [1, 2, 3, 4, 5, 6]
console.log(arr3.copyWithin(0, 5, 3)) // [1, 2, 3, 4, 5, 6]

// start 和 end 为负数的情况
let arr4 = [1, 2, 3, 4, 5, 6]
console.log(arr4.copyWithin(-3, -2, -1)); // [1, 2, 3, 5, 5, 6]

// 浅拷贝
let arr5 = [1, 2, 3, 4, 5, {a: 1}]
let newArr5 = (arr5.copyWidthin(0, 5)) // [{a: 1}, 2, 3, 5, 5, {a: 1}]
arr5[5].a = 2
console.log(arr5, newArr5) // [{a: 1}, 2, 3, 5, 5, {a: 1}] * 2

// 类数组调用
// 拷贝的时候 空位数据都需要算上 但是最后可以不用显示
let arrayLike = {length: 8, 6: 10}
console.log([].copyWithin.call(arrayLike, 1, 3))//{"4":10,"6":10,"length":8}

4. find() 和 findIndex()

find()找出符合条件的第一个数组成员, 找到的话return匹配的成员, 找不到返回undefined
findInedx()找出符合条件的第一个数组成员的下标, 找到的话return匹配的成员下标, 找不到返回-1

let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 3) // 4
arr.find(item => item > 8) // undefined
arr.findIndex(item => item > 3) // 3
arr.findIndex(item => item > 8) // -1

5. fill()

使用定值, 填充数组, 会改变数组的值, 可以配合new Array()在初始化的时候填充相同的值

• arr.fill(num,[start],[end])
• num 表示需要填充的值
• start 表示开始
• 位置的下标
• end 表示结束位置的下标(闭区间, 取不到)
• 注意事项以及start和end负数形式的函数 与copyWithin一致

// 创建数据 进行初始化
let arr = new Array(5).fill(true)
console.log(arr) //  [true, true, true, true, true]

// start 和 end 为正数
let arr1 = [1, 2, 3, 4, 5, 6]
console.log(arr1.fill(1, 3, 5)) // [1, 2, 3, 1, 1, 6]

// start 和 end 为负数
let arr2 = [1, 2, 3, 4, 5, 6]
console.log(arr2.fill(1, -5, -3)) // [true, true, true, true, true]

6. for … of循环

for...of语句创建一个循环来迭代可迭代的对象
允许遍历 Arrays(数组), 类数组, String(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等

// 迭代数组
let arr = ['a', 'b', 'c']
for(let index of arr) {
    console.log(index) // 'a', 'b', 'c'
}

// 迭代类数组
let fn = function() {
    for(arg of arguments) {
        console.log(arg)
    }
}
fn(1, 2, 3) // 1, 2, 3

// 迭代字符串
let str = 'foo'
for(let s of str) {
    console.log(s) // 'f' 'o' 'o'
}

// 迭代Map对象
let map = new Map([['a', 0], ['b', 1], ['c', 2]])
for(let m of map) {
    console.log(m) // ['a', 0], ['b', 1], ['c', 2]
}

// 迭代Set集合
let set = new Set(['a', 'b', 'c'])
for(let s of set) {
    console.log(s) // 'a', 'b', 'c'
}

7. includes()

返回一个布尔值 表示数组是否包含某个值; 类似于indexOf和findIndex的功能(返回匹配元素的下标 没有返回-1)
indexOf使用的是 ===(绝对等于) 匹配, 而includes使用的是同值相等

• arr.includes(valueToFind[, fromIndex])
• valueToFind 需要查找的值
• fromIndex 从第几位开始查找

var arr = [1, 2, '3', NAN];
arr.includes(2) // true
arr.indexOf(2) // 1
arr.includes(NaN) // true 同值相等
arr.indexOf(NaN) // -1 绝对等于

8. 数组合并的几种方式

for循环 + push

let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
for(let value of arr2) {
    arr.push(value)
}
console.log(arr) // success [1, 2, 3, 4, 5, 6]

concat()

let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
console.log(arr.concat(arr2)) // success [1, 2, 3, 4, 5, 6]

push.apply()

let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
arr.push.apply(arr, arr2)
console.log(arr) // success [1, 2, 3, 4, 5, 6]

push + …(拓展运算符)

let arr = [1, 2, 3]
let arr1 = [4, 5, 6]
arr.push(...arr1)
console.log(arr) // success [1, 2, 3, 4, 5, 6]

…(拓展运算符)

let arr = [1, 2, 3]
let arr1 = [4, 5, 6]
console.log([...arr, ...arr1]) // success [1, 2, 3, 4, 5, 6]