JavaScript系列之Array对象

目录

  • 1、创建数组的两种方式
    • 1.1、字面量方式
    • 1.2、new Array()
      • 1.2.1、参数
  • 2、静态方法
    • 2.1、Array.from()
      • 2.1.1、概述
      • 2.1.2、语法
      • 2.1.3、参数
      • 2.1.4、返回值
      • 2.1.5、创建数组对象的方式
      • 2.1.6、属性
      • 2.1.7、示例
    • 2.2、Array.isArray()
      • 2.2.1、概述
      • 2.2.2、语法
      • 2.2.3、参数
      • 2.2.4、返回值
      • 2.2.5、示例
      • 2.2.6、与instanceof区别
      • 2.2.7、向下兼容
    • 2.3、Array.of()
      • 2.3.1、概述
      • 2.3.2、语法
      • 2.3.3、参数
      • 2.3.4、返回值
      • 2.3.5、示例
      • 2.3.6、兼容旧环境
  • 3、实例属性
    • 3.1、length
      • 3.1.1、概述
      • 3.1.2、特性
      • 3.1.3、示例
        • 3.1.3.1、遍历数组
        • 3.1.3.2、截断数组
  • 4、实例方法
    • 4.1、at()
      • 4.1.1、概述
      • 4.1.2、语法
      • 4.1.3、参数
      • 4.1.4、返回值
      • 4.1.5、示例
        • 4.1.5.1、返回一个数组的最后一个值
        • 4.1.5.2、比较不同的数组方法
    • 4.2、concat()
      • 4.2.1、概述
      • 4.2.2、语法
      • 4.2.3、参数
      • 4.2.4、返回值
      • 4.2.5、描述
      • 4.2.6、示例
        • 4.2.6.1、连接两个数组
        • 4.2.6.2、连接三个数组
        • 4.2.6.3、将值连接到数组
        • 4.2.6.4、合并嵌套数组
    • 4.3、copyWithin()
      • 4.3.1、概述
      • 4.3.2、语法
      • 4.3.3、参数
      • 4.3.4、返回值
      • 4.3.5、描述
      • 4.3.6、示例
      • 4.3.7、向下兼容
    • 4.4、entries()
      • 4.4.1、概述
      • 4.4.2、语法
      • 4.4.3、返回值
      • 4.4.4、示例
        • 4.4.4.1、 Array Iterator
        • 4.4.4.2、iterator.next()
        • 4.4.4.3、iterator.next 方法运行
        • 4.4.4.4、二维数组按行排序
        • 4.4.4.5、使用for…of 循环
    • 4.5、every()
      • 4.5.1、概述
      • 4.5.2、语法
      • 4.5.3、参数
        • 4.5.3.1、callback
        • 4.5.3.2、thisArg
      • 4.5.4、返回值
      • 4.5.5、描述
      • 4.5.6、示例
        • 4.5.6.1、检测所有数组元素的大小
        • 4.5.6.2、使用箭头函数
        • 4.5.6.3、兼容旧环境
    • 4.6、fill()
      • 4.6.1、概述
      • 4.6.2、语法
      • 4.6.3、参数
      • 4.6.4、返回值
      • 4.6.5、描述
      • 4.6.6、示例
      • 4.6.7、向下兼容
    • 4.7、filter()
      • 4.7.1、概述
      • 4.7.2、语法
      • 4.7.3、参数
        • 4.7.3.1、callback
        • 4.7.3.2、thisArg【可选】
      • 4.7.4、返回值
      • 4.7.5、描述
      • 4.7.6、示例
      • 4.7.7、向下兼容
    • 4.8、find()
      • 4.8.1、概述
      • 4.8.2、语法
      • 4.8.3、参数
        • 4.8.3.1、callback
        • 4.8.3.2、thisArg【可选】
      • 4.8.4、返回值
      • 4.8.5、描述
      • 4.8.6、示例
      • 4.8.7、向下兼容
    • 4.9、findIndex()
      • 4.9.1、概述
      • 4.9.2、语法
      • 4.9.3、参数
        • 4.9.3.1、callback
        • 4.9.3.2、thisArg
      • 4.9.4、返回值
      • 4.9.5、描述
      • 4.9.6、示例
      • 4.9.7、向下兼容
    • 4.10、findLast()
      • 4.10.1、概述
      • 4.10.2、语法
      • 4.10.3、参数
        • 4.10.3.1、callbackFn
        • 4.10.3.2、thisArg 【可选】
      • 4.10.4、返回值
      • 4.10.5、描述
      • 4.10.6、示例
    • 4.11、findLastIndex()
      • 4.11.1、概述
      • 4.11.2、语法
      • 4.11.3、参数
        • 4.11.3.1、callbackFn
        • 4.11.3.2、thisArg 【可选】
      • 4.11.4、返回值
      • 4.11.5、描述
      • 4.11.6、示例
    • 4.12、flat()
      • 4.12.1、概述
      • 4.12.2、语法
      • 4.12.3、参数
      • 4.12.4、返回值
      • 4.12.5、示例
    • 4.13、flatMap()
      • 4.13.1、概述
      • 4.13.2、语法
      • 4.13.3、参数
        • 4.13.3.1、callback
        • 4.13.3.2、thisArg【可选】
      • 4.13.4、返回值
      • 4.13.5、示例
    • 4.14、forEach()
      • 4.14.1、概述
      • 4.14.2、语法
      • 4.14.3、参数
        • 4.14.3.1、callback
        • 4.14.3.2、thisArg 可选
      • 4.14.4、返回值
      • 4.14.5、描述
      • 4.14.6、示例
      • 4.14.7、向下兼容
    • 4.15、includes()
      • 4.15.1、概述
      • 4.15.2、语法
      • 4.15.3、参数
        • 4.15.3.1、valueToFind
        • 4.15.3.2、fromIndex 【可选】
      • 4.15.4、返回值
      • 4.15.5、示例
      • 4.15.6、向下兼容
    • 4.16、indexOf()
      • 4.16.1、概述
      • 4.16.2、语法
      • 4.16.3、参数
      • 4.16.4、返回值
      • 4.16.5、示例
      • 4.16.6、向下兼容
    • 4.17、join()
      • 4.17.1、概述
      • 4.17.2、语法
      • 4.17.3、参数
      • 4.17.4、返回值
      • 4.17.5、示例
    • 4.18、keys()
      • 4.18.1、概述
      • 4.18.2、语法
      • 4.18.3、返回值
      • 4.18.4、示例
    • 4.19、lastIndexOf()
      • 4.19.1、概述
      • 4.19.2、语法
      • 4.19.3、参数
      • 4.19.4、返回值
      • 4.19.5、示例
      • 4.19.6、向下兼容
    • 4.20、map()
      • 4.20.1、概述
      • 4.20.2、语法
      • 4.20.3、参数
        • 4.20.3.1、callback
        • 4.20.3.2、thisArg【可选】
      • 4.20.4、返回值
      • 4.20.5、描述
      • 4.20.6、示例
      • 4.20.7、向下兼容
    • 4.21、pop()
      • 4.21.1、概述
      • 4.21.2、语法
      • 4.21.3、返回值
      • 4.21.4、描述
      • 4.21.5、示例
    • 4.22、push()
      • 4.22.1、概述
      • 4.22.2、语法
      • 4.22.3、参数
      • 4.22.4、返回值
      • 4.22.5、示例
    • 4.23、reduce()
      • 4.23.1、概述
      • 4.23.2、语法
      • 4.23.3、参数
        • 4.23.3.1、callbackFn
        • 4.23.3.2、initialValue【可选】
      • 4.23.4、返回值
      • 4.23.5、描述
      • 4.23.6、示例
    • 4.27、reduceRight()
      • 4.27.1、概述
      • 4.27.2、语法
      • 4.27.3、参数
        • 4.27.3.1、callback
        • 4.27.3.2、initialValue可选
      • 4.27.4、返回值
      • 4.27.5、描述
      • 4.27.6、示例
      • 4.27.7、向下兼容
    • 4.28、reverse()
      • 4.28.1、概述
      • 4.28.2、语法
      • 4.28.3、返回值
      • 4.28.4、示例
    • 4.29、shift()
      • 4.29.1、概述
      • 4.29.2、语法
      • 4.29.3、返回值
      • 4.29.4、示例
    • 4.30、slice()
      • 4.30.1、概述
      • 4.30.2、语法
      • 4.30.3、参数
      • 4.30.4、返回值
      • 4.30.5、描述
      • 4.30.6、示例
    • 4.31、some()
      • 4.31.1、概述
      • 4.31.2、语法
      • 4.31.3、参数
        • 4.31.3.1、callback
        • 4.31.3.2、thisArg【可选】
      • 4.31.4、返回值
      • 4.31.5、描述
      • 4.31.6、示例
      • 4.31.7、向下兼容
    • 4.32、sort()
      • 4.32.1、概述
      • 4.32.2、语法
      • 4.32.3、参数
        • 4.32.3.1、compareFunction【可选】
      • 4.32.4、返回值
      • 4.32.5、示例
    • 4.33、splice()
      • 4.33.1、概述
      • 4.33.2、语法
      • 4.33.3、参数
      • 4.33.4、返回值
      • 4.33.5、示例
    • 4.34、toLocaleString()
      • 4.34.1、概述
      • 4.34.2、语法
      • 4.34.3、参数
      • 4.34.4、返回值
      • 4.34.5、示例
      • 4.34.6、向下兼容
    • 4.35、toString()
      • 4.35.1、概述
      • 4.35.2、语法
      • 4.35.3、返回值
    • 4.36、unshift()
      • 4.36.1、概述
      • 4.36.2、语法
      • 4.36.3、参数
      • 4.36.4、返回值
      • 4.36.5、示例
    • 4.37、values()
      • 4.37.1、概述
      • 4.37.2、语法
      • 4.37.3、返回值
      • 4.37.4、示例
  • 后记


