JS基础之数组--概述、创建数组的几种方式、数组的特点、数组的常用方法、数组的解构赋值、数组高级API

小白小白从不日白

已于 2022-06-21 17:16:19 修改

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： javascript 1024程序员节

于 2021-04-07 13:28:00 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/115482679

版权

javascript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

在这里插入图片描述

一、概述

描述：数组(array)是按照一定顺序排列的一组值，每个值都拥有自己的编号，编号从0开始。整个数组用方括号来表示。
语法：var arr=[item1,item2,item3…]

1.1 注意

 - 数组是按照一定顺序排列的一组值，顺序体现在下标，下标是从0开始
 - 和其他编程语言不同，如果数组对应的索引中没有存储数据，默认存储的就是undefined
 - javascript中访问了数组中不存在的索引不会报错，会返回undefined
 - 当javascript中数组的存储空间不够时数组会自动扩容
 - 数组在分配存储空间的时候不一定是连续的；在浏览器中各大浏览器也对数组分配存储空间进行了优化，如果是相同类型数据则尽量分配连续的存储空间，反之不会
- 数组元素：数组中的每一个值称为数组元素，数组元素可以是**任意类型**

<script>
 		var str = 'hello world! goodbye  world!';
        var result = str.split('o');
        console.log(result); // ["hell", " w", "rld! g", "", "dbye  w", "rld!"]
</script>

二、创建数组的几种方式

 <script>
        //1
        var array = [];
        array[0] = "我";
        array[1] = "爱";
        array[2] = "生";
        array[3] = "活";
        alert(array);

        //2
        var array = ["我", "爱", "祖", "国"]; //定义数组并初始化
        console.log(array[0]); //通过索引值获取数组的长度
        console.log(array[2]);
        console.log(array[3]);
        alert(array);
        //通过索引给元素赋值
        array[2] = "文";
        array[3] = "学";
        alert(array);

        //3
        var array1 = new Array(); //定义了一个空数组
        var array2 = new Array(5);
        var array3 = new Array("关晓彤", "赵丽颖", "张子枫");
    </script>

三、数组的特点和遍历

3.1 数组的本质

描述：本质上，数组是对象类型的一种特殊表现形式。

3.2 如何往数组中存储数据？

在这里插入图片描述
变量名称[索引号] = 需要存储的数据;

    let arr = [];
     arr[0] = "张三"

3.3 如何从数组中获取存储的数据？

变量名称[索引号]

    let arr = [1,2,3];
    console.log(arr[1]);

3.4 注意点

和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是undefined

        let arr = new Array(3);
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);

在这里插入图片描述

JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined

        let arr = new Array(3); // 0 1 2
        console.log(arr[666]);

在这里插入图片描述

当JavaScript中数组的存储空间不够时数组会自动扩容

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

在这里插入图片描述

JavaScript的数组可以存储不同类型数据

        let arr = new Array(4);
        arr[0] = 123;
        arr[1] = "123";
        arr[2] = true;
        arr[3] = null;
        console.log(arr);

在这里插入图片描述

JavaScript中数组分配的存储空间不一定是连续的
JavaScript数组是采用"哈希映射"方式分配存储空间
什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间
在浏览器中各大浏览器也对数组分配存储空间进行了优化
如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间

3.5 数组的长度

描述：数组的长度实际是数组中元素的个数
语法：arr.length
因为数组中可以存储任意类型的元素，因此数组在内存中的存储位置是不连续的，但是数组的下标是连续的

 <script>
        var arr = [
            ['张三', 22, true],
            ['李四', 33, false],
            ['peter', 44, true]
        ];
        console.log(arr.length); // 3

        var ageArr = [10, 20, 30];
        //ageArr.length = -1;
        console.log(ageArr.length); // 3
        console.log(ageArr[4]); // undefined
</script>

在这里插入图片描述

length是一个可写属性
如果设置length的长度小于数组本身，那么多余元素舍去
如果设置length的长度大于数组本身，那么缺少的元素空位补齐
如果设置length的长度是不合法的值，那么会报 Invalid array length 错误

  <script>
        var ageArr = [10, 20, 30];
        ageArr.length = 2;
        //ageArr.length=-2;// Invalid array length
        console.log(ageArr.length); // 2
        console.log(ageArr[4]); // undefined
    </script>

在这里插入图片描述

3.6 数组的遍历

数组的遍历就是依次取出数组中存储的所有数据

