JS数组对象的方法介绍及使用(全)

2024-02-18 18:38:10

前言：最近看了关于JS数组中的一些方法，今天来分享给大家。（可能有些方法比较偏）详情参考mdn

ps:

（⭐）不常见的方法
（⭐⭐）常见的方法
（⭐⭐⭐）很常见，并且使用次数很多的方法

JS数组对象的方法介绍及使用

Array.prototype.join()(⭐⭐⭐)

**join()** 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

实例：

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());// "Fire,Air,Water"

console.log(elements.join(''));// "FireAirWater"

console.log(elements.join('-'));// "Fire-Air-Water"

Array.prototype.pop()(⭐⭐⭐)

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

实例：

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());//"tomato"

console.log(plants);// ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);// ["broccoli", "cauliflower", "cabbage"]

Array.prototype.push()(⭐⭐⭐)

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

实例：

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);//4

console.log(animals);// ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');

console.log(animals);//["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

Array.prototype.reverse()(⭐⭐⭐)

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

实例：

const array1 = ['one', 'two', 'three'];
console.log(array1);//["one", "two", "three"]

const reversed = array1.reverse();
console.log( reversed);// ["three", "two", "one"]

console.log( array1);// ["three", "two", "one"]

Array.prototype.shift()(⭐⭐⭐)

**shift()** 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

实例：

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);// [2, 3]

console.log(firstElement);// 1

Array.prototype.slice()(⭐⭐⭐)

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

解释：

  • slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。

  • 语法：arr.slice(begin, end)

  • 参数：

    1. begin 可选。提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。

    2. end 可选。提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）

实例：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));//["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));// ["camel", "duck"]

console.log(animals.slice(1, 5));// ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));//["duck", "elephant"]

console.log(animals.slice(2, -1));//  ["camel", "duck"]

Array.prototype.some()(⭐⭐⭐)

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

实例：

const array = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;

console.log(array.some(even));// true

Array.prototype.sort()(⭐⭐⭐)

**sort()** 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

实例：

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);//["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);// [1, 100000, 21, 30, 4]

Array.prototype.splice()(⭐⭐⭐)

splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

解释：

  • 如果添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。、
  • 语法：array.splice(start, deleteCount, item1, item2[, ...)
  • 参数：
    1. ​ start。指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位
    2. deleteCount 可选。整数，表示要移除的数组元素的个数。
    3. item1, item2, ... 可选。要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

实例：

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');
console.log(months);//["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);// ["Jan", "Feb", "March", "April", "May"]

Array.prototype.toString()(⭐⭐⭐)

toString() 返回一个字符串，表示指定的数组及其元素。

实例：

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());//"1,2,a,1a"

Array.prototype.unshift()(⭐⭐⭐)

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

实例：

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));// 5

console.log(array1);//[4, 5, 1, 2, 3]

Array.prototype.concat()（⭐⭐）

简单来说，concat方法是用来合并数组的，不会改变this指向，算是一个浅拷贝

解释：

  • concat() 方法用于合并两个或多个数组=。此方法不会更改现有数组，而是返回一个新数组。
  • 语法：value1.concat(value2,value3.....)
  • 参数：value1,value2,value3是要合并的数组。
  • concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本.

实例：

示例一：

 <script>
        var arr1 = ['a', 'b', 'c'];
        var arr2 = [1, 2, 3];
        var arr=arr1.concat(arr2);
        console.log(arr);//['a', 'b', 'c', 1, 2, 3]
    </script>

结果：
JS数组对象的方法介绍及使用(全)

示例二：

<script>
        var num1 = [[1]];
        var num2 = [2, [3]];
        var num3 = [5, [6]];
        var nums = num1.concat(num2);
        console.log(nums);// [[1], 2, [3]]
        var nums2 = num1.concat(4, num3);
        console.log(nums2)// [[1], 4, 5,[6]]
    </script>

结果：
JS数组对象的方法介绍及使用(全)

Array.prototype.filter()(⭐⭐)

简单来说，**filter()** 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组 。

解释：

  • filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

  • 语法：

    var newArray = arr.filter(callback(element, index, array), thisArg)

  • 参数：

    1. ​ callback用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。

    2. thisArg可选

      执行 callback 时，用于 this 的值。

  • filter 不会改变原数组，它返回过滤后的新数组。

实例：

 <script>
        var arry=[12, 5, 8, 130, 44]
        var arry1=arry.filter(item=>item>10);
        console.log(arry1);//[12, 130, 44]
    </script>

Array.prototype.find()(⭐⭐)

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

解释：

  • find方法对数组中的每一项元素执行一次 callback函数，直至有一个 callback 返回 true

  • 语法：

    arr.find(callback, thisArg)

  • 参数：

    1. callback在数组每一项上执行的函数，接收 3 个参数。
    2. thisArg可选。执行回调时用作this 的对象。

实例：

<script>
        var inventory = [
            { name: 'apples', quantity: 2 },
            { name: 'bananas', quantity: 0 },
            { name: 'cherries', quantity: 5 }
        ];
        function findCherries(fruit) {
            return fruit.name === 'cherries';
        }
        console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
    </script>