1、创建数组的两种方式

1.1、字面量方式

示例代码如下:

var arr = [1, "test", true];

1.2、new Array()

示例代码如下

var arr = new Array();

注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数

1.2.1、参数

  • 如果只传入一个参数,则参数规定了数组的长度
  • 如果传入了多个参数,则参数称为数组的元素

elementN:Array 构造器会根据给定的元素创建一个 JavaScript 数组,但是当仅有一个参数且为数字时除外。注意,后者仅适用于用 Array 构造器创建数组,而不适用于用方括号创建的数组字面量。
arrayLength:一个范围在 0 到 2^32 - 1 之间的整数,此时将返回一个 length 的值等于 arrayLength 的数组对象(言外之意就是该数组此时并没有包含任何实际的元素,不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素)。如果传入的参数不是有效值,则会抛出 RangeError 异常

2、静态方法

2.1、Array.from()

2.1.1、概述

Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

2.1.2、语法

Array.from(arrayLike[, mapFn[, thisArg]])

2.1.3、参数

arrayLike:想要转换成数组的伪数组对象或可迭代对象。
mapFn 【可选】:如果指定了该参数,新数组中的每个元素会执行该回调函数。
thisArg 【可选】:可选参数,执行回调函数 mapFn 时 this 对象。

2.1.4、返回值

一个新的数组实例。

2.1.5、创建数组对象的方式

Array.from() 可以通过以下方式来创建数组对象:

  • 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)
  • 可迭代对象(可以获取对象中的元素,如 Map 和 Set 等)

2.1.6、属性

from() 的 length 属性为 1 ,即 Array.from.length === 1。

2.1.7、示例

从 String 生成数组

Array.from("foo");
// [ "f", "o", "o" ]

从 Set 生成数组

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

从 Map 生成数组

const map = new Map([
	[1, 2],
	[2, 4],
	[4, 8]
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
	["1", "a"],
	["2", "b"]
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

从类数组对象(arguments)生成数组

function f() {
	return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

在 Array.from 中使用箭头函数

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

序列生成器 (指定范围)

// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

数组去重合并

function combine() {
	let arr = [].concat.apply([], arguments); //没有去重复的新数组
	return Array.from(new Set(arr));
}

var m = [1, 2, 2],
	n = [2, 3, 3];
console.log(combine(m, n)); // [1, 2, 3]

2.2、Array.isArray()

2.2.1、概述

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

2.2.2、语法

Array.isArray(obj)

2.2.3、参数

obj:需要检测的值。

2.2.4、返回值

如果值是 Array,则为 true;否则为 false。

2.2.5、示例

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array("a", "b", "c", "d"));
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32));
Array.isArray({ __proto__: Array.prototype });

2.2.6、与instanceof区别

当检测 Array 实例时,Array.isArray 优于 instanceof,因为 Array.isArray 能检测 iframes。

const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length - 1].Array;
const arr = new xArray(1, 2, 3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr); // true
// Considered harmful, because doesn't work through iframes
arr instanceof Array; // false

2.2.7、向下兼容

假如不存在 Array.isArray(),则在其他代码之前运行下面的代码将创建该方法。

if (!Array.isArray) {
	Array.isArray = function (arg) {
		return Object.prototype.toString.call(arg) === "[object Array]";
	};
}

2.3、Array.of()

2.3.1、概述

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

2.3.2、语法

Array.of(element0[, element1[, ...[, elementN]]])

2.3.3、参数

elementN:任意个参数,将按顺序成为返回数组中的元素。

2.3.4、返回值

新的 Array 实例。

2.3.5、示例

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

2.3.6、兼容旧环境

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

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

3、实例属性

3.1、length

3.1.1、概述

lengthArray 的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标。

3.1.2、特性

JavaScript系列之Array对象_第1张图片

  • Writable:如果设置为 false,该属性值将不能被修改。
  • Configurable:如果设置为 false,删除或更改任何属性都将会失败。
  • Enumerable:如果设置为 true,属性可以通过迭代器for或for…in进行迭代。

3.1.3、示例

3.1.3.1、遍历数组

下面的例子中,通过数组下标遍历数组元素,并把每个元素的值修改为原值的 2 倍。

const numbers = [1, 2, 3, 4, 5];
const length = numbers.length;
for (var i = 0; i < length; i++) {
	numbers[i] *= 2;
}
// 遍历后的结果 [2, 4, 6, 8, 10]

3.1.3.2、截断数组

下面的例子中,如果数组长度大于 3,则把该数组的长度截断为 3。

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