描述：如果想要连续访问数组中的每个元素，可以使用for in快速遍历或者for循环遍历依次取出数组中所有的元素。

  <script>
        var heroArr = ['GreenJuPeople', 'BlackGuaFu', 'MetalXia'];
        for (var index in heroArr) {
            console.log(heroArr[index]); //GreenJuPeople BlackGuaFu MetalXia
        }

		//或

		var heroArr = ['GreenJuPeople', 'BlackGuaFu', 'MetalXia'];
        for (var index = 0; index < heroArr.length; index++) {
            console.log(heroArr[index]); //GreenJuPeople BlackGuaFu MetalXia
        }
    </script>

3.7 数组的解构赋值

解构赋值是ES6中新增的一种赋值方式

数组解构赋值的注意点

        let arr = [1, 3, 5];
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];

        let [a, b, c] = arr;
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);

在这里插入图片描述

在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构

        // let [a, b, c] = [1, 3, 5];
        // let [a, b, c] = [1, 3, [2, 4]];
        let [a, b, [c, d]] = [1, 3, [2, 4]];
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);
        console.log("d = " + d);

在这里插入图片描述

在数组的解构赋值中, 左边的个数可以和右边的个数不一样

        let [a, b] = [1, 3, 5];
        console.log("a = " + a);
        console.log("b = " + b);

在这里插入图片描述

在数组的解构赋值中, 右边的个数可以和左边的个数不一样

        let [a, b, c] = [1];
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);

在这里插入图片描述

在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值

        let [a, b = 666, c = 888] = [1];
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);

在这里插入图片描述

在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖

        let [a, b = 666] = [1, 3, 5];
        console.log("a = " + a);
        console.log("b = " + b);

在这里插入图片描述

在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据
在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后
ES6中新增的扩展运算符: …

        // let [a, b] = [1, 3, 5];
        // let [a, ...b] = [1, 3, 5];
        let [a, ...b] = [1, 3, 5];
        console.log("a = " + a);
        console.log(b);

在这里插入图片描述

3.8 数组的空位

描述：当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位(hole)

注意：

空位是计算数组长度的
空位表现为undefined
如果最后一个元素后面有逗号，这种情况并不会产生空位

<script>
        var arr = ['a', 'b', , 'e',];
        console.log(arr.length); //4
        console.log(arr[2]); //undefined
    </script>

3.9 在数组中添加新元素（增）

        let arr=[1,2,3];
        arr[3] = 5;
        console.log(arr);// 增

在这里插入图片描述

3.10 数组的’删除’（删）

描述：delete命令能够删除数组中的元素的值，从而形成空位。
但是delete命令并不会影响length的属性。
语法：delete arr[下标]
delete命令在使用的时候是根据数组下标来对指定数组的值进行删除的

 <script>
        var arr = ['aa', 'bb', 'cc'];
        console.log(arr); //["aa", "bb", "cc"]
        console.log(arr.length); //3
        delete arr[1];
        console.log(arr); //["aa", empty, "cc"]
        console.log(arr[1]); //undefined
        console.log(arr.length); //3
 </script>

3.11 改变数组的值（改）

       let arr=[1,2,3];
        arr[0] = 5;
        console.log(arr);// 改

在这里插入图片描述

3.12 数组调用（查）

描述：数组的调用实际上指的是数组元素的调用。
数组元素通过【数组名+下标】的方式来进行访问。
数组元素一次只能访问一个，不能一次连续性地访问多个；要想一次访问多个那么则需运用for循环
语法：数组名[下标]

<script>
    var str = ['aa', true, 22];
    console.log(str[1]);
</script>

案例：

	//需求2:页面有一个输入框用来模拟后台传送的数据，
    //当给出一个包含人名的字符串，点击按钮后将字符串转换成数组，然后打印每个人的名
 	<span>姓名</span>
    <input type="text" id="nameInput" />
    <button id="outPut">输出</button>

<script>
        var nameInput = document.getElementById("nameInput");
        var outPut = document.getElementById("outPut");
        outPut.onclick = function() {
            var nameStr = nameInput.value;
            var nameArr = nameStr.split(',');
            for (var i in nameArr) {
                console.log(nameArr[i]);
            }
        }
</script>

结果：
在这里插入图片描述

        /*
        1. 定义一个空数组,循环录入3门课程的成绩
            求3门课程的总分
            求3门课程的平均分
            求3门课程中的最高分和最低分
        */
       let arr = [];
       let totalScore = 0;
       let equal = 0;
      
       // 存数据
       for(let i = 0; i < 3; i++){
           arr[i] = parseFloat(prompt("请输入第"+ (i+1) + "门课的成绩"));
       }

       let maxScore = arr[0];
       let minScore = arr[0];

       //读数据
       for(let j = 0; j < arr.length; j++){
           
           // 总分
            totalScore += arr[j];

            // 平均分
            equal = totalScore / 3;

            // 最高分
            if(arr[j] > maxScore){
                maxScore = arr[j];
            }
            

            // 最低分
            if(arr[j] < minScore) {
                minScore = arr[j];
            }
       }
       console.log("三门成绩的最高分为：" + maxScore);
       console.log("三门成绩的最低分为：" + minScore);
       console.log("3门成绩的总分为：" + totalScore);
       console.log("3门成绩的平均分为：" + equal);

