0
0

JavaScript数组相关知识

一、数组的概念

定义：数组(Array)是存储数据的集合。

数据存储类型不同：

   基本数据类型 ：一次只能存储一个数据单元   

   var num = 20;

   数组 ：一次可以存储多个数据单元                 

   var arr = [1,2,3,4,5,6];

数组的定义：

/*
    字面量语法形式

        var 变量 = [ 数据1 , 数据2 , 数据3 ....  ];
            在 [ ] 中 定义 数组存储的数据单元 
            数据单元可以是一个可以是多个 
            多个数据单元 使用逗号间隔 
            数组中可以存储所有JavaScript支持的数据结构

    构造函数定义数组

        var 变量 = new Array(); 
*/

//字面量语法定义数组
var arr = [1,2,3,4,5];

//构造函数定义数组
var arr1 = new Array();

数组的索引下标和长度：

var arr = [1,2,3,4,5];

//索引下标 0 1 2 3 4（一一对应以上数组单元）

//数组length 属性的调用
console.log(arr.length); // 数组长度是5

二、数组的基本操作

先定义一个数组，有以下代码，我们逐一进行解释：

var arr = ['北京','上海','广州','深圳','重庆'];
console.log(arr[3]);
console.log(arr[50]);
arr[3] = '成都';

数组的调用：

   通过数组的索引下标 获取 指定数组单元存储的数据数值

//通过 [] 取值语法 调用指定 索引下标 存储的数据数值 

console.log(arr[3]);  //调用结果 深圳

//没有对应的索引下标 

console.log(arr[50]); //调用结果 undefined

数据的修改：

            通过数组的索引下标 对 已经存在的索引下标对应的单元 进行 重复赋值

            后赋值的数据会覆盖之前存储的数据

            执行效果就是修改数组单元存储的数据

//后赋值的成都会覆盖以前存储的深圳
arr[3] = '成都';

数组的新增：

//新增数组元素有两种方法

//方法一：修改length长度
var arr = ['北京','上海','广州','深圳','重庆'];
arr.length = 6;
console.log(arr[5]);//调用结果 undefined

//方法二：修改数组索引号 追加数组元素
var arr1 = ['北京','上海','广州','深圳','重庆'];
arr1[5] = '武汉';
console.log(arr1);

方法二的执行结果：

三、数组的循环遍历

数组的循环遍历：

            按照顺序 操作数组中的所有单元 称为 数组的循环遍历

方法一：通过for循环遍历

var arr = ['北京','上海','广州','深圳','重庆'];

//循环遍历
for (var i = 0; i < 5; i++) {
    console.log(arr[i]);
}

//数组长度  数组名.length
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

执行结果：

方法二：for...in 循环

     **for ( var 变量 in 数组) {**

** }**

       变量存储的是数组单元的索引下标

       数组[变量]  获取索引下标对应单元存储的数值数据

var arr = ['北京','上海','广州','深圳','重庆'];

for ( var index in arr) {

    // JavaScript程序自动对数组进行循环遍历
    // 每循环一次 将 数组的索引下标存储在 变量中
    // 数组[变量] 获取 数组单元的数据数值

    console.log(index,arr[index]);

}

执行结果：

var arr = ['北京','上海','广州','深圳','重庆'];

for ( var index in arr) {

    console.log(index,arr[index]);
    
    if (index === '2') {
       break;
    }   

}

加 if 判断 执行结果：

方法三：for...of循环

     **for(var 变量 of 数组){**

** }**

     变量存储的是数组单元的数值数据

var arr = ['北京','上海','广州','深圳','重庆'];

for ( var value of arr) {

    // JavaScript程序自动对数组进行循环遍历
    // 每循环一次 将 数组的数据数值存储在 变量中
    // 变量 获取 数组单元的数据数值

    console.log(value);

}

执行结果：

var arr = ['北京','上海','广州','深圳','重庆'];

for ( var value of arr) {

    console.log(value);

    if (value === '深圳') {
       break;
    }

}

加 if 判断 执行结果：

方法四：forEach

    **数组.forEach(function(参数1，参数2，参数3){**

            参数1：存储的是数组的数值数据

            参数2：存储的是数组的索引下标

            参数3：存储的是原始数组的内容

    ** })**

var arr = ['北京','上海','广州','深圳','重庆'];

arr.forEach(function (value,index,array) {
    
    // JavaScript程序自动对数组进行循环遍历
    // 每循环一次 将 数组的数据数值存储在 参数1中
    // 每循环一次 将 数组的索引下标存储在 参数2中
    // 每循环一次 将 原始数组 参数3中

    console.log(value,index,array);

     // forEach 不支持 break语句
     // if( index === '2' ){
     //     break;
     // }

})

执行结果：

