数组学习笔记

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]

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

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 也会一直提取到原数组末尾。
返回值:一个含有被提取元素的新数组。
兼容性:浏览器均支持。

匿名

发表评论

匿名网友