请添加图片描述

    /*
    要将100元兑换成1元、5元、10元、20元的零钱，每种纸币可以有也可以没有，请问共有多少种兑换方式
    */
   let count=0;
   for(let i = 0; i <= 5; i++){
       for(let j = 0; j <= 10; j++){
           for(let k = 0; k <= 20; k++){
               for(let l = 0; l <= 100; l++){
                    if(i*20 + j*10 + k*5 + l*1 == 100){
                         count++;
                    }
               }
           }
       }    
   }
   console.log(count);

在这里插入图片描述

四、数组常用的方法

4.1 isArray()

描述：判断变量是否是数组，如果是返回true，否则返回false
语法：Array.isArray();

<script>
    var arr = ['a', 'b', 'c'];
    console.log(typeof arr); // object
    console.log(Array.isArray(arr)); // true
    var obj = {};
    console.log(typeof obj); // object
    console.log(Array.isArray(obj)); // false
</script>

4.2 valueOf()

描述：valueOf方法归属于Object对象类型
返回指定对象的原始值
在数组中作用是返回数组本身。
语法：arr.valueOf()
javascript的许多内置对象都重写了该属性，以实现更适合自身的功能需求。因此，不同对象类型的valueOf()方法的返回值类型均可能不同。

<script>
    var arr = ['a', 'b', 'c'];
    console.log(arr); //["a", "b", "c"]
    console.log(arr.valueOf()); //["a", "b", "c"]
    console.log(arr === arr.valueOf()); //true
</script>

4.3 toString()

描述：能够将数组转换成字符串，默认是以逗号隔开
语法：arr.toString()
注意：不仅能够合并数组元素，对布尔类型也能够生成

<script>
    var arr = ['aa', 'bb', 'cc'];
    var str = arr.toString();
    console.log(str); //aa,bb,cc

    var str = true;
    console.log(str); //true
    var newStr = str.toString();
    console.log(typeof newStr); //string
</script>

4.4 join()

描述：join方法能够以给定的参数做分隔符，将所有的数组元素组成一个字符串。
如果不提供参数，默认使用逗号分隔，就是相当于调用了 toString() 方法
语法：arr.join(‘分隔符’);
join()方法不会对原数组造成影响

<script>
    var str = 'hello sxt! goodbye sxt';
    var arr = str.split(' ');
    console.log(arr); // ["hello", "sxt!", "goodbye", "sxt"]
    console.log(typeof arr); //object
    var newStr = arr.join('==');
    console.log(newStr); //hello==sxt!==goodbye==sxt
    console.log(typeof newStr) // string
</script>

4.5 push()

描述：push方法用于在数组的末端添加一个或多个元素，并返回添加后的数组的长度。
语法：arr.push(item1,item2…);

注意：

push方法会对原数组造成影响
可以根据需求来决定是否保存punsh方法结果

 <script>
        var arr = [];
        var arrLength = arr.push('zhangsan', 'lisi');
        console.log(arr); //["zhangsan", "lisi"]
        console.log(arrLength); //2
        var newLength = arr.push('wangwu');
        console.log(arr); // ["zhangsan", "lisi", "wangwu"]
        console.log(newLength); //3
</script>

4.6 pop()

描述：pop方法用于删除数组的最后一个元素，并以字符串的形式返回删除的这个元素。
poop()方法会对原数组造成影响
语法：arr.pop()

注意：

pop方法没有参数
pop方法回对原数组造成影响

<script>
        var arr = ['周杰伦', '杨坤', '刘欢'];
        var deleteItem = arr.pop();
        console.log(arr); //['周杰伦', '杨坤']
        console.log(deleteItem); //刘欢
        console.log(Array.isArray(deleteItem)); // false
        console.log(typeof deleteItem); //string
</script>

4.7 shift()

描述：shift方法用于删除数组中的第一个元素，并返回删除的这个元素
shift()方法会对原数组造成影响
语法：arr.shift()

注意：

会对原数组造成影响

<script>
        var arr = ['周杰伦', '杨坤', '刘欢'];
        arr.shift();
        console.log(arr); //["杨坤", "刘欢"]
        console.log(arr.shift()); //杨坤
        console.log(arr); //["刘欢"]
