数组
数组可以把一组相关数据一起存放,并提供方便的访问获取方式
注意:
-
js的数组不是典型的数组
-
js数组元素的数据类型可以不同
-
js数组元素内存不一定是连续的
-
不能通过数字下标访问,而是通过字符串下标访问,最终都会被转换成字符串
-
数组可以有任意key
let arr = [1,2,3] arr['xxx'] = 4;
数组的创建
1、利用new关键字创建数组
var arr = new Array(1,2,3); // 元素1,2,3
var arr = new Array(3); //数组长度为3
2、利用数组字面量创建数组
// 利用数组字面量方式创建空的数组
var 数组名 = [];
// 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑'];
3、转化
let arr = '1,2,3'.split(','); //用够好分隔字符串,并返回一个数组
let arr = '123'.split('');
Array.from('123') // 新增特性,从什么地方得到一个数组 // ['1','2','3']
Array.from({0:'a',1:'b',2:'c',3:'d',length:4}) // 对象变成数组
// 使用条件 有0,1,2...下标,并且拥有length属性 ,如果length和实际长度不相同以length为准
4、合并
// 将arr1和arr2进行合并,返回一个新数组
arr1.concat(arr2)
// 评价数组元素
arr.join()
5、截取一个数组的一部分
// slice从数组切下来一部分,生成一个新数组,原数组不变
arr1.slice(1) // 从第二个元素开始
arr1.slice(0) // 全部截取
// 注意js只提供浅拷贝
注意:
-
数组里面的数据可以是不同的数据类型
-
伪数组的原型链中没有数组的原型
let divList = document.querySelectorAll('div'); // 获取出来的domlist是一个伪数组不具有数组的方法 let array = {0:'a',1:'b',2:'c',3:'d',length:4} // 没有数组原型
数组的访问
// 使用索引访问数组元素的序号(下标从0开始)
var arr = ['小白','小黑','小红']
arr[1]; // 获取数组的第二个数据,即小黑,这里arr[1]会被自动的转换成arr['1']
// 查看元素是否数组中
arr.indexOf(item) // 存在返回索引值,不存在返回-1
// 使用条件查找元素
arr.find(item => item % 2 === 0) // 找出第一个偶数
item => item % 2 === 0 //ES6新语法,等价于
function(item){
return x%5 === 0;
}
// 使用条件查找元素的索引
arr.findIndex(item => item% 2 === 0)
注意:超过索引会返回undefined(索引越界)
数组的删除
// 使用delete
let arr = ['a','b','c'];
delete arr['0'] // 删除的是第一个元素的值(变成empty),长度不会改变
// 只有长度没有对应的下表的数组称为稀疏数组
// 使用length删除元素
let arr = [1,2,3,4,5]
arr.length = 3; // arr:[1,2,3]
// 尽量不要使用length删除
// array.shift() 删除首个元素
// array.pop() 删除末尾元素
// array.splice(index,number,value1,value2,...)
// index是删除位置
// number 删除数量
// value1,value2....删除后插入的值
数组的插入
// 使用数组下标进行增加
arr[length] // 在末尾增加一个元素
// 头部增加元素
arr.unshift('xxx','yyy')
// 尾部增加元素
arr.push('xxx','yyy')
// 中间插入元素
arr.splice(index,0,'x','y') // 在索引为值删除0个,插入x,y
数组的遍历
// 当规定数组下表为0~length-1时可用的方法
for(let i = 0; i < arr.length - 1; i++){
console.log(`${i}:${arr[i]}`)
}
// 当数组下标不是从0~length-1时可用的方法,使用属性名 for in 遍历
let arr = ['小白','小黑','小红','小绿']
for(let key in arr){
console.log(`${key}:${arr[key]}`)
}
// 使用forEach方法
arr.forEach(function(item,index){ // item当前元素,index当前元素的索引
console.log(`${index}:${item}`);
})
数组的排序
// 反转数据
arr.reverse() // 反转数组
// 自定义排序
arr.sort((a,b)=>a-b) // 从小到大
arr.sort((a,b)=>{b-a}) // 从大到小
// sort完整写法 //
arr.sort(function(a,b){
if(a>b){ // 规则 升序
return 1; // 大于0 b会被排在a前面
}else if(a===b){
return 0; // 等于0 相对位置不变
}else{
return -1; // 小于0 a会被排到b之前
}
})
// 注意!!!
// 如果是字符串的话,会按照字母序进行排序
数组变换
// n变n
arr.map(function()) // 对数组中的每一项调用function
// n变少/n不变
arr.filter(判定条件) // 保留满足条件的数组远元素,判定条件为真则保留
// filter 过滤
// n变1
arr.reduce(function reducer(sum, money),initValue) //将数组中的元素依次执行reducer,每次reducer会将先前元素计算的结果作为第一个参数传入,最后将其结果汇总为单个返回值
// 第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。
let arr = [1,2,3,4,5,6]
// 每次都把当前元素的平方和之前的数据拼成一个数组,然后返回这个数组,初始值是一个空数组
arr.reduce((result,item)=>{return result.concat(item*item)},[])
// 获取偶数,将其拼成一个数组
arr.reduce((result,item)=>{return result.concat(item%2===0 ? item : [])},[])
// 以上操作均不会改变原数组