转行学前端的第 33 天 : 了解 ECMAScript Array 实例对象方法

446 阅读25分钟

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标

昨天主要是基于搜索来基础学习 Array 对象,今天准备学习一下Array实例对象的方法 ,又是适合学习的一天,加油,小又又!!!!


今日学习概要

  • 对于数组实例方法进行整体了解
  • 对于感兴趣的方法进行详细了解

实例方法总结

数组连接相关

方法名 详细说明
concat(value1[, value2[, ...[, valueN]]]) concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
copyWithin(target[, start[, end]]) copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。
fill(value[, start[, end]]) fill() 方法用一个固定值填充一个数组中从起始索引终止索引内的全部元素。
join([separator]) join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

数组遍历相关

方法名 详细说明
entries() entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对
filter(callback(element[, index[, array]])[, thisArg]) filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
forEach(callback(currentValue [, index [, array]])[, thisArg]) forEach() 方法对数组的每个元素执行一次给定的函数。
keys() keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。
map(function callback(currentValue[, index[, array]]) {}[, thisArg]) map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。
reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue]) reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。
values() values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

数组检索相关

方法名 详细说明
every(callback[, thisArg]) every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。
find(callback[, thisArg]) find() 方法返回数组中满足提供的测试函数的第一个元素的值。
findIndex(callback[, thisArg]) findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引
includes(valueToFind[, fromIndex]) includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false
indexOf(searchElement[, fromIndex]) indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
lastIndexOf(searchElement[, fromIndex]) lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。
some(callback(element[, index[, array]])[, thisArg]) some() 方法测试是否至少有一个元素可以通过被提供的函数方法。

数组追加相关

方法名 详细说明
pop() pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
push(element1, ..., elementN) push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
shift() shift() 方法从数组中删除第一个元素,并返回该元素的值。
unshift() unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

数组与字符串转换

方法名 详细说明
toLocaleString([locales[,options]]) toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
toString() toString() 返回一个字符串,表示指定的数组及其元素。

其他

方法名 详细说明
flat([depth]) flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
flatMap(function callback(currentValue[, index[, array]]) {}[, thisArg]) flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
reverse() reverse()方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
slice([begin[, end]]) slice()方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
sort([compareFunction]) sort()方法用原地算法对数组的元素进行排序,并返回数组。

数组连接

Array.prototype.copyWithin()

基础语法

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

参数说明

target

0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。 如果 target 大于等于 arr.length,将会不发生拷贝。如果 targetstart 之后,复制的序列将被修改以符合 arr.length


start

0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。 如果 start 被忽略,copyWithin 将会从0开始复制。


end

0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。 如果 end 被忽略,copyWithin 将会复制到 arr.length


返回值说明

改变了的数组。


详细说明

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

参数target,startend 必须为整数。

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

copyWithin方法不要求其this值必须是一个数组对象;除此之外,copyWithin是一个可变方法,它可以改变this对象本身,并且返回它,而不仅仅是它的拷贝。

copyWithin 就像 CC++memcpy 函数一样,且它是用来移动 Array 或者 TypedArray 数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。

copyWithin 函数是设计为通用的,其不要求其 this 值必须是一个数组对象。

The copyWithin 是一个可变方法,它不会改变 thislength,但是会改变 this 本身的内容,且需要时会创建新的属性。


案例

var array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 2 (c)
// ['a', 'b', 'c', 'd', 'e'] ==> ["c", "b", "c", "d", "e"]
console.log(array1.copyWithin(0, 2, 3));

// copy to index 0 the element between index 2 and index 3 (c,d) 
// ["c", "b", "c", "d", "e"] ==> ["c", "d", "c", "d", "e"]
console.log(array1.copyWithin(0, 2, 4));


Array.prototype.fill()

基础语法

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

参数说明

value

用来填充数组元素的值。


start

可选参数,起始索引,默认值为0


end

可选参数,终止索引,默认值为 this.length


返回值说明

修改后的数组。


详细说明

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

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

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 lengththis 对象的 length 属性值。

如果 end 是个负数, 则结束索引会被自动计算成为 length+end

fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。

fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本。

当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。


案例

[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]


数组遍历

Array.prototype.entries()

基础语法

arr.entries()

返回值说明

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


详细说明

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


案例

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"]的数组,是返回的迭代器中的元素值。

Array.prototype.filter()

基础语法

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

参数说明

callback

用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。 返回true表示保留该元素(通过测试),false则不保留。它接受三个参数:

  • element 当前在数组中处理的元素。
  • index 可选 正在处理元素在数组中的索引。
  • array 可选 调用了filter的数组。

thisArg 可选

可选。执行 callback 时的用于 this 的值。


返回值说明

一个新的通过测试的元素的集合的数组,如果没有通过测试则返回空数组


详细说明

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

filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。

