• JS中的数组

    数组【非常重点】

    1.数组基本介绍

    数组(Array)：

    • 数组也是一个对象
    • 它和我们普通对象功能类似，也是用来存储一些值的
    • 不同的是普通对象是使用字符串作为属性名的，而数组是使用数字作为索引操作元素
    • 索引：
      • 从0开始的整数就是索引
    • 数组存储性能比普通对象高，在开发中我们经常使用数组来存储一些数据

    2.数组基本操作

    A.创建数组对象

    B.添加元素

    C.查询指定索引元素值

    D.修改指定索引值

    E.数组中length属性

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组入门</title>
</head>
<body>
<script type="text/javascript">
  /**
   * 1.数组对象的创建
   */
  var arr = new Array();
  
  // 使用typeof检查一个数组时，会返回Object
  console.log(typeof arr);

  /**
   * 2.向数组中添加元素
   * 语法是：数组[索引] = 值;
   */
  arr[0] = "海康";
  arr[1] = "南宁";
  arr[2] = "西安";

  /**
   * 3.查询指定索引的值
   * 语法：arr[索引值]
   */
  console.log(arr[1]);

  /**
   * 4.修改指定索引的值
   * 语法：arr[索引值] = 值;
   */
  arr[2] = "杭州";

  /**
   * 5.数组对象中length属性
   * length属性可以获取一个数组长度
   * 可以设置一个数组长度
   */
  console.log(arr.length);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    3.使用字面量创建数组

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>创建数组方式</title>
</head>
<body>
<script type="text/javascript">
  // 1.创建数组方式一：
  var arr = new Array();
  arr[0] = 1;
  arr[1] = 2;

  // 2.创建数组方式二：使用字面量方式【一般使用这种方式】
  var arr2 = [1,2,3,5,6];

  // 3.创建数组方式三：了解【也可以同时添加元素，将要添加的元素作文构造函数的参数传递】
  var arr3 = new Array(1,2,3,5);

  // 注意是：可以使用 `new Array(10);`的方式创建数组，只传入一个值时，表示创建一个数组长度为`10`的数组

  // 注意是：数组可以存放任意的数据类型
  

</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    数组常用方法：

    在这里插入图片描述

    4.数组的四个方法

    方法描述
    push()向数组的未尾添加一个或多个元素，并返回新的数组长度
    pop()删除并返回数组的最后一个元素
    unshift()向数组的开头添加一个或多个元素，并返回新的数组长度
    shift()删除并返回数组的第一个元素
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组四个增删方法</title>
</head>
<body>
<script type="text/javascript">
  var arr = ["海康","湛江"];

  // 第一个方法：push()
  // 向数组的未尾添加一个或多个元素，并返回数组最新的长度
  result1 = arr.push("1");// 返回最新的长度是：3
  result2 = arr.push("2","3");// 返回最新的长度是：5

  console.log(result1);
  console.log(result2);

  // 第二个方法：pop()
  // 删除数组中的最后一个元素，并返回删除的元素
  var pop1 = arr.pop();// 返回是：3
  var pop2 = arr.pop();// 返回是：2
  console.log(pop1)
  console.log(pop2)

  // 第三个方法：unshift()
  // 向数组开头添加一个或多个元素，并返回数组的最新长度
  var unshift1 = arr.unshift("VUE");// 返回是：数组最新长度 4
  var unshift2 = arr.unshift("SpringBoot","StringCloud");// 返回是：数组最新长度 6
  console.log(unshift1)
  console.log(unshift2)

  // 第四个方法：shift()
  // 删除数组开头的第一个元素，并返回删除的元素
  var shift = arr.shift();// 返回是：SpringBoot
  console.log(shift)
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    5.数组的遍历【重点】

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组遍历</title>
</head>
<body>
<script type="text/javascript">
  /**
   * 数组的遍历
   */
  var arr = ["海康","湛江","南宁","西安","西藏"];

  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    6.数组遍历练习

        /*
     * 创建一个函数，可以将perArr中的满18岁的Person提取出来，
     * 	然后封装到一个新的数组中并返回
     * arr
     * 	形参，要提取信息的数组
     */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组遍历练习</title>
