数组
声明数组
字面量
[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 中那些遍历和循环
数组常用方法
改变自身值
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 循环
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