• 【无标题】

    这里写自定义目录标题

    JavaScript学习之数组

    为什么要学习数组

    之前学习的数据类型，只能存储一个值 比如：Number/String。我们想存储多个值而且不是同一类型的值，此时该如何存储？

    数组的概念

    所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

    数组的定义

    数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

    创建方式

    通过实例化创建

    var arr = new Array(3); //实例化一个长度为3的数组，每一项都是空值
arr4 = new Array(1,2,3,4);//多个参数会生成一个对应内容的数组

    • 1
    • 2

    通过数组字面量创建数组

    var arr1 =[];//创建一个空数组
var arr2=[1,2,3];//创建一个长度为3的数组
var arr3=[1,'2',true,undefined,null]; //创建一个长度为5的数组


    • 1
    • 2
    • 3
    • 4

    数组的属性

    var arr = [1,2,3,4];
// 可以通过数组的length属性获取数组的长度
console.log(arr.length);
// 可以设置length属性改变数组中元素的个数
arr.length = 0;

    • 1
    • 2
    • 3
    • 4
    • 5

    获取数组元素

    数组的取值

    // 格式：数组名[下标]	下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red', 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    遍历数组

    遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

    数组遍历的基本语法：

    for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

    • 1
    • 2
    • 3

    for in 遍历(不推荐)

    for(var key in arr){
    console.log(key,arr[key]);  //key 为下标 arr[key]为对应key下标的值
}

使用for-in可以遍历数组，但是会存在以下问题：

1.index索引为字符串型数字（注意，非数字），不能直接进行几何运算。

2.遍历顺序有可能不是按照实际数组的内部顺序（可能按照随机顺序）。

3.使用for-in会遍历数组所有的可枚举属性，包括原型。例如上例的原型方法method和name属性都会被遍历出来，通常需要配合hasOwnProperty()方法判断某个属性是否该对象的实例属性，来将原型对象从循环中剔除。

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

    for of 遍历

    for(var key of arr){
    console.log(key); 
}
相比 for-in 不会出现顺序错乱的问题 也不会遍历出所有可枚举属性 

    • 1
    • 2
    • 3
    • 4

    数组元素赋值

    数组的赋值

    var arr = ['red', 'green', 'blue'];

arr[2] = 'yellow'; //给下标为2的数组元素赋值 如果该元素本身有值会进行覆盖

arr[3] = '#368'; // 给下标为3的数组元素赋值 如果该元素不存在就新增

arr //["red", "green", "yellow", "#368"]

arr[5] = '#f60'; //如果跨位进行赋值 空位显示 empty (空置)

arr // ["red", "green", "yellow", "#368", empty, "#f60"]

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

    多维数组

    数组中包含数组的话称之为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组

    使用最多的是二维数组

    var arr = [[1,2,3],[4,5,6],[7,8,9]];
arr[2][1] //8

    • 1
    • 2

    数组基础方法

    数组的方法有很多，在我们学习完函数 作用域 对象之前我们先了解一些数组的基础方法

    isArray(obj)

    用于确定传递的值是否是一个 Array。

    Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

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

    参数

    obj 需要检测的值

    • 1

    返回值

    如果值是Array 则为true; 否则为false。

    • 1

    练习：

    求1-100之间不能被7整除的整数的和（用continue）

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <script>
      //求1-100之间不能被7整除的整数的和（用continue）
      var sum = 0;
      for (var i = 1; i <= 100; i++) {
        if (i % 7 === 0) {
          continue;
        }
        sum += i;
      }
      console.log(sum);
    </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

    求200-300之间所有的奇数的和（用continue）

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <script>
    //求200-300之间所有的奇数的和（用continue）
    var sum=0;
    for (var i=200;i<=300;i++){
      if(i%2===0){
        continue;
      }
      sum+=i;
    }
    console.log(sum);
  </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

    求200-300之间第一个能被7整数的数（break）

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //求200-300之间第一个能被7整数的数（break）
      for (var i = 200; i <= 300; i++) {
        if (i % 7 === 0) {
          console.log(i);
          break;
        }
      }
    </script>
  </body>
</html>


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

    一、看数组 观察变化找规律
    初始 [‘a’,‘b’,‘c’,‘d’,‘e’]
    第一次 [‘d’,‘e’,‘a’,‘b’,‘c’]
    第二次 [‘b’,‘c’,‘d’,‘e’,‘a’]
    第三次 [‘e’,‘a’,‘b’,‘c’,‘d’]
    …
    请问第五次 第十五次数组是如何?

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = ['a', 'b', 'c', 'd', 'e'];

      var len = arr.length;
      for (var j = 1; j < 16; j++) {
        var arr2 = [];
        for (var i = 0; i < 5; i++) {
          arr2[(i + 2) % len] = arr[i];
        }
        arr = arr2;
        console.log('第' + j + '次是' + arr2);
      }
    </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

    二、抽茧剥丝
    var arr = [‘鸡腿’,101,‘3’,‘奥利奥’,9,false,‘33a’,1.333,‘巧克力’];
    求数组中所有类型为number的整数之和

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <script>
      var arr = ['鸡腿', 101, '3', '奥利奥', 9, false, '33a', 1.333, '巧克力'];
      var sum = 0;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === (~~arr[i])) {
          sum += arr[i];
        }
      }
      console.log(sum);
    </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
  • 相关阅读:
    Perl6中的垃圾收集
    vue相关面试题:Vuex是什么?
    【C语言】进程间通信之存储映射区mmap
    「硬核」实操如何拥有一个自己的数字人模型
    【大厂AI课学习笔记】【2.2机器学习开发任务实例】（5）数据理解
    谈谈Selenium中浏览器驱动的日志
    借助 ZooKeeper 生成唯一 UUID
    vue+flv.js+SpringBoot+websocket实现视频监控与回放
    第 7 章 图形用户界面参考答案
    数字孪生技术如何赋能智慧工厂
  • 原文地址：https://blog.csdn.net/qq_45969772/article/details/126148335