首页 > 编程语言 > 详细

数组以及数组常用方法

时间:2020-01-11 16:31:11      阅读:76      评论:0      收藏:0      [点我收藏+]

1.什么是数组?

数组就是专门用来存储一组数据的

它不属于基本数据类型,这是初学者经常会犯的错误,基本数据类型在ES6之前只有Number/String/Boolean/Null/undefined

数组属于引用数据类型(对象类型)

2.如何创建数组?

第一种是通过new的方法创建一个数组的对象

let 变量名称 = new Array(数组长度);

第二种是简便写法

let 变量名称 = [];

3.基本的操作数据

那么既然有了数组,数组是一个存放数据的地放,那么怎么操作里面的数据呢

怎么往数组中存放数据?

变量名称[索引号] = 需要存储的数据;

怎么从数组中获取数据?

 变量名称[索引号];

4.数组的注意点

    // 1.和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是undefined
        // 其它编程语言中默认保存的是垃圾数据或者0
        /*
        let arr = new Array(3);
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        */

        // 2.和其它编程语言不同, JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined
        // 其它编程语言一旦超出索引范围就会报错或者返回脏数据
        /*
        let arr = new Array(3); // 0 1 2
        console.log(arr[666]);
        */

        // 3.和其它编程语言不同, 当JavaScript中数组的存储空间不够时数组会自动扩容
        // 其它编程语言中数组的大小是固定的
        /*
        let arr = new Array(3);
        arr[0] = "lnj";
        arr[1] = "zs";
        arr[2] = "ls";
        arr[3] = "it666";
        console.log(arr);
        */

        // 4.和其它编程语言不同, JavaScript的数组可以存储不同类型数据
        // 在其它编程语言中数组只能存储相同类型数据(要么全部都是字符串, 要么全部都是数值等)
        /*
        let arr = new Array(4);
        arr[0] = 123;
        arr[1] = "123";
        arr[2] = true;
        arr[3] = null;
        console.log(arr);
        */

        // 5.和其它编程语言不同, JavaScript中数组分配的存储空间不一定是连续的
        // 其它语言数组分配的存储空间都是连续的, JavaScript数组是采用"哈希映射"方式分配存储空间
        // 什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间

        // 在浏览器中各大浏览器也对数组分配存储空间进行了优化
        // 如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
        // 如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间

        // 6.创建数组的其它方式
        // 3.1通过构造函数创建数组
        // let 变量名称 = new Array(size); 创建一个指定大小数组
        // let 变量名称 = new Array();     创建一个空数组
        // let 变量名称 = new Array(data1, data2, ...);     创建一个带数据的数组
        // 3.2通过字面量创建数组
        // let 变量名称 = [];  创建一个空数组
        // let 变量名称 = [data1, data2, ...];  创建一个空数组

        /*
        // let arr = new Array(3);
        // let arr = new Array();
        // arr[0] = "lnj";
        // arr[1] = "zs";
        // arr[2] = "ls";
        // arr[3] = "ww";
        // console.log(arr);

        let arr = new Array("lnj", "zs", "ls", "ww");
        console.log(arr);
        */

        // let arr = [];
        // arr[0] = "lnj";
        // arr[1] = "zs";
        // arr[2] = "ls";
        // arr[3] = "ww";
        // console.log(arr);

5.数组的遍历

1.for循环

使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显

      let arr = [1, 2, 3, 4, 5, 6, 7, 8];
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }

2. for 循环之in  

虽然能遍历但是不建议使用,因为它的输出类型是String类型的

      let arr = [1, 2, 3, 4, 5, 6, 7, 8];
      for (let i in arr) {
        console.log(arr[i]);
     console.log(typeof i) //输出的是String }

3.for循环之of 

可以正确响应break,continue,return语句

      let arr = [1, 2, 3, 4, 5, 6, 7, 8];
      for (let i of arr) {
        console.log(i);
      }

4.foreach循环

遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE

      let arr = [1, 2, 3, 4, 5, 6, 7, 8];
      arr.forEach((value, index, array) => {
        console.log(value);
      });
      //参数1:当次遍历的数据
      //参数2:当次遍历的序列
      //参数3:原始的数组
      //数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

5.map循环

map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了)

