1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

常用属性和方法

在之前已经学习了一些数组的属性和方法:

  • arr.length :返回数组的长度。
  • arr.push(...items) :从尾端添加元素,
  • arr.pop():从尾端提取元素,
  • arr.shift() :从首端提取元素,
  • arr.unshift(...items) :从首端添加元素。

以下的章节再深入学习一些常用的属性或方法。

$$tip

完整的属性和方法请查阅 Array - MDN

$$

数组长度

length 属性可以返回当前数组的长度。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
alert(arr.length) // 3

如果通过下标给数组赋值时下标超过了当前数组的长度,未赋值的下标取值为 undefined

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
arr[5] = "end"
alert(arr.length) // 6
alert(arr[3]) // undefined
alert(arr[4]) // undefined
alert(arr[5]) // "end"

length 是一个可写的属性值,如果改变其的值,当 length 比原值大时,未赋值的下标取值为 undefined ,当 length 比原值小时则会截取数组。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3, 4, 5]
arr.length = 10
console.log(arr) // [1, 2, 3, 4, 5, 空属性 × 5]
arr.length = 2
console.log(arr) // [1, 2]

合并数组

concat(value1[, ... valueN]) 用于合并多个数组或值并返回一个拼接后的新数组。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
alert(arr.concat([4, 5], 6, 7)) // 1,2,3,4,5,6,7

截取数组

slice([begin[, end]]) 方法返回截取后的新数组:

  • begin:开始下标(包含),可选参数,默认值为 0 。如果为负数则表示倒数第 N 个元素,例如 -3 表示从倒数第三个元素开始截取。
  • end:结束下标(不包含),可选参数,默认值为数组长度,如果为负数则表示倒数第 N 个元素。
$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭", "的", "编", "程", "教", "室"]
alert(arr.slice(1, 3)) // 眼, 鸭

删除元素

delete 运算符可以删除数组中任意下标的元素,但是删除后的数组长度不变,只是对应下标的取值为 undefined

$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭"]
delete arr[1]
alert(arr.length) // 3
alert(arr[1]) // undefined

修改数组

splice(start[, deleteCount[, item1[, ... itemN]]]) 可以从指定的下标开始移除指定数量的元素,并插入新元素。

  • start:修改位置的开始下标,如果是负数则表示倒数第 N 个元素。
  • deleteCount:移除元素的个数,可选参数,如果省略则移除 start 起至结尾的所有元素。
  • item:添加的新元素,可选参数。
  • return:返回值为移除的元素数组。

$$warning

与很多已学的方法不同, splice 会修改原数组而不是返回一个新数组。

$$

$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭", "的", "编", "程", "教", "室"]
let result = arr.splice(4, 2, "食", "堂")
alert(result) // 编,程
alert(arr) // 三,眼,鸭,的,食,堂,教,室

$$tip

splice 是一个很灵活的函数,可能通过封闭 splice 实现很多高级功能。

$$

实例:删除元素的函数

以下实现了一个删除数组元素的函数,接收一个开始下标和删除数量,删除数量默认值为 1。

$$jsdemo$$
$$edit$$
function remove(arr, start, count = 1) {
    arr.splice(start, count)
}

let arr = ["三", "眼", "鸭", "的", "编", "程", "教", "室"]
// 从下标 2 开始,删除两个元素
remove(arr, 4, 2)
alert(arr) // 三,眼,鸭,的,教,室

实例:指定位置插入单个元素

$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭", "的", "编", "程", "教", "室"]
function insert(arr, index, item) {
    arr.splice(index, 0, item)
}
insert(arr, 2, "鸡")
alert(arr) // 三,眼,鸡,鸭,的,编,程,教,室

转成字符串

toString() 返回一个用逗号分割元素的字符串,我们使用 alert 显示数组时就是默认使用 toString() 进行转换。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3, 4]
let str = arr.toString()
console.log(typeof str) // string
console.log(str) // 1,2,3,4

join([separator]) 方法可以用分隔符来拼接元素元素并返回字符串。

  • separator:分隔符,可选参数,默认值为 ,
$$jsdemo$$
$$edit$$
let arr = [1, 2, 3, 4]
let str = arr.join("-")
console.log(str) // 1-2-3-4

实例:将单词首字母大写

