数组

zfh大约 8 分钟约 2252 字...

声明数组

字面量

[1,2,3]

构造函数

var arr=new Array(1,2,3)
声明长度为 3 的数字，每一项都是 undefined:var arr=new Array(3)

访问数组项

数组每一项都有下标，下标从 0 开始

var arr = (1, 2, 3)
arr[1] // 2

下标越界

JavaScript 规定，访问数组中不存在的项会返回 undefined，不会报错

数组的长度

数组的 length 属性表示它的长度
数组最后一项的下标是数组的长度减 1

更改数组项

数组并不是只读的，我们可以修改它其中任何项的值
如果更改的数组项超过了 length-1，则会创造这项

数组检测

arr instanceof Array
Array.isArray()
Object.prototype.toString.call(obj).slice(8,-1) === 'Array'
原型链

obj.__proto__ === Array.prototype

Array.prototype.isPrototypeOf(obj)

数组遍历

【JavaScript】细数 JavaScript 中那些遍历和循环open in new window

数组常用方法

[7000 字]JavaScript 数组所有方法基础总结open in new window

push()改变自身值

push()方法用来在数组末尾推入新项，参数就是要推入的项（可以为多个逗号隔开）
该方法会返回新的长度

pop()改变自身值

与 push()相反，pop()方法用来删除数组中的最后一项
pop()方法不仅会删除数组末项，而且会返回被删除的项

unshift()改变自身值

unshift()方法用来在数组头部插入新项，参数就是要插入的项（可以为多个逗号隔开）
该方法会返回新的长度

shift()改变自身值

与 unshift()相反， shift()方法用来删除数组中下标为 0的项
shift()方法不仅会删除数组首项，而且会返回被删除的项

splice()改变自身值

替换数组中的指定项

var arr = [3, 1, 3, 4]
arr.splice(1, 2, 4, 5) //从下标为1的项开始，连续替换两项
console.log(arr) // [3,4,5,4]

在指定位置插入新项

var arr = [3, 1, 3, 4]
arr.splice(1, 0, 6, 7) // 在下标为1的位置插入两项，不替换
console.log(arr) // [3,6,7,1,3,4]

splice()方法可以用于删除指定项

var arr = [3, 1, 3, 4]
arr.splice(1, 1) // 没有设置替换的新项，仅删除1项
console.log(arr) // [3,3,4]

splice()方法会以数组形式返回被删除的项

slice()不改变自身值

slice()方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
slice(a,b)截取的子数组从下标为 a 的项开始，到下标为 b（但不包括下标为 b 的项）结束
slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组
slice()方法的参数允许为负数，表示数组的倒数第几项
如果同时省略begin 和 end参数，将返回一个原数组的浅拷贝

// 浅拷贝
let arr = [
  1,
  3,
  {
    username: ' kobe',
  },
]
let arr3 = arr.slice()
arr3[2].username = 'wade'
console.log(arr) // [ 1, 3, { username: 'wade' } ]

slice 方法可以用来将一个类数组（Array-like）对象转换成一个新数组。你只需将该方法绑定到这个对象上

function list() {
  return Array.prototype.slice.call(arguments)
}

var list1 = list(1, 2, 3) // [1, 2, 3]

join(),split()

数组的 join()方法可以使数组转为字符串；字符串的split()方法可以使字符串转为数组。

join()的参数表示以什么字符作为连接符，如果留空则默认以逗号分隔，如同调用 tostring()方法
split()的参数表示以什么字符拆分字符串，一般不能留空=>(str.split(''))

'abcd'.split('') // [ 'a', 'b', 'c', 'd' ]

字符串也可以使用方括号内写下标的形式，访问某个字符等价于 charAt()方法,意味着字符串可以直接遍历

var str = '123456'
for (var i = 0; i < str.length; i++) {
  console.log(str[i])
}

concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

参数：数组和/或值，将被合并到一个新的数组中。如果没有参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝

返回值：一个新的数组

const array1 = ['a', 'b', 'c']
const array2 = ['d', 'e', 'f']
const array3 = array1.concat(array2)

console.log(array3)

reverse()

