目录
一、数组的概念
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]); //调用结果 undefined2.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();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