</script>

4.8 unshift()

描述：unshift方法用于在数组的第一个位置添加元素，并返回添加元素后新数组的长度。
unshift()方法会对原数组造成影响
语法：arr.unshift(‘item1’,‘item2’…);

注意：

会对原数组造成影响

 <script>
        var arr = ['周杰伦', '杨坤', '刘欢'];
        var newArr = arr.unshift('那英');
        console.log(arr); //["那英", "周杰伦", "杨坤", "刘欢"]
        console.log(arr.length); //4
        console.log(newArr); //4
</script>

4.9 reverse()

描述：reverse方法能够反序排列数组(反序排列)即数组反转
语法：arr.reverse()
reverse()方法会对原数组造成影响

注意：

会改变原数组的结构

<script>
        var arr = ['aa', 'bb', 'cc'];
        var newArr = arr.reverse();
        console.log(newArr); //["cc", "bb", "aa"]
        console.log(arr); //["cc", "bb", "aa"]
</script>

在这里插入图片描述

4.10 slice()

描述：slice方法作用是能够根据指定的【起始点】和【结束点】来对数组进行截取，并生成一个新数组。
新数组的内容是从起始点下标开始的元素到结束点下标的元素，但是不包括结束点下标的元素本身。
语法：arr.slice(fromIndex,toIndex);

注意：

前包后不包
不会对原数组结构更改

 <script>
        var arr = ['aa', 'dd', 'ss', 3, 4, 5, 6, 'ww', 'rr', 'yy'];
        var newArr = arr.slice(-7, -3);
        console.log(arr); //["aa", "dd", "ss", 3, 4, 5, 6, "ww", "rr", "yy"]
        console.log(newArr); // [3, 4, 5, 6]
</script>

4.11 splice()

描述：splice方法的作用是在指定下标处截取一定长度的元素，再插入一些新元素，并将删除的元素构成一个新数组返回。splice方法会改变原本数组。
-splice() 方法会对原数组造成影响
语法：arr.splice(fromIndex,removeCount,addItem1…)

注意：

会改变原数组的结构
前两个参数必须有，后面的是可选参数

<script>
        var arr = ['aa', 'dd', 'ss', 3, 4, 5, 6, 'ww', 'rr', 'yy'];
        var newArr = arr.splice(3, 4, true, '周杰伦');
        console.log(arr); //["aa", "dd", "ss", true, "周杰伦", "ww", "rr", "yy"]
</script>

4.12 sort()

描述：对数组进行排序，根据提供的排序规则，默认按照编码方式排序
语法：arr.sort(排序的规则);
soort()方法会对原数组造成影响

 <script>
        var arr = [126, 100, 22, 35, 88];
        var newArr = arr.sort();
        console.log(newArr); //[100, 126, 22, 35, 88]

	  let arr = [1,2,4,5];
      arr.sort((a,b)=> {
        //   return a -b;升序排列
        return b -a;//降序
      })
</script>

4.13 indexOf()

描述：indexOf方法能够从前到后检索数组，并返回元素在数组中的第一次出现的下标，如果没有索引到则返回-1
indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
语法：arr.indexOf(item,fromIndex)

注意：

第一个参数是可选的，表示从第几个下标开始向后查找
第二个参数可以是负值，表示从倒数第几个下标开始向后查找

<script>
        var arr = ['国际章', '汪峰', '周杰伦', '国际章', '哈林'];
        var index = arr.indexOf('国际章', -2);
        console.log(index); //3
</script>

4.14 lastIndexOf()

描述：lastIndexOf方法能够从后向前检索数组，并返回元素在数组中的最后一次出现的下标，如果没有索引到则返回-1
lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
语法：arr.lastIndexOf(item,fromIndex)

 <script>
        var arr = ['国际章', '汪峰', '周杰伦', '国际章', '哈林'];
        var index = arr.lastIndexOf('国际章', 2);
        console.log(index); //0
</script>

4.15 concat()

数组拼接；不会修改原有的数组，会生成一个新数组返回

  let arr1=[1,2,3,4,5];
  let arr2=[6,7];
  let arr3=[8,9];
  let arr=arr1.concat(arr2,arr3);
  //或：let  arr=[...arr1,...arr2,...arr3];
  //console.log(arr);

在这里插入图片描述

注意点:
数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接

        let arr1 = [1, 3, 5];
        let arr2 = [2, 4, 6];
        // 注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
        let res = arr1 + arr2;
        console.log(res);
        console.log(typeof res);

在这里插入图片描述

在ES6中还有一种更简单的方法可以去拼接数组：那就是利用扩展运算符 …

扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
不会修改原有的数组, 会生成一个新的数组返回给我们

        let arr1 = [1, 3, 5];
        let arr2 = [2, 4, 6];
        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);

4.16 split()

根据指定格式切割字符串，转换成一个数组后返回给我们

    let arr1="1,2,3";
    let arr=arr1.split(",");

在这里插入图片描述

4.17 toString()

将数组转换成字符串

  let arr1=[1,2,3,4,5];
  let arr=arr1.toString();
  console.log(arr);

在这里插入图片描述

五、补充

5.1 forEach 快速遍历

forEach函数的参数是一个匿名函数，该匿名函数会在forEach函数的内部调用，这种函数又被称为回调函数。
传入的回调函数要求有3个形参，分别是一次循环的数组的数据、正在循环的下标、数组本身


        let arr = [1, 3, 5, 7, 9];
      
        arr.forEach(function(currentValue, currentIndex, currentArray) {
            console.log(currentValue, currentIndex, currentArray);
            console.log(currentValue);
        });
        //自定义forEach
        //Array.prototype.myForEach = function(fn) {
        // this === [1, 3, 5, 7, 9]
        //   for (let i = 0; i < this.length; i++) {
        //        fn(this[i], i, this);
         //   }
        //};
        //arr.myForEach(function(currentValue, currentIndex, currentArray) {
        //    console.log(currentValue, currentIndex, currentArray);
        //});

在这里插入图片描述

5.2 for in 循环

在企业开发中不推荐使用forin循环来遍历数组

        let arr = [1, 3, 5, 7, 9];
      
        // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in

        for (let key in arr) {
            // console.log(key);
            console.log(arr[key]);
        }

注意点:

对象中的属性是无序的
forin循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以不推荐使用forin循环来遍历数组

5.3 for of循环

创建一个循环遍历可迭代对象，包括：内置对象String、Array、arguments、NodeList、TypedArray、Map、Set和用户定义的可迭代对象
该循环调用一个自定义迭代钩子，其中包含要为对象的每个不同属性的值执行的语句


         let arr = [1, 3, 5, 7, 9];
      
        // 3.利用ES6中推出的for of循环来遍历数组
        for (let value of arr) {
            console.log(value);
        }

5.4 reduce()

对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值

第一次执行回调函数时，不存在“上一次的计算结果”

如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）

reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加


// Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

一个 “reducer” 函数，包含四个参数：

previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始
array：用于遍历的数组
initialValue：作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素

累加：

let arr = [1,4,5,6];
let sum = arr.reduce((x,y)=>{
    return x + y;
})
console.log(sum); // 16

数组去重：

const arr = [4,5,7,5,4,7,9];
const resultArr = arr.reduce((prev, current) => {
    prev.indexOf(current) == -1 && prev.push(current)
    return prev;
}, []);
console.log(resultArr); // [ 4, 5, 7, 9 ]

二维数组降维：

const arr = [1,4,5,[7,8,9,23]];
// const resultArr = arr.reduce((x,y) => {
//     return x.concat(y)
// }, [])
const resultArr = arr.reduce((x,y) => 
    x.concat(y)
, [])
console.log(resultArr); // [ 1, 4,  5, 7, 8, 9, 23 ]

更多请参考官网：reduce官网（MDN）

5.5 findIndex()

以前数组查找的方法：

从左往右查找, 找到返回索引, 找不到返回-1(.indexOf())
从右至左查找, 找到返回索引, 找不到返回-1(.lastIndexOf())
从左往右查找, 找到返回true, 找不到返回false(.includes())

定制版的indexOf, 找到返回索引, 找不到返回-1

        let arr = [3, 2, 6, 7, 6];

        let index = arr.findIndex(function(currentValue, currentIndex, currentArray) {
            console.log(currentValue, currentIndex, currentArray);
            if (currentValue === 10) {
                return true;
            }
        });
        console.log(index);

在这里插入图片描述
更多详情查看官方文档：finedIndex

自定义findIndex

        let arr = [3, 2, 6, 7, 6];

        // findIndex实现
        Array.prototype.myFindIndex = function(fn) {
            for (let i = 0; i < this.length; i++) {
                let result = fn(this[i], i, this);
                if (result) {
                    return i;
                }
            }
            return -1;
        }

        let index = arr.myFindIndex(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            // if(currentValue === 6){
            if (currentValue === 10) {
                return true;
            }
        });

        console.log(index);

5.6 find()

find方法如果找到了就返回找到的元素, 如果找不到就返回undefined


        let arr = [3, 2, 6, 7, 6];

        let value = arr.find(function(currentValue, currentIndex, currentArray) {
            console.log(currentValue, currentIndex, currentArray);
            // if(currentValue === 6){
            if (currentValue === 10) {
                return true;
            }
        });
        console.log(value);