reverse()方法用来将一个数组中的全部项顺序置反

indexOf()

indexOf()方法的功能是搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1

filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

callback(用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。)被调用时传入三个参数：元素的值，元素的索引，被遍历的数组本身

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']

const result = words.filter((word) => word.length > 6)

console.log(result)
// expected output: Array ["exuberant", "destruction", "present"]

forEach()

forEach() 方法对数组的每个元素执行一次给定的函数

返回值：undefined

callback 被调用时传入三个参数：数组当前项的值，数组当前项的索引，数组对象本身

const array1 = ['a', 'b', 'c']

array1.forEach((element) => console.log(element))

// expected output: "a"
// expected output: "b"
// expected output: "c"

请注意在迭代区间修改数组，某些元素会被跳过：

var words = ['one', 'two', 'three', 'four']
words.forEach(function (word) {
  console.log(word)
  // 当到达包含值 two 的项时，数组的第一项被移除了，这导致所有剩下的项上移一个位置。因为元素 four 正位于在数组索引为2的位置，所以 three（此时它的索引为1）会被跳过
  if (word === 'two') words.shift()
})
// one
// two
// four

除了抛出异常以外，没有办法中止或跳出 forEach() 循环(break,continue)

map()

map()方法的回调函数每次执行后的返回值组合起来形成一个新数组

返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。

callback 被调用时传入三个参数：数组元素，元素索引，原数组本身;callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

const array1 = [1, 4, 9, 16]

// pass a function to map
const map1 = array1.map((x) => {
  return x * 2
})

console.log(map1)
// expected output: Array [2, 8, 18, 32]

forEach() 和 map() 的区别

返回值:forEach()方法返回 undefined ，而 map()返回一个包含已转换元素的新数组

链接其他方法:map()方法输出可以与其他方法(如 reduce()、sort()、filter())链接在一起，以便在一条语句中执行多个操作。另一方面，forEach()不能与其他方法链接，因为它返回 undefined

中断遍历:这两种方法都不能用 break 中断，否则会引发异常

建议使用 map()转换数组的元素，因为它语法短，可链接且性能更好

如果不想返回的数组或不转换数组的元素，则使用 forEach() 方法

如果要基于某种条件停止数组的遍历，则应使用简单的 for 循环或 for-of / for-in 循环

参考：数组中 forEach() 和 map() 的区别open in new window

reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。

返回值：函数累计处理的结果

参数：reducer 函数,initialValue

reducer 函数接收 4 个参数:

previousValue (pre) (上一次调用 reducer 函数的返回值)
currentValue (cur) (数组中正在处理的元素)
currentIndex(idx) (数组中正在处理的元素的索引 )
array (arr) (用于遍历的数组)

每一次运行 reducer函数会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

initialValue(可选): 作为第一次调用 reducer函数时的previousValue 的值。如果没有提供初始值，则将使用数组中的第一个元素,currentValue 将使用数组第二个元素;若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素

const array1 = [1, 2, 3, 4]
total = array1.reduce((acc, cur) => {
  return acc + cur
})
console.log(total) //10

sort() 改变自身值

若 comparefn(a, b) < 0，那么 a 将排到 b 前面（数字升序）
若 comparefn(a, b) = 0，那么 a 和 b 相对位置不变
若 comparefn(a, b) > 0，那么 a , b 将调换位置（数字降序）
省略参数时，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序

const arr = [1, 2, 0, 123, -1]
// comparefn
const arr2 = arr.sort((a, b) => {
  return a - b
})
console.log(arr) // [ -1, 0, 1, 2, 123 ]
console.log(arr === arr2) // true

数组

# 声明数组

# 字面量

# 构造函数

# 访问数组项

# 下标越界

# 数组的长度

# 更改数组项

# 数组检测

# 数组遍历

# 数组常用方法

# push()改变自身值

# pop()改变自身值

# unshift()改变自身值

# shift()改变自身值

# splice()改变自身值

# slice()不改变自身值

# join(),split()

# concat()

# reverse()

# indexOf()

# filter()

# forEach()

# map()

# reduce()

# sort() 改变自身值

预览: