美文网首页
array方法

array方法

作者: 回忆不死我们不散 | 来源:发表于2020-05-14 15:16 被阅读0次

    JS数组(every、some、filter、forEach、map、reverse、sort、indexOf、lastindexOf方法)

    reverse方法

    JavaScript中数组的reverse()方法用于将数组倒序输出,并且改变了原数组,并且返回的也是新数组。

    var arr=["8",3,5,6,"a","s"];
        var con=arr.reverse();
        console.log(arr);  //结果为:["s","a",6,5,8,3,8]
        console.log(con); //结果为:["s","a",6,5,8,3,8]
    

    sort方法

    JavaScript中数组的sort()方法用于对数组进行排序,如果不写任何参数,sort是按照字符串排序的,也就是ascII码排序,sort方法会改变原数组,并且返回改变后的新数组。

     var arr=[1,2,10,14,21,3];
        var con=arr.sort();
        console.log(arr); //结果为:[1,10,14,2,21,3]
        console.log(con); //结果为:[1,10,14,2,21,3]
    

    使用sort方法还可以让数组的元素按照数字的大小进行排序,此时sort方法中需要传入一个参数,并且是一个函数,函数有两个形参,a,b,其中a是数组的第二个元素,b是数组的第一个元素。

     var arr=[3,5,11,3,5,67,8,4,14];
        // sort中传递一个函数,每次函数会拿两个值进行比较
        arr.sort(function (a,b) {
            //第一次a是5  b是3
            console.log(a);
            return a-b //否则为正就是升序,也就是说如果返回值为正数则是升序
        })
    

    indexof和lastIndexOf方法

    JavaScript中数组的indexof()和lastIndexOf()方法用于检测某个值是否在数组中出现,如果没有没有则返回-1,如果有则返回第一个检测到的下标,然后停止继续检测,indexof()由数组的前向后找,lastIndexOf()由数组的后面往前找,这两个方法都不会改变原数组。
    一个参数的情况:

    var arr=[1,3,5,7,6,34,23,6,6,6,3,6];
        var num1=18;
        var num2=6;
        var num1=arr.indexOf(num1); //检测这个数组中是否有18这个数
        var num2=arr.indexOf(num2); //检测这个数组中是否有6这个数
        console.log(num1);  //结果为:-1
         console.log(num2);  //结果为:4
    

    两个参数的情况:
    arr.indexOf(num1,5)中有两个参数,其中第一个参数num1则是需要检测的值,5则是检测的起始下标,,但是检测到的元素下标仍然是在原数组中的下标,不会改变。

      var arr=[1,3,5,7,6,34,23,6,6,6,3,6];
       var num1=6;
       var isHas=arr.indexOf(num1,5);
       console.log(isHas);  //结果为:7
    

    every和some方法

    JavaScript中数组的every()方法用于检测数组的元素是否全都满足定义的条件,遇到一个元素不满足则返回false,并且停止遍历,并且every返回false,也就是一假即假。
    some方法和every用法类似,只是some方法中只要有一个元素满足条件则返回true,也就是一真即真。
    两个方法的参数都是一个函数,函数中有三个参数,item,index,arr,参数名可以自定义,但是建议使用以上三个参数名,其中第一个参数item表示数组中的元素值,第二个参数index表示元素的下标,第三个参数arr则表示原数组。这两个方法都不会改变原数组。

    // 检测你得到的年龄是否有小于18岁,那么就进入未成年模式,否则提示进入成年模式
        // some是一真即真
        var arr=[18,18,19,18,21,23,22,25,26];
        var isPerson=arr.some(function (item,index,arr) {
            // 只要有一个返回真,则停止判断
            return item<18
        })
        if (isPerson){
            alert("未成年");
        }else{
            alert("成年");
        }
    

    filter方法

    JavaScript中数组的filter()方法用于过滤元素,如果满足条件则将该元素添加到新的数组中并返回新的数组,该方法不会改变原数组。

    var arr=[
            {name:"jiaxing",age:19},
            {name:"lipeihua",age:2},
            {name:"laozhang",age:38},
            {name:"laoliu",age:11},
            {name:"laowang",age:58},
        ]
        var newArr=arr.filter(function (item,index,arr) {
            return item.age<18;
        })
        console.log(newArr);
    

    forEach和map方法

    forEach和map这两个方法都可以用于遍历数组,在默认情况下都不会改变原数组,可根据个人的需求使用这两种方法遍历的同时改变原数组。不同的是forEach没有返回值,map方法则是有返回值的,在默认情况下,也就是没有通过return语句定义返回数值时,每遍历一个则添加一个undefined到新数组中,并返回新的数组。

     var arr=[18,18,19,18,21,23,22,25,26];
        var mapReturn=arr.map(function (item,index,arr) {
            // 对数组的每一项应用给定条件,返回新的数组
            //map的返回值是一个新数组,每次循环进来都对每一项操作,然后需要return出去,就只给给到新数组对应的值了
            return item+1;
        })
    

    数组常用方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h2>请按F12</h2>
    </body>
    </html>
    <script>
        
    
      // 返回数组长度
      var str = [1, 5, 5, 63, 4, 5, 5];
      console.log(str.length);
    
      // push 向数组的末尾添加一个或更多元素,并返回新的长度
      const a = [1, 2, 3, 4];
      const aa = a.push(2);
      console.log("数组的新长度" + aa);
      console.log("新数组" + a);
    
      // unshift 向数组的开头添加一个或更多元素,并返回新的长度
      const b = [2, 5, 6, 7, 8];
      const bb = b.unshift(3);
      console.log("数组新长度" + bb);
      console.log("新数组" + b);
    
      // pop 删除数组的最后一个元素返回删除的元素
      const c = [1, 2, 5, 4, 8, 4, 6, 5];
      const cc = c.pop();
      console.log("删除元素是" + cc);
      console.log("新数组" + c);
    
      // shift 删除并返回数组的第一个元素
      const d = [1, 2, 3, 4, 5, 6];
      const dd = d.shift();
      console.log("删除的元素是" + dd);
      console.log("新数组" + d);
    
      // reverse  反转数组的元素顺序
      const e = [1, 2, 3, 4, 5];
      const ee = e.reverse();
      console.log("反转的数组为" + ee);
      console.log("原数组为" + e);
    
      // find 返回符合传入测试(函数)条件的数组元素
      const f = [1, 2, 3, 4, 5];
      get = num => {
        return num > 3;
        // 这里接判断符号
      };
      const ff = f.find(get); // 函数要放在前面
      console.log("比3大的第一个元素是" + ff);
    
      // findIndex 返回符合传入测试(函数)条件的数组元素索引(下标)
      const g = [1, 2, 3, 4, 5];
      set = num => {
        return num == 2;
        // 如果要查找2的位置,应该用 == 来进行判断,是否等于2,是的话返回坐标
      };
      const gg = g.findIndex(set);
      console.log("2的第一个在数组gg里的坐标为" + gg);
    
      // slice 选取数组的一部分,并返回一个新数组
      const h = [1, 2, 3, 4, 5, 6];
      console.log("截取坐标0到4的数组" + h.slice(0, 4));
      // 这里不包含坐标为4的数值
      const hh = ["a", "b", "c", "d"];
      console.log("读取左边1和3的两个字符串" + hh.slice(1, 3));
      // 注意是不包含后面那个坐标的
    
      //splice 从数组中添加或删除元素
      const i = [1, 2, 3, 4, 5, 6];
      const num = i.splice(1, 0, "7");
      console.log("i.splice(1, 0, '7'):在坐标为1的地方添加7:" + i);
      i.splice(3, 1);
      console.log("i.splice(3,1):在坐标为3的地方删除一个数:" + i);
    
      // join 把数组的所有元素放入一个字符串
      const j = [1, 2, 3, 4, 5];
      const stre = j.join();
      console.log(stre);
    
      // forEach 迭代数组
      const k = [1, 2, 3, 4, 5];
      fun = (item, index) => {
        console.log("index" + index + ":" + item);
      };
      k.forEach(fun);
      // 遍历数组
    
      // map 通过指定函数处理数组的每个元素,并返回处理后的数组
      const l = [1, 2, 3, 4, 5, 6];
      sum = num => {
        return (num += 1);
        console.log("每项+1:" + num);
      };
      l.map(sum);
      // 不难发现,不管什么函数都需要返回值才能在外部生效
    
      // filter 过滤 检测数值元素,并返回符合条件所有元素的数组
      const m = [1, 2, 3, 5, 4, 8];
      bi = num => {
        return num > 2;
      };
      const mm = m.filter(bi);
      console.log("比2大的所有元素的数组为:" + mm);
    
      // indexOf 搜索数组中的元素,并返回它所在的位置
      const n = [1, 2, 3, 5, 4, 6];
      console.log("2在数组里面的位置为:" + n.indexOf(2));
    
      // includes 判断一个数组是否包含一个指定的值
      const o = [1, 5, 3, 6, 4, 7, 5];
      console.log("判断数组是否包含o:" + o.includes(o)); //false
    
      // isArray 判断对象是否为数组
      const p = [1, 2, 4, 5, 6, 3, 4];
      console.log("判断是否是数组" + Array.isArray(p)); // true
    
      // concat 连接两个或更多的数组,并返回结果
      const sums = a.concat(b, c);
      console.log("a、b、c三个数组连接" + sums);
    
      // sort 对数组的元素进行排序
      console.log("对数组sums排序:" + sums.sort());
    //数组转化为对象
    var fruits = ['1','pp'];
    var fruitsObj = {...fruits};
    console.log(fruitsObj);
    
    function arrayToObj(arr){
        var obj = {};
        for(var i = 0; i < arr.length; i++){
            obj[i] = arr[i];
        }
    }
    //或者
    function arrayToObj(arr){
        return Object.assign({},arr);
    }
    
    </script>
    

    相关文章

      网友评论

          本文标题:array方法

          本文链接:https://www.haomeiwen.com/subject/fcmtohtx.html