数组方法学习笔记

最新推荐文章于 2022-09-22 11:00:01 发布

无骛

最新推荐文章于 2022-09-22 11:00:01 发布

阅读量245

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_36737839/article/details/109527937

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、Array.from()
定义：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
语法：Array.from(arrayLike[, mapFn[, thisArg]])
参数：
arrayLike —— 想要转换成数组的伪数组对象或可迭代对象。
mapFn(可选) —— 如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg(可选) _ 可选参数，用于指定执行回调函数mapFn时的this对象。
返回值：一个新的数组实例。
兼容性：IE不兼容
实例：

Array.from('Hello'); // ["H", "e", "l", "l", "o"]
Array.from(new Set(["H", "e", "l", "l", "o"])); // ["H", "e", "l", "o"]
function sayHello() {
    console.log(Array.from(arguments));
}
sayHello('Hello world'); // ["Hello world"]
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

2、Array.isArray()
定义：用于确定传递的值是否是一个Array。
语法：Array.isArray(obj)
参数：obj —— 需要检测的值。
返回值：如果值是 Array，则为true; 否则为false。
兼容性：浏览器均兼容

实例：
    Array.isArray([]); // true
    Array.isArray(); // false
方法替代方案：
    假如不存在 Array.isArray()，则在其他代码之前运行下面的代码将创建该方法。
    if (!Array.isArray) {
    Array.isArray = function() {
        return Array.prototype.toString.call() === '[object Array]';
    }
}
其他：（Array.prototype 也是一个数组）
    Array.isArray(Array.prototype);  // true

3、Array.of()
定义：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
语法：Array.of(element0[, element1[, …[, elementN]]])
参数：elementN —— 任意个参数，将按顺序成为返回数组中的元素。
返回值：新的 Array 实例。
兼容性：IE不兼容
实例：

 Array.of(1);  // [1]
    Array.of(1, 2, 3);  // [1, 2, 3]
    Array.of(undefined);  // [undefined]
    Array.of(null);  // [null]

方法替代方案：

如果原生不支持的话，在其他代码之前执行以下代码会创建Array.of()。

if (!Array.of) {
    Array.of = function() {
        return Array.prototype.slice.call(arguments);
    };
}

4、Array.prototype.concat()
定义：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
语法：var new_array = old_array.concat(value1[, value2[, …[, valueN]]])
参数：valueN(可选) —— 将数组或值连接成新数组。如果省略了valueN参数，则concat会返回一个它所调用的已存在的数组的浅拷贝。
返回值：新的 Array 实例。
兼容性：浏览器均兼容
实例：

  Array.prototype.concat([1, 2, 3]);  // [1, 2, 3]
    [].concat(1, 2, 3);  // [1, 2, 3]
    [].concat(null); // [null]
    [].concat('hello'); // ["hello"]

    var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];
    num1.concat(num2, num3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

    [1].concat(1, [2, 3, 4]); // [1, 1, 2, 3, 4]

其他：
注意：concat是返回一个浅拷贝。故如果concat元素中有引用类型，则拷贝的是该引用类型地址。
例如：

var num = [1, [2, 3]];
    var num1 = [].concat(num); // [1, [2, 3]]
    num[1] = 200;
    num1; // [1, 200]

5、Array.prototype.copyWithin()
定义：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度，但会改变原数组元素。
语法：arr.copyWithin(target[, start[, end]])
参数：
target —— 0 为基底的索引，复制序列到该位置。
如果是负数，target 将从末尾开始计算。
如果 target 大于等于 arr.length，将会不发生拷贝。
如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
start —— 0 为基底的索引，开始复制元素的起始位置。
如果是负数，start 将从末尾开始计算。
如果 start 被忽略，copyWithin 将会从0开始复制。
end —— 0 为基底的索引，开始复制元素的结束位置。
copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。
如果是负数， end 将从末尾开始计算。
如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。
返回值：改变后的数组，原数组改变。
兼容性：IE不兼容
实例：
[1,2,3,4].copyWithin(0, 3, 4); // [4, 2, 3, 4]
其他：
注意：
1、start和end是一个左闭右开的取值范围
2、参数 target、start 和 end 必须为整数

** 6、Array.prototype.entries()
定义：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
语法：arr.entries()
返回值：一个新的 Array 迭代器对象。Array Iterator是对象，它的原型（proto:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value]。entries不会改变原数组。
兼容性：IE不兼容
实例：

