我是小又又,住在武汉,做了两年新媒体,准备用 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
,将会不发生拷贝。如果 target
在 start
之后,复制的序列将被修改以符合 arr.length
。
start
0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。 如果 start 被忽略,copyWithin 将会从0开始复制。
end
0
为基底的索引,开始复制元素的结束位置。copyWithin
将会拷贝到该位置,但不包括 end
这个位置的元素。如果是负数, end
将从末尾开始计算。
如果 end
被忽略,copyWithin
将会复制到 arr.length
。
返回值说明
改变了的数组。
详细说明
copyWithin()
方法浅复制
数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。
参数target
,start
和end
必须为整数。
如果start
为负,则其指定的索引位置等同于length+start
,length
为数组的长度。end
也是如此。
copyWithin
方法不要求其this
值必须是一个数组对象;除此之外,copyWithin
是一个可变方法,它可以改变this
对象本身,并且返回它,而不仅仅是它的拷贝。
copyWithin
就像 C
和 C++
的 memcpy
函数一样,且它是用来移动 Array
或者 TypedArray
数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。
copyWithin
函数是设计为通用的,其不要求其 this
值必须是一个数组对象。
The copyWithin
是一个可变方法,它不会改变 this
的 length
,但是会改变 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
. start
和 end
参数是可选的, 其默认值分别为 0
和 this
对象的 length
属性值。
如果 start
是个负数, 则开始索引会被自动计算成为 length+start
, 其中 length
是 this
对象的 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
值。否则,callback
的 this
值在非严格模式下将是全局对象,严格模式下为 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
函数的返回值
分配给累计器
,该返回值在数组的每个迭代
中被记住,并最后成为最终的单个
结果值。
回调函数第一次执行时,accumulator
和currentValue
的取值有两种情况:如果调用reduce()
时提供了initialValue
,accumulator
取值为initialValue
,currentValue
取数组中的第一个值;如果没有提供 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 可选
可选,指定 callback
的 this
参数。
返回值说明
如果回调函数的每一次返回都为 truthy
值,返回 true
,否则返回 false
。
若收到一个空数组,此方法在一切情况下都会返回 true
。
every
和数学中的所有
类似,当所有的元素都符合条件才会返回true
。正因如此,若传入一个空数组
,无论如何都会返回 true
。(这种情况属于无条件正确
:正因为一个空集合
没有元素
,所以它其中的所有元素
都符合给定的条件。)
详细说明
every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
every
方法为数组中的每个元素执行一次 callback
函数,直到它找到一个会使 callback
返回 falsy
的元素。
如果发现了一个这样的元素,every
方法将会立即返回 false
。否则,callback
为每一个元素返回 true
,every
就会返回 true
。callback
只会为那些已经被赋值的索引调用。
不会为那些被删除或从未被赋值的索引调用。
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 可选
可选,指定 callback
的 this
参数。
返回值说明
当某个元素通过 callback
的测试时,返回数组中的一个值,否则返回 undefined
。
详细说明
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
。
另请参见 findIndex()
方法,它返回数组中找到的元素的索引
,而不是其值
。
如果你需要找到一个元素的位置或者一个元素是否存在于数组中,使用Array.prototype.indexOf()
或 Array.prototype.includes()
。
find
方法对数组中的每一项元素执行一次 callback
函数,直至有一个 callback
返回 true
。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined
。注意 callback
函数会为数组中的每个索引调用即从 0
到 length - 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 可选
可选,指定 callback
的 this
参数。
返回值说明
当某个元素通过 callback
的测试时,返回数组中满足提供的测试函数的第一个元素的索引
。否则返回-1
。
详细说明
findIndex()
方法返回数组中满足提供的测试函数的第一个元素的索引
。否则返回-1
。
另请参见 find()
方法,它返回数组中找到的元素的值
,而不是其索引
。
findIndex
方法对数组中的每个数组索引0..length-1
(包括)执行一次callback
函数,直到找到一个callback
函数返回真实值(强制为true)的值。如果找到这样的元素,findIndex
会立即返回该元素的索引。如果回调从不返回真值,或者数组的length
为0
,则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 可选
可选,指定 callback
的 this
参数。
返回值说明
如果回调函数返回至少一个数组元素的truthy
值,则返回true
;否则为false
。
注意:对于空数组上的任何条件,此方法返回false
。
详细说明
some()
方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean
类型的值。
some()
为数组中的每一个元素执行一次 callback
函数,直到找到一个使得 callback
返回一个真值
(即可转换为布尔值 true
的值)。
如果找到了这样一个值,some()
将会立即返回 true
。
否则,some()
返回 false
。callback
只会在那些有值
的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
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 可选
可选,指定 callback
的 this
参数。
返回值说明
一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth
值为1
。
详细说明
flatMap()
方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
它与 map
和 深度值1
的 flat
几乎相同,但 flatMap
通常在合并成一种方法的效率稍微高一些。
有关回调函数的详细描述,请参见 [Array.prototype.map()][map] 。 flatMap
方法与 [map
][map] 方法和深度depth
为1
的 [flat
][flat] 几乎相同.
案例
Map
与 flatMap
var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
今日学习总结
今日心情
今日主要是基于搜索来仔细学习 Array 实例方法,一共有30个方法,分了六类,对于其中感兴趣的进行了详细了解,印象感觉比较厉害的是那几个返回迭代器iterator
的方法~~~,因为不太懂迭代器~~~,还有那个reduce
方法,感觉案例有很多玩法~~
希望明天学习到更多东西~~~~
本文使用 mdnice 排版