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

Posted 牧羊狼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS数组操作API ------那些年一不留神踩的坑相关的知识,希望对你有一定的参考价值。

数据处理对于我们前端工程师而言,那可谓是每天都要面对的事情,今天我们就来总结一下在处理数组时,常用到的一些数组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)

 

以上是关于JS数组操作API ------那些年一不留神踩的坑的主要内容,如果未能解决你的问题,请参考以下文章

js之数组操作

js——数组操作

js基础复习---数组操作

js中数组操作

13个不low的JS数组操作

JS操作JSON总结