跳至主要內容

数组

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

声明数组

字面量

[1,2,3]

构造函数

  1. var arr=new Array(1,2,3)

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

访问数组项

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

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

下标越界

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

数组的长度

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

更改数组项

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

数组检测

  1. arr instanceof Array
  2. Array.isArray()
  3. Object.prototype.toString.call(obj).slice(8,-1) === 'Array'
  4. 原型链
obj.__proto__ === Array.prototype
  1. 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()方法返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝
  • slice(a,b)截取的子数组从下标为 a 的项开始,到下标为 b(但不包括下标为 b 的项)结束
  • slice()如果不提供第二个参数,则表示从指定项开始,提取所有后续所有项作为子数组
  • slice()方法的参数允许为负数,表示数组的倒数第几项
  • 如果同时省略beginend参数,将返回一个原数组的浅拷贝
// 浅拷贝
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
上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器