JavaScript数组相关知识

Posted 2022-02-03 王昭没有君啊

一、数组的概念

1.1 定义：

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

数据存储类型不同：

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

       var num = 20;

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

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

 1.2 数组的定义方式：

/*
    字面量语法形式

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

    构造函数定义数组

        var 变量 = new Array(); 
*/

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

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

1.3 数组的索引下标和长度：

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] = '成都';

2.1 数组的调用：

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

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

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

//没有对应的索引下标 

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

2.2 数组的修改：

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

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

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

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

2.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的函数操作语法

4.1 数组的映射

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

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

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

语法：

数组.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);

执行结果：

4.2 数组的过滤

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

语法：

数组.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);

执行结果：

4.3 数组的判断   

（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);

执行结果：

 常用的数组函数方法

 4.4 首位新增

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

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

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

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

执行结果：

4.5 首位删除

 数组.shift();

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

var newArr = arr.shift();

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

执行结果

        

4.6 末位新增

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

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

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

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

执行结果：

   

4.7 末位删除

数组.pop();

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

var newArr = arr.pop();

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

执行结果：

总结新增和删除：

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

                                             返回值是 新数组的length

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

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

4.8 数组指定单元的删除

数组.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);

执行结果：

4.9 数组的查询

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

（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);

执行结果：

4.10 数组的反转

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

数组.reverse()；

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

arr.reverse();

console.log( arr );

执行结果：

4.11 数组转化字符串

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

（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);

  执行结果：

4.12 字符串转化数组

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

（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);

执行结果：

4.13 数组的排序 

（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);

执行结果：

4.14 数组的拼接 

数组.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);

执行结果：

 4.15 数组的截取

（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();