$$jsdemo$$
$$edit$$
function upperWord(str) {
    // 先将字符串按照空格分割成数组
    let arr = str.split(" ")
    for (let i in arr) {
        // 将每个单词的首字母大写
        arr[i] = arr[i][0].toUpperCase() + arr[i].substring(1)
    }
    // 重新用空格拼接
    return arr.join(" ")
}

let str = "nice to meet you."
alert(upperWord(str)) // Nice To Meet You.

查找数组

判断包含某元素

includes(item) 判断数组中是否存在某个元素,存在返回 true 否则返回 false

$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭"]
alert(arr.includes("鸭")) // true

返回匹配的下标

indexOf(item[, fromIndex]) 会在数组中查找指定的元素,返回首个位置下标或 -1。

  • item:要查找的元素。
  • fromIndex:起始下标,默认值为 0。
$$jsdemo$$
$$edit$$
let arr = ["三", "眼", "鸭"]
alert(arr.indexOf("鸭")) // 2
alert(arr.indexOf("鸡")) // -1

lastIndexOf(item[, fromIndex]) 返回的则是最后一个匹配的元素下标。

查找满足特定条件的元素

find(callback) 会对数组中的每一项元素执行一次 callback 函数。如果某次 callback 函数返回了 true ,则结束遍历并返回元素的值。如果未有一次返回 true 则最终返回 undefined

callback 接收三个参数:

  • element:当前遍历的元素。
  • index:当前遍历的下标。
  • array:数组本身。
$$jsdemo$$
$$edit$$
let students = [
    { name: "小明", score: 88 },
    { name: "鸣人", score: 38 },
    { name: "路飞", score: 48 },
]

let mingren = students.find(function (element, index, array) {
    if (element.name === "鸣人") {
        return true
    }
    return false
})

console.log(mingren) // {name: '鸣人', score: 38}

findIndex(callback) 类似,不过返回的是下标,如果未找到则返回 -1 。

查找满足特定条件的元素并返回数组

filter(callback) 可以相对 find 返回的不止一个元素,可以返回多个满足条件元素组成的数组。

$$jsdemo$$
$$edit$$
let students = [
    { name: "小明", score: 88 },
    { name: "鸣人", score: 38 },
    { name: "路飞", score: 48 },
]

let fails = students.filter(function (element, index, array) {
    if (element.score < 60) {
        return true
    }
    return false
})

// 返回所有不及格的同学
console.log(fails) // [{name: '鸣人', score: 38}, {name: '路飞', score: 48}]

反转数组

reverse() 方法可以反转一个数组,此方法会影响原数组。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
arr.reverse()
alert(arr) // 3,2,1

数组排序

sort([compareFunction]) 方法默认按照UTF-16代码单元值序列排序,接收一个可选的比较函数。如果指定了 compareFunction 函数则使用其进行排序。

compareFunction 函数接收两个参数值 a 、 b 分别是两个比对的元素:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前。
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
  • 如果 compareFunction(a, b) 等于 0,a、b 的位置不变(不是所有浏览器都会遵守)。
$$jsdemo$$
$$edit$$
let students = [
    { name: "小明", score: 88 },
    { name: "鸣人", score: 38 },
    { name: "路飞", score: 48 },
]

// 按成绩从低到高排序
students.sort(function (a, b) {
    if (a.score < b.score) {
        return -1
    } else if (a.score > b.score) {
        return 1
    } else {
        return 0
    }
})

console.log(students) // [{name: '鸣人', score: 38}, {name: '路飞', score: 48}, {name: '小明', score: 88}]

判断变量是否是数组

由于数组属于对象下的类型,因此使用 typeof 不能判断一个变量是否是数组。要判断一个变量是否是数组通常有以下两种方法:

  • instanceof 运算符
  • Array.isArray 方法
$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
alert(typeof arr) // object
alert(Array.isArray(arr)) // true
alert(arr instanceof Array) // true

判断数组是否相等

很遗憾, == 运算符并不能帮我们判断两个数组的值是否相等,它只能判断是否是同一个数组的㳀拷贝。

$$jsdemo$$
$$edit$$
let arr = [1, 2, 3]
let arr2 = [1, 2, 3]
alert(arr == arr2) // false
let arr3 = arr
alert(arr == arr3) // true

1