在这里插入图片描述

自定义find

        let arr = [3, 2, 6, 7, 6];

        // find实现
        Array.prototype.myFind = function(fn) {
            for (let i = 0; i < this.length; i++) {
                let result = fn(this[i], i, this);
                if (result !== undefined) {
                    return result;
                }
            }
            return undefined;
        }

        let index = arr.myFind(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            // if(currentValue === 6){
            if (currentValue === 10) {
                return true;
            }
        });

        console.log(index);

5.7 map()

将满足条件的元素映射到一个新的数组中

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

        let newArray = arr.map(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            if (currentValue % 2 === 0) {
                return currentValue;
            }
        });
        console.log(newArray); // [undefined, 2, undefined, 4, undefined]

        /*
        let newArray = arr.myMap(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            if (currentValue % 2 === 0) {
                return currentValue;
            }
        });
        Array.prototype.myMap = function(fn) {
            let newArray = new Array(this.length);
            newArray.fill(undefined);
            for (let i = 0; i < this.length; i++) {
                let result = fn(this[i], i, this);
                if (result !== undefined) {
                    newArray[i] = result;
                }
            }
            return newArray;
        }
        */

5.8 every()

判断数组中的数据是否全部满足某个条件，当所有数据都满足某个条件时，返回true，否则返回false

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

若收到一个空数组，此方法在一切情况下都会返回 true

语法：

arr.every(callback(element[, index[, array]])[, thisArg])
callback：用来测试每个元素的函数，它可以接收三个参数：

element：用于测试的当前值。

index可选：用于测试的当前值的索引。

array可选：调用 every 的当前数组。

thisArg：执行 callback 时使用的 this 值

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个会使 callback 返回 falsy 的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。

every 和数学中的"所有"类似，当所有的元素都符合条件才会返回true。正因如此，若传入一个空数组，无论如何都会返回 true

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));

更多请参考官网：every用法

5.9 some()

判断数组中的数据是否至少有一个满足某个条件，当有一个数据满足某个条件时，返回true，否则返回false

测试数组中是不是至少有1个元素通过了被提供的函数测试，接受三个参数

返回的是一个Boolean类型的值

语法：

arr.some(callback(element[, index[, array]])[, thisArg])
callback：用来测试每个元素的函数，接受三个参数：

element：数组中正在处理的元素。

index 可选：数组中正在处理的元素的索引值。

array可选

some()被调用的数组。

thisArg可选：执行 callback 时使用的 this 值。

some() 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用

some() 遍历的元素的范围在第一次调用 callback. 前就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了，则其传递给 callback 的值是 some() 访问到它那一刻的值。已经被删除的元素不会被访问到

const array = [1,2,3,4,5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));

更多请参考官网：some函数

5.10 filter()

将数组中满足条件的数据保存在一个新数组中并返回


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

        let newArray = arr.filter(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            if (currentValue % 2 === 0) {
                return true;
            }
        });
        console.log(newArray); // [2, 4]

         /*实现自定义的filter方法
        let arr = [1, 2, 3, 4, 5];

        // filter实现
        Array.prototype.myFilter = function(fn) {
            let newArray = [];
            for (let i = 0; i < this.length; i++) {
                let result = fn(this[i], i, this);
                if (result) {
                    newArray.push(this[i]);
                }
            }
            return newArray;
        };

        let newArray = arr.myFilter(function(currentValue, currentIndex, currentArray) {
            // console.log(currentValue, currentIndex, currentArray);
            if (currentValue % 2 === 0) {
                return true;
            }
        });

        console.log(newArray); // [2, 4]
        */

5.11 删除数组元素注意点


        let arr = [1, 2, 3, 4, 5];
        // 需求: 遍历的同时删除数组中所有元素
        // arr.splice(2, 1);
        // delete arr[2];
        console.log(arr);

        let len = arr.length; //length会变化，因此先保存

        //删除完元素后，后面的元素会向前挪动，因此我们需要从后向前删，这样才能删干净
        for (let i = len - 1; i >= 0; i--) {
            arr.splice(i, 1);
        }


        // 方式2
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(arr.length);
        //     // 注意点: 通过delete来删除数组中的元素, 数组的length属性不会发生变化
        //     delete arr[i];
        // }
        console.log(arr);

5.12 常用的清空数组的几种方式：

  let arr=[1,2,3,4,5];
  //方式1
  // arr=[];

  //方式2
  // arr.length=0;

  //方式3
  arr.splice(0,arr.length);

在这里插入图片描述

5.13 如何判断数组中是否包含某个元素

可以通过indexOf和lastIndexOf的结果, 判断是否是-1即可

        let arr = [1, 2, 3, 4, 5];
        let res = arr.indexOf(8);
        let res1 = arr.lastIndexOf(8);
        console.log(res);
        console.log(res1);

在这里插入图片描述

通过 includes() 方法

        let arr = [1, 2, 3, 4, 5];
        let res = arr.includes(8);
        let res1 = arr.includes(4);
        console.log(res);
        console.log(res1);

在这里插入图片描述

5.14 综合案例

示例1：

//输入0~9，输出0~9中哪些数是用户未输入过的
    let str=prompt("请输入三个整数，用逗号隔开");
    let arr=str.split(",");
    let newArr=new Array(10);
    for(let i=0;i<arr.length;i++){
       let str=arr[i];
       newArr[str]=10;
    }
    for(let j=0;j<newArr.length;j++){
        if(newArr[j]===10){
            continue;
        }
        console.log(j);
    }
    // console.log(newArr);

在这里插入图片描述

示例2：

//输入5个0~9的数字，排序后输出
    let str=prompt("请输入五个整数，用逗号隔开");
    let arr=str.split(",");
    let newArr=new Array(10);
    //数组中fill方法：设置数组中所有元素的值为指定的数据
    newArr.fill(0);
    for(let i=0;i<arr.length;i++){
       let str=arr[i];
       newArr[str]+=1;
    }
    for(let i=0;i<newArr.length;i++){
        for(let m=0;m<newArr[i];m++){
            console.log(i);
        }
    }

在这里插入图片描述

示例3：

        /*2.要求用户输入3个0~9的数, 输出0~9中哪些用户没有输入过
        * 输入的格式x,y,z
        * */
        let str = prompt("请输入三个整数, 用逗号隔开");
        // console.log(str); // 1,3,5
        // 字符串的split方法可以根据传入的参数切割字符串, 转换成一个数组之后返回给我们
        let arr = str.split(",");
        // console.log(arr);

        //方法1--扩展性不好
        /*
        for(let i = 0; i < 10; i++){
            if(arr[0] == i || arr[1] == i || arr[2] == i){
                continue;
            }
            console.log(i);
        }
        */

        /*
        方法2：推荐
        思路：定义一个长度为10的数组，不去设置它的初始值，那么这样一来数组里面的每一个下标所对应的值都是 undefined
        然后将输入的值，比如“1,3,5”当作新定义的数组的索引（下标），并且赋给一具体的值，比如 666，这样一来的话那么新
        数组中索引为 1 3 5 的下标所对应的值都为 666
        此时只需去循环新数组，并且判断新数组中如果有索引值所对应的数组内容是 666 的，那么就退出当前循环，进行下一次
        循环，输出非 666 所对应的索引即就是0~9中用户没有输入过的数字
        */
        //      0          1          2          3          4          5          6
        // [undefined,    666,    undefined,    666,     undefined,   666, undefined, undefined, undefined, undefined]
        let res = new Array(10);
        // 循环切割后形成的数组，
        for(let i = 0; i < arr.length; i++){
            // 取出用户输入的每个数
            let str = arr[i];
            // console.log(str);

            // 将取出的数当作新数组的索引存入新数组，并赋一相同的固定值
            res[str] = 666;
        }
        // console.log(res);
        for(let i = 0; i < res.length; i++){
            if(res[i] === 666){
                continue;
            }
            console.log(i);
        }

请添加图片描述

示例4：

        /*2.从接盘接收5个0~9的数字, 排序后输出
        * 输入的格式x,y,z,...
        *  2, 6, 3, 8, 1
        *  2, 6, 3, 8, 3  --> 2,3,3,6,8
        * */
        //  0  1  2  3  4  5  6  7  8  9
        // [u, 6, 6, 6, u, u, 6, u, 6, u]
        // [u, u, 1, 2, u, u, 1, u, 1, u]
        // [0, 0, 1, 2, 0, 0, 1, 0, 1, 0]
        let str = prompt("请输入五个整数, 用逗号隔开");
        let arr = str.split(",");
        let res = new Array(10);
        // 数组的fill方法的作用: 设置数组中所有元素的值为指定的数据
        res.fill(0); // 将数组中所有的元素的值都设置为0
        // [2, 6, 3, 8, 3]
        // 遍历用户输入的数据
        for(let i = 0; i < arr.length; i++){
            let str = arr[i]; // 2 6 3 8 3

            // 第一种
            //res[str]=6; //  有小问题 假设输入：2, 6, 3, 8, 3，期望输出：2,3,3,6,8，但是实际并不是

            /*
            res[2] = 0 + 1
            */
            res[str] = res[str] + 1;
        }
        for(let i = 0; i < res.length; i++){
            // 第一种
            // if(res[i] === 6){
            //     console.log(i);
            // }

            for(let j = 0; j < res[i]; j++){
                // console.log(i);
                console.log(i);// 输出下标
            }
        }

