JS中的数组

最新推荐文章于 2024-08-16 20:58:53 发布

昱晟168

最新推荐文章于 2024-08-16 20:58:53 发布

阅读量727

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47267628/article/details/126860434

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

数组【非常重点】

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>

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>

数组常用方法：

在这里插入图片描述

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>

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>

6.数组遍历练习

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

<!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>

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>

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

slice()方法

可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
截取开始的位置的索引，包含开始索引
截取结束的位置的索引，不包含结束索引
第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算
倒数第一个
倒数第二个

    /**
     * slice()方法
     */
    var arr = ["海康","湛江","南宁","西安","西藏"];

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

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

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)

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>

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>

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<b){
    //   return -1;
    // }else {
    //   return 0;
    // }

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

  })

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

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>

this在函数对象中的情况：

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

13.函数对象中`arguments`参数

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

函数的上下文对象 this
封装实参的对象 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>

昱晟168

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS中的数组

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

扫一扫