JS数组操作API ------那些年一不留神踩的坑

Posted 2021-03-26 牧羊狼

数据处理对于我们前端工程师而言，那可谓是每天都要面对的事情，今天我们就来总结一下在处理数组时，常用到的一些数组API，以及一些易错点。。。【前方干货，Are you ready? Go!】

 

概览数组API：

事实上，我们可以大致把数组 api 归结为以下几种功能：分合、调序、截取、遍历（判断、筛选、查找）

 

会改变原数组的：  reverse,  sort,  splice

不会改变原数组的: slice,  indexOf,  join,  concat, every,  some,includes,  filter,  find,    fill,  reduce, forEach,map

 

    var arr = [1, 2, 5, 3, 4, 10];
    var arr1 = ["a", "b", "c", "d", "e"];

    
    // 判断数据是否为数组
    var a = Array.isArray([2,5,3,6]); // true
    // 将字符串转化为数组
    var a = Array.from("asfsds"); // ["a", "s", "f", "s", "d", "s"];
    // 1.---------- 分合-------------
    var a = arr.join("_");
    var a = arr.concat(arr1);


 // 2.------调序-----------------
    //  反转数组元素顺序
    var a = arr.reverse();
    //  排序（并不是排大小顺序）
    var arr = [1, 2, 5, 3, 4, 10];   
    var a = arr.sort();

    

// 3.-------- 截取 ----------------    
    // splice改变原数组
    // arr.splice(m,n)      （从第m位开始，截取n个元素）
    // arr.splice(m)         (从第m位开始，一直截取到数组末位)
    // arr.splice(m,n,a,b)   (从第m位开始，删掉n个元素, 添加a, 添加b,.....)
    var arr = [1, 2, 5, 3, 4, 10];   
    var a = arr.splice(1,3,"a"); // [2,5,3]
    var arr = [1, 2, 5, 3, 4, 10];
    var a = arr.splice(1,3); // [2,5,3]
    var a = arr.splice(2,1,‘w‘,‘z‘); // 5(返回的是删除/截取的部分)
    // 从下标为2的地方删除1个元素，并添加两个元素

   
    // slice不改变原数组
    //  arr.slice(m,n)（从第m位开始，到第n位结束),不包含第n位
    var arr = [1, 2, 5, 3, 4, 10];     
    var a= arr.slice(1,3); // [2,5]（不包括下标为3的）
    console.log(arr)  //  [1,2,5,3,4,10]


// 4.----------  遍历  --------------

    // map 遍历数组
    arr.map((item,i) =>  console.log(item,i))    

    // every,some,includes 判断  是否有满足条件的元素，返回boolean值
    var a = arr.every(x=>x>3); // false
    var a = arr.some(x=>x>3);  // true
    var a = arr.includes(2)    // true
    
    // filter   筛选，返回满足条件的所有元素组成的一个新数组
    var a = arr.filter(x=>x>3);  // [5,4,10]

    //  find    查找，返回通过满足条件的第一个元素的值
    var a = arr.find(x=>x>3);   // 5

   // indexOf 查找，该方法既可操作数组，也可操作字符串，  
   // 传入我们要查找的那个值
   //返回-1时代表没有此项;  返回非负数时 代表当前元素(或元素首位)在原数组(或原字符串)中所处的位数 
   var a = arr.indexOf(2); // 1

 

最后简单提一下数组的遍历方法：

1. for (let  i=0; i<arr.length; i++)

2. for (let i  in  arr)   --------  i 为索引值

3. for (let i of  arr)    --------  i 位每一项

4.  arr.forEach()

5.  arr.map(item => console.log(item))

 

 【本章拓展】：

// 把字符串类型的数组转化为真正的数组
let switchstr = ‘["index.html","dashboard.html","service.html"]‘
let switch1 = switchstr.replace(/[/,",").replace(/]/,",").replace(/"+/g,"").split(",")
switch1.pop()
switch1.shift()
console.log(switch1)

var a = [1,2,3,4,5]
console.log(a.toString())
var b = ‘4000‘
console.log(parseInt(b))
var c = a
console.log(c)