数组常用方法的简单梳理
数组作为开发中常见的数据类型,学会处理数组的方法,会让你的开发更为流畅
数组的方法大致分为两类:
1.改变原数组的方法 : 如 shift()、unshift()、pop()等
2.不改变原数组的方法: 如 reduce()、filter()、every()等
现在依据个人的理解和经验,将一些常用的数组方法用法及参数总结如下,希望对阅读的人有点帮助:
一、会改变原数组的方法
1.Array.shift() : 删除数组的第一个元素,返回值是被删除的元素
let arr = [1, 2, 3];
let newArr=arr.shift()
console.log(newArr); // 打印返回值显示是 [1]
console.log(arr); // 打印原数组 [2, 3]
shift()方法没有参数,所以不需要进行传参
注意: shift()方法一次只能删除一个元素
2.Array.unshift() : 在数组的前面添加一个或者多个数组元素,返回值是新数组的长度
let arr = [1, 2, 3];
let newArr=arr.unshift('red', 'purple');
console.log(newArr); // 打印返回值显示是 5 为新数组的长度
console.log(arr); // 打印原数组 ['red','purple',1,2,3]
unshift()的参数就是你需要添加到数组前面的数据,直接写就可以
3.Array.push() 在数组的末尾添加一个或者多个数组元素,返回的结果是新数组的长度
let arr = ['green', 'yellow', 'skyblue'];
let newArr=arr.push('red', 'purple');
console.log(newArr); // 打印返回值显示是 5 为新数组的长度
console.log(arr); // 打印原数组 ['green', 'yellow', 'skyblue','red','purple']
push()的参数跟unshift()一样,直接写就可以
4.Array.pop() 删除数组的最后一个元素,返回值是被删除的元素
let arr = ['green', 'yellow', 'skyblue'];
let newArr=arr.push('red', 'purple');
console.log(newArr); // 打印返回值显示是 5 为新数组的长度
console.log(arr); // 打印原数组 ['green', 'yellow', 'skyblue','red','purple']
pop()方法跟shift()一样,没有参数,并且一次也只能删除一个元素
5、Array.reverse()：颠倒数组顺序,返回值是颠倒后的数组,原数组也会被颠倒
let arr = ["a","b","c","d"]
let newArr = arr.reverse()
console.log(newArr) // ["d", "c", "b", "a"]
console.log(arr) // ["d", "c", "b", "a"]
reveres()方法没有参数
6、Array.sort()：对数组进行排序,返回值是排序后的数组
当数组内部是英文字符串时,默认按字母顺序来排序
当数组内部是中文字符串时,按UTF-16代码排序
一般情况来说,基本不会对字符串类型数组进行排序
let arr = ['March', 'Jan', 'Feb', 'Dec'];
arr.sort();
console.log(arr); //["Dec", "Feb", "Jan", "March"]
要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列
let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
return a-b
});
console.log(arr); //[3,5,7,9]
如果是 b 减 a，如下的函数将会将数组降序排列
let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
return b-a
});
console.log(arr); //[9,7,5,3]
7、Array.splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回
splice()有三个参数:
start : 起始位置的索引号
length: 需要删除的个数
item: 需要替换的元素 (在不需要添加,只进行删除操作时可以省略)
splice()方法在不进行删除时,可以在某个索引后面添加元素
let arr = ['Jan', 'March', 'April', 'June'];
arr.splice(1, 0, 'Feb');
console.log(arr); //["Jan", "Feb", "March", "April", "June"]
也可以用来替换掉数组中的某一个元素,代替arr[索引号]的方法替换数组元素来触发vue的响应
arr.splice(4, 1, 'May');
console.log(arr); // ["Jan", "Feb", "March", "April", "May"]
二、不会改变原数组的方法
1.Array.reduce()主要于对数组的求和,也可以对字符串,数组进行拼接
reduce()接受四个参数：
Array.reduce((accumulator,current,index,Array) =>{
.......
return accumulator
} ,int)
第一个参数是：accumulator是当前聚合值，
第二个参数是: current是数组循环时的当前元素
第三个参数是: index 是数组元素的索引值
第四个参数是: Array 是数组本身
int : 是accumulator的初始值 可以自行进行设置
一般常用的是前面的两个参数,后面两个参数不常用,常用的使用场景便是数组的求和
let arr = [1, 2, 3, 4];
let a = arr.reduce((accumulator,current)=> accumulator += current , 0)
//这里使用的es6语法,省略了return
console.log(a); //10
2.Array.filter()要于对数组的筛选,返回值是一个满足条件的新数组
filter()接受四个参数：
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保 留。它接受以下三个参数：
element 数组中当前正在处理的元素。
index(可选) 正在处理的元素在数组中的索引。
array(可选) 调用了 filter 的数组本身。
thisArg(可选) 执行 callback 时，用于 this 的值。
let arr = [12, 5, 8, 130, 44]
let newArr = arr.filter( item => item>10 ); //筛选数组中大于10的值
console.log(newArr) // [12, 130, 44]
3.Array.every()测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
arr.every(callback(element[, index[, array]])[, thisArg])
里面是回调函数callback用来测试每个元素的函数，它可以接收三个参数：
element 用于测试的当前值。
index(可选)用于测试的当前值的索引。
array(可选)调用 every 的当前数组。
thisArg 执行 callback 时使用的 this 值
const arr = [1, 30, 39, 29, 10, 13];
let a = arr.every((currentValue) => currentValue < 40)); //判断里面的每一个值是否小于40
console.log(a) // true
只有当数组里面的每一个元素都满足条件才会返回true,否则返回的是false
注意：若收到一个空数组，此方法在一切情况下都会返回 true。
4.Array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有则返回-1。
arr.findIndex(callback[, thisArg])
callback针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
element 当前元素。
index 当前元素的索引。
array调用findIndex的数组。
thisArg(可选)执行callback时作为this对象的值.
let arr = [5, 12, 8, 130, 44];
let a = array1.findIndex((element) => element > 13)
console.log(a); // 3
5.Array.forEach()方法对数组的每个元素执行一次给定的函数,历数组最常用的方法
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
callback 为数组中每个元素执行的函数，该函数接收一至三个参数：
可依次向 callback 函数传入三个参数：
- 数组当前项的值
- 数组当前项的索引
- 数组对象本身
currentValue 数组中正在处理的当前元素。
index (可选) 数组中正在处理的当前元素的索引。
array (可选) forEach() 方法正在操作的数组。
thisArg (可选) 可选参数。当执行回调函数 callback 时，用作 this 的值。
const array1 = ['a', 'b', 'c'];
array1.forEach((item,index)=>{
console.log(item) // 分别输出 a b c
console.log(index) //分别输出 0 1 2
}
forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。
6.Array.join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串
arr.join([separator])
separator(可选)指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。
let arr = ['Fire', 'Air', 'Water'];
console.log(arr.join()); // "Fire,Air,Water"
console.log(arr.join('')); //"FireAirWater"
console.log(arr.join('-')); // "Fire-Air-Water"
注意 :如果一个元素为 undefined 或 null，它会被转换为空字符串。
7.Array.includes()用来判断一个数组是否包含一个指定的值
includes(valueToFind[, fromIndex])
根据情况，如果包含则返回 true，否则返回 false。
valueToFind
需要查找的元素值。
fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
例子:判断数组中是否包含某个元素
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
8 Array.map()创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
arr.map(callback()) 返回值是一个新数组,数组的构成看return回来是什么值
map方法第一个参数传入一个callback回调函数,该函数使用三个参数
1.callback 数组中正在处理的当前元素。
-
callback数组中正在处理的当前元素的索引。 -
map方法调用的数组。
例子:求数组中每个元素的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
坐的时间有点久,就先写到这望对大家能有所帮助.. 睡觉自然醒才是王道
