JavaScript 数组常用方法

2021-09-07

字数： 2.3k字 | 阅读时长： 11min | 阅读量：次

资料链接：
w3c-js-array: https://www.w3school.com.cn/jsref/jsref_obj_array.asp
es6: https://es6.ruanyifeng.com/#docs/array
其他: https://www.cnblogs.com/zyfeng/p/10541133.html

一、数组的初始化

简单创建：

var a = new Array(); // []
var a = []; // []
var b = new Array(1,2,3); // [1,2,3]
var b = [1,2,3]; // [1,2,3]
var c = []; // [1]
c[0] = 1

指定长度：
1
var a = new Array(10); // [empty * 10]

填充 0 :

// for 循环  push
// es6 fill、from、map
// 初始化相同值
let arr = Array(3).fill(1)  // [1,1,1]
let arr = Array.from({length: 3}, () => 1)  // [1,1,1]

// 二维
let arr1 = Array(3).fill([])  // [[],[],[]]
let arr2 = Array.from({length: 3}, () => ([]))  // [[],[],[]]
// 区别
arr1[0] === arr1[1]  // true
arr2[0] === arr2[1]  // false

//初始化规律值
let arr = Array.from({length: 3}, (_, index) => index + 1)  // [1,2,3]

// Array.map
let arr1 = [...Array(3)].map((a, index) => ...)
let arr2 = Array.from(Array(10)).map((a, index) => ...)

二、常用方法

1. join && concat && toString

join：将所有数组元素结合为一个字符串
toString：将所有数组元素结合为一个字符串
concat：合并（连接）现有数组来创建一个新数组
示例：

var a = ['h', 'e', 'l', 'l', 'o']
var hello = a.join(',') // 'h,e,l,l,o'
var he = a.toString() // 'hello'
var newArr = a.concat([',','w','r', 'o', 'l', 'd']) // ['h', 'e', 'l', 'l', 'o', ',','w','r', 'o', 'l', 'd']

2. push && pop

push：向数组尾部添加值，改变原数组，返回
pop: 从数组尾部删除值，改变原数组，返回
示例：

var a = ['h', 'e', 'l', 'l', 'o']
var a1 = a.push(',') // 6
// a = ['h', 'e', 'l', 'l', 'o', ',']
var a2 = a.pop()  // ','
// a = ['h', 'e', 'l', 'l', 'o']

3. shift && unshift

shift：删除首个数组元素
unshift: （在开头）向数组添加新元素
示例：

var a = ['h', 'e', 'l', 'l', 'o']
var a1 = a.shift() // 'h'
// a = ['e', 'l', 'l', 'o', ',']
var a2 = a.unshift('h')  // 5, 数组长度
// a = ['h', 'e', 'l', 'l', 'o']

4. splice && slice

splice：数组某个部分添加/删除
slice: 切片出新数组，不改变原数组
示例：

var a = [1,2,3,4]
// 从索引2位置删除两个, 添加'3','4'
var de = a.splice(2, 2, '3', '4')  // [3, 4]
// a = [1,2,'3','4']
// 从索引2位置删除两个
var de1 = a.splice(2, 2) // ['3','4']
// a = [1,2]
// 从 索引2 位置删除 0 个, 
var de2 = a.splice(2, 0, 3, 4) // []
// a = [1,2,3,4]
var s1 = a.slice(2) // [3, 4]
var s2 = a.slice(1,2) // [2]
var s3 = a.slice() // [1,2, 3, 4]

5. reverse && sort

reverse：颠倒数组中元素的顺序
sort：数组排序
示例：

var a = [1,2,4,5,6]
var tmp = a.reverse() // tmp 和 a 指向同一数组
// a = [6,5,4,2,1]
a.sort() // a = [1,2,4,5,6]， 返回值就是 a 指针
a.sort(function (x1, x2) {
    return -1
})  // 颠倒
a.sort(function (x1, x2) {
    return 1
}) // 不动

三、ES5新增方法

ECMAScript 5 也称为 ES5 和 ECMAScript 2009。
其中数组新增了一些特性：Array.isArray()、Array.forEach()、 Array.map()、Array.filter()、Array.reduce()、 Array.reduceRight()、Array.every()、Array.some()、 Array.indexOf()、Array.lastIndexOf()
js 数组的迭代方法：https://www.w3school.com.cn/js/js_array_iteration.asp

1. isArray

描述：检查对象是否为数组
示例：

Array.isArray([])  // true
Array.isArray(null)  // false
Array.isArray({})  // false
Array.isArray({1:1})  // false
Array.isArray(undefined)  // false
Array.isArray(1)  // false
Array.isArray(new Map())  // false
Array.isArray(new Set())  // false

2. forEach

描述：为每个数组元素调用一次函数，遍历数组
示例：

var a = [1,2,3,4,5,7]
a.forEach(function (item, index, array) {
    // TODO
})

3. map && filter