if (numbers.length > 3) {
	numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3

4、实例方法

4.1、at()

4.1.1、概述

at() 方法接收一个整数值并返回该索引的项目,允许正数和负数。负整数从数组中的最后一个项目开始倒数。

4.1.2、语法

at(index)

4.1.3、参数

index:要返回的数组元素的索引(位置)。当传递负数时,支持从数组末端开始的相对索引;也就是说,如果使用负数,返回的元素将从数组的末端开始倒数。

4.1.4、返回值

匹配给定索引的数组中的元素。如果找不到指定的索引,则返回undefined。

4.1.5、示例

4.1.5.1、返回一个数组的最后一个值

下面的例子提供了一个函数,它返回在一个指定的数组中找到的最后一个元素。

// 数组及数组元素
const cart = ["apple", "banana", "pear"];

// 一个函数,用于返回给定数组的最后一个项目
function returnLast(arr) {
	return arr.at(-1);
}

// 获取 'cart' 数组的最后一项
const item1 = returnLast(cart);
console.log(item1); // 'pear'

// 在 'cart' 数组中添加一项
cart.push("orange");
const item2 = returnLast(cart);
console.log(item2); // 'orange'

4.1.5.2、比较不同的数组方法

这个例子比较了选择Array中倒数第二项的不同方法。虽然下面显示的所有方法都是可行的,但这个例子凸显了at()方法的简洁性和可读性。

// 数组及数组元素。
const colors = ["red", "green", "blue"];

// 使用长度属性。
const lengthWay = colors[colors.length - 2];
console.log(lengthWay); // 'green'

// 使用 slice() 方法。注意会返回一个数组。
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // 'green'

// 使用 at() 方法。
const atWay = colors.at(-2);
console.log(atWay); // 'green'

4.2、concat()

4.2.1、概述

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

4.2.2、语法

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

4.2.3、参数

valueN【可选】:数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。

4.2.4、返回值

新的 Array 实例。

4.2.5、描述

concat方法创建一个新的数组,它由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素(如果参数是数组)或参数本身(如果参数不是数组)。它不会递归到嵌套数组参数中。

concat方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。原始数组的元素将复制到新数组中,如下所示:

  • 对象引用(而不是实际对象):concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
  • 数据类型如字符串,数字和布尔(不是String,Number 和 Boolean 对象):concat将字符串和数字的值复制到新数组中。

4.2.6、示例

4.2.6.1、连接两个数组

以下代码将两个数组合并为一个新数组:

var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

4.2.6.2、连接三个数组

以下代码将三个数组合并为一个新数组:

var num1 = [1, 2, 3],
	num2 = [4, 5, 6],
	num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

4.2.6.3、将值连接到数组

以下代码将三个值连接到数组:

var alpha = ["a", "b", "c"];

var alphaNumeric = alpha.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

4.2.6.4、合并嵌套数组

以下代码合并数组并保留引用:

var num1 = [[1]];
var num2 = [2, [3]];
var num3 = [5, [6]];

var nums = num1.concat(num2);

console.log(nums);
// results is [[1], 2, [3]]

var nums2 = num1.concat(4, num3);

console.log(nums2);
// results is [[1], 4, 5,[6]]

// modify the first element of num1
num1[0].push(4);

console.log(nums);
// results is [[1, 4], 2, [3]]

4.3、copyWithin()

4.3.1、概述

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

4.3.2、语法

arr.copyWithin(target[, start[, end]])

4.3.3、参数

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)。

4.3.4、返回值

改变后的数组。

4.3.5、描述

参数 target、start 和 end 必须为整数。

如果 start 为负,则其指定的索引位置等同于 length+start,length 为数组的长度。end 也是如此。

4.3.6、示例

[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}

// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant:
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

4.3.7、向下兼容

if (!Array.prototype.copyWithin) {
	Array.prototype.copyWithin = function (target, start /*, end*/) {
		// Steps 1-2.
		if (this == null) {
			throw new TypeError("this is null or not defined");
		}

		var O = Object(this);

		// Steps 3-5.
		var len = O.length >>> 0;

		// Steps 6-8.
		var relativeTarget = target >> 0;

		var to = relativeTarget < 0 ? Math.max(len + relativeTarget, 0) : Math.min(relativeTarget, len);

		// Steps 9-11.
		var relativeStart = start >> 0;

		var from = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len);

		// Steps 12-14.
		var end = arguments[2];
		var relativeEnd = end === undefined ? len : end >> 0;

		var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len);

		// Step 15.
		var count = Math.min(final - from, len - to);

		// Steps 16-17.
		var direction = 1;

		if (from < to && to < from + count) {
			direction = -1;
			from += count - 1;
			to += count - 1;
		}

		// Step 18.
		while (count > 0) {
			if (from in O) {
				O[to] = O[from];
			} else {
				delete O[to];
			}

			from += direction;
			to += direction;
			count--;
		}

		// Step 19.
		return O;
	};
}

4.4、entries()

4.4.1、概述

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

4.4.2、语法

arr.entries()

4.4.3、返回值

一个新的 Array 迭代器对象。Array Iterator是对象,它的原型(proto:Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的 [key,value]。

4.4.4、示例

4.4.4.1、 Array Iterator

var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);

/*Array Iterator {}
         __proto__:Array Iterator
         next:ƒ next()
         Symbol(Symbol.toStringTag):"Array Iterator"
         __proto__:Object
*/

4.4.4.2、iterator.next()

var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator.next());

/*{value: Array(2), done: false}
          done:false
          value:(2) [0, "a"]
           __proto__: Object
*/
// iterator.next() 返回一个对象,对于有元素的数组,
// 是 next{ value: Array(2), done: false };
// next.done 用于指示迭代器是否完成:在每次迭代时进行更新而且都是 false,
// 直到迭代器结束 done 才是 true。
// next.value 是一个 ["key","value"] 的数组,是返回的迭代器中的元素值。

4.4.4.3、iterator.next 方法运行

var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 实际使用的是这个
for (var i = 0; i < arr.length + 1; i++) {
	// 注意,是 length+1,比数组的长度大
	var tem = iter.next(); // 每次迭代时更新 next
	console.log(tem.done); // 这里可以看到更新后的 done 都是 false
	if (tem.done !== true) {
		// 遍历迭代器结束 done 才是 true
		console.log(tem.value);
		a[i] = tem.value;
	}
}

console.log(a); // 遍历完毕,输出 next.value 的数组

4.4.4.4、二维数组按行排序

function sortArr(arr) {
	var goNext = true;
	var entries = arr.entries();
	while (goNext) {
		var result = entries.next();
		if (result.done !== true) {
			result.value[1].sort((a, b) => a - b);
			goNext = true;
		} else {
			goNext = false;
		}
	}
	return arr;
}

var arr = [
	[1, 34],
	[456, 2, 3, 44, 234],
	[4567, 1, 4, 5, 6],
	[34, 78, 23, 1]
];
sortArr(arr);

/*(4) [Array(2), Array(5), Array(5), Array(4)]
    0:(2) [1, 34]
    1:(5) [2, 3, 44, 234, 456]
    2:(5) [1, 4, 5, 6, 4567]
    3:(4) [1, 23, 34, 78]
    length:4
    __proto__:Array(0)
*/

4.4.4.5、使用for…of 循环

var arr = ["a", "b", "c"];
var iterator = arr.entries();
// undefined

for (let e of iterator) {
	console.log(e);
}

// [0, "a"]
// [1, "b"]
// [2, "c"]

4.5、every()

4.5.1、概述

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

4.5.2、语法

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

4.5.3、参数

4.5.3.1、callback

用来测试每个元素的函数,它可以接收三个参数:
element
用于测试的当前值。
index【可选】
用于测试的当前值的索引。
array【可选】
调用 every 的当前数组。

4.5.3.2、thisArg

执行 callback 时使用的 this 值。

4.5.4、返回值

如果回调函数的每一次返回都为 truthy 值,返回 true,否则返回 false。

4.5.5、描述

every 不会改变原数组。

4.5.6、示例

4.5.6.1、检测所有数组元素的大小

