JS数组方法整理

/* 新建一个数组:*/
let array = [
    { id: 1, title:'js数组方法1' },
    { id: 2, title:'js数组方法2' }
   ]

1. 数组元素增删改系列

arr.push( ):数组尾部添加元素,返回数组的新长度,注意不是返回数组
let obj =  { id: 3, title:'js数组方法3' },
array.push(obj);    // 返回数组长度:3
console.log(array)  
// [{ id: 1, title:'js数组方法1' },{ id: 2, title:'js数组方法2' },{ id: 3, title:'js数组方法3' }]
arr.unshift( ):数组头部添加元素,返回数组的新长度,注意不是返回数组。
let obj =  { id: 3, title:'js数组方法3' },
array.unshift(obj);  // 返回数组长度:3
console.log(array)   // [{ id: 3, title:'js数组方法3' },{ id: 1, title:'js数组方法1' },{ id: 2, title:'js数组方法2' }]
arr.pop( ):从数组中删除最后一个元素,并返回该元素的值(删除的元素)。
array.pop();       // 返回删除元素:{ id: 2, title:'js数组方法2' }
console.log(array)// [{ id: 1, title:'js数组方法1' }]
arr.shift( ):从数组中删除第一个元素,并返回该元素的值(删除的元素)。
array.shift();     // 返回删除元素:{ id: 1, title:'js数组方法1' }
console.log(array) // [{ id: 2, title:'js数组方法2' }]
arr.splice( ):数组删除、插入和替换一个或多个元素;并返回删除元素的值。
/* 删除:指定2个参数,要删除的项的位置和要删除的个数 */
array.splice(0,1);    // 从索引为0开始删除一项
console.log(array);  // [{ id: 2, title:'js数组方法2' }]

/* 插入:向指定位置插入任意数量的元素,需提供3个参数:起始位置、 0(要删除的项数)和要插入的元素。 */
array.splice(2,0,{ id: 3, title:'js数组方法3' });
console.log(array); 
// [{ id: 1, title:'js数组方法1' },{ id: 2, title:'js数组方法2' },{ id: 3, title:'js数组方法3' }] 

/* 替换:向指定位置插入任意数量的项,且同时删除任意数量的项,需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。 */
array.splice(1,1,{ id: 3, title:'js数组方法3' });
console.log(array);  
// [{ id: 1, title:'js数组方法1' },{ id: 3, title:'js数组方法3' }]

2. 数组循环遍历、筛选系列

arr.foreach( )方法用于调用数组的每一个元素,并将元素传递给回调函数。这个方法没有返回值。

语法:array.forEach(function(currentValue, index, arr), thisValue)

array.forEach((value, index, arr) => {
  console.log(`${value} => ${index} => ${arr}`);
})
arr.filter( )方法用于对数组进行过滤。它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。返回新数组。注意:不会对空数组进行检测、不会改变原始数组

语法:array.filter(function(currentValue, indedx, arr), thisValue)

let res = array.filter((item) => { 
    return item.id = 1; 
}); 
console.log(res); // [{ id: 1, title:'js数组方法1' }]
arr.map( )方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值,也就是map()方法进行处理之后返回一个新的数组。注意:不会对空数组进行检测、不会改变原始数组

语法:array.map(function(currentValue,index,arr), thisValue)

let res = array.map(function (item) { return item.id; });
console.log(res); // [1,2]
arr.some( )方法用于检测数组中的元素是否满足指定条件,如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。

语法:array.some(function(currentValue,index,arr),thisValue)

if (array.some(item => item.id < 10)) {  
console.log('true')  
}
arr.every( )方法方法用于检测数组所有元素是否都符合指定条件。如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。

语法:array.every(function(currentValue,index,arr), thisValue)

if (array.some(item => item.id < 10)) {  
console.log('true')  
}
arr.findIndex( )方法返回数组中满足条件的第一个元素的索引(下标), 如果没有找到,返回-1

语法:array.findIndex(function(currentValue, index, arr), thisValue)

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0
arr.find( )方法返回数组中满足条件的第一个元素的值,如果没有,返回undefined

语法:array.find(function(currentValue, index, arr),thisValue)

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0
arr.includes( )方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

语法:array.includes(searchElement, fromIndex);
fromIndex:可选的参数,从该索引处开始查找searchElement。如果为负值,则按升序从array.length + fromIndex 的索引开始搜索。默认为0。

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0
arr.indexOf( )方法判断数组中是否存在某个值,如果存在返回数组元素的下标,否则返回-1。

语法:array.indexOf(item,start)
start:可选的整数参数。规定在数组中开始检索的位置。

let fruits=["Orange","Apple","Mango","Banana","Apple"];
let a = fruits.indexOf("Apple",4);
console.log(a);    // 4 

3. 数组合并

arr.concat( )方法用于合并两个或多个数组。此方法不会更改现有数组,返回值是一个新数组
let array2 = [
    { id: 3, title:'js数组方法3' },
    { id: 4, title:'js数组方法4' }
]
array.concat(array2)
console.log(array)
// [{ id: 1, title:'js数组方法2' },{ id: 2, title:'js数组方法2' }{ id: 3, title:'js数组方法3' },{ id: 4, title:'js数组方法4' }]

4. 数组排序

arr.sort()方法将数组里的项从小到大排序。注意:sort()方法比较的是字符串,没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数。原数组不会被改变。
let arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());      //  ["a", "b", "c", "d"]

/* 数值排序 */
function sortNumber(a,b)
{
  return a - b
}
arr = [13, 24, 51, 3]; 
console.log(arr.sort());        // [13, 24, 3, 51] 
console.log(arr.sort(sortNumber));  // [3, 13, 24, 51]
arr.reverse( )方法用于颠倒数组中元素的顺序。
var fruits = ["a", "b", "c", "d"];  
fruits.reverse();
console.log(fruits);
//  d,c,b,a

5. 数组转字符串

arr.join( )方法就是把数组转换成字符串,然后给他规定个连接字符,默认的是逗号","。原数组不会被改变。
var arr = [1,2,3];
console.log(arr.join());     // 1,2,3
console.log(arr.join("-"));    // 1-2-3

你可能感兴趣的