wangjie-fourth 的个人博客

记录精彩的程序人生

目录
JS数组对象
/    

JS数组对象

JS数组是一种对象,不是一种数据类型;其内存的表示如下:
image.png

数组中的0、1......其实相当于对象的key

数组常用操作

1、创建数组

(1)新建

let arr = [1,2,3];
let arr = new Array(1,2,3);
let arr = new Array(3);

(2)转化

let arr = '1,2,3'.split(',');
let arr = '1,2,3'.split('');
Array.from('123');//将非数组对象转换为数组对象,主要用于将伪数组转换为数组

(3)伪数组
没有数组共用属性的数组就是伪数组,也就是看起来像数组,但是它原型不是数组原型的对象称为伪数组。注意:通过需要将伪数组转换为数组之后Array.from(),再使用。

let divList = document.querySelectorAll('div');// 他的运行是其他原型
let arr = {0:'a',1:'b',length:2};    //他的原型是object的原型
// 伪数组的原型链并没有数组的原型

(4)合并数组

arr1.concat(arr2);

(5)截取数组

arr1.slice(1)//从第二个元素开始
arr1.slice(0)//全部截取

JS只提供浅拷贝。如何去深拷贝?

2、删除元素

(1)shift:删除第一个元素

let arr = ['a','b','c'];  
arr.shift()
arr;//['b','c']

(2)pop:删除最后一个元素

let arr = ['a','b','c'];  
arr.pop();
arr;//['a','b']

(3)splice

let arr = ['a','b','c'];  
arr.splice(index, 1)//删除自index开始的一个元素
arr.splice(index,1,'x');//并在删除添加`x`
arr.splice(index, 1, 'x', 'y');//并在删除位置添加`x`、`y`
arr;//['a','b']

(4)数组就是对象,所以它删元素跟对象一样。

let arr = ['a','b','c'];
delete arr['0'];
consloe.log(arr)//[empty,'b','c']

注意此时数组长度并没有改变,所以不推荐这种方式

3、遍历数组

(1)通过length获取

for(let i = 0; i<arr.length ;i++){
    console.log(`${i}:${i}`)  
}
// 使用forEach、map等原型上的函数
arr.forEach(function(item, index){
    console.log(`${index}:${item}`)  
})

使用for循环可以使用break、continue;而forEach不可以

(2)对象方式获取所有属性名:不推荐

let arr = [1,2,3,4,5];
arr.x = 'xxx';
Object.keys(arr);//获取数组的所有keys
Object.values(arr);//获取数组的所有values;
for(let key in arr){
    console.log(`${key}:${arr[key]}`)  
}

4、查看单个属性

(1)与对象一致

let arr = [111,222,333];
arr[0]

(2)索引越界

arr[arr.length] === undefined;

比如:
image.png
这个报错并不是说toStringundefined,而是说arr[length]undefined
(3)查找某个元素是否在数组里

arr.indexOf(item)//存在返回索引,否则返回-1

(4)使用条件查找元素

arr.find(item => item%2 === 0);//找第一个偶数

(5)使用条件查找元素的索引

arr.findIndex(item => item % 2 === 0);//找第一个偶数的索引

5、增加数组元素

(1)在尾部添加元素

arr.push(newItem);//修改arr,返回新长度
arr.push(item1, item2);// 修改arr,返回新长度

(2)在头部加元素

arr.unshift(newItem);
arr.unshift(item1, item2)

(3)在中间添加元素

arr.splice(index,0,'x');在index处插入'x'
arr.splice(index,0,'x,'y')

(4)不要使用对象的方式增加

    arr[100]=100;  

6、修改数组

(1)反转顺序

    arr.reverse();//修改原数组  

如何将一个字符串反转过来?s.split('').reverse().join()

(2)自定义顺序
特别适用于数组对象排序

    arr.sort((a,b) => a-b)  

数组变化

(1)mapn => n

(2)filtern => boolean

(3)reducen => 1

arr.reduce((sum, item) => {return sum+item}, 0);
arr.reduce((result, item) => {return result.concat(item * item)},[]);

面试题

1、将下面数组转成指定的对象

let arr = [
    {name: '动物', id: 1, parent: null},  
    {name: '狗', id: 2, parent: 1},  
    {name: '猫',id: 3, parent: 1}  
]
变成
{
    id:1, name: '动物', children:[
        {name: '狗', id: 2,children: null},  
        {name: '猫',id: 3,children: null}  
    ]  
}

image.png
注意:要return result

评论