Javascript学习——神奇的数组

风吟xqy

已于 2022-08-17 16:42:43 修改

阅读量367

点赞数 1

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

于 2022-08-03 20:48:02 首次发布

本文链接：https://blog.csdn.net/qq_45969772/article/details/126148335

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

- JavaScript学习之数组

JavaScript学习之数组

为什么要学习数组

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

数组的概念

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

数组的定义

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

创建方式

通过实例化创建

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

通过数组字面量创建数组

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

数组的属性

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

获取数组元素

数组的取值

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

遍历数组

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

数组遍历的基本语法：

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

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()方法判断某个属性是否该对象的实例属性，来将原型对象从循环中剔除。

for of 遍历

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

数组元素赋值

数组的赋值

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"]

多维数组

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

使用最多的是二维数组

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

数组基础方法

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

isArray(obj)

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

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

参数

obj 需要检测的值

返回值

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

练习：

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

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

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

一、看数组观察变化找规律
初始 [‘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>

二、抽茧剥丝
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>