下例检测数组中的所有元素是否都大于 10。

function isBigEnough(element, index, array) {
	return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

4.5.6.2、使用箭头函数

箭头函数为上面的检测过程提供了更简短的语法。

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

4.5.6.3、兼容旧环境

if (!Array.prototype.every) {
	Array.prototype.every = function (callbackfn, thisArg) {
		"use strict";
		var T, k;

		if (this == null) {
			throw new TypeError("this is null or not defined");
		}

		// 1. Let O be the result of calling ToObject passing the this
		//    value as the argument.
		var O = Object(this);

		// 2. Let lenValue be the result of calling the Get internal method
		//    of O with the argument "length".
		// 3. Let len be ToUint32(lenValue).
		var len = O.length >>> 0;

		// 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
		if (typeof callbackfn !== "function") {
			throw new TypeError();
		}

		// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
		if (arguments.length > 1) {
			T = thisArg;
		}

		// 6. Let k be 0.
		k = 0;

		// 7. Repeat, while k < len
		while (k < len) {
			var kValue;

			// a. Let Pk be ToString(k).
			//   This is implicit for LHS operands of the in operator
			// b. Let kPresent be the result of calling the HasProperty internal
			//    method of O with argument Pk.
			//   This step can be combined with c
			// c. If kPresent is true, then
			if (k in O) {
				// i. Let kValue be the result of calling the Get internal method
				//    of O with argument Pk.
				kValue = O[k];

				// ii. Let testResult be the result of calling the Call internal method
				//     of callbackfn with T as the this value and argument list
				//     containing kValue, k, and O.
				var testResult = callbackfn.call(T, kValue, k, O);

				// iii. If ToBoolean(testResult) is false, return false.
				if (!testResult) {
					return false;
				}
			}
			k++;
		}
		return true;
	};
}

4.6、fill()

4.6.1、概述

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

4.6.2、语法

arr.fill(value[, start[, end]])

4.6.3、参数

value:用来填充数组元素的值。
start 【可选】:起始索引,默认值为 0。
end 【可选】:终止索引,默认值为 this.length。

4.6.4、返回值

修改后的数组。

4.6.5、描述

fill 方法接受三个参数 value,start 以及 end. start 和 end 参数是可选的,其默认值分别为 0 和 this 对象的 length 属性值。

4.6.6、示例

[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}];
// 需要注意如果 fill 的参数为引用类型,会导致都执行同一个引用类型
// 如 arr[0] === arr[1] 为 true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

4.6.7、向下兼容

if (!Array.prototype.fill) {
	Object.defineProperty(Array.prototype, "fill", {
		value: function (value) {
			// Steps 1-2.
			if (this == null) {
				throw new TypeError("this is null or not defined");
			}

			var O = Object(this);

			// Steps 3-5.
			var len = O.length >>> 0;

			// Steps 6-7.
			var start = arguments[1];
			var relativeStart = start >> 0;

			// Step 8.
			var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len);

			// Steps 9-10.
			var end = arguments[2];
			var relativeEnd = end === undefined ? len : end >> 0;

			// Step 11.
			var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len);

			// Step 12.
			while (k < final) {
				O[k] = value;
				k++;
			}

			// Step 13.
			return O;
		}
	});
}

4.7、filter()

4.7.1、概述

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

4.7.2、语法

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

4.7.3、参数

4.7.3.1、callback

用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
element
数组中当前正在处理的元素。
index【可选】
正在处理的元素在数组中的索引。
array【可选】
调用了 filter 的数组本身。

4.7.3.2、thisArg【可选】

执行 callback 时,用于 this 的值。

4.7.4、返回值

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

4.7.5、描述

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

4.7.6、示例

筛选排除所有较小的值

下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
	return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

4.7.7、向下兼容

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), // preallocate array
			t = this,
			c = 0,
			i = -1;
		if (thisArg === undefined) {
			while (++i !== len) {
				// checks to see if the key was set
				if (i in this) {
					if (func(t[i], i, t)) {
						res[c++] = t[i];
					}
				}
			}
		} else {
			while (++i !== len) {
				// checks to see if the key was set
				if (i in this) {
					if (func.call(thisArg, t[i], i, t)) {
						res[c++] = t[i];
					}
				}
			}
		}

		res.length = c; // shrink down array to proper size
		return res;
	};
}

4.8、find()

4.8.1、概述

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

4.8.2、语法

arr.find(callback[, thisArg])

4.8.3、参数

4.8.3.1、callback

在数组每一项上执行的函数,接收 3 个参数:
element
当前遍历到的元素。
index【可选】
当前遍历到的索引。
array【可选】
数组本身。

4.8.3.2、thisArg【可选】

执行回调时用作 this 的对象。

4.8.4、返回值

数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

4.8.5、描述

find 方法不会改变数组。

4.8.6、示例

用对象的属性查找数组里的对象

const inventory = [
	{ name: "apples", quantity: 2 },
	{ name: "bananas", quantity: 0 },
	{ name: "cherries", quantity: 5 }
];

function isCherries(fruit) {
	return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

4.8.7、向下兼容

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
	Object.defineProperty(Array.prototype, "find", {
		value: function (predicate) {
			// 1. Let O be ? ToObject(this value).
			if (this == null) {
				throw new TypeError('"this" is null or not defined');
			}

			var o = Object(this);

			// 2. Let len be ? ToLength(? Get(O, "length")).
			var len = o.length >>> 0;

			// 3. If IsCallable(predicate) is false, throw a TypeError exception.
			if (typeof predicate !== "function") {
				throw new TypeError("predicate must be a function");
			}

			// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
			var thisArg = arguments[1];

			// 5. Let k be 0.
			var k = 0;

			// 6. Repeat, while k < len
			while (k < len) {
				// a. Let Pk be ! ToString(k).
				// b. Let kValue be ? Get(O, Pk).
				// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
				// d. If testResult is true, return kValue.
				var kValue = o[k];
				if (predicate.call(thisArg, kValue, k, o)) {
					return kValue;
				}
				// e. Increase k by 1.
				k++;
			}

			// 7. Return undefined.
			return undefined;
		}
	});
}

4.9、findIndex()

4.9.1、概述

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

4.9.2、语法

arr.findIndex(callback[, thisArg])

4.9.3、参数

4.9.3.1、callback

针对数组中的每个元素,都会执行该回调函数,执行时会自动传入下面三个参数:
element
当前元素。
index
当前元素的索引。
array
调用findIndex的数组。

4.9.3.2、thisArg

可选。执行callback时作为this对象的值。

4.9.4、返回值

数组中通过提供测试函数的第一个元素的索引。否则,返回-1

4.9.5、描述

findIndex不会修改所调用的数组。

4.9.6、示例

查找数组中首个质数元素的索引
以下示例查找数组中素数的元素的索引(如果不存在素数,则返回-1)。

function isPrime(element, index, array) {
	var start = 2;
	while (start <= Math.sqrt(element)) {
		if (element % start++ < 1) {
			return false;
		}
	}
	return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

4.9.7、向下兼容

// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
	Object.defineProperty(Array.prototype, "findIndex", {
		value: function (predicate) {
			// 1. Let O be ? ToObject(this value).
			if (this == null) {
				throw new TypeError('"this" is null or not defined');
			}

			var o = Object(this);

			// 2. Let len be ? ToLength(? Get(O, "length")).
			var len = o.length >>> 0;

			// 3. If IsCallable(predicate) is false, throw a TypeError exception.
			if (typeof predicate !== "function") {
				throw new TypeError("predicate must be a function");
			}

			// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
			var thisArg = arguments[1];

			// 5. Let k be 0.
			var k = 0;

			// 6. Repeat, while k < len
			while (k < len) {
				// a. Let Pk be ! ToString(k).
				// b. Let kValue be ? Get(O, Pk).
				// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
				// d. If testResult is true, return k.
				var kValue = o[k];
				if (predicate.call(thisArg, kValue, k, o)) {
					return k;
				}
				// e. Increase k by 1.
				k++;
			}

			// 7. Return -1.
			return -1;
		}
	});
}

