js-基础-Array

数组是一种特殊的对象, 是有顺序的 [{},{}] 对象数组 它的索引值最大是2^32 -1

创建数组

var arr = new Array(1, 2); // bad
但有时用来初始化一定长度的数组. new Array(10)
var arr = [1, 2]; // good 字面量

let arr = [a, a + 1, a + 2] 可以是表达式: (返回值的式子,三目, 单目, 逻辑, 函数执行...)
二维数组.[,,].length

arr[0]  // 取值

Array.of() 用来解决 new Array() 无法创建一个元素的数组 => es6加的工厂方法 

浅拷贝数组 … and Array.from()

用于可迭代对象, 和 { }

es6加的工厂方法
Array.from()  相当于 [...'abc']
Array.from({}, (i) => i + 1) 
Array.from([2,4], (i)=> i * 2) // [4, 8]

in 和 稀疏数组

let a1 = [,];a1.length 1
let a1 = [,,];a1.length 2
[1,,3].length  => 3
0 in a1  false
0 in ['a'] true

delete arr[2] delete不会修改数组的length ... 有什么应用场景???

数组的属性

arr.length = 0; // 返回值是数字, 清空数组, 那为啥不直接赋值 []?
let arr = ['a', 'b', 'c'] 
arr.length = 1;

迭代

forEach()  能感知稀疏数组, 不会对没有的元素调用...for of 则不能
for(let [index, item] of arr.entries()){

}
老式for 循环 
for(let i = 0; i < arr.length; i++) {} // 实际上只读取一次arr.length
for(let i = 0, len = arr.length; i < len; i++) {}
for(let i = arr.length - 1; i >= 0; i--) {
	if(xx) continue
} 

改变原数组7个方法

let arr = [];
arr.push('c','d') 新数组的长度 => 2 
arr.pop() // 'd'
arr.unshift('a', 'b')  // 3
arr.shift() // 'a'
arr.shift() // 'b'
arr.shift() // 'c'
arr.shift() // undefined

let arr2 = ['a', 'b', 'c']; arr2.reverce(); // ['c', 'b', 'a']
arr2.splice(1, 1, 'd', 'e', 'f') // ['b']  splice 粘接
arr2.sort((a, b) => a - b ) // sort 排序

不影响原数组的3个方法

方法	描述
slice(startIndex, endIndex)	返回截取的数组 可以为负数
arr1.concat([‘a’]) arr1.concat(‘a’)	拼接
join() join(‘’)区别	[null,undefined,‘a’].join(‘’) // ‘a’

其他方法

方法	描述
indexOf lastIndexOf	不能判断NaN, 字符串也有这两个方法, 不同的是,字符串传负值索引 会被当成0
forEach	无返回值,不能break中断. 不需要return 下面的需要 (item, index, arr)
filter	过滤, 可以链式… 第二个参数改变this 指向
map	映射 map第二个参数 改变this指向
arr.fill(‘a’, 0, 3)	arr 要有长度才行!!
index in arr	返回boolean (用得很少…因为是判断index)
arr.includes(‘a’)	// 同上 可以检测NaN
Array.isArray(arr)	// 同上
some/every // 同上
for(let i in arr) { }	// i为 index
entries() keys() values()
compyWithin()	–
flat() flatMap()	–
at()	–

js-数组方法reduce-到底要不要传第二个参数

要
因为

[].reduce((x, y) => {}) 报错
[3].reduce((x, y) => x + y) 预期3, 实际返回值是 [3]

arr.reduce((x, y) => x.b + y.b, { b: 0 }) 项目中可能会这么写
console.log(a.reduce((x, y) => x + y))
console.log(a.reduce((x, y) => x * y))
console.log(a.reduce((x, y) => (x > y ? x : y)))

[2, 3, 4].reduceRight((x, y) => {
	return Math.pow(x, y)
})

1. forEach不能退出 (i, index, array)

map 要 有返回值.

console.log([1, 2, 3].map((i) => i * 2))  [2, 4, 6]
console.log([{ id: 1 }, { id: 2 }].map((i) => i.id)) [1, 2]

filter 根据boolean 过滤, false 的被过滤掉

arr.filter((x) => x < 3)
arr.filter((x) => i % 2 === 0)
arr.filter(() => true) 过滤稀疏数组
[undefined, null, 3].filter((i) => i !== undefined && i !== null)  [3]

find findIndex

arr.find(i => i.id === xxx)  找不的话返回undefined
arr.findIndex(i => i.id===xxx) 找不到返回-1

every 很坑

数学传统?
[].every((i) => i > 100) 因为空数组的时候, 回调并不会执行, 且返回 true
[].some((i) => i > 100) 空数组的时候, 也不会执行, 但是返回的是false

flat flatMap

es2019的方法
arr.flat() 不传的话默认一层
let arr = [1, [2, [3, [4]]]]
console.log(arr.flat())  [1, 2, Array(2)]
console.log(arr.flat(1)) [1, 2, Array(2)]
console.log(arr.flat(2)) [1, 2, 3, Array(1)]
console.log(arr.flat(3)) [1, 2, 3, 4]
console.log(arr.flat(4)) [1, 2, 3, 4]

flatMap 先map 完了 flat
['hellow world', 'the definitive guide'].flatMap(i => i.split(' ')) ['hellow', 'world', 'the', 'definitive', 'guide']
[-2, 2, [], []].flatMap(i => i)   [-2, 2]
[-2, 2].flatMap((i) => (i < 0 ? [] : Math.sqrt(i))) [1.4142135623730951]

concat 拼接 不改变原数组

[1].concat(2)  [1, 2]
[1].concat([2])  [1, 2] 它会打平一次数组....
[1].concat(2,3,[4,[5]]) [1, 2, 3, 4, Array(1)]

类数组判断

function isArraylike(o) {
	if(o && typeof o === 'object' && Number.isFinite(o.length) && o.length >= 0 && Number.isInteger(o.length) && o.length < 4294967295){
		return true
	}
return false // 严谨一点是false, 不写的话 return undefined 也是false
}


Array.prototype.join.call(a, '+') 类数组使用数组方法.
Array.prototype.map.call(a, x => x.toUpperCase())
Array.prototype.slice.call(a, 0) 类数组转数组了
Array.from(a) 类数组转数组. 或者数组复制.

参考资料

1. Array 对象 - JavaScript 教程 - 网道 (wangdoc.com)
2. 数组的扩展 - ECMAScript 6入门 (ruanyifeng.com)
3. javascript权威指南(第四版)