前端JS 之数组 Array_array js-优快云博客

var arr = ['1',0, {},null,undefined]

console.log(arr.__proto__ ===  Object.prototype)  // false
console.log(arr.__proto__ ===  Array.prototype)   // true
console.log(Array.prototype.__proto__ === Object.prototype) //true

//  数组是特殊的对象，不能直接从Object继承

二深入数组

创建方式：

1.数组字面量：

var arr = []

2.Array 构成函数：

var arr = new Array('new','arr')
console.log(arr)  // ['new',arr']
var arr = new Array(3)  
console.log(arr)  // [空 * 3]
var arr = new Array([1,2,3])
console.log(arr)   // [1,2,4]
var arr = new Array(2,null)
console.log(arr)  // [2,null]

3.Array.from()：

从可迭代或类数组对象创建一个新数组

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

console.log(Array.from([1, 2, 3], (x) => x + x));    // Array [2, 4, 6]

静态方法：

1.Array.from()

2.Array.isArray():

接受一个参数，如果参数是 Array，则返回为 true；否则为 false

console.log(Array.isArray('1')) // false

console.log(Array.isArray([1])) // true

数组的属性：

（创建时自带的方法）

length: 数组的元素个数

var arr =[1,3,3]
console.log(arr.length)  // 3
arr.length = 1  // 设置小于元素个数时会截断
console.log(arr) // [1]
arrr.length = 5 // 超过则空槽填充
console.log(arr)  //[1, undefined, undefined, undefined, undefined]

数组的方法：

（创建时自带的属性）

带（改）会改变原数组，请注意

修改数组

1.pop() 改：

从数组中删除最后一个元素，并返回该元素的值

var arr = [1,2,3]
console.log(arr.pop()) //  3
console.log(arr)  // [1,2]

2.push() 改:

将指定的元素添加到数组的末尾，并返回新的数组长度

var arr = [1,2,3]
console.log(arr.push(3,4)) //  5  ,可以添加多个元素
console.log(arr)  // [1,2,3,3,4]
arr.push([4,5])
console.log(arr)  //  [1,2,3,3,4,[4,5]] ,不会主动解析数组，如果有需要请 ...arr

3.shift() 改：

从数组中删除第一个元素，并返回该元素的值，同pop()，但位置改变

4.unshift() 改:

将指定的元素添加到数组的头部，并返回新的数组长度，同push()，但位置改变

5.splice() 改：

移除或者替换已存在的元素和/或添加新的元素，start表示开始位置，deleteCount为删除个数，从start往右计算（不包括start)，item为插入元素，函数返回被删除数组，没有则为空数组

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

var arr = [1,2,4,3,4]
console.log(arr.splice(-1,1,3))   // [4]
console.log(arr)   // [1,2,4,3,3]

6. fill() 改：

用一个固定值填充一个数组中从起始索引（start默认为 0）到终止索引（end默认为 array.length）(不包括end)内的全部元素。它返回修改后的数组

fill(value)
fill(value, start)
fill(value, start, end)

const arr = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));// [1, 2, 0, 0]

7. reverse() 改：

反转数组中的元素

const items = [1, 2, 3];
items.reverse();
console.log(items); // [3, 2, 1]

8. sort() 改：

对数组的元素进行排序，并返回对相同数组的引用,compareFn为定义排序顺序的函数

sort()
sort(compareFn)

var arr = [2,7,4,5]
var arr2 = arr.sort()
console.log(arr)  // [2,4,5,7]
console.log(arr2 === arr) // true
console.log(arr.sort((a,b) => b - a)) // [7,5,4,2]

搜索和迭代数组

9.forEach()：

对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
// a
// b
// c

10.map():

创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

const arr = [1,2,4]
const maparr = arr.map((x) => x * x)
console.log(maparr)  // [1,4,16]

11.filter()：

过滤数组 返回一个新数组

console.log([1,3,5].filter((x) => x > 4)) // [5]

12. reduce() reduceRight()：

reduce()对数组计算。reduceRight()是从右往左计算。

var arr  = [1,3,4]
console.log(arr.reduce((sum,value)=>{ console.log(sum,value);return sum + value;}))
//  1 3
//  4 4
//  8

13.indexOf() lastIndexOf():

返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。lastIndexOf()是从右往左开始。startIndex为开始查找位置

indexOf(element)
indexOf(element,startIndex)

console.log([1,1,3,3].indexOf(1))  // 0

14.includes()`：`

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。startIndex为开始查找位置

includes(element)
includes(element,startIndex)

15.find() findLast()：

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined,findLast()为从右往左

const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);
//  12

16.findIndex() findLastIndex()：

同上，但返回的为该元素 index

17.every()：

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

18.some()：

测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false

var arr = [1,3]
console.log(arr.every((x) => x > 2)) // false
console.log(arr.some((x) => x > 2))  // true

19.at()：

接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

var arr  = [1,3,4]
console.log(arr.at(1) === arr[1]) // true

数组转换

20.concat()：

合并两个或多个数组，返回一个新数组

var arr1 = [1,2]
var arr2 = [0]
console.log(arr1.concat(arr2)) // [1,2,0]
console.log(arr1.concat(arr2,arr2)) // [1,2,0,0]

21.slice():

截取原数组，返回一个新数组，start为开始位置，end为结束位置（不包括）

slice()
slice(start)
slice(start, end)

22.join()：

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

var  arr =[1,2]
console.log(arr.join())  // 1,2
console.log(arr.join('-')) // 1-2

23.toString()：

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

var arr = [1,2]
console.log(arr.join() === arr.toString()) //true ,通常情况它们是等价的

24.flat():

方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中

depth为深度默认为1

flat()
flat(depth)

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

25.flatMap()`：`

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

const arr1 = [1, 2, 1];

const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));

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

26.values()`：`

返回一个新的数组迭代器对象，该对象迭代数组中每个元素的值。

三相关面试题（蓝色为重点）

1.数组的方法有哪些（越多越好）

2.数组去重

var arr = [1,3,4,4,5]
Array.from(new Set(arr)) //方法一
[...new Set(arr)]        //方法二

四参考资料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array