JS数组详解

创建数组的五种方式

字面量创建

直接写出包含数组元素的数组，数组元素可以是任意类型的值，也可以是一个表达式

let arr1 = [] // 空数组
let arr2 = [1, 'abc', [1, 2, 3], { name: 'zs' }, true] // 包含5个元素的数组
let arr3 = [, ,] // 长度为3的数组，包含3个undefined元素
let base = 1024
let arr4 = [base + 1, base + 2] // 包含2个表达式的数组

对可迭代对象使用扩展操作符

扩展操作符适用于任何可迭代对象（可迭代对象是可以用 for of 循环遍历的，如数组，集合对象，字符串）

arr = [1, 2, 3]
a = [...arr, 4, 5, 6] // 扩展数组
a // [1, 2, 3, 4, 5, 6]

str = 'hello world'
arr = [...str] // 展开字符串
arr // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

cel = new Set(str) // 字符串转集合
cel = new Set(arr) // 数组转集合
cel // {'h', 'e', 'l', 'o', ' ', 'w', 'r', 'd'}----集合不含有重复元素
arr = [...cel] // 扩展集合
arr // ['h', 'e', 'l', 'o', ' ', 'w', 'r', 'd']

Array()构造函数

arr = new Array()
arr // [] length为0的空数组

arr1 = new Array(10)
arr1 // [empty × 10] length为10的数组。10个元素都为undefined

Array.of()工厂方法

Array.of()所有的参数都数组元素来创建数组

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

Array.from()工厂方法

Array.from()第一个参数必传，为一个可迭代对象或一个类数组对象
第二个参数非必传，为一个函数，这个函数遍历每一个元素，返回遍历后的数组（相当于这个函数加工数组元素）
如果传了第二个参数，函数的返回值作为创建的新数组

i = 'aaaaaa'
// 'aaaaaa'
p = Array.from(i)
// ['a', 'a', 'a', 'a', 'a', 'a']
i = [1, 2, 3, 4, , , '']
// [1, 2, 3, 4, empty × 2, '']
p = Array.from(i, (j) => {
  return j + '*'
})
// ['1*', '2*', '3*', '4*', 'undefined*', 'undefined*', '*']
p = Array.from(i, (j) => {
  return j + '*'
})
// ['1*', '2*', '3*', '4*', 'undefined*', 'undefined*', '*']
p = Array.from(i, (j) => {
  return j + 1
})
// [2, 3, 4, 5, NaN, NaN, '1']
p = Array.from(i, (j) => {
  return j * 2
})
// [2, 4, 6, 8, NaN, NaN, 0]

数组的读写

arr[n]=xxx 数组写入元素，索引为 n,元素值为 xxx
arr[n] 数组读索引为 n 的元素

let arr=['hello','world']
arr
// ['hello', 'world']
let res=arr[1] // ------读书组
res
// 'world'
let res=arr[0]
res
// 'hello'
arr[0]='你好' // ------写数组
arr
// ['你好', 'world']

数组是一种特殊的对象，访问数组的方括号与访问对象属性的方括号是类似的，JavaScript 会将数值数组索引转换为字符串
对象数组方法写如的属性，只能用数组方法读。数组的对象方法写入的属性可以使用数组方法读，也可以使用点语法读

obj={}
obj[1]='one'
obj.name='zs'
obj[1] // one
obj['1'] // one
obj.1 // error 报错语法错误
obj.'1' // error 报错语法错误
obj.name    // 'zs'
obj['name'] // 'zs'

数组长度

每个数组都有 length 属性，正是 length 属性让数组有别于常规的 JavaScript 对象，JavaScript 会自动维护 length 属性
假如数组长度为 i,当我们设置一个索引为 i+n 的元素,该数组的 length 属性为自动变为 i+n
假如数组长度为 i，当设置 length=i-n 时，i-n 索引之后的元素会被删除

数组操作会自动更新 length 属性
delete 操作符删除数组元素，数组的 length 属性不会变，delete a[2]删除索引为 2 的元素，索引为 2 的元素变为 undefined，a.length 不变

isArray()判断一个值是不是数组

a = Array.isArray([])
// true
a = Array.isArray({})
// false

类数组对象

只要对象有一个 length 属性，而且 length 是一个非负整数，那么可以完全视为一个数组
js 中很多 BOM,DOM 方法都返回类数组对象
类数组对象不会继承 Array.prototype

判断对象是不是类数组对象

function idArrayLike(o) {
  if (
    o &&
    typeof o === 'object' &&
    Number.isFinite(o.length) &&
    o.length >= 0 &&
    Number.isInteger(o.length) &&
    o.length < 4294967295
  ) {
    return true
  } else {
    return false
  }
}

类数组对象不会继承 Array.prototype,所以无法直接调用上面的数组方法，可以使用 function.call()改变 Array.prototype 的 this 指向，指向类数组对象，从而调用数组方法

let a = { '0': 'a', '1': 'b', '2': 'c', length: 3 }
let b = Array.prototype.map.call(a, (i) => {
  return i.toUpperCase()
})
console.log(b)

上面的代码，其中 a 是一个类数组，第二行改变数组的 map 方法的 this 指向，指向类数组 a

作为数组的字符串

JavaScript 的字符串类似于只读数组
访问字符串中个别字符发方法

let s = 'test'
let a = s.charAt(0)
let b = s[1]
console.log(a, b) // t e

操作数组的方法

见我的另一篇博客 https://www.cnblogs.com/guoyanchao/p/16086903.html

原文地址：https://www.cnblogs.com/guoyanchao/p/16177576.html