ES6 之 Array的方法与Array对象的方法

不苒
474 阅读3分钟

「这是我参与11月更文挑战的第 3 天，活动详情查看：2021最后一次更文挑战」

Array提供的方法

Array.from() 方法

Array.from()方法用于从一个类似数组或可迭代对象中创建一个新的数组实例。

示例代码如下：

var obj = {
    0:'张三',
    1:'李四',
    2:'王五',
    length:3
}
console.log(obj);

for (var i=0;i<obj.length;i++){
    console.log(obj[i]);
}
// ES5
console.log([].slice.call(obj));//[ '张三', '李四', '王五' ]
// ES6
console.log(Array.from(obj));//[ '张三', '李四', '王五' ]

// 扩展运算符 - 不能使用,需要先转换为数组，再展开
console.log(...Array.from(obj));//张三 李四 王五

function fn(){
    //arguments对象 - 用于接收所有的实参
    console.log(...arguments);//1 2 3
}
fn(1,2,3);

Array.of() 方法

Array.of() 方法用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

示例代码如下：

// Array.of()方法如果传递一个参数时，表示一个元素内容
console.log(Array.of(5));//[ 5]
console.log(Array.of(1,2,3))//[ 1, 2, 3 ]

// 函数和构造函数放式Array()、new Array()传入一个参数时，表示length
console.log(Array(5));//[ <5 empty items> ]
console.log(new Array(5));//[ <5 empty items> ]

// 创建空数组的4中方法
console.log(Array.of());
console.log(new Array());
console.log(Array());
console.log([]);

Array对象的方法

copyWithin() 方法

copyWithin()方法用于浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

arr.copyWithin(target[,start[,end]])
  • target ：0为基底的索引，复制序列到该位置。如果是负数，target将从末尾开始计算。
  • start ：0为基底的索引，开始复制元素的起始位置。如果是负数，start将从末尾开始计算。
  • end ：0为基底的索引，开始复制元素的结束位置。copyWithin()方法将会拷贝到该位置，但不包括 end 这个位置的元素。 如果是负数，end将从末尾开始计算。

示例代码如下：

let arr = [1,2,3,4,5];
/*
    copyWithin(target,start,end)方法
    * 作用 - 检索指定数组中从 start 到 end 区间的元素，复制到当前数组中指定索引值
    * 参数
           * target - 该参数的最大值等于当前数组的length属性值-1
           * start - 表示当前截取开始的索引值
                * 如果改参数省略，自动从数组的开始位置进行截取
           * end - 表示当前截取结束的索引值（不包含当前索引值的元素）
                * 如果当前参数值省略，自动截取到当前数组的最后
    * 注意：
        * 该方法不能改变数组的长度
        * 修改了原有数组
*/
// console.log(arr.copyWithin(3,0,4));
// console.log(arr.copyWithin(0,0));
console.log(arr.copyWithin(2));
console.log(arr);

find()与findIndex()方法

  • find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

    arr.find(callback[,thisArg])
    • callback : 在数组每一项上执行的函数，该函数接收三个参数。
      • element ：当前遍历到的元素。
      • index ： 当前遍历到的索引值。
      • array ： 数组本身。
    • thisArg ：可选，指定 callback 的 this 参数。

  • findIndex()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

    arr.findIndex(callback[,thisArg])
    • callback : 在数组每一项上执行的函数，该函数接收三个参数。
      • element ：当前遍历到的元素。
      • index ： 当前遍历到的索引值。
      • array ： 数组本身。
    • thisArg ：可选，指定 callback 的 this 参数。

    两种方法示例代码如下：

    /*
    find(callback)方法
    * 作用 - 返回find()方法的回调函数中复合表达式的第一个元素的值
    * callback参数 - 调用find()方法时的回调函数
        * element ：当前遍历到的元素。
        * index ： 当前遍历到的索引值。
        * array ： 数组本身。
    * 特点
        * 数组调用find()方法，将指定数组进行遍历
*/

let arr = [1,2,3,4,5];
var result1 = arr.find(function(element,index,array){
    return element>3;
});

//findIndex()方法返回符合表达式结果的第一个元素的索引值
var result2 = arr.findIndex(function(element,index,array){
    return element>3;
});
console.log(result1,result2);//4 3

fill() 方法

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

arr.fill(value[,start[,end]])
  • value：用来填充数组元素的值。
  • start：可选项，起始索引，默认值为0。
  • end：可选项，终止索引，默认值为 this.length。
  • 返回值：修改后的数组。

示例代码如下：

let arr = [1,2,3,4,5]
var result = arr.fill(6,2,4);
console.log(result,arr);//[ 1, 2, 6, 6, 5 ] [ 1, 2, 6, 6, 5 ]

includes() 方法

includes()方法用于判断一个数组是否包含一个指定的值。根据情况，如果包含则返回 true，否则返false。

arr.includes(searchElement,fromIndex)
  • searchElement : 需要查找的元素值。
  • fromIndex :可选项，从该索引处开始查找 searchElement 。如果为负值，则按升序从array.length- fromIndex 的索引开始搜索。默认值为 0 。

示例代码如下：

let arr = [1,2,3,4,5];
console.log(arr.includes(2));//true
console.log(arr.includes(2,2));//false
avatar
文章
阅读
粉丝