callback 被调用时传入三个参数:元素的值元素的索引被遍历的数组

如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callbackthis 值在非严格模式下将是全局对象,严格模式下为 undefined

callback 最终观察到的this值是根据通常函数所看到的 this的规则确定的。

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

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


案例

以下示例使用filter()根据搜索条件过滤数组内容

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Array.prototype.keys()

基础语法

arr.keys()

返回值说明

一个新的 Array 迭代器对象。Array Iterator是对象


详细说明

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


案例

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


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

Array.prototype.reduce()

基础语法

arr.reduce(callback[initialValue])

参数说明

callback

执行数组中每个值的函数,包含四个参数:

  • accumulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
  • currentValue 数组中正在处理的元素。
  • currentIndex 可选 数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1
  • array 可选 调用reduce()的数组

initialValue 可选

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。


返回值说明

函数累计处理的结果


详细说明

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除从未被赋值的元素。

reducer 函数接收4个参数:

  • accumulator (acc) (累计器)
  • Current Value (cur) (当前值)
  • Current Index (idx) (当前索引)
  • Source Array (src) (源数组)

reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:如果调用reduce()时提供了initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。

注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

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

提供初始值通常更安全,正如下面的例子,如果没有提供initialValue,则可能有三种输出:

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() 没有初始值
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce; 这是更好的方案,即使传入空数组或更大数组也可正常执行
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

运行说明

假如运行下段reduce()代码:

[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr );

callback 被调用四次,每次调用的参数和返回值如下表:

callback accumulator currentValue currentIndex array return value
first call 0 1 1 [0, 1, 2, 3, 4] 1
second call 1 2 2 [0, 1, 2, 3, 4] 3
third call 3 3 3 [0, 1, 2, 3, 4] 6
fourth call 6 4 4 [0, 1, 2, 3, 4] 10

reduce返回的值将是上次回调调用的值(10)

如果你打算提供一个初始值作为reduce()方法的第二个参数,以下是运行过程及结果:

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 10 );
callback accumulator currentValue currentIndex array return value
first call 10 0 0 [0, 1, 2, 3, 4] 10
second call 10 1 1 [0, 1, 2, 3, 4] 11
third call 11 2 2 [0, 1, 2, 3, 4] 13
fourth call 13 3 3 [0, 1, 2, 3, 4] 16
fifth call 16 4 4 [0, 1, 2, 3, 4] 20

这种情况下reduce()返回的值是20


案例

要累加对象数组中包含的值,必须提供初始值,以便各个item正确通过你的函数。

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6

Array.prototype.values()

基础语法

arr.values()

返回值说明

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


详细说明

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


案例

使用 for...of 循环进行迭代


let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
// 您的浏览器必须支持 for..of 循环
// 以及 let —— 将变量作用域限定在 for 循环中
for (let letter of eArr) {
  console.log(letter);
}

数组检索

Array.prototype.every()

基础语法

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

参数说明

callback

在数组每一项上执行的函数,接收 3 个参数:

  • element

当前遍历到的元素。

  • index

当前遍历到的索引。

  • array

数组本身。


thisArg 可选

可选,指定 callbackthis 参数。


返回值说明

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

若收到一个空数组,此方法在一切情况下都会返回 true

every 和数学中的所有类似,当所有的元素都符合条件才会返回true。正因如此,若传入一个空数组,无论如何都会返回 true。(这种情况属于无条件正确:正因为一个空集合没有元素,所以它其中的所有元素都符合给定的条件。)


详细说明

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

every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个会使 callback 返回 falsy 的元素。

如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 trueevery 就会返回 truecallback 只会为那些已经被赋值的索引调用。

不会为那些被删除或从未被赋值的索引调用。

callback 在被调用时可传入三个参数:元素值,元素的索引原数组

如果为 every 提供一个 thisArg 参数,则该参数为调用 callback 时的 this 值。如果省略该参数,则 callback 被调用时的 this 值,在非严格模式下为全局对象,在严格模式下传入 undefined。详见 [this][this] 条目。

every 不会改变原数组。

every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。

如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。

那些被删除的元素或从来未被赋值的元素将不会被访问到。


案例

检测所有数组元素的大小

下例检测数组中的所有元素是否都大于 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

Array.prototype.find()

基础语法

arr.find(callback[, thisArg])

参数说明

callback

在数组每一项上执行的函数,接收 3 个参数:

  • element 当前遍历到的元素。
  • index 当前遍历到的索引。
  • array 数组本身。

thisArg 可选

可选,指定 callbackthis 参数。


返回值说明

当某个元素通过 callback 的测试时,返回数组中的一个值,否则返回 undefined


详细说明

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。 另请参见 findIndex() 方法,它返回数组中找到的元素的索引,而不是其值

如果你需要找到一个元素的位置或者一个元素是否存在于数组中,使用Array.prototype.indexOf()Array.prototype.includes()

