zoukankan      html  css  js  c++  java
  • js中数组方法大全

    js中数组方法大全

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <script>
          // 1 Arry.map() 此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原数组
          let arr = [1, 2, 3, 4, 5];
          let newArr = arr.map((x) => x * 2);
          console.log("原数组", arr); //  [1, 2, 3, 4, 5]
          console.log("新数组", newArr); // [2, 4, 6, 8, 10]
    
          // 2 Arry.forEach此方法是将数组中的每个元素执行传递的函数,没有返回的值,注意和map的区别)
          let arr2 = [1, 2, 3, 4, 5];
          arr2.forEach(function (item, index) {
            if (index === 2) {
              return;
            }
            console.log(item); // 1 2 4 5
          });
    
          // 3 Arry.filter()  此方法是将所有的元素进行判断,将满足条件的元素做为一个新的数组返回
          let arr3 = [1, 2, 3, 4, 5];
          let big = (item) => item > 3;
          let newArr3 = arr3.filter(big);
          console.log(newArr3); // [4,5]
    
          // 4 Arry.every() 将所有的元素进行判断返回一个布尔值,如果所有的元素都满足判断的条件,则返回true。反之为false
          let arr4 = [1, 2, 3, 4, 5];
          let bigThan6 = (item) => item > 6;
          let lessThan7 = (item) => item < 7;
          let lessThan2 = (item) => item < 2;
          arr4.every(bigThan6);
          arr4.every(lessThan2);
          arr4.every(lessThan7);
          console.log(arr4.every(bigThan6)); // false
          console.log(arr4.every(lessThan2)); // false
          console.log(arr4.every(lessThan7)); // true
    
          // 5 Arry.some() 此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true
          let arr5 = [1, 2, 3, 4, 5];
          let bigThan = (item) => item > 6;
          let lessThan1 = (item) => item < 7;
          let lessThan11 = (item) => item < 2;
          arr5.some(bigThan);
          arr5.some(lessThan1);
          arr5.some(lessThan11);
          console.log(arr5.some(bigThan)); // false
          console.log(arr5.some(lessThan1)); // true
          console.log(arr5.some(lessThan11)); // true
    
          // 6 Arry.reduce()  此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:
          // 与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的
          let arr6 = [1, 2, 3, 4, 5];
          let jian = (a, b) => b - a;
          let jians = arr6.reduce(jian);
          let jians2 = arr6.reduceRight(jian);
          console.log(jians); // 3
          console.log(jians2); // 3
    
          // 7 Arry.push() 此方法是在数组的后面添加一个或多个新加元素,此方法改变了数组的长度:
          let arr7 = [1, 2, 3, 4, 5];
          arr7.push(6, 7, 8, 9);
          console.log(arr7); // [1,2,3,4,5,6,7,8,9]
          console.log("7", arr7.length); // 9
    
          // 8 Arry.pop() 此方法是删除数组最后面的一个元素,并返回数组,此方法改变了数组的长度
          let arr8 = [1, 2, 3, 4, 5];
          arr8.pop();
          console.log("8", arr8.length); // 4
          console.log(arr8); // [1,2,3,4]
    
          // 9 Arry.shift() 此方法是删除数组的第一个元素,并返回新的数组,此方法改变了数组的长度
          let arr9 = [1, 2, 3, 4, 5];
          arr9.shift();
          console.log("9", arr9); // [2,3,4,5]
          console.log(arr9.length); // 4
    
          // 10 Arry.unshift()
          let arr10 = [1, 2, 3, 4, 5];
          arr10.unshift(8, 9);
          console.log("10", arr10); // [8,9,1,2,3,4,5]
          console.log(arr10.length); // 7
    
          // 11 Array.isArray() 判断一个对象是不是数组,返回的是布尔值(还有如下几种方法)
          let arr11 = [1, 2, 3, 4, 5];
          let arr12 = 123;
          console.log("11", Array.isArray(arr11)); // true
          console.log(Array.isArray(arr12)); // false
          console.log(arr11 instanceof Array); // true
          console.log(arr12 instanceof Array); // false
          console.log(arr11.constructor == Array); // true
          console.log(arr12.constructor == Array); // false
    
          // 12 Arry.concat() 此方法是一个可以将多个数组拼接成一个数组
          let arr13 = [1, 2, 3];
          let arr14 = [4, 5];
          let arr15 = arr13.concat(arr14);
          console.log("12", arr15); //[1, 2, 3, 4, 5]
    
          // 13 Arry.toString()此方法将数组转化为字符串,括号 里面加参数没有效果,故不用加参数
          let arr16 = [1, 2, 3, 4, 5];
          console.log("13", arr16.toString()); // 1,2,3,4,5
    
          // 14 Arry.join() 此方法将数组转化为字符串,括号里面可以加参数
          let arr17 = [1, 2, 3, 4, 5];
          let str1 = arr17.join("");
          console.log("str1", str1); // 12345
          console.log("数据的类型", typeof str1); // 数据的类型 string
          let str2 = arr17.join(",");
          console.log("str2", str2); // 1,2,3,4,5
          let str3 = arr17.join("##");
          console.log("str3", str3); // 1##2##3##4##5
    
          // 15 Arry.splice(开始的位置,删除的个数, 元素) 可以实现数组元素的删除  替换  添加,两个参数则是数组元元素的删除
          let arr18 = [1, 2, 3, 4, 5];
          arr18.splice(2, 1); // 从下标为2开始,删除一个
          console.log("18", arr18); // [1, 2, 4, 5]
          arr18.splice(0, 3, 99999); // 从下标为0 ,长度为3的数组元素被替换为99999
          console.log("19", arr18); //[99999,5]
          arr18.splice(2, 0, "haha"); // 在数组的最后添加一个元素
          console.log("20", arr18); // [99999, 5, "haha"]
        </script>
      </body>
    </html>

    若有错误或纰漏欢迎指正!

  • 相关阅读:
    win、mac 设置 php上传文件大小限制
    PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、
    PHP-02.文件上传、php保存/转移上传的文件、常见的网络传输协议、请求报文及属性、响应报文及属性
    PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议/服务器、数据库、服务器web开发、PHP简介/常见语法、PHPheader()、 PHP_POST/GET数据获取和错误处理
    MAMP 访问时显示文件列表
    HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
    CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
    Linux网络设备驱动之数据发送流程(五)
    Linux网络设备驱动之网络设备的打开与释放(四)
    Linux网络设备驱动之网络设备的初始化(三)
  • 原文地址:https://www.cnblogs.com/doudou-song/p/13724379.html
Copyright © 2011-2022 走看看