自学js第六天:JS数组和算法

最新推荐文章于 2022-07-26 11:27:28 发布

AKA俄语人Лев

最新推荐文章于 2022-07-26 11:27:28 发布

阅读量609

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116433820

版权

JS数组

PS;

数组下标,超过内容实际长度, 则返回undefined

从数组中pop/shift删除的元素(当数组删光了,则返回undefined)。

function函数没有return返回值时,也会默认返回undefined的.

indexOf数组方法(通过元素找下标,没有找到则返回-1 )

String(num)[1] 字符串也可以根据下标取值

1.为什么要学习数组引用类型

之前学习的数据类型，只能存储一个值比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？

 <script>

    // switch 打印星期几 0为星期日 1 - 6分别对应星期一到星期六

    var day = 0;
    switch (day) {
    
      case 0:
        console.log('星期日');
        break;
      case 1:
        console.log('星期一');
        break;
      case 2:
        console.log('星期二');
        break;
    }
 
    //上面的switch太累赘了,因此可以用数组下标映射去代替case的0 1 2...
    //数组映射 ---->用空间换时间 分支值或者可能性非常多并且有规律的时候
    var weekDay = ['日', '一', '二', '三', '四', '五', '六'];
    console.log('星期' + weekDay[day]);

  </script>

2.数组的概念

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

3.数组的定义

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

一.如何创建数组

1.通过动态小括号new实例化创建:new Array(length);

var arr = new Array(3); 
//只写一个参数,创建一个长度为3的数组 , 数组中每一项都为 空置empty [empty,empty,empty]

var arr = new Array(1,2,3,4); 
//实例化多个数组参数,  会生成具体对应内容参数内容的数组.

2.通过静态中括号数组字面量创建数组:var arr2 = [xx, xx, xx];

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c'];

二.数组内部的各个属性

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组</title>
</head>

<body>
  <script>

    var names = '张三,李四,王五,赵六';

    names = '张三,李四,王九,赵六';

  
    //动态创建数组 
    //单个参数
     var arr = new Array(3);  
     console.log(arr); //[empty × 3]  
     console.log(arr[0]); //undefined
     console.log(arr[1]); //undefined
     console.log(arr[2]); //undefined
     console.log(arr[3]); //undefined 超过数组内容下标,也是undefined
    //动态数组内没有内容时输出这个数组则是empty,  输出单个是默认值undefined

    //多个参数,则给具体字面值内容了
     var arr = new Array(1, 2, 3, 4, 5); 
     console.log(arr); //[1, 2, 3, 4, 5]  具体内容
     console.log(arr[0]); //1

      

    //静态创建数组 
    //JS用常用写法:给具体字面值
    var arr = [1, 2, 3, 4, 5];
    arr = ['哈哈', 1, true, NaN, null];

    console.log(arr, arr.length); //JS可以把整个数组打印出来,输出数组长度
    arr[2] = false;  //通过下标改变数组的内容
    console.log(arr[2]); //输出数组第几个下标内容

    arr.length = 2;  //改变数组的长度,再输出数组
    console.log(arr);

    //PS: 字符串的长度无法改变
    var str = '海牙老师真的好好看啊'; 
    str.length = 2;
    console.log(str.length);  //还是10

  </script>
</body>

</html>

三.如何获取数组元素

数组的取值(通过索引下标)

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

四.数组元素赋值或修改(JS数组可以跨越长度跨界去赋值和修改不会报错)

数组的赋值

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VwsLqE38-1620234826825)(C:\Users\tuyue\AppData\Local\Temp\1615268903034.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T3dsbeRo-1620234826834)(C:\Users\tuyue\AppData\Local\Temp\1615268589581.png)]

五,如何遍历数组:

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

数组遍历的基本语法：

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

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组遍历</title>
</head>

<body>
  <script>
    //犯罪现场有4个嫌疑人 让证人一一辨认  嫌疑人名字叫王五
    //
    var suspects = ['张三', '李四', '王五', '赵六']; //4 
    
    for (var i = 0; i < suspects.length; i++) {
    // 0 - 3 
      console.log( suspects[i]);
      if (suspects[i] === '王五') {
    
        console.log('就是他:'+ suspects[i] + ","+ (i+1) + '号嫌疑人');
      }
    }

    //ES6: for idx in   有可能乱序 (下标变为idx)
    for (var idx in suspects) {
    
      console.log(idx, suspects[idx]);
    }


    //ES6: for item of  (快速遍历,下标变为item)
    for (var item of suspects) {
    
      console.log(item);
    }





    // var a = '张三', b = '李四', c = '王五', d = '赵六';
    // if (a === '张三') {
    

    // }

    // if (b === '张三') {
    

    // }

    // if (c === '张三') {
    

    // }

    // if (d === '张三') {
    

    // }



  </script>
</body>

</html>

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 = [[1,2,3],[4,5,6],[7,8,9]];
arr[2][1] //8

七.数组类型判定与隐式转换

var arr = [1,2,3];

typeof arr //'object' 数组是object

Number(arr) //NaN

String(arr) // '1,2,3'

Bollean(arr) // true

[] == [] //false

arr + '海牙' //'1,2,3海牙'

arr / 2 // NaN

arr + [] // '1,2,3'

[] + [] //''

[2]  - 1 //1

[1,]  - 1 //0

[1

最低0.47元/天解锁文章

AKA俄语人Лев

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自学js第六天:JS数组和算法

JS数组PS;数组下标,超过内容实际长度, 则返回undefined从数组中pop/shift删除的元素(当数组删光了,则返回undefined)。function函数没有return返回值时,也会默认返回undefined的.indexOf数组方法(通过元素找下标,没有找到则返回-1 )String(num)[1] 字符串也可以根据下标取值1.为什么要学习数组引用类型之前学习的数据类型，只能存储一个值比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？
复制链接

扫一扫