var a = [1, 2, 3].entries()
a.next().value; // [0, 1]
a.next().value; // [1, 2]
for (let item of a) {
    console.log(item);
}
// [0, 1]
// [1, 2]
// [2, 3]

7、Array.prototype.every()
定义：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
语法：arr.every(callback[, thisArg])
参数：
callback —— 用来测试每个元素的函数，它可以接收三个参数：
element —— 用于测试的当前值。
index可选 —— 用于测试的当前值的索引。
array可选 —— 调用 every 的当前数组。
thisArg —— 执行 callback 时使用的 this 值。
返回值：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。every不会改变原数组。
兼容性：浏览器均兼容
实例：
[1,2,3,4].every((item => item > 0)); // true

其他：
注意：若收到一个空数组，此方法在一切情况下都会返回 true。
[].every(item => item > 0); // true

8、Array.prototype.fill()
定义：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
语法：arr.fill(value[, start[, end]])
参数：
value —— 用来填充数组元素的值。
start(可选) —— 起始索引，默认值为0。
end(可选) —— 终止索引，默认值为 this.length。
返回值：修改后的数组，原数组被改变。
兼容性：IE不兼容
实例：
[1, 2, 3, 4].fill(2); // [2, 2, 2, 2];
[1, 2, 4, 8].fill(1, 1, 3); // [1, 1, 1, 8];

其他：
注意：
1、start和end是一个左闭右开的取值范围
2、start和end若为小数，则向下取整
3、如果start或end为负数，则会计算为start/target + length
4、当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。
5、若start等于end,则不发生填充

9、Array.prototype.filter()
定义：filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数：
callback —— 用来测试每个元素的函数，它可以接收三个参数：
element —— 数组中当前正在处理的元素。
index可选 —— 正在处理的元素在数组中的索引。
array可选 —— 调用了 filter 的数组本身。
thisArg —— 执行 callback 时使用的 this 值。
返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。不改变原数组。
兼容性：浏览器均兼容
实例：

 var arr = [3, 2, 9, 0];
    arr.filter(item => item > 2); // [3, 9]
    arr; // [3, 2, 9, 0]

    var obj = {name: 'wegin'}
    arr.push(obj);
    arr.filter((item, index, arr) => {obj.name="Jane"; return item && item.name === 'Jane'}); // [{name:'Jane'}]

方法替代方案：

if (!Array.prototype.filter) {
    Array.prototype.filter = function(func, thisArg) {
        'use strict';
        if (!((typeof func === 'Function') || typeof func === 'function') && this) {
            throw new TypeError();
        }

        var len = this.length >>> 0, res = new Array(len), t = this, c = 0, i = -1;
        if (thisArg === undefined) {
            while (++i !== len) {
                // 判断该key是否存在
                if (i in this) {
                    if (func(this[i], i, t)) {
                        res[c++] = t[i];
                    }
                }
            }
        } else {
            while (++i !== len) {
                if (i in this) {
                    if (func.call(thisArg, this[i], i, t)) {
                        res[c++] = t[i];
                    }
                }
            }
        }

        res.length = c;
        return res;
    }
}

其他：
注意：filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

10、Array.prototype.find()
定义：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法：arr.find(callback[, thisArg])
参数：
callback —— 在数组每一项上执行的函数，它可以接收三个参数：
element —— 数组中当前正在处理的元素。
index可选 —— 正在处理的元素在数组中的索引。
array可选 —— 数组本身。
thisArg —— 执行 callback 时使用的 this 值。
返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。不会改变原数组。
兼容性：IE不兼容
实例：

 var arr = [3, 2, 9, 0];
    arr.find(item => item > 2); // 0
    arr.find(item => item > 10); // undefined
    arr; // [3, 2, 9, 0]

