JS数组

WilliamWang123
129 阅读4分钟

JS数组

1.创建一个数组,数组中可以存放任意类型的数据，例如字符串，数字，布尔等
    let arr = [1,2,3];
    let arr = new Array(1,2,3); // A要大写
    let arr = new Array(3); //只有一个参数时候length长度为3

2.转化为数组
    let arr = '1,2,3'.split(',') // 以逗号为分割成为一个数组
    let arr = '123'.split('') // 以空字符串形式分割成为一个数组
    let arr = Array.from('abc') // 需要满足(是否有0,1,2等下标，是否有length属性)有就可以尝试变成数组


3.把伪数组变成数组

伪数组：如果一个数组的原型链中没有那些数组所共有的属性，那么这个数组就是伪数组（没有数组共用属性的数组就是伪数组）

    let divList = document.getElementsByTagName('div');
    let arrDiv = Array.from(divList);
    console.log(arrDiv);

4.arr1.concat(arr2)合并数组
    let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    let arr3 = arr1.concat(arr2); // 得出来是新的一个数组，不会改变原来数组

5.slice()截取数组
    let arr1 = [1,2,3,4,5,6];
    let arr2 = arr1.slice(2); // 从第三个元素开始。=> [3,4,5,6] 会得到一个新的数组，不会改变原来数组
    let arr3 = arr1.slice(0); // 截取整个数组(复制数组) => [1,2,3,4,5,6]
    let arr4 = arr1.slice(2,5) // => [3,4,5] 从索引2到索引5(不包括索引5)

数组的增删改查

数组是一种特殊的对象，对象怎么删，数组就怎么删

删（修改原数组）

let arr = [1,2,3,4,5];
delete arr[0];
console.log(arr); // [empty,2,3,4,5],数组的长度并没有变

let arr = [1,2,3]
arr.length = 1; 
console.log(arr); // [1],直接改length长度也可以删，但是不要随便改length

不推荐用以上方法删，用下面的方法删

1.删除头部元素
    arr.shift() // arr被修改，并返回被删元素

2.删除尾部元素
    arr.pop() // arr被修改，并返回被删元素

3.删除中间的元素
    arr.splice(index,num) // index从第几个开始，num删除多少个
    arr.splice(index,num,x,y) index从第几个开始，num删除多少个，添加x,y上去

查看元素

  let arr = [1,2,3,4,5];
       arr.x = 'xxx';
1.查看所有属性名
        Object.keys(arr); // 键名
        Object.values(arr)； // 键值
        
        for(let key in arr){
            console.log(`${key} : ${arr[key]}`)  // for...in 不仅会遍历数组所有的数字键，还会遍历非数字键
        }

2.查看数字属性名和值
        for(let i = 0;i < arr.length;i++){
                console.log(`${i} : ${arr[i]}`)  // 遍历数字键
        }

        arr.forEach(function(key,value){
                console.log(`${key} : ${value}`)
        })

3.查找某个元素是否在数组里
        arr.indexOf(3); 存在返回索引，不存在返回-1

4.使用条件查找元素
        arr.find(function(x){   // find元素找到满足条件的即停止,返回那个值
            return x % 2 === 0
        });

5.使用条件查找元素的索引
        arr.findIndex(function(x){  // findIndex元素找到满足条件的即停止，返回索引
            return x % 2 === 0
        })

增加数组中的元素（修改原数组）

  let arr = [1,2,3,4,5];
  
1.在尾部加元素
    arr.push(newItem) // 修改arr,返回新长度
    arr.push(item1,item2) // 修改arr,返回新长度

2.在头部加元素
    arr.unshift(newItem) // 修改arr,返回新长度
    arr.unshift(item1,item2) // 修改arr,返回新长度
    
3.在中间添加元素

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

数组中排序（修改原数组）

反转顺序

let arr = [1,2,3,4,5]
arr.reverse() // [5,4,3,2,1]

自定义顺序：arr.sort((a,b)=>a-b)

 let arr = [{name:'小明', score:98},
            {name:'小红', score:94},
            {name:'小刚', score:91}];

       //  1.a减b的值是正数则是从小到大排序，负数则从大到小排序
      // 2.a和b是arr里面随机一项，一直会比较完

        arr.sort(function(a,b){
            return a.score - b.score;
        });
console.log(arr); 

// 打印结果

(3) [{…}, {…}, {…}]
0: {name: "小刚", score: 91}
1: {name: "小红", score: 94}
2: {name: "小明", score: 98}
length: 3
__proto__: Array(0)

数组变换

let arr = [1,2,3,4,5,6];

1.map()方法创建一个新数组，其结果是该数组中的每一个元素都调用一个提供函数后返回结果
        arr.map(function(item,index,arr){
            return item * item
        });

2.filter()方法，是true就返回，否则就筛选掉
        arr.filter(function(item,index,arr){
            return item % 2 === 0;
        });

3.reduce()方法
        1.initial代表初始值(可以设置任意自己想要的数据类型)
        2.item是数组中的值，从下标0开始
        arr.reduce(function(initial,item){
                return  "自己想要的东西"
        },initial);

        案例1
        arr.reduce(function(sum,item){
                return sum+item
        },0)

        案例2
        arr.reduce(function(result,item){
                return result.concat(item*item);
        },[]);


面试题

let arr = [
    { 名称: "动物", id: 1, parent: null },
    { 名称: "狗", id: 2, parent: 1 },
    { 名称: "猫", id: 3, parent: 1 }
  ];

  变成
    {
    id : 1,
    名称 : '动物',
    children : [
    {id:2,名称:'狗',children:null},
    {id:3,名称:'猫',children:null}
    ]
    }
avatar
文章
阅读
粉丝