ES6对于数组的扩展

做~自己de王妃 提交于 2020-11-12 17:54:40

扩展运算符(...),用于将数组转化为逗号分隔的参数序列。

...实现数组的拷贝:

数组是一维数组时,扩展运算符可以深拷贝一个数组(对象同理):

let arr = [1, 2, 3, 4, 5, 6];
let arr1 = [...arr];

arr == arr1  // false

当数组为多维时,数组中的数组变成浅拷贝(对象同理):

let arr = [1, 2, 3, 4, 5, 6, [1, 2, 3]];
let arr1 = [...arr];
arr1.push(7);
arr1[arr1.length - 2][0] = 100;
console.log(arr); //[1, 2, 3, 4, 5, 6,[100, 2, 3]]
console.log(arr1); //[1, 2, 3, 4, 5, 6, [100, 2, 3],7]

合并数组:

[...arr,...arr2,...arr3]
// 结合解构赋值,生成剩余数组 -- 扩展运算符只能置于参数最后
let [one,...rest] = [1,2,3,4,5]; one // 1 rest // [2,3,4,5]
// 扩展字符串成数组

[...'babe']   // ["b", "a", "b", "e"]
// 可以把类数组对象转换为真正的数组

function convert2Arr(){
    return [...arguments];
}
        
let result = convert2Arr(1,2,3,4,5);
result // [1,2,3,4,5]

Array.from()

用于将类数组对象、可遍历的对象转为真正的数组

// 类数组对象
let obj = {
    0: 'hello',
    1: 'world',
    4: 'outof bounds data',
    length: 3 
}

Array.from(obj);   // ["hello", "world", undefined]
// 根据属性名对应到数组的index, 超过length部分舍弃。没有对应的属性,置为undefined
// 注意:
    // Array.from()是一个很不严谨的角色,只要对象含有length属性,且值为正整数就能转,不保证转出来的东西质量是否符合要求。
    Array.from({user:'babe',length:5})
    // [undefined, undefined, undefined, undefined, undefined]
        
    // Array.from()可接收第二个参数,用于对数组的每一项进行处理并返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>{x*x})
    // [undefined, undefined, undefined]  --切记处理函数中一定要返回
        
    // Array.from()还可接收第三个参数,这样在处理函数中就可以使用传进去的对象域中的值
    let that = {
        user:'babe'
    }
    let obj = {
        0:'babe',
        1:'zhangsan',
        2:'lisi',
        length:3
    }
    let result = Array.from(obj,(user) =>{
        if(user == that.user){
            return user;
        }

        return 0;
    },that);
    result   // ["babe", 0, 0]

 Array.of()

 用于将一组值转换为数组,存在的意义是替代以构造函数的形式创建数组,修复数组创建因参数不一致导致表现形式不同的伪bug

// 以构造函数的形式创建数组

new Array();
new Array(size);   // 参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
new Array(element0, element1, ..., elementn);   // 参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

以下是对比:

// 原始方式
new Array()   // []
new Array(2)   // [empty × 2]
new Array(1,2,3,4,5)   // [1, 2, 3, 4, 5]

// 先进改良方式
Array.of();   // []
Array.of(2);   // [2]
Array.of(1,2,3,4,5);   // [1, 2, 3, 4, 5]

Array.find() 和 Array.findIndex()

find方法用于查找第一条符合要求的数据,找到返回该数据,否则返回undefined

findIndex则用于找到第一条符合要求的数组位置,找到返回index,否则返回-1

arr.find(function(currentValue, index, arr){}[, thisArg])
arr.findIndex(function(currentValue, index, arr){}[, thisArg])

// value(数组遍历到的当前值,必须)、index(当前下标,可选)、arr(当前数组,可选)
// thisArg是执行前边callback函数时作为this对象的值,如果这个参数为空, "undefined" 会传递给 "this" 值

 例子:

var arr = [1,2,7,8,34,2,15,8];
var v = arr.find((value,index,arr) => {
    return value > 10;
});
console.log('v='+v);   // v=34
var i = arr.findIndex((value,index,arr) => {
    return value > 3;
});
console.log('i='+i);   // i=2

Array.includes()

// 检查数组中是否包含某个元素
[1,2,NaN].includes(NaN)

Array.copyWithin()

array.copyWithin(target, start, end)
// target    必需。复制到指定目标索引位置。
// start    可选。元素复制的起始位置。
// end    可选。元素复制的终止位置 (默认为 array.length)。如果为负值,表示倒数。


[1,2,3,4,5,6,7].copyWithin(0,3,5)   
//  [4, 5, 3, 4, 5, 6, 7]
["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"].copyWithin(2, 0, 2)
//  ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

Array.entries()

Array.entries()返回一个数组的迭代对象,该对象包含数组的键值对数组对象。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();

console.log(iterator1.next().value);
// Array[0, "a"]
console.log(iterator1.next().value);
// Array[1, "b"]

Array.values()

Array.values()方法返回一个数组的迭代对象,该对象包含数组的每一项

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

// 以下两种任选一种
for (const value of iterator) {
  console.log(value);   // "a" "b" "c"
}
console.log(iterator.next().value);   // "a"

Array.keys()

Array.keys()返回一个包含数组中每个索引的迭代对象

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
// 以下两种任选一种
for (let key of iterator) {
  console.log(key);   // 0 1 2
}
console.log(iterator.next().value);   // 0

Array.fill()

Array.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

arr.fill(value, start, end)
// value:填充值,必选
// start:填充起始位置,可选,默认从0开始
// end:填充结束位置,可选, 

 

 

 

 

 

原文:

https://segmentfault.com/a/1190000014784362

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!