</head>
<body>
<script type="text/javascript">

    /*
     * 创建一个函数，可以将perArr中的满18岁的Person提取出来，
     * 	然后封装到一个新的数组中并返回
     * arr
     * 	形参，要提取信息的数组
     */
    // 第一步：定义Person构造函数
    function Person(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    // 第二步：创建Person对象
    var per1 = new Person("海康",21,"男");
    var per2 = new Person("南宁",21,"女");
    var per3 = new Person("西安",16,"男");
    var per4 = new Person("西藏",21,"女");

    // 第三步：创建数组，并且向数组中添加Person对象
    var arr = [per1,per2,per3,per4];

    // 第四步：遍历数组，将满18岁Person对象封装到新的数组中
    var perArr = new Array();

    for (let i = 0; i < arr.length; i++) {
        if (arr[i].age>=18){
            perArr[i] = arr[i];
        }
    }

    // 第五步：打印新的数组
    console.log(perArr);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    7.数组中forEach()方法

    forEach()

    • 这个方法只支持IE8以上的浏览器，所以需要使用该方法时，还需要考虑浏览器的兼容性问题

    forEach(vaule , index , array)方法的语法：

    • 该方法需要一个函数作为参数，这种函数不需要我们调用，被称为回调函数
    • 该方法有三个参数：
      • 第一个参数，就是当前正在遍历的元素
      • 第二个参数，就是当前正在遍历的元素的索引
      • 第三个参数，就是正在遍历的数组对象
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组中的forEach方法</title>
</head>
<body>
<script type="text/javascript">
  // 第一步：定义一个数组
  var arr = ["海康","湛江","南宁","西安","西藏"];
  
  // 第二步：调用数组中的`forEach`方法，该方法需要传入一个回调函数
  /**
   * 该方法的回调函数中有三个参数：
   * value：遍历数组的元素
   * index：遍历数组的元素的索引
   * array：遍历数组的对象
   */
  arr.forEach(function (value, index, array) {
    console.log(value);
  })
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    8.数组slice()和splice()方法

    slice()方法

    • 可以用来从数组提取指定元素
    • 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
    • 参数：
      1. 截取开始的位置的索引，包含开始索引
      2. 截取结束的位置的索引，不包含结束索引
        1. 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
        2. 索引可以传递一个负值，如果传递一个负值，则从后往前计算
          1. 倒数第一个
          2. 倒数第二个
        /**
     * slice()方法
     */
    var arr = ["海康","湛江","南宁","西安","西藏"];

    var result = arr.slice(0,3);//包含开始的索引，不包含结束的索引

    console.log("result = "+result);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    splice()方法、

    • 可以用于删除数组中的指定元素
    • 使用splice()会影响到原数组，会将指定元素从原数组中删除，并将删除的元素作为返回值返回
    • 参数：
      • 第一个：表示开始位置的索引
      • 第二个：表示删除的数量
      • 第三个：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
        /**
     * splice()方法
     */
    var arr = ["海康","湛江","南宁","西安","西藏"];
    var result2 = arr.splice(4,2);// 第一个参数是：表示是索引位置，第二个参数是：删除元素的个数
    var result3 = arr.splice(4,2,"66","68","168","88");//第三个参数及后面的参数表示是，删除前面的元素后，并且将第三个参数及第三个参数的元素添加到数组中并返回

    console.log(arr);
    console.log(result2)
    console.log(result3)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    9.数组中concat()方法

    concat()方法是用于连接两个或多个数组，或者将传入的元素进行连接，并将新的数组返回

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组concat方法</title>
</head>
<body>
<script type="text/javascript">
    var arr1 = ["汇康","海康","湛江"];
    var arr2 = ["西藏","南宁","西京"];

    var result = arr1.concat(arr2,"北京","杭州");
    console.log(result);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    10.数组中join()方法

    join()该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，join()还可以传入连接符，在默认情况下是使用,作为连接符

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组中join方法</title>
</head>
<body>
<script type="text/javascript">
  var arr = ["海康","湛江","南宁","西安","西藏"];

  // 使用join将数组转换成字符串
  var result = arr.join("-");//还可以在join方法中，传入一个连接符
  console.log(result);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    11.数组中sort()方法

    sort()方法

    • 可以用来对数组中元素进行排序
    • 也会影响原数组，默认会使用Unicode编码进行排序

    注意是：比较是数字的数组，使用sort()方法进行排序时，也会按照Unicode编码排序，所以对数字进行排序时，可以会得到错误的结果。

    所以在对于纯数字的数组进行排序时，需要在sort()方法中传入一个回调函数，指定排序的规则

    • 如果在回调函数中，返回一个大于0的值时，则元素会交换位置
    • 如果在回调函数中，返回一个小于0的值时，则元素不会交换位置
    • 如果在回调函数中，返回两个值相等时，也不会交换位置

    结果：如果需要升序排序，则返回a-b

    ​ 如果需要降序排序，则返回b-a

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数组中sort()方法</title>
</head>
<body>
<script type="text/javascript">
  var arr = [2,12,35,33,168,88,98,23,45,67,66,86,26,168,16888];

  /**
   * 使用sort()方法，并且指定排序规则
   */
  arr.sort(function (a, b){
    // if (a>b){
    //   return 1;
    // }else if (a
    //   return -1;
    // }else {
    //   return 0;
    // }

    // 上述可以简写成：
    // 升序
    return a-b;
    // 降序
    // return b-a;

  })

  console.log(arr);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    12.函数对象的call()和apply()方法

    call()和apply()方法

    • 这两个方法都是函数对的方法，需要通过函数对象来调用
    • 当对函数调用call()和apply()都会调用函数执行
    • 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
    • call()方法可以将实参在对象之后依次传递
    • apply()方法需要将实参封装到一个数组中统一传递
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>函数对象中call和apply方法</title>
</head>
<body>
<script type="text/javascript">
  // 定义一个函数
  function fun(a,b) {
    alert("a+b=" + (a+b));
  }

  function f() {
    alert("f");
  }


  //
  var obj = {
    name:"海康",
    sayName:function () {
      alert(this.name);
    }
  }

  // 使用call方式调用fun()函数
  fun.call(obj,1,2);// 当在call方法中传入obj时，this代表就是obj
  fun.apply(obj,[1,2]);// 而在apply方法中，第一个参数传入是obj,第二个参数是一个数组
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    this在函数对象中的情况：

    1. 以函数形式调用时，this永远都是window
    2. 以方法的形式调用时，this是调用方法的对象
    3. 以构造函数形式调用时，this是新创建的那个对象
    4. 使用call和apply调用时，this是指定的那个对象

    13.函数对象中arguments参数

    在调用函数时，浏览器每次都会传递进两个隐含的参数：

    1. 函数的上下文对象 this
    2. 封装实参的对象 arguments
      • arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
      • 在调用函数时，我们所传递的实参都会在arguments中保存
      • arguments.length可以用来获取实参长度
      • 我们即使不定义形参，也可以通过arguments来使用实参
      • 注意是：在arguments对象中有一个callee属性
        • 这个属性对应一个函数对象，就是当前在指向的函数对象
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>arguments</title>
</head>
<body>
<script type="text/javascript">
  function fun(a,b) {
    console.log(arguments.length);// 返回值是：2，因为传入两个参数
    console.log(arguments[0]);
    console.log(arguments[1]);
  }

  fun(1,2);
</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
  • 相关阅读:
    面向面试知识-Redis
    软件销售的话术（非常建议收藏）
    容器化nacos部署并实现服务发现(gradle)
    八股文的终点，是刷题大冤种？还是offer收割机
    ajax笔记三
    Asp .Net Core 系列：集成 Refit 和 RestEase 声明式 HTTP 客户端库
    计算机视觉系列 -OpenMMLab 之 MMRazor 模型轻量化瑞士军刀 蒸馏、剪枝、网络结构搜索全方向覆盖
    解决所有二叉树路径问题
    [数据可视化] 霍乱时期的可视化医师
    Go语言之协程和管道
  • 原文地址：https://blog.csdn.net/weixin_47267628/article/details/126860434