首先是直接遍历数组,一个一个输出一个值

      let arr = [1, 2, 3, 4, 5, 6, 7, 8];
        arr.map((value,index,array)=>{
            console.log(value)
        })
        //输出 1,2,3,4,5,6,7,8

返回一个新的数组

      let arr = [1, 2, 3, 4];
      var result = arr.map((value, index, array) => {
        return value * 10;

      });
      console.log(result); //-->[10,20,30,40];   原数组拷贝了一份,并且进行了修改
      console.log(arr);//-->[1,2,3,4];原数组没有发送修改 

6.filter遍历

遍历数组

不会改变原始数组,返回新数组

    let arr = [1, 2, 3, 4];
    arr.filter(value=>{
        console.log(value);
    })

作为条件判断返回一个新的数组

      let arr = [1, 2, 3, 4];
      let qwe = arr.filter((value, index, arr) => {
        //用于判断当前的那项数据是否满足要求,满足的话就添加到新的数组中返回
        return value < 3;
      });
      console.log(qwe); //-->[1,2];

7.every遍历

跟filter有着异曲同工之妙之处

不会改变原始数组,返回新数组

every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true

      let arr = [1, 2, 3, 4];
      let qwe = arr.every((value, index, arr) => {
        return value > 3;
      });
      console.log(qwe);  //false

8.some遍历

跟every的区别就是every需要全部满足要求才返回true,some只需要满足一项就返回true

some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true

      let arr = [1, 2, 3, 4];
      let qwe = arr.some((value, index, arr) => {
        return value > 3;
      });
      console.log(qwe);  //true

9.reduce

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

      let arr = [1, 2, 3, 4];
      let result = arr.reduce((a, b) => a + b);
      console.log(result);  //-->10

reduce可以有5个参数

      let arr = [1, 2, 3, 4];
      let result = arr.reduce((a, b,index,array) =>{
          return a + b;
      },c);
      console.log(result);  //-->10
      //a是上一次的值,第一次遍历的时候就是c
      //b是当前值
      //index是当前值的索引
      //数组

10.find

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 

      let arr = [1, 2, 3, 4];
        function gets(age){
            return age > 1;
        }
       let qwe = arr.find(gets);
        console.log(qwe); //输出 2

 

11.key   ,value , entries

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

      let arr = [1, 2, 3, 4];

        for(let index of arr.keys()){
            console.log(index);
        }
        //0
        //1

        for(let element of arr.values()){
            console.log(element);
        }
        //1
        //2
        //3
        //4
        for(let index,element of arr.entries()){
            console.log(index.element)
        }
        //0 1
        //1 2
        //2 3
        //3 4

 

6.数组的增删改查

        let arr = ["a", "b", "c"];
        // 需求: 获取数组中索引为1的那个数据 (查)
        // console.log(arr[1]);

        // 需求: 将索引为1的数据修改为m (改)
        // arr[1] = "m";
        // console.log(arr);

        // 需求: 将索引为1的数据修改为d, 索引为2的修改为e (改)
        // arr[1] = "d";
        // arr[2] = "e";
        // console.log(arr);

        // 参数1: 从什么位置开始
        // 参数2: 需要替换多少个元素
        // 参数3开始: 新的内容
        // arr.splice(1, 2, "d", "e");
        // console.log(arr);

        // 需求: 要求在数组最后添加一条数据 (增)
        // arr[3] = "d";
        // console.log(arr);
        // push方法可以在数组的最后新增一条数据, 并且会将新增内容之后数组当前的长度返回给我们
        // let res = arr.push("d");
        // console.log(res);
        // console.log(arr);

        // 需求: 要求在数组最后添加两条数据 (增)
        // arr.push("d");
        // arr.push("e");
        // 数组的push方法可以接收1个或多个参数
        // arr.push("d", "e");
        // console.log(arr);

        // 需求: 要求在数组最前面添加一条数据 (增)
        // arr[-1] = "m";
        // unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回给我们
        // let res = arr.unshift("m");
        // console.log(res);
        // console.log(arr);

        // 需求: 要求在数组最前面添加两条数据 (增)
        // arr.unshift("m");
        // arr.unshift("w");
        // unshift方法和push方法一样, 可以接收1个或多个参数
        // arr.unshift("m", "w");
        // console.log(arr);

        // 需求: 要求删除数组最后一条数据 (删)
        // 数组的pop方法可以删除数组中的最后一条数据,  并且将删除的数据返回给我们
        // let res = arr.pop();
        // console.log(res);
        // console.log(arr);

        // 需求: 要求删除数组最前面一条数据 (删)
        // 数组的shift方法可以删除数组中的最前面一条数据,  并且将删除的数据返回给我们
        // let res = arr.shift();
        // console.log(res);
        // console.log(arr);

        // 需求: 要求删除数组中索引为1的数据 (删)
        // 以下代码的含义: 从索引为1的元素开始删除1条数据
        // 参数1: 从什么位置开始
        // 参数2: 需要删除多少个元素
        // arr.splice(1, 1);
        // console.log(arr);

        // 需求: 要求删除数组中除了第0条以外的所有数据 (删)
        // arr.splice(1, 2);
        // console.log(arr);