4.10、findLast()

4.10.1、概述

findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素,则返回 undefined。

4.10.2、语法

// Arrow function
findLast((element) => { /* ... */ } )
findLast((element, index) => { /* ... */ } )
findLast((element, index, array) => { /* ... */ } )

// Callback function
findLast(callbackFn)
findLast(callbackFn, thisArg)

// Inline callback function
findLast(function(element) { /* ... */ })
findLast(function(element, index) { /* ... */ })
findLast(function(element, index, array){ /* ... */ })
findLast(function(element, index, array) { /* ... */ }, thisArg)

4.10.3、参数

4.10.3.1、callbackFn

数组中测试元素的函数。

函数在被调用时会传递以下参数:

element
当前遍历到的元素。

index
当前遍历到的元素的索引(位置)。

array
调用 findLast() 的数组本身。

回调必须返回一个真值,表示发现一个适当的元素。该元素被 findLast() 返回。

4.10.3.2、thisArg 【可选】

执行 callbackFn 时,用作 this 的对象。

4.10.4、返回值

数组中满足提供的测试函数索引最高的元素;如果没有元素匹配,返回 undefined。

4.10.5、描述

findLast() 方法不会改变调用它的数组

4.10.6、示例

查找与元素属性匹配的数组中的最后一个对象

此示例展示了如何根据数组元素的属性创建测试。

const inventory = [
	{ name: "apples", quantity: 2 },
	{ name: "bananas", quantity: 0 },
	{ name: "fish", quantity: 1 },
	{ name: "cherries", quantity: 5 }
];

// return true inventory stock is low
function isNotEnough(item) {
	return item.quantity < 2;
}

console.log(inventory.findLast(isNotEnough));
// { name: "fish", quantity: 1 }

4.11、findLastIndex()

4.11.1、概述

findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素,则返回 -1。

4.11.2、语法

// Arrow function
findLastIndex((element) => { /* ... */ } )
findLastIndex((element, index) => { /* ... */ } )
findLastIndex((element, index, array) => { /* ... */ } )

// Callback function
findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)

// Inline callback function
findLastIndex(function(element) { /* ... */ })
findLastIndex(function(element, index) { /* ... */ })
findLastIndex(function(element, index, array){ /* ... */ })
findLastIndex(function(element, index, array) { /* ... */ }, thisArg)

4.11.3、参数

4.11.3.1、callbackFn

数组中测试元素的函数。

函数在被调用时会传递以下参数:

element
当前遍历到的元素。

index
当前遍历到的元素的索引(位置)。

array
调用 findLast() 的数组本身。

回调必须返回一个真值,表示发现一个适当的元素。然后这个元素的索引由 findLastIndex() 返回。

4.11.3.2、thisArg 【可选】

执行 callbackFn 时,用作 this 的对象。

4.11.4、返回值

数组中通过测试的最后一个元素(最大的索引)。如果没有任何元素匹配,则返回 -1。

4.11.5、描述

findLastIndex() 方法不会改变调用它的数组

4.11.6、示例

查找数组中最后一个素数的索引
下面的示例返回数组中作为素数的最后一个元素的索引,如果没有素数,则返回 -1。

function isPrime(element) {
	if (element % 2 === 0 || element < 2) {
		return false;
	}
	for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
		if (element % factor === 0) {
			return false;
		}
	}
	return true;
}

console.log([4, 6, 8, 12].findLast(isPrime)); // undefined, not found
console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11

4.12、flat()

4.12.1、概述

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

4.12.2、语法

var newArray = arr.flat([depth])

4.12.3、参数

depth 【可选】:指定要提取嵌套数组的结构深度,默认值为 1。

4.12.4、返回值

一个包含将数组与子数组中所有元素的新数组。

4.12.5、示例

扁平化嵌套数组

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

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

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

扁平化与数组空项

flat() 方法会移除数组中的空项:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

4.13、flatMap()

4.13.1、概述

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

4.13.2、语法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

4.13.3、参数

4.13.3.1、callback

可以生成一个新数组中的元素的函数,可以传入三个参数:
currentValue
当前正在数组中处理的元素
index【可选】
可选的。数组中正在处理的当前元素的索引。
array【可选】
可选的。被调用的 map 数组

4.13.3.2、thisArg【可选】

可选的。执行 callback 函数时 使用的this 值。

4.13.4、返回值

一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为 1。

4.13.5、示例

map() 与 flatMap()

var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

4.14、forEach()

4.14.1、概述

forEach() 方法对数组的每个元素执行一次给定的函数。

4.14.2、语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

4.14.3、参数

4.14.3.1、callback

为数组中每个元素执行的函数,该函数接收一至三个参数:
currentValue
数组中正在处理的当前元素。
index 【可选】
数组中正在处理的当前元素的索引。
array 【可选】
forEach() 方法正在操作的数组。

4.14.3.2、thisArg 可选

可选参数。当执行回调函数 callback 时,用作 this 的值。

4.14.4、返回值

undefined。

4.14.5、描述

forEach() 被调用时,不会改变原数组,也就是调用它的数组

4.14.6、示例

不对未初始化的值进行任何操作
如你所见,3 和 7 之间空缺的数组单元未被 forEach() 调用 callback 函数,或进行任何其他操作。

const arraySparse = [1, 3, , 7];
let numCallbackRuns = 0;

arraySparse.forEach(function (element) {
	console.log(element);
	numCallbackRuns++;
});

console.log("numCallbackRuns: ", numCallbackRuns);

// 1
// 3
// 7
// numCallbackRuns: 3

4.14.7、向下兼容

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
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");
		}

		// 1. Let O be the result of calling toObject() passing the
		// |this| value as the argument.
		var O = Object(this);

		// 2. Let lenValue be the result of calling the Get() internal
		// method of O with the argument "length".
		// 3. Let len be toUint32(lenValue).
		var len = O.length >>> 0;

		// 4. If isCallable(callback) is false, throw a TypeError exception.
		// See: http://es5.github.com/#x9.11
		if (typeof callback !== "function") {
			throw new TypeError(callback + " is not a function");
		}

		// 5. If thisArg was supplied, let T be thisArg; else let
		// T be undefined.
		if (arguments.length > 1) {
			T = thisArg;
		}

		// 6. Let k be 0
		k = 0;

		// 7. Repeat, while k < len
		while (k < len) {
			var kValue;

			// a. Let Pk be ToString(k).
			//    This is implicit for LHS operands of the in operator
			// b. Let kPresent be the result of calling the HasProperty
			//    internal method of O with argument Pk.
			//    This step can be combined with c
			// c. If kPresent is true, then
			if (k in O) {
				// i. Let kValue be the result of calling the Get internal
				// method of O with argument Pk.
				kValue = O[k];

				// ii. Call the Call internal method of callback with T as
				// the this value and argument list containing kValue, k, and O.
				callback.call(T, kValue, k, O);
			}
			// d. Increase k by 1.
			k++;
		}
		// 8. return undefined
	};
}