map：映射数组，原数组不变
filter：过滤数组，原数组不变
示例：

var a = [1,2,3,4,5,7]  // 不变
var b = a.map(function (item, index, array) {
    // TODO
    return item * 2
})  // [2,4,6,8,10,14]

var c = a.filter(function (item, index, array) {
    // TODO
    return item > 3
}) // [4,5,7]

4. reduce && reduceRight

相比 for、while 求和快

reduce：接收一个函数callbackfn作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值
reduceRight：接收一个函数callbackfn作为累加器（accumulator），数组中的每个值（从右到左）开始合并，最终为一个值，方向相反
场景：数组求和、数组去重、数组降维
示例：

let arr = ['e', 'l', 'l', 'o'];
// 总数（初始值/先前返回的值），项目值，项目索引，数组本身
var hello = arr.reduce((accumulator, currentValue, currentIndex, array) => {
    console.log(accumulator, currentValue, currentIndex, array);
    // return 'x'
    return accumulator + currentValue;
}, 'h'); // 指定开头   'hello'
var holle = arr.reduceRight((accumulator, currentValue, currentIndex, array) => {
    console.log(accumulator, currentValue, currentIndex, array);
    return accumulator + currentValue;
}, 'h'); // 'holle'

5. every && some

every：检查所有数组值是否满足条件
some：检查是否有值满足条件
示例：

var a = [1,2,3,4,5]
var f = a.every(function (value, index, array) {
    return value > 3
}) // false
var f = a.some(function (value, index, array) {
    return value > 3
}) // true

6. indexOf && lastIndexOf

描述：搜索元素值并返回其位置，开始的方向不同
示例：

var a = [1,3,4,5,6]
var index1 = a.indexOf(2) // -1
var index2 = a.indexOf(1) // 0
var index3 = a.lastIndexOf(5) // 3

四、ES6 新增方法

ECMAScript 6 也称为 ES6 和 ECMAScript 2015。
其中数组的扩展包含 Array.find()、Array.findIndex()等等。

1. find && findIndex

find: 满足条件的（左->右）第一个数组元素的值
findIndex: 满足条件的（左->右）第一个数组元素的索引
示例：

var numbers = [1, 2, 4, 5, 9];
var first = numbers.find(function myFunction(value, index, array) {
  return value > 3;
});  // 4
var first = numbers.findIndex(function myFunction(value, index, array) {
  return value > 3;
});  // 2

2. 扩展运算符 `...`

描述：将一个数组转为用逗号分隔的参数序列, 展开数组
场景：复制数组、合并数组、与解构赋值结合、字符串……
示例：

console.log(...['h1', 'h2']) // h1, h2
function push(...array) {
    // ....
}
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
[...'hello']
// [ "h", "e", "l", "l", "o" ]

3. Array.from() && Array.of()

Array.from() : 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
Array.of() : 将一组值，转换为数组
示例：

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

4. copyWithin

描述：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组
示例：

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

5. fill

描述: 使用给定值，填充一个数组
示例：

1
2
3

['a', 'b', 'c'].fill(7)  // [7, 7, 7]
new Array(3).fill(7)  // [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)  // ['a', 7, 'c']

6. entries, keys, values

entries: 对数组键名的遍历
keys: 对数组键值的遍历
values: 对数组键值对的遍历
都返回一个遍历器对象，然后可以与 for … of 一起使用，或者使用 next
示例：

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

7. includes

描述：返回一个布尔值，表示某个数组是否包含给定的值
示例：

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, 3].includes(3, 2)     // true
[1, 2, 3].includes(3, 4)     // false
[1, 2, NaN].includes(NaN) // true

8. flat, flatMap

flat: 将嵌套的多维数组拉平，返回一个新数组，不改变原数组
flatMap: 对每个元素映射之后的新数组flat，返回一个新数组，不改变原数组
示例：

var a = [1,2, ,[3,4, [5]]]
// 跳过空位，默认只拉平第一层
var f1 = a.flat() // [1, 2, 3, 4, [5]]
var f2 = a.flat(2) // [1, 2, 3, 4, 5]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

五、深克隆与浅克隆

浅克隆 : 也叫浅拷贝。不仅赋值，而且赋予了内存地址 (跟踪同一存储地址/对象)
深克隆 : 也叫深拷贝。赋值，内存地址不同 (两份不同的东西)

六、数组的空位

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。
- forEach(), filter(), reduce(), every() 和 some() 都会跳过空位。
- map() 会跳过空位，但会保留这个值
- join() 和 toString() 会将空位视为 undefined，而 undefined 和 null 会被处理成空字符串。
ES6 则是明确将空位转为 undefined。
- entries()、keys()、values()、find() 和 findIndex() 会将空位处理成 undefined。

本文作者： jeneen
发布时间： 2021-09-07
最后更新： 2023-05-09
本文标题： JavaScript 数组常用方法
本文链接： https://zx1001011.github.io/2021/09/07/js-array-function/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！