JavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。RegExp.exec、String.match、String.replace 都会返回这样的数组
数组的属性
length
获取数组的长度
prototype
通过数组的原型对象可以为所有数组对象添加属性。
创建数组
// 方法一
const arr = [1, 2, 3, 4]
// 方法二
const arr = new Array(1, 2, 3, 4)
// 方法三
const arr = new Array(4) // 创建了一个长度为4的数组 数组的每一项为undefined
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4 // 通过索引给数组的每一项赋值
// 方法四
let arr = []
arr.length = 4
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4
console.log(arr) // 通过length创建一个长度为4的数组
// 方法五
const ofArr = Array.of(1, 2, 3)
console.log(ofArr)
通过索引访问数组
const arr = [1, 2, 3, 4]
console.log(arr[0]) // 1
数组方法
Array.from()
- 将一个为数组或者可迭代对象创建成一个新的,浅拷贝的数组实例
- 参数说明
- 要转换的对象
- 回调函数 如果指定了 则新数组的每个元素都会执行该对象 可选参数
- 回调函数中的this执行 可选参数
const a = Array.from('foo', (x, y) => {
console.log(x, y, this) // x 代表对象元素的每一项 y代表下标
// f 0 {}
// o 1 {}
// o 2 {}
return x
})
console.log(a) // [ 'f', 'o', 'o' ]
Array.isArray(obj)
判断传入的对象是否是Array 返回布尔值
Array.of(ele)
创建一个新的数组实例
const ofArr = Array.of(1, 2, 3)
console.log(ofArr)
实例方法
forEach
- 对数组的每一个元素执行一次给定的函数,遍历数组
- foreach的第一个参数是一个回调函数,回调函数的三个参数 分别是当前元素,当前索引,遍历的数组
- foreach的第二个参数是回调函数中的this指向
- 返回undefined
arr.forEach((v,i,a) => {
console.log(v,i,a)
})
map
- map和forEach用法类似 只不过返回值不同 map返回执行回调函数之后的新数组
- 如果回调没有return值 默认return undefined
const arr = [1, 2, 3, 4]
const a = arr.map(item => {
console.log(item)
return item
})
console.log(a) // [ 1, 2, 3, 4 ]
forEach、map 相同点
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)
3.匿名函数中的this都是指向window
4.只能遍历数组
forEach、map、for的区别:
1.在for中使用return可以终止整个循环,但是forEach和map只终止当前循环
2. map方法会返回新的数组 但是forEach返回的是undefined
push和pop
- push():向数组的末尾添加任意数量的参数,返回修改后数组的长度
- pop(): 删除数组末尾的最后一项,返回移除的项
// 添加
arr.push(8, 9, 19)
console.log(arr)
// 删除
arr.pop()
shift()和unshift
- shift():删除数组的第一项,返回删除的元素,如果数组为空,返回undefined
- unshift():向数组的开头添加任意数量的参数,返回修改后的长度
arr.unshift(1, 2, 3, 4)
arr.shift()
reverse
- 数组中元素的位置颠倒,并返回该数组 该方法会改变原数组。
- 返回颠倒后的数组
arr.reverse()
sort
- 数组的元素进行排序,并返回排序后的数组
- sort()方法调用的时候,会将数组的每一项使用toString() 方法,然后比较得到的字符串,以确定如何排序
- 参数 compareFunction(firstEl, secondEl)
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
spllice
- 实现数组的删除、插入和替换
- 返回由删除的元素组成的数组 如果没有元素,则返回一个空数组
- 参数
- start:开始修改的位置 如果超出数组的长度 则从数组末尾开始添加内容, 如果是负数,则表示从数组末尾开始计数(从-1开始,相当于length+start)如果负数的绝对值大于数组的长度 则开始位置为0
- 要移除的数组元素的个数
- 要添加进数组的元素
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
// 从倒数第二个开始删除两个 就是把drum 和 sturgen删除了 ==》["drum", "sturgeon"]
// myFish.splice(-2, 2)
myFish.splice(-2, 0, 'aaa', 'bbb') // 从倒数第二个开始不删除元素 只添加 ==》 []
console.log(myFish) // ["angel", "clown", "aaa", "bbb", "drum", "sturgeon"] 添加到start位置的前面
concat
- 合并两个或多个数组 不会改变原数组 而是返回一个新数组
var arr1 = [1]
var arr2 = [2]
var arr3 = [3]
arr1.concat(arr2, arr3) // [1, 2, 3]
includes
- 判断一个数组是否包含某一个指定的值 返回true或者false
- 参数
- 要判断的值
- 开始查找的索引 若索引为负数 则从末尾开始计算(-1)开始 然后往后查找 默认为0
var arr = ['a', 'b', 'c'];
arr.includes('b', -1) // false 因为-1 就相当于从c开始查找 所以查找不到b 返回false
arr.includes('a', 3) // false 超出数组的最大索引
join
- 将数组中的所有元素转成字符串并返回
- 参数:用于分割数组的每个元素
var arr = [1, 2, 3]
arr.join('+')
slice()
- 截取数组的内容,返回从数组中指定
开始下标和结束下标(不包括)
之间组成的新数组 原始数组不会改变 - 参数一:代表截取的开始下标,如果只有一个参数,代表开始下标到结尾
- 参数二:代表的结束下标
- 注意:如果参数是负数,截取的下标为对应下标 + 数组的长度
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(-1, -2) // [] 如果结束下标小于开始下标返回空数组
animals.slice(-3, -1) // ["camel", "duck"]
toString
- 返回一个字符串,表示指定的数组及其元素
const array1 = [1, 2, 'a', '1a'];
array1.toString() // "1,2,a,1a"
indexOf()和 lastIndexOf()
- indexOf 查找元素的索引 不存在返回-1 存在返回元素在数组中的索引
- lastIndexOf 查找数组中最后一个索引的位置 不存在返回-1
- 参数一: 查找的元素 参数二 开始查找的下标
var arr = ['a', 'b', 'c', 'd', 'a']
arr.indexOf('a') // 0
arr.lastIndexOf('a') //4
every
- 遍历数组,判断数组的每个元素是否满足条件,返回布尔值
- 参数是一个回调函数
var arr = [2,4,6,10,15,21];
var f = arr.every(function(element, index, array){ // 当前元素 下标 数组
return element > 10;
});
f // false
some
- 遍历数组,如果至少有一个元素满足条件,则返回true,否则返回false。
- 参数是一个回调函数
var arr = [2,4,6,10,15,21];
var f = arr.some(function(element,index,array){ // 当前元素 下标 数组
return element > 100
})
console.log(f) // false
filter
- 过滤----将数组中所有满足条件的元素组成一个新数组返回 不会改变原数组
- 参数是一个回调函数
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word, index, array) => word.length > 6); // 当前元素 下标 数组
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
find
- 返回数组中满足条件的第一个值,找不到元素则返回undefined
- 参数是一个回调函数
var arr = [2,4,6,10,15,21];
var f = arr.find(function(element, index, array){ // 当前元素 下标 数组
return element > 10;
});
console.log(f) // 15
findIndex
- 返回数组中满足条件的第一个值的下标,找不到元素则返回-1
- 参数是一个回调函数
var arr = [2,4,6,10,15,21];
var f = arr.findIndex(function(element, index, array){ // 当前元素 下标 数组
return element > 10;
})
console.log(f) // 4
copyWithin
- 浅复制数组的一部分到同一数组的另一个位置 并返回他不会改变原数组的长度 多余部分会自动删除
- 参数
- target 复制到位置的索引 若为负数索引相当于length + target
- start 开始复制的索引 若为负数索引相当于length + start end也是如此
- end 结束复制的索引 不包括end的这个元素
const arr = [1, 2, 3, 4]
console.log(arr.copyWithin(2, 1, 2)) // 1, 2, 2, 4
reduce
- 数组的每一个元素执行reduce中的函数,并将结果汇总成单个值并返回
- 函数参数
- accumulator 上一次调用函数返回的累计值
- currentValue 当前正要处理的值
- index 当前元素索引
- arr 数组
案例: 计算当前按数组总和
const reduceArr = [1, 2, 3, 4, 5, 6, 6]
const num = reduceArr.reduce((pV, cV, index, arr) => {
console.log(pV, cV)
return pV + cV
})
console.log(num ) // 27