4.15、includes()

4.15.1、概述

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

4.15.2、语法

arr.includes(valueToFind[, fromIndex])

4.15.3、参数

4.15.3.1、valueToFind

需要查找的元素值。

4.15.3.2、fromIndex 【可选】

从fromIndex 索引处开始查找 valueToFind。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜(即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。

4.15.4、返回值

返回一个布尔值 Boolean 。
如果在数组中(或 fromIndex 指定的范围中)找到了 valueToFind,则返回 true,否则返回 false。

0 的值将全部视为相等,与符号无关(即 -0 与 0 和 +0 相等),但 false 不被认为与 0 相等。

4.15.5、示例

[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

fromIndex 大于等于数组长度
如果 fromIndex 大于等于数组的长度,则将直接返回 false,且不搜索该数组。

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

arr.includes("c", 3); // false
arr.includes("c", 100); // false

计算出的索引小于 0
如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。

// array length is 3
// fromIndex is -100
// computed index is 3 + (-100) = -97

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

4.15.6、向下兼容

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
	Object.defineProperty(Array.prototype, "includes", {
		value: function (valueToFind, fromIndex) {
			if (this == null) {
				throw new TypeError('"this" is null or not defined');
			}

			// 1. Let O be ? ToObject(this value).
			var o = Object(this);

			// 2. Let len be ? ToLength(? Get(O, "length")).
			var len = o.length >>> 0;

			// 3. If len is 0, return false.
			if (len === 0) {
				return false;
			}

			// 4. Let n be ? ToInteger(fromIndex).
			//    (If fromIndex is undefined, this step produces the value 0.)
			var n = fromIndex | 0;

			// 5. If n ≥ 0, then
			//  a. Let k be n.
			// 6. Else n < 0,
			//  a. Let k be len + n.
			//  b. If k < 0, let k be 0.
			var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

			function sameValueZero(x, y) {
				return x === y || (typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y));
			}

			// 7. Repeat, while k < len
			while (k < len) {
				// a. Let elementK be the result of ? Get(O, ! ToString(k)).
				// b. If SameValueZero(valueToFind, elementK) is true, return true.
				if (sameValueZero(o[k], valueToFind)) {
					return true;
				}
				// c. Increase k by 1.
				k++;
			}

			// 8. Return false
			return false;
		}
	});
}

4.16、indexOf()

4.16.1、概述

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

4.16.2、语法

arr.indexOf(searchElement[, fromIndex])

4.16.3、参数

searchElement
要查找的元素
fromIndex 【可选】
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回 -1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于 0,则整个数组都将会被查询。其默认值为 0。

4.16.4、返回值

首个被找到的元素在数组中的索引位置;若没有找到则返回 -1

4.16.5、示例

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

4.16.6、向下兼容

// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
	Array.prototype.indexOf = function (searchElement, fromIndex) {
		var k;

		// 1. Let O be the result of calling ToObject passing
		//    the this value as the argument.
		if (this == null) {
			throw new TypeError('"this" is null or not defined');
		}

		var O = Object(this);

		// 2. Let lenValue be the result of calling the Get
		//    internal method of O with the argument "length".
		// 3. Let len be ToUint32(lenValue).
		var len = O.length >>> 0;

		// 4. If len is 0, return -1.
		if (len === 0) {
			return -1;
		}

		// 5. If argument fromIndex was passed let n be
		//    ToInteger(fromIndex); else let n be 0.
		var n = +fromIndex || 0;

		if (Math.abs(n) === Infinity) {
			n = 0;
		}

		// 6. If n >= len, return -1.
		if (n >= len) {
			return -1;
		}

		// 7. If n >= 0, then Let k be n.
		// 8. Else, n<0, Let k be len - abs(n).
		//    If k is less than 0, then let k be 0.
		k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

		// 9. Repeat, while k < len
		while (k < len) {
			// a. Let Pk be ToString(k).
			//   This is implicit for LHS operands of the in operator
			// b. Let kPresent be the result of calling the
			//    HasProperty internal method of O with argument Pk.
			//   This step can be combined with c
			// c. If kPresent is true, then
			//    i.  Let elementK be the result of calling the Get
			//        internal method of O with the argument ToString(k).
			//   ii.  Let same be the result of applying the
			//        Strict Equality Comparison Algorithm to
			//        searchElement and elementK.
			//  iii.  If same is true, return k.
			if (k in O && O[k] === searchElement) {
				return k;
			}
			k++;
		}
		return -1;
	};
}

4.17、join()

4.17.1、概述

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

4.17.2、语法

arr.join([separator])

4.17.3、参数

separator 【可选】:指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串 (“”),则所有元素之间都没有任何字符。

4.17.4、返回值

一个所有数组元素连接的字符串。如果 arr.length 为 0,则返回空字符串。

4.17.5、示例

下例首先创建了一个数组 a,包含有三个元素,然后用四种不同的分隔符连接所有数组元素。首先是默认的分隔符逗号,然后是一个逗号加空格,接下来是一个加号前后加空格,最后是一个空字符串。

var a = ["Wind", "Rain", "Fire"];
var myVar1 = a.join(); // myVar1 的值变为"Wind,Rain,Fire"
var myVar2 = a.join(", "); // myVar2 的值变为"Wind, Rain, Fire"
var myVar3 = a.join(" + "); // myVar3 的值变为"Wind + Rain + Fire"
var myVar4 = a.join(""); // myVar4 的值变为"WindRainFire"

4.18、keys()

4.18.1、概述

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

4.18.2、语法

arr.keys()

4.18.3、返回值

一个新的 Array 迭代器对象。

4.18.4、示例

索引迭代器会包含那些没有对应元素的索引

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]

4.19、lastIndexOf()

4.19.1、概述

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

4.19.2、语法

arr.lastIndexOf(searchElement[, fromIndex])

4.19.3、参数

searchElement:被查找的元素。
fromIndex 【可选】:从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

4.19.4、返回值

数组中该元素最后一次出现的索引,如未找到返回-1。

4.19.5、示例

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

4.19.6、向下兼容

if (!Array.prototype.lastIndexOf) {
	Array.prototype.lastIndexOf = function (searchElement /*, fromIndex*/) {
		"use strict";

		if (this === void 0 || this === null) {
			throw new TypeError();
		}

		var n,
			k,
			t = Object(this),
			len = t.length >>> 0;
		if (len === 0) {
			return -1;
		}

		n = len - 1;
		if (arguments.length > 1) {
			n = Number(arguments[1]);
			if (n != n) {
				n = 0;
			} else if (n != 0 && n != 1 / 0 && n != -(1 / 0)) {
				n = (n > 0 || -1) * Math.floor(Math.abs(n));
			}
		}

		for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
			if (k in t && t[k] === searchElement) {
				return k;
			}
		}
		return -1;
	};
}

4.20、map()

4.20.1、概述

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

4.20.2、语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

4.20.3、参数

4.20.3.1、callback

生成新数组元素的函数,使用三个参数:
currentValue
callback 数组中正在处理的当前元素。
index【可选】
callback 数组中正在处理的当前元素的索引。
array【可选】
map 方法调用的数组。

4.20.3.2、thisArg【可选】

执行 callback 函数时值被用作this。

4.20.4、返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

4.20.5、描述

map 不修改调用它的原数组本身

4.20.6、示例

求数组中每个元素的平方根

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

4.20.7、向下兼容

// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: https://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
	Array.prototype.map = function (callback /*, thisArg*/) {
		var T, A, k;

		if (this == null) {
			throw new TypeError("this is null or not defined");
		}

		// 1. Let O be the result of calling ToObject passing the |this|
		//    value as the argument.
		var O = Object(this);

		// 2. Let lenValue be the result of calling the Get internal
		//    method of O with the argument "length".
		// 3. Let len be ToUint32(lenValue).
		var len = O.length >>> 0;

		// 4. If IsCallable(callback) is false, throw a TypeError exception.
		// See: http://es5.github.com/#x9.11
		if (typeof callback !== "function") {
			throw new TypeError(callback + " is not a function");
		}

		// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
		if (arguments.length > 1) {
			T = arguments[1];
		}

		// 6. Let A be a new array created as if by the expression new Array(len)
		//    where Array is the standard built-in constructor with that name and
		//    len is the value of len.
		A = new Array(len);

		// 7. Let k be 0
		k = 0;

		// 8. Repeat, while k < len
		while (k < len) {
			var kValue, mappedValue;

			// a. Let Pk be ToString(k).
			//   This is implicit for LHS operands of the in operator
			// b. Let kPresent be the result of calling the HasProperty internal
			//    method of O with argument Pk.
			//   This step can be combined with c
			// c. If kPresent is true, then
			if (k in O) {
				// i. Let kValue be the result of calling the Get internal
				//    method of O with argument Pk.
				kValue = O[k];

				// ii. Let mappedValue be the result of calling the Call internal
				//     method of callback with T as the this value and argument
				//     list containing kValue, k, and O.
				mappedValue = callback.call(T, kValue, k, O);

				// iii. Call the DefineOwnProperty internal method of A with arguments
				// Pk, Property Descriptor
				// { Value: mappedValue,
				//   Writable: true,
				//   Enumerable: true,
				//   Configurable: true },
				// and false.

				// In browsers that support Object.defineProperty, use the following:
				// Object.defineProperty(A, k, {
				//   value: mappedValue,
				//   writable: true,
				//   enumerable: true,
				//   configurable: true
				// });

				// For best browser support, use the following:
				A[k] = mappedValue;
			}
			// d. Increase k by 1.
			k++;
		}

		// 9. return A
		return A;
	};
}

4.21、pop()

4.21.1、概述

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

4.21.2、语法

arr.pop()

4.21.3、返回值

从数组中删除的元素(当数组为空时返回undefined)。

4.21.4、描述

如果你在一个空数组上调用 pop(),它将返回 undefined。

4.21.5、示例

const myFish = ["angel", "clown", "mandarin", "sturgeon"];

const popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin']

console.log(popped); // 'sturgeon'

4.22、push()

4.22.1、概述

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

4.22.2、语法

arr.push(element1, ..., elementN)

4.22.3、参数

elementN:被添加到数组末尾的元素。

4.22.4、返回值

当调用该方法时,新的 length 属性值将被返回。

4.22.5、示例

添加元素到数组

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports);
// ["soccer", "baseball", "football", "swimming"]

console.log(total);
// 4

4.23、reduce()

4.23.1、概述

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

reducer 逐个遍历数组元素,每一步都将当前元素的值与上一步的计算结果相加(上一步的计算结果是当前元素之前所有元素的总和)——直到没有更多的元素被相加。

4.23.2、语法

// Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

4.23.3、参数

4.23.3.1、callbackFn

一个 “reducer” 函数,包含四个参数:

previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。
currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
array:用于遍历的数组。

4.23.3.2、initialValue【可选】

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。

4.23.4、返回值

使用 “reducer” 回调函数遍历整个数组后的结果。

4.23.5、描述

如果数组为空且未指定初始值 initialValue,则会抛出 TypeError。

如果数组仅有一个元素(无论位置如何)并且没有提供初始值 initialValue,或者有提供 initialValue 但是数组为空,那么此唯一值将被返回且 callbackfn 不会被执行。

4.23.6、示例

求数组所有值的和

let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
	return previousValue + currentValue;
}, 0);
// sum is 6

4.27、reduceRight()

4.27.1、概述

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

4.27.2、语法

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

4.27.3、参数

4.27.3.1、callback

一个回调函数,用于操作数组中的每个元素,它可接受四个参数:
accumulator
累加器:上一次调用回调函数时,回调函数返回的值。首次调用回调函数时,如果 initialValue 存在,累加器即为 initialValue,否则须为数组中的最后一个元素。
currentValue
当前元素:当前被处理的元素。
index【可选】
数组中当前被处理的元素的索引。
array【可选】
调用 reduceRight() 的数组。

4.27.3.2、initialValue可选

首次调用 callback 函数时,累加器 accumulator 的值。如果未提供该初始值,则将使用数组中的最后一个元素,并跳过该元素。如果不给出初始值,则需保证数组不为空。
否则,在空数组上调用 reduce 或 reduceRight 且未提供初始值(例如 [].reduce( (acc, cur, idx, arr) => {} ) )的话,会导致类型错误 TypeError: reduce of empty array with no initial value。

4.27.4、返回值

执行之后的返回值。

4.27.5、描述

首次调用回调函数时,accumulator 和 currentValue 的可能取值情况有两种:

  • 如果在调用 reduceRight 时提供了 initialValue 参数,则 accumulator 等于 initialValue,currentValue 等于数组中的最后一个元素。
  • 如果没有提供 initialValue 参数,则 accumulator 等于数组最后一个元素, currentValue 等于数组中倒数第二个元素。

如果数组为空,但提供了 initialValue 参数,或如果数组中只有一个元素,且没有提供 initialValue 参数,将会直接返回 initialValue 参数或数组中的那一个元素。这两种情况下,都不会调用 callback 函数。

如果数组为空,且没有提供 initialValue 参数,则会抛出一个 TypeError 错误。
JavaScript系列之Array对象_第2张图片

4.27.6、示例

求一个数组中所有值的和

var sum = [0, 1, 2, 3].reduceRight(function (a, b) {
	return a + b;
});
// sum is 6

4.27.7、向下兼容

// Production steps of ECMA-262, Edition 5, 15.4.4.22
// Reference: http://es5.github.io/#x15.4.4.22
if ("function" !== typeof Array.prototype.reduceRight) {
	Array.prototype.reduceRight = function (callback /*, initialValue*/) {
		"use strict";
		if (null === this || "undefined" === typeof this) {
			throw new TypeError("Array.prototype.reduceRight called on null or undefined");
		}
		if ("function" !== typeof callback) {
			throw new TypeError(callback + " is not a function");
		}
		var t = Object(this),
			len = t.length >>> 0,
			k = len - 1,
			value;
		if (arguments.length >= 2) {
			value = arguments[1];
		} else {
			while (k >= 0 && !(k in t)) {
				k--;
			}
			if (k < 0) {
				throw new TypeError("reduceRight of empty array with no initial value");
			}
			value = t[k--];
		}
		for (; k >= 0; k--) {
			if (k in t) {
				value = callback(value, t[k], k, t);
			}
		}
		return value;
	};
}

4.28、reverse()

4.28.1、概述

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

4.28.2、语法

arr.reverse()

4.28.3、返回值

颠倒后的数组。

4.28.4、示例

const a = [1, 2, 3];

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

a.reverse();

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

4.29、shift()

4.29.1、概述

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

4.29.2、语法

arr.shift()

4.29.3、返回值

从数组中删除的元素; 如果数组为空则返回undefined 。

4.29.4、示例

let myFish = ["angel", "clown", "mandarin", "surgeon"];

