js操作数组
1. join()
作用：将数组转为字符串，不传参，默认以逗号分隔；该方法不改变原数组
const arr = [1, 2, 3]
console.log(arr.join()) // 1,2,3
console.log(arr) // [1, 2, 3]
2.push()
作用：在数组后面添加项 ()中是添加的内容，字符串需要添加引号
const arr = [1, 2, 3]
console.log(arr.push(4)) // 4 返回修改后数组的长度
console.log(arr) // [1, 2, 3, 4] 返回修改后的数组
3.pop()
作用：移除数组的最后一项
const arr = [1, 2, 3]
console.log(arr.pop()) // 3 返回被移除的那一项
console.log(arr) // [1, 2] 返回修改后的数组
4.unshift()
作用：在数组前追加项 ()中是追加的内容，字符串需要添加引号
const arr = [1, 2, 3]
console.log(arr.unshift('ms')) // 4 返回修改后数组的长度
console.log(arr) // ['ms', 1, 2, 3] 返回修改后数组的内容
5.shift()
作用：移除数组的第一项
const arr = [1, 2, 3]
console.log(arr.shift()) // 1 返回被移除的那一项
console.log(arr) // [2, 3] 返回修改后的数组
6.sort()
作用：数组排序
1. 数组中的项是字符串，直接调用sort()方法，按照字符编码排序
const arr2 = ['taylor', 'kkw', 'ts', 'kahone']
console.log(arr2.sort()) // ["kahone", "kkw", "taylor", "ts"] 返回排序后的数组
console.log(arr2) // ["kahone", "kkw", "taylor", "ts"] 返回改变后的数组
2.数组中的项是数字，需要在sort()方法中传递规则（从小到大，从大到小）
// 规则： return a-b时是从小到大，return b-a时是从大到小
// function sortbyNumber (a, b) {
// return a - b
// }
const arr = [9, 4, 6, 10, 12]
// 使用箭头函数传入规则
console.log(arr.sort((a, b) => a - b)) // [4, 6, 9, 10, 12] 返回排序后的数组
console.log(arr) // [4, 6, 9, 10, 12] 返回改变后的数组
7.reverse()
作用：翻转数组
const arr = [9, 4, 6, 10, 12]
console.log(arr.reverse()) // [12, 10, 6, 4, 9] 返回翻转后的数组
console.log(arr) // [12, 10, 6, 4, 9] 返回修改后的数组
8.concat()
作用：连接数组，将两个数组连接为一个数组
const arr = [9, 4, 6, 10, 12]
console.log(arr.concat(['aa', ['bb', 'cc', ['dd']]])) // [9, 4, 6, 10, 12, 'aa', ['bb', 'cc', ['dd']]] 返回连接后的数组
console.log(arr.concat('aa', ['bb', 'cc', ['dd']])) // [9, 4, 6, 10, 12, 'aa', 'bb', 'cc', ['dd'] 返回连接后的数组
console.log(arr) // [9, 4, 6, 10, 12] 返回原数组
9.slice()
作用：截取数组中的项
传正数的时候，索引从0开始计数，传负数的时候，索引从1开始计数
1. 只传一个参数 从该参数的索引位置，截取到数组的末尾
1.1：传正数
const arr = [9, 4, 6, 10, 12]
console.log(arr.slice(1)) // [4, 6, 10, 12] 返回截取的数组
console.log(arr) // [9, 4, 6, 10, 12] 返回原数组
1.2：传负数
const arr = [9, 4, 6, 10, 12]
console.log(arr.slice(-2)) // [10, 12] 返回截取的数组
console.log(arr) // [9, 4, 6, 10, 12] 返回原数组
2.传两个参数，第一个参数是开始截取的位置，第二个参数是结束的位置，并不会截取到结束位置的那一项
2.1：传正数
const arr = [9, 4, 6, 10, 12]
console.log(arr.slice(1, 3)) // [4, 6] 返回截取的数组
console.log(arr) // [9, 4, 6, 10, 12] 返回原数组
2.2：传负数
const arr = [9, 4, 6, 10, 12]
console.log(arr.slice(-3, -1)) // [6, 10] 返回截取的数组
console.log(arr) // [9, 4, 6, 10, 12] 返回原数组
10.splice()
作用：删除，替换，追加
用法：splice(index,howmany,item1,…,itemX) 可接收三个参数，index: 操作项的索引；howmany: 删除的个数，若为0，则不删除项；item1,…,itemx: 追加的新项
1. 删除
const arr = [2, 4, 6, 8, 10, 12]
console.log(arr.splice(2,2)); // [6, 8] 返回删除的项
console.log(arr); // [2, 4, 10, 12] 返回删除之后的新数组
2. 追加
const arr = [2, 4, 6, 8, 10, 12]
console.log(arr.splice(2,1,'ms','kahone')); // [6] 返回删除的项
console.log(arr); // [2, 4, "ms", "kahone", 8, 10, 12] 返回删除，追加后的新数组
3.替换
const arr = [2, 4, 6, 8, 10, 12]
console.log(arr.splice(3,2,'ms','kahone')); // [8, 10] 返回删除后的项
console.log(arr); // [2, 4, 6, "ms", "kahone", 12] 返回替换后的新数组
11.indexOf()
作用：查找数组中的项
用法：indexOf(item, index)接收两个参数，item表示要查找的项；index表示从哪个索引开始找（开始–末尾，从0开始）,返回查找到的第一项的索引，若查找不到则返回 -1
注意：若是对字符串进行查找，对大小写敏感
const arr = [2, 4, 6, 4, 5, 2, 8, 6, 10];
console.log(arr.indexOf(4)); // 1 返回查找项的索引
console.log(arr.indexOf(7)); // -1 7找不到
console.log(arr.indexOf(2,3)); // 5 从索引3的位置开始找
console.log(arr); // [2, 4, 6, 4, 5, 2, 8, 6, 10] 返回原数组
12.lastIndexOf()
作用：查找数组中的项
用法：lastIndexOf(item, index)接收两个参数，item表示要查找的项；index表示从哪个索引开始找（末尾–开始，从0开始），返回查找到的第一项的索引（开始–末尾，从0开始），若查找不到则返回-1
注意：若是对字符串进行查找，对大小写敏感
const arr = [2, 4, 6, 4, 5, 2, 8, 6, 10];
console.log(arr.lastIndexOf(2)); // 5 返回查找项的索引
console.log(arr.lastIndexOf(21)); // -1 21找不到
console.log(arr.lastIndexOf(2, 6)); // 5 返回查找项的索引
console.log(arr); // [2, 4, 6, 4, 5, 2, 8, 6, 10] 返回原数组
总结：
1. 不改变原数组的操作方法：join() concat() slice()
2. 改变原数组的操作方法：push() pop() unshift() shift() sort() reverse() splice()
13.forEach()
作用：对数组进行遍历循环，对数组的每一项运行特定的逻辑，该方法没有返回值，参数是函数类型
用法：arr.forEach((item, index, self) => {特定逻辑}); 该方法接收三个参数，item表示数组的每项内容，index表示数组项的索引，self表示数组的本身
const arr = [2, 4, 6, 8, 10, 12]
arr.forEach((item, index, self) => {
console.log(item); // 2, 4, 6, 8, 10, 12 数组的每一项
console.log(index); // 0, 1, 2, 3, 4, 5 数组每项对应的索引
console.log(self); // [2, 4, 6, 8, 10, 12] 数组本身
})
14.map()
作用：对数组进行遍历循环，对数组的每一项运行特定的逻辑，有返回值，返回操作后的结果，参数是函数类型
const arr = [2, 4, 6, 8, 10, 12]
const arr2 = arr.map((item, index) => {
return item * index
})
console.log(arr2); // [0, 4, 12, 24, 40, 60] 返回执行的结果
15.filter()
作用：对数组进行过滤，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
const arr = [2, 4, 6, 8, 10, 12];
const arr2 = arr.filter(function(item, index) {
return index % 3 === 0 || item >= 8;
});
console.log(arr2); // [2, 8, 10, 12] 返回符合条件的数组
16.every()
作用：用于检测数组中的所有项是否全部满足指定条件，全部满足返回true，否则返回false，如果遇到不满足条件的项，就不会再继续检测了
用法：array.every(function(currentValue,index,arr), thisValue)
注意：every()不会对空数组进行检测，也不会改变原始数组
const arr = [9, 4, 6, 10, 12]
console.log(arr.every((item) => item > 20)) // false 条件不满足
console.log(arr) // [9, 4, 6, 10, 12]
17.some()
作用：用于检测数组中是否存在满足制定条件的项，若存在则返回true，同时不会再向下进行检测，否则返回false
用法：array.some(function(currentValue,index,arr),thisValue)
注意：every()不会对空数组进行检测，也不会改变原始数组
const arr = [9, 4, 6, 10, 12]
console.log(arr.some((item) => { return item > 8 })) // ture 有满足条件的项
console.log(arr) // [9, 4, 6, 10, 12]
18.reduce()
作用：按照指定的逻辑，将数组中的每一项都执行一次，并最终累计为一个值返回，相当于一个累加器
用法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
/**
@params function(){} 执行的逻辑，需要返回值
total: [必填]执行逻辑之后的返回值
currentValue: [必填]正在执行逻辑的数组项
currentIndex: [选填]正在执行逻辑的数组项索引
arr: [选填]当前元素所属的数组对象
initialValue: 传递给函数的初始值
*/
const arr = [2, 4, 6, 8, 10, 12];
// 数组求和
function getSum (total, item) {
return total + item
}
console.log(arr.reduce(getSum)); // 42
console.log(arr.reduce(getSum, 10)); // 52 传递了初始值，会将初始值也传递给函数
19.reduceRight()
作用与用法都与reduce()一致 不同的是reduce()是从左往右开始执行，reduceRight()是从右往左开始执行
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
