数组的定义
-
字面量语法形式:
var 变量 = [数据1 , 数据2 , 数据3 ...]; 在[]中定义数组存储的数据单元; 数据单元可以是一个, 可以是多个; 多个数据单元用逗号隔开; 数组中可以存储所有JavaScript支持的数据结构. 数组构造函数定义: var 变量 = new Array(); -
索引下标:
JavaScript程序定义的数组单元编号(序号) 称为索引下标
它是从0开始的连续整数数值, 通过索引下标找到对应的数组单元, 调用/读取数组单元中存储数据数值.
语法形式是 : 数组[索引下标] 获取 对应的数据数值. -
length属性:
数组天生就有的属性 , 表示 数组的长度 也就是 数组单元个数.
数组的索引下标 是从 0 开始的连续整数 , 最后一个单元 的索引下标数值是 length数据-1
也就是 数组 索引下标的范围是 0 到 数组.length-1
数组的基本操作
- 数据的调用
通过数组的索引下标来获取指定数组单元存储的数据数值. - 数据的修改
通过数组的索引下标来对已经存在的索引下标对应的单元进行重复的赋值, 后赋值的数据会覆盖之前存储的数据, 执行效果就是修改数组单元存储的数据. - 数据的新增
通过数组的索引下标来对不存在的索引下标对应的单元进行赋值操作, 操作效果就是给数组新增单元 赋值存储的数据, 同时定义新增单元的索引下标.
<script>
// 定义数组
var arr = ['北京','上海','广州','深圳'];
// 通过[]取值语法来调用指定索引下标存储的数值
console.log(arr[2]) ; // 广州
console.log(arr[4]); // undefined
// 没有对应索引下标的调用结果是undefined
console.log(arr[3]); // 深圳
arr[3] = '郑州';
// 对数组中已经存在的索引下标中存储的数值进行修改, 重新赋值, 后面赋值的数据会覆盖之前赋值的数据
console.log(arr[3]); // 郑州
// 新增数据时, 索引下标必须和前面数组中的索引下标连续, 如果不连续,则会生成空单元
// 原始数组的最后一个单元的索引下标是length-1 , 新增的索引下标是最后一个索引下标+1, 即 数组.length
arr[arr.length] = '西安';
arr[arr.length] = 50;
console.log(arr);
// 最后 arr为 ['北京','上海','广州','郑州','西安',50]
</script>
数组的循环遍历
按照顺序操作数组中的所有单元称为数组的循环遍历.
for循环
<script>
//定义一个数组
var arr = ['北京','上海','广州','郑州','西安'];
// 通过for循环生成数值的所有索引下标
// 数组索引下标的范围是 0 - 数组.length-1
for(var i = 0 ; i<=arr.length-1;i++){
// 循环变量i 的数值 就是 0 1 2 3 4 ,也就是数组单元所有的索引下标
// arr[i] 就是通过0 1 2 3 4 每一个索引下标获取对应的数据数值.
console.log(arr[i]);
}
</script>
for…in循环
for(var 变量 in 数组){ }
- 变量中存储数组单元的索引下标
- 数组[变量] 获取索引下标对应的单元的数据数值.
// for...in循环
for(var index in arr){
// JavaScript程序自动对数组进行遍历
// 变量index存储的是数组的索引下标
// 每循环一次, 将数组的索引下标存储在变量中
// 数组[变量] 获取单元中的数据数值
console.log(arr[index]);
}
for…of循环
for( var 变量 of 数组){ }
变量中存储数组单元的数据数值.
//for...of循环
// JavaScript程序自动对数组进行遍历
// 每循环一次, value 存储对应的数据数值
for(var value of arr){
console.log(value);
}
forEach循环
数组.forEach ( function(参数1, 参数2, 参数3){ })
参数1存储数组的数据数值
参数2存储数组的索引下标
参数3存储数组的原始数组内容
// forEach 循环
arr.forEach(function(value, key,array){
console.log(value, key,array);
// value是数据数值, key是索引下标, array是原始数组的内容
- 在实际项目中, 推荐使用 for循环遍历数组执行效率最高,
- for循环, or…in , for…of 支持break终止.
- 特殊情况下, 可以使用for…in , for…of
( 其中for…in 是唯一可以循环遍历对象的语法形式. ) - forEach的执行效率最低,但是可以同时获取数据数值和索引下标操作比较方便, forEach不支持break语句.
数组的函数方法
JavaScript程序给数组定义了很多的函数方法, 是操作数组的程序.
JavaScript已经定义好了 我们直接调用就可以了.
JavaScript中ES5的函数操作语法:
-
1, 数组的映射
数组.map(function(参数1,参数2,参数3){return 参数1的操作})
就是将数组中每一个单元的数据执行相同的操作生成一个新的数组。
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储数组单元的原始数据数组的映射不会改变原始数组的数据数值 可以定义变量存储新的数组
var arr = [100,200,300,400,500];
// 数组的映射
var arr1 = arr.map(function(value){
// 通过 return 定义 对 原始数组单元数据的映射操作
return value*3;
})
console.log(arr1);
// 输出结果: [300, 600, 900, 1200 ,1500]
-
2, 数组的过滤
数组.filter(function(参数1,参数2, 参数3){return 参数1判断比较})
将数组中的每一个单元执行判断比较, 将符合条件的数据生成一个新的数组.不会改变原始数组的数据数值 可以定义变量存储新的数组
var arr = [100,200,300,400,500];
// 数组的过滤
var arr2 = arr.filter(function(value){
return value>200;
})
console.log(arr2); // 输出结果 : [300, 400, 500]
- 3, 数组的判断
数组.some(function(参数1,参数2,参数3){ return 参数1的判断比较 })
将数组中每一个单元执行判断比较 只有要符合条件的数据 返回值就是 true
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组
var arr = [100,200,300,400,500];
// 数组的判断
var arr3 = arr.some(function(value){
return value > 200;
})
console.log(arr3); // 输出结果: true
- 4, 数组的判断
数组.every(function(参数1,参数2,参数3){ return 参数1的判断比较 })
将数组中每一个单元执行判断比较 必须所有的数据都符合条件 返回值就是 true
参数1 存储数组单元的数值数据
参数2 存储数组单元的索引下标
参数3 存储原始数组
var arr = [100,200,300,400,500];
var arr4 = arr.every(function(value){
return value>100; //100不符合要求
})
console.log(arr4); // 输出结果: false
数组的新增和删除
新增:
首位新增:
数组.unshift(数据1,数据2...)
末位新增:
数组.push(数据1,数据2...)
首位新增/末位新增 一次可以新增一个数据单元/多个数据单元, 多个数据单元用逗号隔开
新增数组单元函数的执行结果返回值是 新增单元之后的新数组的长度, 也就是length的属性值.
删除:
首位删除
数组.shift()
末位删除
数组.pop()
删除数组单元一次只能删除一个单元
删除数组单元函数的执行结果返回值是 删除单元存储的数据数值.
var arr = [100,200,300,400,500];
//首位新增
var res1 = arr.unshift('郑州',10);
console.log(res1); // 输出结果: 7
//末位新增
var res2 = arr.push('您好',true);
console.log(res2); // 输出结果: 9
console.log(arr); // 输出结果: ['郑州',10,100,200,300,400,500,'您好',true]
//首位删除
var res3 = arr.shift();
console.log(res3); // 输出结果: 郑州
//末位删除
var res4 = arr.pop();
console.log(res4); // 输出结果: true
console.log(arr); // 输出结果:[10,100,200,300,400,500,'您好']
数组指定单元的删除
数组.splice(参数1, 参数2, 其他所有参数);
参数1 删除单元起始位置的索引下标
参数2 删除单元的个数
其他所有的参数 替换出现在删除单元的位置上 , 可以替换写入一个数据, 也可以替换写入多个数据
var arr = [10,100,200,300,400,500,'您好'];
// 删除100-500 这5个数, 并替换为 北京,深圳,广州
var res5 = arr.splice(1,5,'北京','深圳','广州');
console.log(res5); // 输出结果: [100, 200, 300, 400, 500]
console.log(arr); //输出结果: [10, '北京', '深圳', '广州', '您好']
数组的查询
查询数组单元中有没有存储这个数据数值
1, 数组.indexOf(查询的数据)
查询数值中有没有存储对应的数据数值
如果有, 返回第一个存储这个数据单元的索引下标 , 如果没有, 返回值为-1
2, 数组.lastIndexOf(查询的数据)
查询数值中有没有存储对应的数据数值
如果有, 返回最后一个存储这个数据单元的索引下标 , 如果没有, 返回值为-1
var arr = [1,2,3,2,3,1,3,2,1];
// 数组的查询
var res1 = arr.indexOf(2);
console.log(res1); // 输出结果: 1 (就是第一个存储2这个数据的索引下标)
var res2 = arr.indexOf('2');
console.log(res2); // 输出结果: -1 (因为数组中没有字符串2, 所以返回-1)
var res1 = arr.lastIndexOf(2);
console.log(res1); // 输出结果: 7 (就是最后一个存储2这个数据的索引下标)
var res2 = arr.lastIndexOf('2');
console.log(res2); // 输出结果: -1 (因为数组中没有字符串2, 所以返回-1)
数组的反转
将数组单元的排序顺序反转
数组.reverse()
var arr = [0,1,2,3];
arr.reverse();
console.log(arr); // 输出结果: [3,2,1,0]
数组的截取
数组.slice(参数);
从设定的索引下标开始, 截取至数组的最后一个单元
数组.slice(参数1,参数2);
从参数1设定的索引下标开始, 截取至参数2设定的索引下标 截取的结果, 不包括参数2索引下标单元的数据
var arr = [1,2,3,4,5,6];
var res1 = arr.slice(2);
console.log(res1); // 输出结果: [3, 4, 5, 6]
console.log(arr); // 输出结果: [1, 2, 3, 4, 5, 6]
var res2 = arr.slice(2,5);
console.log(res2); // 输出结果: [3, 4, 5]
console.log(arr); // 输出结果: [1, 2, 3, 4, 5, 6]
数组的排序
1, 数组.sort()
按照数组单元数据的首字符的ASCII码数值小到大进行排序
2, 从小到大
数组.sort(function(参数1,参数2){return 参数1-参数2})
3, 从大到小
数组.sort(function(参数1,参数2){return 参数2-参数1})
var arr = [5,4,8,9,41,12,99,10];
// 按照首字符排序
arr.sort();
console.log(arr); //输出结果: [10, 12, 4, 41, 5, 8, 9, 99]
//按照从小到大排序
arr.sort(function(a,b){
return a-b;
})
console.log(arr); //输出结果: [4, 5, 8, 9, 10, 12, 41, 99]
//按照从大到小
arr.sort(function(a,b){
return b-a;
})
console.log(arr); //输出结果: [99, 41, 12, 10, 9, 8, 5, 4]
数组的拼接
数组.concat()
拼接可以拼接两个数组的, 也可以拼接多个数组的.
var arr1 = [0,1,2];
var arr2 = [3,4,5];
var arr3 = [6,7,8,9];
// 将arr1 arr2 arr3 三个数组中的数值数据拼接到一个新的数组, 不会改变arr1 arr2 arr3 中原始的数据数值
var arr = arr1.concat(arr2,arr3);
console.log(arr); // 输出结果: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1); // 输出结果: [0,1,2]
console.log(arr2); // 输出结果: [3,4,5]
数组和字符串的转换
数组 -> 字符串
获取数据中的数据转化拼接为字符串
(1) 数组.join()
获取数组单元的数据数值,拼接生成字符串
数组单元的数值以没有设定的符号,以逗号为间隔
(2) 数组.join('-')
获取数组单元的数据数值,拼接生成字符串
数组单元的数值以设定的符号 - 为间隔
(3)数组.join('')
获取数组单元的数据数值,拼接生成字符串
数组单元的数值以设定的符号为空字符串,字符之间效果没有间隔
字符串 -> 数组
将字符串中的字符按照设定分割为数据数值存储到数组中
(1) 字符串.split()
将整个字符串作为一个整体存储到数组中
(2) 字符串.split('间隔符号')
按照间隔符号将字符串分割为数据数值存储到数组中, 分割之后数组中没有间隔符号存储
(3)字符串.split('')
每个字符串都分割为一个数据数值存储到数组中
// 数组转字符串
var arr = [6,7,8,9,10];
//没有设定间隔符号
var res1 = arr.join();
console.log(arr); // 这里的arr 还是数组, 不会变成字符串
console.log(res1); // 新定义的变量res1 里面存储的数据数值是 字符串 , 输出结果: 6,7,8,9,10
// 设定间隔符号
var res2 = arr.join('-');
console.log(res2); // 输出结果: 6-7-8-9-10
//设定间隔符号为空字符串
var res3 = arr.join('');
console.log(res3); // 输出结果: 678910
// 字符串转数组
var str = 'a-b-c-d-e';
// 没有设定间隔符号
var arr1 = str.split();
console.log(arr1); //输出结果: ['a-b-c-d-e']
//设定间隔符号-
var arr2 = str.split('-');
console.log(arr2); //输出结果: ['a', 'b', 'c', 'd', 'e']
// 就是这里的间隔符号必须要与字符串中字符有一样的,才能分割开存储, 只是分隔开的字符串中的字符没有与间隔符号一样的
//设定间隔符号为空字符串
var arr3 = str.split('');
console.log(arr3); // 输出结果: ['a', '-', 'b', '-', 'c', '-', 'd', '-', 'e']
数组的坍塌
数组的坍塌:
数组在执行删除操作时, 删除数组单元后, 后面的单元会向前移动, 出现在删除单元的位置上, 造成数组长度减少的现象, 称为数组的坍塌.
数组坍塌造成的影响:
只要数组执行删除操作, 立即会触发数组的坍塌, 数组坍塌不能阻止, 只能清除数组坍塌造成的影响.
<script>
var arr = [1,1,1,2,2,2,3,3,3,4,4,4,5,4,3,2,1,5,8,9,4,6,];
// 数组的排序
arr.sort(function(a,b){
return a-b;
})
console.log(arr); //输出结果: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 6, 8, 9]
// 循环遍历数组
// 当前的单元 和 下一个单元 进行数据的比较判断
// 最后一个单元没有下一个单元进行比较判断, 所以循环到倒数第二个单元就可以了,
for(var i = 0 ; i<=arr.length-1-1 ; i++){
if(arr[i] === arr[i+1]){
// 从 i+1 也就是当前单元的下一个单元开始删除,
arr.splice(i+1 , 1);
// 防止数据坍塌造成的影响
i--;
}
}
console.log(arr);
</script>
4445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
