JavaScript 数组

112 阅读4分钟

数组

数组可以把一组相关数据一起存放,并提供方便的访问获取方式

注意:

  • 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 : [])},[])
// 以上操作均不会改变原数组