find 方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined。注意 callback 函数会为数组中的每个索引调用即从 0length - 1,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索引的方法。

callback 函数带有3个参数:当前元素的值当前元素的索引,以及数组本身

如果提供了 thisArg 参数,那么它将作为每次 callback 函数执行时的上下文对象,否则上下文对象为 undefined

find 方法不会改变数组。

在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。


案例

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

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 }

Array.prototype.findIndex()

基础语法

arr.findIndex(callback[, thisArg])

参数说明

callback

在数组每一项上执行的函数,接收 3 个参数:

  • element 当前遍历到的元素。
  • index 当前遍历到的索引。
  • array 数组本身。

thisArg 可选

可选,指定 callbackthis 参数。


返回值说明

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


详细说明

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

另请参见 find() 方法,它返回数组中找到的元素的,而不是其索引

findIndex方法对数组中的每个数组索引0..length-1(包括)执行一次callback函数,直到找到一个callback函数返回真实值(强制为true)的值。如果找到这样的元素,findIndex会立即返回该元素的索引。如果回调从不返回真值,或者数组的length0,则findIndex返回-1。 与某些其他数组方法(如Array#some)不同,在稀疏数组中,即使对于数组中不存在的条目的索引也会调用回调函数。

回调函数调用时有三个参数:元素的值元素的索引,以及被遍历的数组

如果一个 thisArg 参数被提供给 findIndex, 它将会被当作this使用在每次回调函数被调用的时候。如果没有被提供,将会使用undefined

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

在第一次调用callback函数时会确定元素的索引范围,因此在findIndex方法开始执行之后添加到数组的新元素将不会被callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍然会被访问到。


案例

查找数组中首个质数元素的索引

以下示例查找数组中素数的元素的索引(如果不存在素数,则返回-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

Array.prototype.includes()

基础语法

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数说明

searchElement

需要查找的元素值。


fromIndex 可选

从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0


返回值说明

一个 Boolean


详细说明

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


案例

[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

Array.prototype.indexOf()

基础语法

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

参数说明

searchElement

要查找的元素


fromIndex

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。

注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.


返回值说明

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


详细说明

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

indexOf 使用strict equality (无论是 ===, 还是 triple-equals操作符都基于同样的方法)进行判断 searchElement与数组中包含的元素之间的关系。


案例

以下例子使用indexOf方法确定多个值在数组中的位置。

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

Array.prototype.some()

基础语法

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

参数说明

callback

在数组每一项上执行的函数,接收 3 个参数:

  • element

当前遍历到的元素。

  • index

当前遍历到的索引。

  • array

数组本身。


thisArg 可选

可选,指定 callbackthis 参数。


返回值说明

如果回调函数返回至少一个数组元素的truthy值,则返回true;否则为false

注意:对于空数组上的任何条件,此方法返回false


详细说明

some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。

some() 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个真值(即可转换为布尔值 true 的值)。

如果找到了这样一个值,some() 将会立即返回 true

否则,some() 返回 falsecallback 只会在那些有值的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。

callback 被调用时传入三个参数:元素的,元素的索引,被遍历的数组

将会把它传给被调用的 callback,作为 this 值。否则,在非严格模式下将会是全局对象,严格模式下是 undefined

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

some() 遍历的元素的范围在第一次调用 callback. 时就已经确定了。

在调用 some() 后被添加到数组中的值不会被 callback 访问到。

如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some() 访问到它那一刻的值。


案例

下面的例子检测在数组中是否有元素大于 10

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

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

其他

Array.prototype.flat()

基础语法

var newArray = arr.flat(depth)

参数说明

depth

指定要提取嵌套数组的结构深度,默认值为 1


返回值说明

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


详细说明

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


案例

扁平化嵌套数组

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

var arr3 = [1, 2, [3, 4, [5, 6]]];

//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap()

基础语法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])

参数说明

callback

在数组每一项上执行的函数,接收 3 个参数:

  • currentValue

当前正在数组中处理的元素

  • index

当前遍历到的索引。

  • array

数组本身。


thisArg 可选

可选,指定 callbackthis 参数。


返回值说明

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


详细说明

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

它与 map 和 深度值1flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

有关回调函数的详细描述,请参见 [Array.prototype.map()][map] 。 flatMap 方法与 [map][map] 方法和深度depth1的 [flat][flat] 几乎相同.


案例

MapflatMap

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

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


今日学习总结


今日心情

今日主要是基于搜索来仔细学习 Array 实例方法,一共有30个方法,分了六类,对于其中感兴趣的进行了详细了解,印象感觉比较厉害的是那几个返回迭代器iterator的方法~~~,因为不太懂迭代器~~~,还有那个reduce方法,感觉案例有很多玩法~~

希望明天学习到更多东西~~~~

本文使用 mdnice 排版