console.log("调用 shift 之前: " + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log("调用 shift 之后: " + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"

console.log("被删除的元素: " + shifted);
// "被删除的元素: angel"

4.30、slice()

4.30.1、概述

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

4.30.2、语法

arr.slice([begin[, end]])

4.30.3、参数

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 也会一直提取到原数组末尾。

4.30.4、返回值

一个含有被提取元素的新数组。

4.30.5、描述

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

4.30.6、示例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

4.31、some()

4.31.1、概述

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

4.31.2、语法

arr.some(callback(element[, index[, array]])[, thisArg])

4.31.3、参数

4.31.3.1、callback

用来测试每个元素的函数,接受三个参数:
element
数组中正在处理的元素。
index 【可选】
数组中正在处理的元素的索引值。
array【可选】
some()被调用的数组。

4.31.3.2、thisArg【可选】

执行 callback 时使用的 this 值。

4.31.4、返回值

数组中有至少一个元素通过回调函数的测试就会返回true;所有元素都没有通过回调函数的测试返回值才会为 false。

4.31.5、描述

some() 被调用时不会改变数组。

4.31.6、示例

function isBiggerThan10(element, index, array) {
	return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

4.31.7、向下兼容

// Production steps of ECMA-262, Edition 5, 15.4.4.17
// Reference: http://es5.github.io/#x15.4.4.17
if (!Array.prototype.some) {
	Array.prototype.some = function (fun /*, thisArg*/) {
		"use strict";

		if (this == null) {
			throw new TypeError("Array.prototype.some called on null or undefined");
		}

		if (typeof fun !== "function") {
			throw new TypeError();
		}

		var t = Object(this);
		var len = t.length >>> 0;

		var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
		for (var i = 0; i < len; i++) {
			if (i in t && fun.call(thisArg, t[i], i, t)) {
				return true;
			}
		}

		return false;
	};
}

4.32、sort()

4.32.1、概述

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

4.32.2、语法

arr.sort([compareFunction])

4.32.3、参数

4.32.3.1、compareFunction【可选】

用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。

4.32.4、返回值

排序后的数组。请注意,数组已原地排序,并且不进行复制。

4.32.5、示例

var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
	return a - b;
}

console.log("stringArray:" + stringArray.join());
console.log("Sorted:" + stringArray.sort());

console.log("numberArray:" + numberArray.join());
console.log("Sorted without a compare function:" + numberArray.sort());
console.log("Sorted with compareNumbers:" + numberArray.sort(compareNumbers));

console.log("numericStringArray:" + numericStringArray.join());
console.log("Sorted without a compare function:" + numericStringArray.sort());
console.log("Sorted with compareNumbers:" + numericStringArray.sort(compareNumbers));

console.log("mixedNumericArray:" + mixedNumericArray.join());
console.log("Sorted without a compare function:" + mixedNumericArray.sort());
console.log("Sorted with compareNumbers:" + mixedNumericArray.sort(compareNumbers));

结果入下:

stringArray: Blue,Humpback,Beluga
Sorted: Beluga,Blue,Humpback

numberArray: 40,1,5,200
Sorted without a compare function: 1,200,40,5
Sorted with compareNumbers: 1,5,40,200

numericStringArray: 80,9,700
Sorted without a compare function: 700,80,9
Sorted with compareNumbers: 9,80,700

mixedNumericArray: 80,9,700,40,1,5,200
Sorted without a compare function: 1,200,40,5,700,80,9
Sorted with compareNumbers: 1,5,9,40,80,200,700

4.33、splice()

4.33.1、概述

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

4.33.2、语法

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

4.33.3、参数

start

指定修改的开始位置(从 0 计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从 -1 计数,这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n);如果负数的绝对值大于数组的长度,则表示开始位置为第 0 位。
deleteCount 【可选】
整数,表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。
item1, item2, … 【可选】
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

4.33.4、返回值

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

4.33.5、示例

从索引 2 的位置开始删除 0 个元素,插入“drum” 和 “guitar”

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum", "guitar");

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

4.34、toLocaleString()

4.34.1、概述

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。

4.34.2、语法

arr.toLocaleString([locales[,options]]);

4.34.3、参数

locales 【可选】
带有 BCP 47 语言标记的字符串或字符串数组
options 【可选】
一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString()。

4.34.4、返回值

表示数组元素的字符串。

4.34.5、示例

var prices = ["¥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "¥7,¥500,¥8,123,¥12"

4.34.6、向下兼容

// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
if (!Array.prototype.toLocaleString) {
	Object.defineProperty(Array.prototype, "toLocaleString", {
		value: function (locales, options) {
			// 1. Let O be ? ToObject(this value).
			if (this == null) {
				throw new TypeError('"this" is null or not defined');
			}

			var a = Object(this);

			// 2. Let len be ? ToLength(? Get(A, "length")).
			var len = a.length >>> 0;

			// 3. Let separator be the String value for the
			//    list-separator String appropriate for the
			//    host environment's current locale (this is
			//    derived in an implementation-defined way).
			// NOTE: In this case, we will use a comma
			var separator = ",";

			// 4. If len is zero, return the empty String.
			if (len === 0) {
				return "";
			}

			// 5. Let firstElement be ? Get(A, "0").
			var firstElement = a[0];
			// 6. If firstElement is undefined or null, then
			//  a.Let R be the empty String.
			// 7. Else,
			//  a. Let R be ?
			//     ToString(?
			//       Invoke(
			//        firstElement,
			//        "toLocaleString",
			//        « locales, options »
			//       )
			//     )
			var r = firstElement == null ? "" : firstElement.toLocaleString(locales, options);

			// 8. Let k be 1.
			var k = 1;

			// 9. Repeat, while k < len
			while (k < len) {
				// a. Let S be a String value produced by
				//   concatenating R and separator.
				var s = r + separator;

				// b. Let nextElement be ? Get(A, ToString(k)).
				var nextElement = a[k];

				// c. If nextElement is undefined or null, then
				//   i. Let R be the empty String.
				// d. Else,
				//   i. Let R be ?
				//     ToString(?
				//       Invoke(
				//        nextElement,
				//        "toLocaleString",
				//        « locales, options »
				//       )
				//     )
				r = nextElement == null ? "" : nextElement.toLocaleString(locales, options);

				// e. Let R be a String value produced by
				//   concatenating S and R.
				r = s + r;

				// f. Increase k by 1.
				k++;
			}

			// 10. Return R.
			return r;
		}
	});
}

4.35、toString()

4.35.1、概述

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

4.35.2、语法

arr.toString()

4.35.3、返回值

一个表示指定的数组及其元素的字符串。

4.36、unshift()

4.36.1、概述

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

4.36.2、语法

arr.unshift(element1, ..., elementN)

4.36.3、参数

elementN
要添加到数组开头的元素或多个元素。

4.36.4、返回值

当一个对象调用该方法时,返回其 length 属性值。

4.36.5、示例

let arr = [1, 2];

arr.unshift(0); // result of the call is 3, which is the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // the new array length is 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); // the new array length is 6
// arr is [[-4, -3], -2, -1, 0, 1, 2]

arr.unshift([-7, -6], [-5]); // the new array length is 8
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]

4.37、values()

4.37.1、概述

values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。

4.37.2、语法

arr.values()

4.37.3、返回值

一个新的 Array 迭代对象。

4.37.4、示例

const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();

for (let letter of iterator) {
	console.log(letter);
} //"a" "b" "c" "d" "e"

后记

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

JavaScript系列之Array对象_第3张图片

你可能感兴趣的:(JavaScript,javascript,前端,开发语言,Array)