时间戳

首页 > 技术文章 > JS 数组操作总结

JS 数组操作总结

zero-zm 2019-12-26 16:29 原文

1. 根据条件查找数组项

every - JS方法 数组中的所有元素是否符合回调函数中的指定条件；返回值为true/false

    const a = [1, 3, 5, 6];
    function calbackFunc(item) {
        return item%2==0;
    }
    a.every(calbackFunc);
    // 输出： false;

some - JS方法 与every不同的是，只要有一个元素满足条件，就返回true；；返回值为true/false

     const a = [1, 3, 5, 6];
    function calbackFunc(item) {
        return item%2==0;
    }
    a.some(calbackFunc);
    // 输出：true;

filter - JQuery方法 创建一个新数组；新数组是由符合回调函数中的指定条件的旧数组项组成；返回值是由旧数组项组成的；

    const a = [{a: 1, b: 2, c: 3}];
    funcion calbackFunc(item) {
        return item>=2;
    }
    a.filter(calbackFunc);
    // 输出： [{b:2}, {c: 3}]; 若都不符合条件则返回空数组

forEach / each - 循环遍历操作数组

    const a = [{a: 1}, {b: 2}, {c: 3}];
    funcion calbackFunc(item) {
        item['d'] = 4;
    }
    
    // forEach遍历方式
    a.forEach(calbackFunc);
    // each遍历方式
    $.each(a, callbackFunc);    

    // 输出： [{b:2}, {c: 3}]; 若都不符合条件则返回空数组

each() 、forEach()方法介绍

each() - JQuery 遍历方法

可遍历对象、数组、DOM元素数组

  • 遍历对象； $.each(Object, function(key, value){...});
var objData = {a: 1, b: 2};
$.each(objData, function(key, value){
    console.log('key值：'+key + '； value值：'+value);
});

// 输出
key值：a； value值：1
key值：b； value值：2
  • 遍历数组； $.each(Array, function(index, value){...});
var arrData = [3, 4];
$.each(arrData, function(index,value){
    console.log('索引ndex：'+index+ ';值value：'+value);
});

// 输出
索引ndex：0； 值value：3
索引ndex：1； 值value：4
  • 遍历DOM元素数组； $(DOM选择器).each(Object, function(index,item){...});
$('p').each(function(index, item){
    console.log('index：'+index); 
    console.log(item);
});

// 输出
index： 0   <p>...</p>
index：1    <p>...</p>
index：2    <p>...</p>

forEach() - JS 遍历方法

只能遍历数组，不能遍历对象及DOM元素数组

  • 遍历数组； Array.forEach(Object, function(value,index){...});
var arrData = [3, 4];
arrData.forEach(arrData, function(value,index){
    console.log('value值：'+value+ '； index索引：'+index);
});

// 输出
value值：3；index值：0
value值：4；index值：1

map - 映射一个新数组，和原数组无关联，新数组的每个元素都是调用callback函数后返回的结果。注意：如果没有return值，则新数组会插入一个undefined值。map并不具有过滤功能，只是操作旧数组生成一个和元素组一样长度的新数组；

    const a = [{name: 'aa'}, {name: 'bb'}, {name: 'cc'}];
    const b = [{name: 'aa'}, {age: 'bb'}];

    const narray1 = a.map(item=>item.name+'11');
    const narray2 = b.map(item=>item.name+'11');

    // narray1 => ['aa11', 'bb11', 'cc11']
    // narray2 => ['aa11', 'undefined11']
    // a => [{name: 'aa'}, {name: 'bb'}, {name: 'cc'}]
    // b =>  [{name: 'aa'}, {age: 'bb'}]

slice - 返回一个新数组，数组是由旧数组从begin到end(不包含end)的数组项组成

    const a = [{a: 1}, {b: 2}, {c: 3}];

    a.slice(1,2); // 输出 [{b: 2}]

2. 操作数据

join - 将数组项以某个字符(默认为，)连接起来，返回一个字符串

    const a = ['a', 'b', 'c'];
    a.join('-');
    // 输出 ‘a-b-c’

push - 讲一个或多个元素添加到数组的末尾； unshift - 将一个或多个元素添加到数组的开头

    const a = [1, 2, 3];
    const b = ['a'];
    
    a.push(...b); // 输出： [1, 2, 3, 'a']
    a.unshift(...b); // 输出： ['a', 1, 2, 3]

pop - 删除数组最后一项，并且返回删除的值； shift - 删除数组中第一项的值，并返回删除的值；

    const a  = [1, 2, 3];
    
    a.pop(); // 3
    a.shift(); // 1

splice - 删除数组项或往数组中添加项 (startIndex, num, addItem); startIndex指定修改数组的起始位置；num删除个数；addItem添加的元素（添加到起始位置的前面）

const a= ['aa', 'bb', 'cc', 'dd'];
 
const deleted =a.splice(2, 0, 'qq'); // 删除0位，在索引为2的位置前方插入'qq'元素
// a变为 ["aa", "bb", "qq", "cc", "dd"]，deleted为[]

const deleted = a.splice(2, 1); 
// a变为['aa', 'bb', 'dd'], deleted为['cc']

推荐阅读