JavaScript 基础
深入数据和类型
函数进阶
运算符
浏览器存储
Document
Web API
事件
工具与规范
实例
练习
常用属性和方法
在之前已经学习了一些数组的属性和方法:
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