zoukankan      html  css  js  c++  java
  • 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)

    作者:牧羊狼

    出处:https://www.cnblogs.com/edwardwzw/

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利,谢谢您的配合。 Freedom is not let you do whatever you wanna but teach you not to do the things that you donnot wanna do.

  • 相关阅读:
    smtplib文字邮件的发送
    接口测试框架分析
    UnitTest框架的快速构建与运行
    Appium + Python App自动化第一个脚本
    3个必备cookie实用方法
    单元测试框架的选择
    快速构建一个完整的Selenium框架
    SSH原理与运用
    springboot 集成 spring-data-elasticsearch
    Java 集合排序
  • 原文地址:https://www.cnblogs.com/edwardwzw/p/11674785.html
Copyright © 2011-2022 走看看