Array.prototype.forEach()

简单来说，**forEach()** 方法对数组的每个元素执行一次给定的函数。

返回值是undefined

解释:

  • forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过

  • 语法：arr.forEach(callback(currentValue , index , array)[, thisArg)

  • 参数：

    1. callback为数组中每个元素执行的函数，该函数接收一至三个参数
    2. thisArg 可选参数。当执行回调函数 callback 时，用作 this 的值。

实例：

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.from()(⭐⭐)(比较复杂，推荐去看MDN)

简单来说，Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组或对象。返回值是一个新的数组实例。

解释：

  • Array.from() 可以通过以下方式来创建数组对象：
    • 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
    • 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）
  • 语法：Array.from(arrayLike, mapFn, thisArg)
  • 参数：
    1. arrayLike。想要转换成数组的伪数组对象或可迭代对象。
    2. mapFn 可选。如果指定了该参数，新数组中的每个元素会执行该回调函数。
    3. thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。

实例：

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

Array.prototype.includes()(⭐⭐)

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

解释：

  • 语法：arr.includes(valueToFind, fromIndex)
  • 参数：
    1. valueToFind需要查找的元素值。
    2. fromIndex 可选。从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

实例：

 <script>
        [1, 2, 3].includes(2);     // true
        [1, 2, 3].includes(4);     // false
        [1, 2, 3].includes(3, 3);  // false
        [1, 2, 3].includes(3, -1); // true
        [1, 2, NaN].includes(NaN); // true
    </script>

Array.isArray()(⭐⭐)

Array.isArray() 用于确定传递的值是否是一个 Array

实例：

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

Array.prototype.every()(⭐)

简单来说，every(）方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

注意：若收到一个空数组，此方法在一切情况下都会返回 true。

解释

  • every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 falsy 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。

  • 语法：

    arr.every(callback(element, index, array), thisArg)

  • 参数：callback回调函数用来测试每个元素的函数(不了解回调函数的自己去搜)。thisArg可选执行 callback 时，用于 this 的值。

实例

示例一

 <script>
        const isBelowThreshold = (currentValue) => currentValue < 40;
        const array1 = [1, 30, 39, 29, 10, 13];
        console.log(array1.every(isBelowThreshold));// true
    </script>

示例二

function isBigEnough(element) {//检测数组中所有元素是否大于10
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

提升

上边的function（）可以优化成箭头函数。

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

Array.prototype.fill()(⭐)

简单来说，**fill()** 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。（半闭半开）返回值是修改后的数组。

解释：

  • fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的,

  • 语法：

    arr.fill(value, start, end)

  • 参数：

    1. value用来填充数组元素的值。
    2. start （可选）。起始索引，默认值为0
    3. end （可选）。终止索引，默认值为 this.length。

  • 该方法不要求 this 是数组对象。

实例：

示例一：

 <script>
        const array1 = [1, 2, 3, 4];
        console.log(array1.fill(0, 2, 4));// [1, 2, 0, 0]

        console.log(array1.fill(5, 1));//[1, 5, 5, 5]

        console.log(array1.fill(6));//[6, 6, 6, 6]
    </script>

Array.prototype.copyWithin()（⭐）

简单理解，就是复制从start位置到end位置的数组元素到该数组的target位置。

解释：

  • copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。它可以改变 this 对象本身，并且返回它，而不仅仅是它的拷贝。返回改变后的数组。
  • 语法：arr.copyWithin(target, start, end)
  • 参数：
    1. target：复制到target这个位置，如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
    2. start：复制的起始位置，如果 start 为负，则其指定的索引位置等同于 length+start
    3. end：复制的结束位置，如果 start 为负，则其指定的索引位置等同于 length+start
  • copyWithin 函数被设计为通用式的，其不要求其 this值必须是一个数组对象。

实例：

示例一：

先来点简单的热热身

<script>
        const array1 = ['a', 'b', 'c', 'd', 'e'];
        console.log(array1.copyWithin(0, 3, 4));// ["d", "b", "c", "d", "e"]
        console.log(array1.copyWithin(1, 3));// ["d", "d", "e", "d", "e"]
    </script>

结果：
JS数组对象的方法介绍及使用(全)

升级版：

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
 
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
 
// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
 
// 将2号位到数组结束，复制到0号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
 
// 对于没有部署TypedArray的copyWithin方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

3.Array.prototype.entries()（⭐了解即可）

简单来说，entries() 方法就是返回一个新的Array Iterator对象

解释：

  • entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
  • 一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（proto:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。

实例：

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

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

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

4.Array.prototype.every()(⭐)

解释：

  • every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
  • 参数：callback

实例：

 <script>
        const isBelowThreshold = (currentValue) => currentValue < 40;
        const array1 = [1, 30, 39, 29, 10, 13];
        console.log(array1.every(isBelowThreshold));// true
    </script>
上一篇：js基础-题目1


下一篇：js原型链