JS中Array的基本使用

91 阅读4分钟

创建和访问Array对象

Array 对象类似于 String 和 Date 对象,需要使用 new 关键字和构造函数来创建。

// 新建一个长度为0的数组
const arr = new Array()
arr.length // => 0
console.log(arr) // => []
// 新建一个长度为5的数组
const arr = new Array(5)
arr.length // => 5
console.log(arr) // => [空 ×5]
const arr = new Array(1 ,2, 3, 4, 5)
arr.length // => 5
console.log(arr) // => [1, 2, 3, 4, 5]

通常使用 [] 的语法糖创建数组对象:

const arr = [1 ,2, 3, 4, 5]
arr.length // => 5
console.log(arr) // => [1, 2, 3, 4, 5]

Array.prototype.slice()

使用 Array.prototype.slice() 函数可以获取数组的某一部分

const arr = ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr.slice(1,3)) // => ['b', 'c']

Array.prototype.concat()

concat()函数用于合并两个或多个数组,此方法不会更改原数组,而是返回一个新数组

const arr1 = ['a', 'b', 'c']
const arr2 = ['d', 'e', 'f']
// 返回新数组
arr1.concat(arr2) // => ['a', 'b', 'c', 'd', 'e', 'f']

Array.prototype.push()

使用 push() 函数可向数组的末尾添加一个或多个元素,并返回新数组的长度,该方法会改变原数组

const arr = [11, 22, 33, 44, 55]
arr.push(66) // => 6
console.log(arr) // => [11, 22, 33, 44, 55, 66]
arr.push(77, 88) // => 8
console.log(arr) // => [11, 22, 33, 44, 55, 66, 77, 88]

Array.prototype.pop()

使用 pop()函数从数组中删除最后一个元素,并返回该元素的值,该方法会改变原数组

const arr = ['西游记', '三国演义', '水浒传', '红楼梦']
arr.pop() // => '红楼梦'
console.log(arr) // => ['西游记', '三国演义', '水浒传']

Array.prototype.reverse()

使用 reverse() 函数可以颠倒数组中元素的顺序,该方法会改变原来的数组,而不会创建新的数组。

const arr = [1, 2, 3, 4, 5, 6]
arr.reverse()
console.log(arr) // => [6, 5, 4, 3, 2, 1]

Array.prototype.join()

使用 join() 方法可以把数组中的所有元素组合成一个字符串

const arr = [1, 2, 3, 4, 5, 6]
arr.join('#') // => '1#2#3#4#5#6'
arr.join() // => '1,2,3,4,5,6'

Array.prototype.shift()

使用 shift() 函数可以把数组中的第一个元素从数组中删除,并返回第一个元素的值,该方法会改变原数组

const arr = [1, 2, 3, 4, 5, 6]
arr.shift() // => 1
console.log(arr) // => [2, 3, 4, 5, 6]

Array.prototype.filter()

filter()函数创建一个新数组,其包含通过回调函数测试的所有元素

const arr = [1, 2, 3, 4, 5, 6]
arr.filter((item) => {
  return item%2 === 0
}) // => [2, 4, 6]

Array.prototype.map()

map()函数创建一个新数组,这个新数组由原数组中的每个元素都调用一次的回调函数后的返回值组成

const arr = [1, 2, 3, 4]
const mapArr = arr.map((item) => {
  return item**2
})
mapArr // => [1, 4, 9, 16]

Array.prototype.reduce()

reduce()函数对数组的每个元素按序执行回调函数,每一次运行回调函数会将先前元素的计算结果作为第一个参数传入,当前元素值作为第二个参数,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在 “上一次的计算结果”,如果不传入初始值,则回调函数从数组索引为 1 的元素开始执行,将数组索引为 0 的元素作为初始值,作为“上一次的计算结果”。

第一次执行回调函数时,不存在 “上一次的计算结果”,如果传入初始值,则回调函数从数组索引为 0 的元素开始执行,并将传入的初始值作为“上一次的计算结果”

const arr = [1, 2, 3, 4, 5]
const initialValue = 0
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
)
console.log(sumWithInitial) // => 15
previousValuecurrentValuetemp
第一次调用等于 initialValue:0等于arr[0]:11
第二次调用1等于arr[1]:23
第三次调用3等于arr[2]:36
第四次调用6等于arr[3]:410
第五次调用10等于arr[4]:515
const arr = [1, 2, 3, 4, 5]
const sumNotWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue
)
console.log(sumNotWithInitial) // => 15
previousValuecurrentValuetemp
第一次调用等于arr[0]:1等于arr[1]:23
第二次调用3等于arr[2]:36
第三次调用6等于arr[3]:410
第四次调用10等于arr[4]:515

Array.prototype.some()

some()函数测试数组中是不是至少有一个元素通过了回调函数的测试,返回一个Boolean类型的值

const arr = [1, 2, 3, 4, 5, 6]
arr.some((item) => {
  return item % 2 === 0
}) // => true

Array.prototype.every()

every()函数测试一个数组内所有元素是否都能通过回调函数的测试,返回一个Boolean类型的值

const arr = [1, 2, 3, 4, 5]
arr.every((item) => {
  return item < 8
}) // => true

Array.prototype.keys()

keys()函数返回一个包含数组中每个索引键的Array Iterator对象

const arr = ['a', 'b', 'c']
arr.keys() // => Array Iterator {}
const iterator = arr.keys()
for(const key of iterator) {
  console.log(key)
} // => 0 1 2

Array.prototype.values()

values()函数返回一个新的 Array Iterator 对象,该对象包含数组每个元素的值

const arr = ['a', 'b', 'c']
arr.values() // => Array Iterator {}
const iterator = arr.values()
for(const value of iterator) {
  console.log(value)
} // => a b c

Array.prototype.entries()

entries()函数返回一个新的Array Iterator对象,该对象包含数组中每个索引的键值对

const arr = ['a', 'b', 'c']
const iterator = arr.entries()
console.log(iterator.next().value) // =>  [0, 'a']
console.log(iterator.next().value) // =>  [1, 'b']
console.log(iterator.next().value) // =>  [2, 'c']
console.log(iterator.next().value) // =>  undefined