总结:

           1、实际项目中推荐使用for循环遍历数组

                它的执行效率最高

                for循环支持break语句

            2、特殊情况下可以使用for...in  for...of

                  for...in是唯一可以**循环遍历对象**的语法形式

                  for...in  for...of循环支持break语句，不能控制循环数组的顺序

            3、forEach执行效率最低

                  可以同时获取数据和索引下标操作比较方便

                  forEach不支持break语句

四、数组的函数方法

数组的函数方法

    JavaScript程序给数组定义了很多的函数方法 ，它是操作数组的程序

    JavaScript已经定义好了，可以直接调用使用

    调用语法：数组.函数方法();

首先我们要了解两个概念：

    映射

            一 一对应的有操作的结果

    镜像

           一模一样

JavaScript中ES5的函数操作语法

数组的映射

      将数组中每一个单元的数据执行相同的操作生成一个新数组

      数组的映射不会改变原始数组的数据数值

      它是使用变量存储新的数组

语法：

**数组.map(function(参数1,参数2,参数3){ return 参数1的操作 }) **

    参数1：存储的是数组单元的数值数据

    参数2：存储的是数组单元的索引下标

    参数3：存储原始数组

var arr = [10,20,30,40,50,60];

var newArr = arr.map(function( value ) {
    
    return value*2;

})

console.log(arr);
console.log(newArr);

执行结果：

数组的过滤

     将数组的每个单元执行判断比较，将符合条件的数据，生成一个新的数组

语法：

**数组.filter(function(参数1,参数2,参数3){ return 参数1的判断比较 }) ** 

    参数1：存储的是数组单元的数值数据

    参数2：存储的是数组单元的索引下标

    参数3：存储原始数组

var arr = [10,20,30,40,50,60];

var newArr = arr.filter(function( value ) {
    return value > 30;
})

console.log(arr);
console.log(newArr);

执行结果：

数组的判断

（1）数组.some(function(参数1,参数2,参数3){ return 参数1的判断比较 })

              参数1：存储的是数组单元的数值数据

              参数2：存储的是数组单元的索引下标

              参数3：存储原始数组

      将数组中每一个单元执行判断比较 ，只要有符合条件的数据，返回值就是 true

var arr = [10,20,30,40,50,60];

var newArr = arr.some(function( value ) {
    return value > 20;
})

console.log(arr);
console.log(newArr);

执行结果：

（2） 数组.every(function(参数1,参数2,参数3){ return 参数1的判断比较 })

              参数1：存储的是数组单元的数值数据

              参数2：存储的是数组单元的索引下标

              参数3：存储原始数组

       将数组中每一个单元执行判断比较 ，必须所有的数据符合条件，返回值才是 true

var arr = [10,20,30,40,50,60];

var newArr = arr.every(function(value) {
    return value > 20;
})

console.log(arr);
console.log(newArr);

执行结果：

常用的数组函数方法

首位新增

** 数组.unshift(数据1，数据2,...);**

var arr = [10,20,30,40,50,60];

var newArr = arr.unshift(0,5);

console.log(newArr);
console.log(arr);

执行结果：

首位删除

** 数组.shift();**

var arr = [10,20,30,40,50,60];

var newArr = arr.shift();

console.log(newArr);
console.log(arr);

执行结果

末位新增

数组.push(数据1，数据2,...);

var arr = [10,20,30,40,50,60];

var newArr = arr.push(70,80);

console.log(newArr);
console.log(arr);

执行结果：

末位删除

数组.pop();

var arr = [10,20,30,40,50,60];

var newArr = arr.pop();

console.log(newArr);
console.log(arr);

执行结果：

总结新增和删除：

    首位新增和末位新增 ：一次可以新增一个或者多个数据单元

                                         返回值是 新数组的length

    首位删除和末尾删除：一次只能删除一个数据单元

                                        返回值是 删除单元存储的数据

数组指定单元的删除

数组.splice(参数1,参数2,其它所有参数);

    参数1：删除单元起始位置的索引下标

    参数2：删除单元的个数

    其它所有参数：替换要删除单元的数据，可以是一个也可以是多个

    返回值是 删除的数组单元组成的数组

var arr = [10,20,30,40,50,60];

//删除20，30，40

var newArr = arr.splice(1,3,25,35,45);

console.log(newArr);
console.log(arr);

执行结果：

数组的查询

    查询数组单元中有没有存储这个数据数值

（1）数组.indexOf( 查询的数据 );

             查询数值中有没有存储对应的数据数值

             如果有 返回 第一个存储这个数据单元的索引下标

             如果没有 返回值 是 -1

var arr = [10, 20, 30, 20, 40, 50, 50, 60];

var newArr = arr.indexOf(50);

var newArr1 = arr.indexOf(70);

console.log(newArr);
console.log(newArr1);

执行结果：

（2）数组.lastIndexOf( 查询的数据 )

             查询数值中有没有存储对应的数据数值

             如果有 返回 最后一个存储这个数据单元的索引下标

             如果没有 返回值 是 -1

