7.2 数组的基本操作
- 访问数组中的元素
-
方法一：通过括号表示法
-
方法二：
at()-
语法：arr.at(index)
-
参数（index）：要返回的数组元素的索引（位置）。当传递负数时，支持从数组末端开始的相对索引
-
描述：返回给定索引处的数组元素
-
-
修改数组中的元素
通过数组下标直接修改。
-
在数组中添加元素
-
unshift()- 语法：arr.unshift(element1, element2...)
- 参数：要添加到数组开头的元素
- 描述：将一个或多个元素添加到数组的开头，并返回该数组的新长度。
-
push()- 语法：arr.push(element1, element2...)
- 参数：被添加到数组末尾的元素。
- 描述：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
// 在数组的头部添加元素 var arr1 = ["a", "b", "c"] var result1 = arr1.unshift("1", "2") console.log(result1) // 5 console.log(arr1) // ['1', '2', 'a', 'b', 'c'] // 在数组的尾部添加元素 var arr2 = ["a", "b", "c"] var result2 = arr2.push("1", "2") console.log(result2) // 5 console.log(arr2) // ['a', 'b', 'c', '1', '2']
- 删除数组中的元素
-
shift()- 语法：arr.shift()
- 从数组中删除第一个元素，并返回该元素的值当数组为空时返回
undefined）。此方法更改数组的长度。
-
pop()-
语法：arr.pop()
-
描述：从数组中删除最后一个元素，并返回该元素的值（当数组为空时返回
undefined）。此方法会更改数组的长度。
// 删除数组头部的元素 var arr3 = ["a", "b", "c"] var result3 = arr3.shift() console.log(result3) // "a" console.log(arr3) // ['b', 'c'] // 删除数组尾部的元素 var arr4 = ["a", "b", "c"] var result4 = arr4.pop() console.log(result4) // "c" console.log(arr4) // ['a', 'b'] -
- 一个可以删除/添加/替换元素的方法
-
splice()- 语法：arr.splice(start[, deleteCount[, item2[, item2...]])
- 参数1（start）：指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于
array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。 - 参数2（deleteCount）：可选。整数，表示要移除的数组元素的个数。如果
deleteCount大于start之后的元素的总数，则从start后面的元素都将被删除（含第start位）。如果deleteCount被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果deleteCount是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。 - 参数3（itemN）：可选。要添加进数组的元素，从
start位置开始。如果不指定，则splice()将只删除数组元素。 - 返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
- 描述：通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
// 删除元素 var arr5 = ["a", "b", "c"] result5 = arr5.splice(1, 1) console.log(result5) // ['b'] console.log(arr5) // ['a', 'c'] // 修改元素 var arr6 = ["a", "b", "c"] result6 = arr6.splice(1, 1, "修改") console.log(result6) // ['b'] console.log(arr6) // ['a', '修改', 'c'] // 添加元素 var arr7 = ["a", "b", "c"] result7 = arr7.splice(1, 0, "d", "e") console.log(result7) // [] console.log(arr7) // ['a', 'd', 'e', 'b', 'c']
7.3 length属性
length属性用于获取数组的长度。当我们修改数组时，length会自动更新。
length属性是可写的。如果手动增大length的值，会增加数组的长度；如果手动减小length的值，数组会被截断。
所以，清空数组最简单的方法就是：
arr.length = 0
var arr1 = new Array("a", "b", "c")
// 单独通过length增加数组的长度，数组后面增加的元素全为空。
// 同理，减少length的长度则对数组进行截断
arr1.length = 10
console.log(arr1) // ['a', 'b', 'c', empty × 7]
7.4 数组的遍历
- 普通for循环遍历
- for...in遍历
- for...of遍历
注：for循环遍历和for...in遍历可以拿到数组的索引，而for...of遍历数组是直接对数组中的元素进行遍历，不能拿到数组的索引。
var arr = ["a", "b", "c"]
// 1.普通for循环
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 2.for...in遍历
for (var index in arr) {
console.log(index)
console.log(arr[index])
}
// 3.for...of遍历
for (var element of arr) {
console.log(element)
}
7.5 在数组中查找元素或元素对应的索引
- 数组中存放的是原始类型
-
at()- 语法：arr.at(index)
- 参数（index）：要返回的数组元素的索引（位置）。当传递负数时，支持从数组末端开始的相对索引
- 描述：返回给定索引处的数组元素
-
indexOf()- 语法：arr.indexOf(searchElement[, fromIndex])
- 参数1（searchElement）：要查找的元素。
- 参数2（fromIndex）：可选。开始查找的位置，默认值为 0。
- 描述：返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
-
includes()- 语法：arr.includes(searchElement[, fromIndex])
- 参数1（searchElement）：要查找的元素。
- 参数2（fromIndex）：可选。从
fromIndex索引处开始查找searchElement。默认为 0。 - 描述：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回
true，否则返回false。
-
find()【高阶函数】 -
findIndex()【高阶函数】// 1.数组中存放的是原始类型 var arr1 = ['a', 'b', 'c'] // 1.1 indexOf()方法：查找某个值的索引。要查找的元素存在，返回索引值；不存在返回-1 console.log(arr1.indexOf('b')) // 1 console.log(arr1.indexOf('bb')) // -1 // 1.2 at()方法：查找数组索引位置的元素值 console.log(arr1.at(2)) // c // 1.3 includes()方法：查找数组中是否存在某个值。存在返回true，不存在返回false console.log(arr1.includes('b')) // true // 1.4 findIndex()方法：在数组中找到对应元素的索引。 var info1 = arr1.findIndex(function(item, index, arr) { return item === "b" }) console.log(info1) // 1 // 第14~16行代码课改为 var info1 = arr1.findIndex(item => item === "b")
- 数组中存放的是对象类型
-
for循环
-
find()【高阶函数】- 语法：arr.find(callbackFn[, thisArg])
- 参数1（callbackFn）：为数组中的每个元素执行的函数。它应该返回一个真值来表示已经找到了匹配的元素。该函数被调用时将传入以下参数：
- 参数（element）：数组中当前正在处理的元素。
- 参数（index）：正在处理的元素在数组中的索引。
- 参数（array）：调用了
find()的数组本身。
- 参数2（thisArg）:可选。执行
callbackFn时用作this的值。 - 描述：返回数组中满足提供的测试函数的第一个元素的值。否则返回
undefined。
// 2.数组中存放的是对象类型 var arr2 = [ {id: 001, name: "张三", age: 18}, {id: 002, name: "李四", age: 28}, {id: 003, name: "王五", age: 38}, {id: 004, name: "赵六", age: 48} ] /* 需求：查找id为001的人员信息 */ // 2.1 for循环 for (var i = 0; i < arr2.length; i++) { if (arr2[i].id === 001){ console.log(arr2[i]) break } } // 如果后面需要用到id为001的人员信息，上面的for循环改为 var info = null // 问：此处能否为var info = {} 答：不能。后面可能会对info进行判断，判断是否为空等 for (var i = 0; i < arr2.length; i++) { if (arr2[i].id === 001){ info = arr2[i] break } } if (info) { console.log("id为001的人员信息为:", info) }else { console.log("未找到id为001的人员信息") } // 2.2 find()方法：高阶函数 var info2 = arr2.find(function(item) { return item.id === 001 }) console.log(info2) // 如果学了箭头函数，第34~36行可写为 var info2 = arr2.find(item => item.id === 001)
7.6 数组的排序和反转
-
sort()-
语法：
// 无函数 sort() // 箭头函数 sort((a, b) => { /* … */ } ) // 比较函数 sort(compareFn) // 内联比较函数 sort(function compareFn(a, b) { /* … */ }) -
参数（compareFn）：可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
- 参数（a）：第一个用于比较的元素。
- 参数（b）：第二个用于比较的元素。
-
描述：对数组的元素进行排序，并返回数组。（数组已原地排序，并且不进行复制。）默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
var arr1 = [2, 3 ,1, 45, 15] var result1 = arr1.sort(function(item1, item2) { // 由小到大排序 return item1 - item2 }) console.log(result1) // [1, 2, 3, 15, 45] var result2 = arr1.sort(function(item1, item2) { // 由大到小排序 return item2 - item1 }) console.log(result2) // [45, 15, 3, 2, 1] -
-
reverse()- 语法：arr.reverse()
- 描述：将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
var arr2 = [2, 3 ,1, 45, 15] arr2.reverse() console.log(arr2) //[15, 45, 1, 3, 2]
7.7 数组的其它常见方法
-
concat()- 语法：arr.concat([valueN])
- 参数（valueN）：可选。数组和/或值，将被合并到一个新的数组中。如果省略了所有
valueN参数，则concat会返回调用此方法的现存数组的一个浅拷贝。 - 描述：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
var arr1 = ["a", "b", "c"] var arr2 = [1, 2, 3] var arr3 = ["d", "e"] var newArr1 = arr1.concat() var newArr2 = arr1.concat(arr2, arr3) console.log(newArr1) // ['a', 'b', 'c'] console.log(newArr2) // ['a', 'b', 'c', 1, 2, 3, 'd', 'e'] // concat()方法与push()方法的区别 // ①concat()方法返回一个新数组，push()方法直接在原数组上进行操作 // ②push()方法会直接将数组当成一个元素添加 var newArr3 = arr1.push(arr2, arr3) console.log(newArr3) // 5 console.log(arr1) // ['a', 'b', 'c', [1, 2, 3], ['d', 'e']] -
slice()- 语法：arr.slice() 或 arr.slice(start) 或 arr.slice(start, end)
- 参数1（start）：提取起始处的索引（从
0开始），从该索引开始提取原数组元素。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略start，则slice从索引0开始。如果begin超出原数组的索引范围，则会返回空数组。 - 参数2（end）：提取终止处的索引（从
0开始），在该索引处结束提取原数组元素。slice会提取原数组中索引从begin到end的所有元素（包含begin，但不包含end）。 - 描述：返回一个新的数组对象，这一对象是一个由
begin和end决定的原数组的浅拷贝（包括begin，不包括end）。原始数组不会被改变。
var arr4 = ['a', 'b', 'c', 'd', 'e'] var newArr4 = arr4.slice() var newArr5 = arr4.slice(1) var newArr6 = arr4.slice(1, 3) console.log(newArr4) // ['a', 'b', 'c', 'd', 'e'] console.log(newArr5) // ['b', 'c', 'd', 'e'] console.log(newArr6) // ['b', 'c'] -
join()- 语法：arr.join() 或 arr.join(separator)
- 参数（separator）：指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号（
,）分隔。如果separator是空字符串（""），则所有元素之间都没有任何字符。 - 描述：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
var arr5 = ['a', 'b', 'c', 'd', 'e'] var result = arr5.join("-") console.log(result) // a-b-c-d-e注：该方法常与字符串的
split()方法一起使用。 -
forEach()-
语法：
// 箭头函数 forEach((element) => { /* … */ }) forEach((element, index) => { /* … */ }) forEach((element, index, array) => { /* … */ }) // 回调函数 forEach(callbackFn) forEach(callbackFn, thisArg) // 内联回调函数 forEach(function(element) { /* … */ }) forEach(function(element, index) { /* … */ }) forEach(function(element, index, array){ /* … */ }) forEach(function(element, index, array) { /* … */ }, thisArg) -
参数1（callbackFn）：为数组中每个元素执行的函数。函数调用时带有以下参数：
- 参数（element）：数组中当前正在处理的元素。
- 参数（index）：正在处理的元素在数组中的索引。
- 参数（array）：
forEach()方法正在操作的数组。
-
参数2（thisArg）:可选。当执行回调函数
callbackFn时，用作this的值。 -
描述：对数组的每个元素执行一次给定的函数。返回值为
undefined
-
自己实现
find()和forEach()方法！！！
filter()map()reduce()
