Array 类型

Array 恐怕是除了 Object 外在 JavaScript 中最常用的类型了。

创建数组

1
2
3
var arr0 = new Array()
var arr1 = new Array(20)//length 为 20
var arr2 = new Array('a', 'b', 'c')//包含三个字符串的数组

给构造函数一个值也是可以创建数组的,但有点复杂,如果是数值,会按照该数值创建给定项数的数组,其他类型参数则是会创建包含该值的只有一项的数组,这看起来有点小尴尬但是在 ES6 中就解决了这个问题。

其次还可以省略 new 操作符

另外一种是我们更加常用的数组字面量表示法,

1
2
var arr0 = ['1', '2', '3']
var arr1 = [, ,] //不要在最后加 , 这样会创建 2 个或 3 个 项的数组
  • 注意: 数组的 length 属性他不是只读的,因此我们可以通过改变 length 来改变数组
1
2
3
var arr = ['1', '2', '3']
arr.length = 2
alert(arr[2])//undefined

利用 length 属性可以方便的从数组末尾添加与删除

检测数组

1
2
3
4
5
6
7
8
9
function isArray(obj){
return Object.prototype.toString.call(obj) === '[Object Array]'
}
---
if(arr instanceof Array){
//
}
---
Array.isArray()

改变数组方法

  • 栈方法 push() pop()
  • 队列方法 shift() unshift()
  • 重排序方法 sort() reverse()
  • 操作方法 splice()
  • 位置方法 indexOf() lastIndexOf()
  • 迭代方法 every() filter() forEach() map() some()
  • 归并方法 reduce()

不改变数组方法

  • 操作方法 concat() slice()
  • 转换方法 toSring() valueof() toLocaleString() join()

ES6 数组的扩展

扩展运输算符( … )

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

由于扩展运算符可以展开数组

1
2
3
4
\\ ES5
Math.max.apply(undefined, [1, 2, 3])
\\ ES6
Math.max(...[1, 2, 3])

合并数组

1
2
3
4
\\ ES5
[1, 2].concat(more)
\\ ES6
[1, 2, ...more]

与解构赋值相结合

1
2
3
const [first, ...last] = [1, 2, 3, 4]
first // 1
last // [2, 3, 4]

字符串

1
[...'he'] // ['h', 'e']

Array.from()

1
2
3
4
5
6
7
8
9
10
let arrlike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
// ES5
var arr1 = [].slice.call(arrlick) // ['a', 'b', 'c']
// ES6
let arr2 = Array.from(arrlike) // ['a', 'b', 'c']

将两类对象:类似数组的对象与可遍历对象转为真正的数组

Array.of()

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

弥补数组构造函数的不足

copyWithin()

Array.prototype.copyWithin(target, start = 0, end = this.length)

  • target(必选):从该位置开始替换
  • start(可选):从该位置开始读数据,默认为0,负数表示倒数
  • end(可选):到该位置停止,默认为数组长度,负数为倒数
  • 三个数为数值,不是则自动转化为数值
1
[1, 2, 3, 4, 5].copyWithin(0, 3) // [5, 4, 3, 4, 5]

find() findIndex()

1
2
[1, 2, 3, -5].find(n => n < 0) // -5
[1, 2, 3, -5].findIndex(n => n < 0) // 3

可以发现 NaN 弥补了 indexof 的不足

fill()

1
2
[1, 2, 3].fill(7) // [7, 7, 7]
[1, 2, 3].fill(7, 1, 2) // [1, 7, 3]

用来填充非常方便

entries() keys() values()

对键值对,键名,键值的遍历

includes

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

参考:

  • 《JavaScript高级程序设计》

  • ES6 标准入门》

棒棒糖