var arr = [10, 20, 30, 20, 40, 50, 50, 60];

var newArr = arr.lastIndexOf(50);

var newArr1 = arr.lastIndexOf(70);

console.log(newArr);
console.log(newArr1);

执行结果：

数组的反转

    将数组单元的排序顺序反转

数组.reverse()；

var arr = [1,2,3,4,5];

arr.reverse();

console.log( arr );

执行结果：

数组转化字符串

     获取数据中的数据转化拼接为字符串

**（1）数组.join()； 获取单元的数值 以逗号为间隔 **

var arr = [1,2,3,4,5];

var str = arr.join();

console.log(str);

** 执行结果 ：**

（2）数组. join('间隔符'); 获取单元的数值 以设定的符号为间隔

var arr = [1,2,3,4,5];

var str = arr.join('~');

console.log(str);

执行结果：** **

（3）数组. join(''); 获取单元的数值 设定空字符串为间隔 字符之间是没有间隔的

var arr = [1,2,3,4,5];

var str = arr.join('');

console.log(str);

执行结果：

字符串转化数组

    将字符串中的字符，按照设定分割为数据数值存储到数组中

（1）字符串.split(); 将整个字符串作为一个整体 存储到数组中

var str = 'l~o~v~e';

var arr = str.split();

console.log(arr);

执行结果：

（2）字符串.split('间隔符'); 

     按照 间隔符号 将 字符串 分割为 数据数值 存储到数组中 

     分割之后数组中没有间隔符号存储

var str = 'l~o~v~e';

var arr = str.split('~');

console.log(arr);

执行结果：

（3）字符串.split(''); 将每一个字符串都分割为一个数据数值 存储到数组中

var str = 'l~o~v~e';

var arr = str.split('');

console.log(arr);

执行结果：

数组的排序

（1）数组.sort();

     按照数组单元数据的首字符的ascii码数值 由小到大 进行排序

var arr = [1,13,6,54,38,46,34,78,9,910,874];


arr.sort();

console.log(arr);

执行结果：

（2）数组.sort(function(参数1,参数2){ return 参数1-参数2 });

** 由小到大排列**

var arr = [1,13,6,54,38,46,34,78,9,910,874];

arr.sort(function(min,max){
    return min - max;
});

console.log(arr);

执行结果：

（3）数组.sort(function(参数1,参数2){ return 参数2-参数1 });

** 由小到大排列**

var arr = [1,13,6,54,38,46,34,78,9,910,874];

arr.sort(function(min,max){
    return max - min;
});

console.log(arr);

执行结果：

数组的拼接

数组.concat(); 不会改变原始数组中的内容

var arr1 = [1,2,3];

var arr2 = [4,5,6];

var arr3 = [7,8,9];

//将arr1,arr2,arr3拼接成一个新的数组
//不会改变 arr1  arr2 arr3 原始数组中的内容
var newArr = arr1.concat(arr2,arr3);

console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(newArr);

执行结果：

数组的截取

（1）数组.slice(参数);

      从设定的索引下标开始 截取至最后一个数组单元

var arr = ['I','L','O','V','E','Y','O','U'];

var newArr = arr.slice(1);

console.log(newArr);

执行结果：

（2）数组.slice(参数1，参数2); 

     从设定的索引下标(参数1)开始 截取至 设定的索引下标(参数2)

     但截取的结果 不包括 索引下标(参数2)单元的数据  

var arr = ['I','L','O','V','E','Y','O','U'];

var newArr = arr.slice(1,5);

console.log(newArr);

执行结果：

** 总结：**

以下7个方法都会直接改变原始数组：

首位新增 arr.unshift(数据1，数据2,...);

首位删除 arr.shift();

末位新增 arr.push(数据1，数据2,...);

末位删除 arr.pop();

数组指定单元的删除 arr.splice(参数1,参数2,其它所有参数);

反转数组 arr.reverse();

数组排序 arr.sort();

以下8个方法不会改变原始数组：

**数组的映射 arr.map(function(参数1,参数2,参数3){ return 参数1的操作 }) **

**数组的过滤 arr.filter(function(参数1,参数2,参数3){ return 参数1的判断比较 }) **

数组的判断 arr.some(function(参数1,参数2,参数3){ return 参数1的判断比较 }) 

                             ** arr.every(function(参数1,参数2,参数3){ return 参数1的判断比较 })**

**数组的查询 arr.**indexOf( 查询的数据 );

                              **arr.lastIndexOf( 查询的数据 )**

数组转化字符串 arr.join();

字符串转化数组 str.spilt();

数组的拼接 arr.concat();

数组的截取 arr.alice();

标签： 前端 开发语言 javascript
本文转载自: https://blog.csdn.net/weixin_58448088/article/details/122345453
版权归原作者 王昭没有君啊 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript数组相关知识”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航