7.数组的常用方法

    let arr = [1, 2, 3, 4, 5];
        // 1.如何清空数组
        // arr = [];
        // arr.length = 0;
        // arr.splice(0, arr.length)
        // console.log(arr);

        // 2.如何将数组转换为字符串
        // let str = arr.toString();
        // let str = String(arr);
        // console.log(str);
        // console.log(typeof str);

        // 3.如何将数组转换成指定格式字符串
        // join方法默认情况下如果没有传递参数, 就是调用toString();
        // join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
        // let str =  arr.join("+");
        // console.log(str);
        // console.log(typeof str);

        //会被转成对象类型的伪数组
        // let arr1 = str.split(‘+‘);
        // console.log(arr1);
        // console.log(typeof arr1);

        // 4.如何将两个数组拼接为一个数组
        // let arr1 = [1, 3, 5];
        // let arr2 = [2, 4, 6];
        // 注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
        // let res = arr1 + arr2;
        // let res = arr1.concat(arr2);
        // 注意点: 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
        //         扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
        // let res = [...arr1, ...arr2]; // let res = [1, 3, 5, 2, 4, 6];
        // console.log(res);
        // console.log(typeof res);
        // 注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
        // console.log(arr1);
        // console.log(arr2);

        // 5.如何对数组中的内容进行反转
        // [1, 2, 3, 4, 5] [5, 4, 3, 2, 1]
        // let res = arr.reverse();
        // console.log(res);
        // 注意点: 会修改原有的数组
        // console.log(arr);

        // 6.如何截取数组中指定范围内容
        //  0  1  2  3
        // [1, 2, 3, 4, 5]
        // slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
        // let res = arr.slice(1, 3)
        // console.log(res);
        // console.log(arr);

        // 7.如何查找元素在数组中的位置
        //  0  1  2  3  4
        // [1, 2, 3, 4, 5]
        //         0  1  2  3  4  5
        // let arr = [1, 2, 3, 4, 5, 3];
        // indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
        // indexOf方法如果没有找到指定的元素, 就会返回-1
        // 注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
        // let res = arr.indexOf(3);
        // let res = arr.indexOf(6);
        // 参数1: 需要查找的元素
        // 参数2: 从什么位置开始查找
        // let res = arr.indexOf(3, 4);
        // 注意点: lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
        // let res = arr.lastIndexOf(3);
        // let res = arr.lastIndexOf(3, 4);
        // console.log(res);

        // 8.如何判断数组中是否包含某个元素
        // let arr = [1, 2, 3, 4, 5];
        // 我们可以通过indexOf和lastIndexOf的结果, 判断是否是-1即可
        // let res = arr.indexOf(8);
        // let res = arr.lastIndexOf(8);

        // includes如果找到了返回true,没找到返回false
        // let res = arr.includes(8);
        // let res = arr.includes(4);
        // console.log(res);

数组以及数组常用方法

原文:https://www.cnblogs.com/gsq1998/p/12180009.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!