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