请添加图片描述

示例5

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。

如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前

注意点: 如果元素是字符串类型, 那么比较的是字符串的Unicode编码

        let arr = ["c", "a", "b"];

        // if里面返回的和else if里面返回的要相反
        arr.sort(function(a, b) {
            if (a > b) {
                return -1; //降序
            } else if (a < b) {
                return 1;
            } else {
                return 0;
            }
        });
        console.log(arr);

示例6

如果数组中的元素是数值类型
如果需要升序排序, 那么就返回a - b;
如果需要降序排序, 那么就返回b - a;

        let arr = [3, 4, 2, 5, 1];
        // arr.sort();
        arr.sort(function(a, b) {
            // return a - b;
            return b - a;
        });
        console.log(arr);

示例7

按元素长度排

        let arr = ["1234", "21", "54321", "123", "6"];
        arr.sort(function(str1, str2) {
            // return str1.length - str2.length;//由短到长
            return str2.length - str1.length; //由长到短
        });
        console.log(arr);

示例8

按对象的年龄排

        let students = [{
            name: "zs",
            age: 34
        }, {
            name: "ls",
            age: 18
        }, {
            name: "ww",
            age: 22
        }, {
            name: "mm",
            age: 28
        }, ];
        students.sort(function(o1, o2) {
            // return o1.age - o2.age;//升序
            return o2.age - o1.age; //降序
        });
        console.log(students);

六、二维数组概述

描述：数组中的元素为数组
语法：var arr=[[item1,item2],[item3,item4]…]

其实二维数组的调用很简单，有两个下标。第一个下标表示外层数组的下标，第二个下标表示内层数组的下标。在这里就不去过多的去进行阐述了，相关用法和方法可以参考前面的数组里的方法。

一维数组及其相关方法

注意：

二维数组是一种特殊形式的数组，数组中的方法在二维数组中仍然适用

案例1：

<script>
        var infoArr = [
            ['zhangsan', 22, 'male'],
            ['lisi', 23, 'male'],
            ['wangwu', 22, 'female']
        ];
        console.log(infoArr); //[Array(3), Array(3), Array(3)]
        var newArr = infoArr[1];
        console.log(newArr); //["lisi", 23, "male"]
        var nameArr = newArr[0];
        console.log(nameArr); //lisi
        console.log(infoArr[1][1]); //23

		var allBookArr = [];
        var bookInfo1 = ['红楼梦', '曹雪芹', '无价1'];
        var bookInfo2 = ['西游记', '吴承恩', '无价2'];
        var bookInfo3 = ['三国演义', '罗贯中', '无价3'];
        allBookArr.push(bookInfo1);
        allBookArr.push(bookInfo2);
        allBookArr.push(bookInfo3);
        console.log(allBookArr); //[Array(3), Array(3), Array(3)]
        console.log(allBookArr[1][1]); //吴承恩
</script>

案例2：

        // 循环录入 5 名同学的姓名、身高、年龄，并将信息存入到二维数组里
        let students = [];
        for(let i = 0; i < 5; i++){
            let student = [];
            student.push(prompt("请输入你的姓名："));
            student.push(parseInt(prompt("请输入你的年龄：")));
            student.push(parseFloat(prompt("请输入你的身高：")));
            students.push(student);
        }

        // 用 table 的方式输出
        console.log("姓名\t身高\t年龄");

        //循环输出
        for(var j = 0; j < students.length; j++){
            console.log(students[j][0] + "\t" + students[j][1] + "\t" + students[j][2]);
        }

        //查找名称为 张三 的学生，并删除他的信息
        let index = -1;
        for(var k = 0; k < students.length; k++){
            if(students[k][0] == "张三"){
                index = k;
                break;
            }
        }
        if(index == -1){
            console.log("未找到该名学生！");
        }else {
            students.splice(index,1);
        }

        //根据学生的身高从高到低进行排序（选择排序）
        // students.sort((a,b) => {
        //     return a[2] - b[2];
        // })
        for(let l = 0; l < students.length - 1; l++){
            for(let m = l + 1; m < students.length; m++){
                if(students[l][2] > students[m][2]){
                    let temp = students[l];
                    students[l] = students[m];
                    students[m] = temp;
                }
            }
        }
        console.log(students);