猫说

数组方法回顾

2020/04/27 javascript

最近也有整理一下js基础方面的意向，今天整理一下数组。

根据MDN进行整理：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype

1、属性

1.1 length

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

const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];
console.log(clothing.length); // 4

2、创建数组方法

除了直接声明一个数组，使用Array.xxx来声明的方法

2.1 from()

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

Array.from([1, 2, 3]) // [1, 2, 3]

2.2 of()

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

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

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

3、isArray()

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

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

4、修改器方法

修改器方法是MDN的词，可以理解为会修改源数组的方法，MDN原话会改变调用它们的对象自身的值

4.1 copyWithin()

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

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

let arr = [1,2,3,4,5,6,7];
arr.copyWithin(0, 5, 6);
//  [6, 2, 3, 4, 5, 6, 7]

4.2 fill()

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

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

let arr = [1,2,3,4,5,6,7];
arr.fill(10, 0, 1)
// [10, 2, 3, 4, 5, 6, 7]

4.3 pop()

pop()方法从数组中删除最后一个元素，并返回该元素的值,从数组中删除的元素(当数组为空时返回undefined)。

let arr = [1,2,3,4,5,6,7];
let arr1 = arr.pop()
console.log(arr)
console.log(arr1)
// [1, 2, 3, 4, 5, 6]
// 7

4.4 push()

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

let arr = [1,2,3,4,5,6,7];
let arr1 = arr.push(8)
console.log(arr)
console.log(arr1)
// [1, 2, 3, 4, 5, 6, 7, 8]
// 8

4.5 reverse()

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

let arr = [1,2,3,4,5,6,7];
arr.reverse()
// [7, 6, 5, 4, 3, 2, 1]

4.6 shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。

let arr = [1,2,3,4,5,6,7];
console.log(arr.shift())
console.log(arr)
// 1
// [2, 3, 4, 5, 6, 7]

4.7 sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。

arr.sort([compareFunction])

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers);
// // [1, 2, 3, 4, 5]

4.8 splice()

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

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

  1. start: 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
  2. deleteCount: 整数，表示要移除的数组元素的个数。
  3. 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
let arr = [1,2,3,4,5,6,7];
console.log(arr.splice(1, 2))
console.log(arr)
// [2, 3]
// (5) [1, 4, 5, 6, 7]

// add
let arr = [1,2,3,4,5,6,7];
console.log(arr.splice(1, 2, 88, 99))
console.log(arr)
// [2, 3]
// [1, 88, 99, 4, 5, 6, 7]

4.9 unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

let arr = [1,2,3,4,5,6,7];
console.log(arr.unshift( 88, 99))
console.log(arr)
// 9
// [88, 99, 1, 2, 3, 4, 5, 6, 7]

5、访问方法

不会修改源数组的方法，只会返回一个新的数组或者返回一个其它的期望值。

5.1 concat()

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

var a = [1,2,3];
var b = [4,5,6];
console.log(a.concat(b))
// [1, 2, 3, 4, 5, 6]

ES6可以简写[...a, ...b]

5.2 includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。第二个参数是索引，从某处开始查找。

var a = [1,2,3];
console.log(a.includes(2))
console.log(a.includes(4))
// true
// false

5.3 join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串, 如果不传参数则默认,，如果传空字符串""则不使用连接符，其他传啥是啥。

var a = [1,2,3];
console.log(a.join())
console.log(a.join(''))
console.log(a.join('-'))
// 1,2,3
// 123
// 1-2-3

5.4 slice()

slice() 方法返回一个新的数组对象，接受两个参数，一个开始一个结束，根据参数的位置进行浅拷贝，返回拷贝后的数组。

var arr = [1,{a:1}, 2, 3];
var arr2 = arr.slice(1,2);
console.log(arr2)
console.log(arr)
console.log(arr2[0] == arr[1])
// [ {a: 1}]
// [1,  {a: 1}, 2, 3]
// true

5.5 toSource()

toSource() 在调试时,你可以使用toSource方法来查看一个数组的内容,该特性是非标准的！

5.6 toString()

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

var arr = [1,2,3];
arr.toString()
// "1,2,3"

5.7 toLocaleString()

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

MDN上的例子：

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', {timeZone: "UTC"});

console.log(localeString); // 1,a,12/21/1997, 2:12:00 PM

5.8 indexOf()

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

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.indexOf('b')); // 1
console.log(arr.indexOf('d')); // 3

5.9 lastIndexOf()

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

arr.lastIndexOf(searchElement[, fromIndex])

var array = [2, 5, 9, 2];
console.log( array.lastIndexOf(2, 3))
console.log(array.lastIndexOf(2, 2))
// 3
// 0

6、迭代方法

有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。

6.1 forEach()

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

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

6.2 entries()

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

var arr = [1,2,3];
console.log(arr.entries().next().value)
// [0, 1]

6.3 every()

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

var arr = [1,2,3];
console.log(arr.every(item=>item>5)); // false
console.log(arr.every(item=>item<5)); // true

6.4 some()

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

var arr = [1,2,3];
console.log(arr.some(item=>item>2))
console.log(arr.some(item=>item<2))
// true
// true

6.8 filter()

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

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

6.9 find()

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

arr.find(callback(item, index, arr), [this])

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

6.10 findIndex()

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

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

6.11 keys()

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

var a1 = ['a', 'b', 'c'];
var iterator = a1.keys();

for (var key of iterator) {
  console.log(key);
}
// 0
// 1
// 2

6.12 map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。

var arr = [1,2,3];
arr.map(item=>item*2)
// [2, 4, 6]

6.13 reduce()

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

var arr = [1,2,3];
arr.reduce((a,b)=>a+b)
// 6

6.14 reduceRight()

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

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

[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
});
// 10

6.15 values()

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

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

for (const value of iterator) {
  console.log(value);
}
// a
// b
// c

Search

    Table of Contents