美文网首页
JS数组的相关知识

JS数组的相关知识

作者: 云卷云舒听雨声 | 来源:发表于2020-03-21 18:54 被阅读0次

    首先要明确一点,JS其实没有真正的数组,只是用对象来模拟数组。以下是典型数组与JS数组之间的不同。

    典型的数组
    • 元素的数据类型相同
    • 使用连续的内存存储
    • 通过数字下标获取元素
    JS数组
    • 元素的数据类型可以不同
    • 内存不一定是连续的(对象是随机存储的)
    • 不能通过数字下标,而是通过字符串下标
      例如
    let  arr  =  [1,2,3]
    arr ['xxx'] = 1
    

    创建数组

    新建一个数组

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

    把不是数组的转化成为一个数组
    可以利用split()方法
    split()方法通过在指定分隔符字符串的每个实例处分离字符串,将String转换为字符串数组.

    let  arr = '1,2,3'.split(',')
    
    let  arr = '123'.split('')
    
    Array.from('123')
    

    合并两个数组,得到新的数组

    arr1.concat(arr2)
    

    截取一个数组的一部分

    arr1.slice(1)     //注意是从第二个元素开始的
    
    arr1.slice(0)   //全部拷贝
    

    扩展

    伪数组 : 没有数组共用属性的数组,即伪数组的原型链中并没有数组的原型。
    例如

    let   divList = document.querySelectorAll('div')
    

    增删改查(指的是数组中的元素)

    删除元素

    删除元素与删除对象的方法差不多,只不过删除数组中的元素之后数组的长度并没有什么变化
    例如:运行以下代码

    let  arr = ['a','b','c']
    delete arr['0']
    

    会得到这样的结果


    虽然删除了第一个元素,但是在第一个元素的位置上有一个empty元素,数组的长度其实并没有改变。
    所以基于此,一般采取这样的方式来进行数组元素的删除操作

    • 删除头部元素
    arr.shift()    //arr被修改,并返回被删元素
    
    • 删除尾部元素
    arr.pop()   //arr被修改,并返回被删元素
    
    • 删除中间元素
      例如
    let  arr = [1,2,3,4,5]
    arr.splice(2,1)         //删除arr数组中位置是2的一个元素
    arr.splice(2,1,'x')    //并在删除位置添加'x'
    arr.splice(2,1,'x','y')   //并在删除位置添加'x','y'
    

    查看所有元素

    • 查看所有属性名
    let   arr = [1,2,3,4,5];   arr.x = 'xxx'
    
    Object.keys(arr)
    
    for(let  key  in  arr){console.log(`${key}:${arr[key]}`)}
    
    • 查看数字(字符串)属性名和值
    for(let  i = 0;i<arr.length;i++){
           console.log(`${i}:${arr[i]}`)
    }
    

    注意:要自己让i从0增长到length-1

    • 也可以用forEach/map等原型上的函数
    arr.forEach(function(item,index){
         console.log(`${index}:${item}`)
    })
    

    查看单个属性

    • 跟对象一样
    let   arr = [111,222,333]
    arr[0]
    

    (这样写的话一般会出现问题)

    • 索引越界
    arr[arr.length] ===undefined
    arr[-1] ===undefined
    

    例如:如下代码

    for(let  i=0; i<=arr.length; i++){
       console.log(arr[i].toString())
    }
    

    会出现报错 : Cannot read property 'toString' of undefined
    意思如下:你读取了undefined的toString属性,不是toString是undefined

    注意 : x.toString()其中x如果是undefined就报这个错。

    所以一般采取如下方式进行单个元素的查看

    • 查找某个元素是否在数组里
    arr.indexOf(item)    //存在返回索引,否则返回-1
    
    • 使用条件查找元素
    arr.find(item => item % 2 ===0)    //找第一个偶数
    
    • 使用条件查找元素的索引
    arr.findIndex(item => item % 2 ===0)   //找第一个偶数的索引
    
    扩展
    function  forEach(array,fn){
         for(let   i=0;  i<array.length;i++){
             fn(array[i] , i , array)
        }
    }
    
    • forEach用for访问array的每一项
    • 对每一项调用fn(array[i], i , array)

    增加数组中的元素

    • 在尾部加元素
    arr.push(newItem)   //修改arr,返回新长度
    
    arr.push(item1,item2)    //修改arr,返回新长度
    
    • 在头部加元素
    arr.unshift(newItem)   //修改arr,返回新长度
    
    arr.unshift(item1,item2)    //修改arr,返回新长度
    
    • 在中间添加元素
    arr.splice(index,0,'x')       //在index处插入'x'
    
    arr.splice(index,0,'x','y')
    

    修改数组中的元素

    • 反转顺序
    arr.reverse()     //修改原来数组
    
    • 自定义顺序
    arr.sort((a,b) => a-b)
    

    数组变换

    • map : n变n
      通过arr.map把数字变成星期
    let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
    let arr2 = arr.map(item=>{return{0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',6:'周六'}[item]})
    console.log(arr2)
    
    • filter : n变少
      通过filter找出所有大于 60 分的成绩
    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let scores2 = scores.filter(item=>item-60>0?true : false)
    console.log(scores2)
    

    或者

    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let scores2 = scores.filter(n => n>= 60)
    console.log(scores2) //  [95,91,82,72,85,67,66, 91]
    
    • reduce : n变1
      通过reduce算出所有奇数之和
    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let sum = scores.reduce((sum, n)=>{
     if(n%2===1){
       return sum+n
     }else{
       return sum
     }
    },0)
    console.log(sum)
    

    或者可以这样写

    let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
    let sum = scores.reduce((sum, n)=>{
      return n%2===0?sum:sum+n
    },0)
    console.log(sum) // 奇数之和:598 
    

    相关文章

      网友评论

          本文标题:JS数组的相关知识

          本文链接:https://www.haomeiwen.com/subject/bunyyhtx.html