其他：
注意：
(1)注意 callback 函数会为数组中的每个索引调用即从 0 到 length - 1，而不仅仅是那些被赋值的索引，这意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法。

11、Array.prototype.findIndex()
定义：findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
语法：arr.findIndex(callback[, thisArg])
参数：
callback —— 在数组每一项上执行的函数，它可以接收三个参数：
element —— 数组中当前正在处理的元素。
index可选 —— 正在处理的元素在数组中的索引。
array可选 —— 数组本身。
thisArg —— 执行 callback 时使用的 this 值。
返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1。不会改变原数组。
兼容性：IE不兼容
实例：

   var arr = [3, 2, 9, 0];
    arr.find(item => item > 2); // 0
    arr.find(item => item > 10); // undefined
    arr; // [3, 2, 9, 0]

12、Array.prototype.flat() (即为数组的扁平化处理)
定义：flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
语法：var newArray = arr.flat([depth])
参数：depth 可选 - 指定要提取嵌套数组的结构深度，默认值为 1。
返回值：一个包含数组与子数组中所有元素的新数组。不会改变原数组。
兼容性：IE不兼容
实例：

  var a = [1, 2, 3, [2]];
    a.flat(); // [1, 2, 3, 4]
    a; // [1, 2, 3, [2]];

   //使用 Infinity，可展开任意深度的嵌套数组
    var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
    arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    
    var arr1 = [1, 2, , 3, 4];
    arr1.flat(); // [1, 2, 3, 4];

方法替代方案：

function flatDeep(arr, d = 1) {
    return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d-1) : val), []) : arr.slice();
}

其他：
注意：
(1)flat() 方法会移除数组中的空项

13、Array.prototype.flatMap()
定义：flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
语法：var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
参数：
callback - 可以生成一个新数组中的元素的函数，可以传入三个参数：
currentValue - 当前正在数组中处理的元素
index可选 - 可选的。数组中正在处理的当前元素的索引。
array可选 - 可选的。被调用的 map 数组
thisArg可选 - 可选的。执行 callback 函数时使用的this 值。
返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。
兼容性：IE不兼容
实例：

var arr = [[1], [[12]], 3, 4];
arr.flatMap((item) => item); // [1, [12], 3, 4];
arr.flatMap((item) => item + 1); // ['11', '121', 4, 5];

14、Array.prototype.forEach()
定义：forEach() 方法对数组的每个元素执行一次给定的函数。
语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
参数：
callback —— 在数组每一项上执行的函数，它可以接收三个参数：
element —— 数组中当前正在处理的元素。
index可选 —— 正在处理的元素在数组中的索引。
array可选 —— 数组本身。
thisArg —— 执行 callback 时使用的 this 值。
返回值：undefined。forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。
兼容性：浏览器均支持。
实例：

 var arr = [1, 2, 3, 4, , ];
    arr.forEach(item => console.log(item)); // 1 2 3 4 undefined

方法替代方案：


    if (!Array.prototype.forEach) {
        Array.prototype.forEach = function(callback, thisArg) {
            var T, k;
            if (this == null) {
                throw new TypeError("this is null or not defined");
            }
            var O = Object(this);
            var len = O.length >>> 0;

            if (typeof callback !== 'function') {
                throw new TypeError(callback + ' is not a function');
            }

            if (arguments.length > 1) {
                T = thisArg;
            }
            k = 0;
            while(k < len) {
                var kValue;
                if (k in O) {
                    kValue = O[k];
                    callback.call(T, kValue, k, O);
                }
                k++;
            }
            return undefined;
        }
    }

其他：
注意：
(1)forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。不对未初始化的值进行任何操作（稀疏数组）
(2)如果数组在迭代时被修改了，则其他元素会被跳过。

15、Array.prototype.includes()
定义：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
语法：arr.includes(valueToFind[, fromIndex])
参数：
valueToFind —— 需要查找的元素值。
fromIndex 可选 – 从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
返回值：boolean;不改变原数组。
兼容性：ie不支持。
实例：

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

其他：
注意：
(1)使用 includes()比较字符串和字符时是区分大小写。
(2)如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

16、Array.prototype.indexOf() / Array.prototype.lastIndexOf()
定义：indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
语法：arr.indexOf(searchElement[, fromIndex])
参数：
searchElement —— 需要查找的元素值。
fromIndex 可选 – 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
兼容性：浏览器均支持。
实例：

var array = [2, 5, 9];

array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

其他：
注意：
(1)使用 includes()比较字符串和字符时是区分大小写。
(2)如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
(3)lastIndexOf()找到最后一个匹配元素的索引

17、Array.prototype.join()
定义：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
语法：arr.join([separator])
参数：
separator 可选 —— 指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。
返回值：一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。原数组不变。
兼容性：浏览器均支持。
实例：

 var arr = [1, 2, 3, 4, null, undefined];
    arr.join('-'); // "1-2-3-4--"

其他：
注意：
(1)所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果一个元素为 undefined 或 null，它会被转换为空字符串。

18、Array.prototype.keys()
定义： keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。
语法：arr.keys()
参数： -
返回值：一个新的 Array 迭代器对象。原数组不变。
兼容性：Ie不支持。
实例：

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

for (const key of iterator) {
console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

其他：
注意：
(1)所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果一个元素为 undefined 或 null，它会被转换为空字符串。

19、Array.prototype.map()
定义： map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
参数：
callback —— 在数组每一项上执行的函数，它可以接收三个参数：
element —— 数组中当前正在处理的元素。
index可选 —— 正在处理的元素在数组中的索引。
array可选 —— 数组本身。
thisArg —— 执行 callback 时使用的 this 值。
返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。原数组不变。
兼容性：浏览器均支持
实例：

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

20、Array.prototype.pop()
定义： pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
语法：arr.pop()
参数： -
返回值：从数组中删除的元素(当数组为空时返回undefined)。原数组改变。
兼容性：浏览器均支持

21、Array.prototype.push()
定义： push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
语法：arr.push(element1, …, elementN)
参数：elementN - 被添加到数组末尾的元素。
返回值：当调用该方法时，新的 length 属性值将被返回。原数组改变。
兼容性：浏览器均支持

22、Array.prototype.reduce() / Array.prototype.reduceRight()（从右往左）
定义：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。

callback —— 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator —— 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
currentValue —— 数组中正在处理的元素。
index可选 —— 数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array可选 —— 数组本身。
initialValue 可选 —— 作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
返回值：函数累计处理的结果。原数组不变。
兼容性：浏览器均支持。
实例：

var arr1 = [1, 2, 3, 4];
arr1.reduce((data, item) => {data.push(item+1); return data;}, []); // [2, 3, 4, 5]

其他：
注意：
(1)如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
(2)如果数组为空且没有提供initialValue，会抛出TypeError 。
(3)如果数组仅有一个元素（无论位置如何）并且没有提供initialValue，或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

23、Array.prototype.reverse()
定义：reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
语法：arr.reverse()
参数：-
返回值：颠倒后的数组。原数组被改变。
兼容性：浏览器均支持。

24、Array.prototype.shift()
定义：shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
语法：arr.shift()
参数：-
返回值：从数组中删除的元素; 如果数组为空则返回undefined 。原数组改变。
兼容性：浏览器均支持。

25、Array.prototype.slice()
定义：slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
语法：arr.slice([begin[, end]])
参数：
- begin 可选 - 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 begin，则 slice 从索引 0 开始。
如果 begin 大于原数组的长度，则会返回空数组。
- end 可选 - 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1, 2, 3的元素）。
如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。
返回值：一个含有被提取元素的新数组。
兼容性：浏览器均支持。