JS数组不是典型的数组

典型的数组

  • 元素的数据类型相同
  • 使用连续的内存存储
  • 通过数字下标获取元素

JS数组

  • 元素数据类型可以不同
  • 内存不一定连续（对象是随机存储）

  • 不能通过数字下标，而是字符串下标，所以数组可以有任意key

    语法

  • 新建

    1. let arr = [1,2,3];
    2. let arr = new Array(1,2,3);    //正式写法
    3. let arr = new Array(3)    //创建一个length为3的数组

  • 转化

    • 字符串转数组

      1. let arr = '1,2,3'.split(',');
      2. let arr = '123'.split('');
      3. Array.from('123')
      4. Array.from({0:'a',1:'b',length:2})

    • 数组转字符串

      1. let arr = [1,2,3];
      2. arr.join('')

  • 伪数组

    • 伪数组的原型链中没有数组的原型
      1. let divList = document.querySelectorAll('div');
      2. divList.push(4)   //divList.push is not a function

  • 合并 concat (得到一个新数组)

    1. let arr1 = [1,1,1];
    2. let arr2 = [2,2,2];
    3. arr1.concat(arr2)    //[1,1,1,2,2,2]

  • 截取 slice (得到一个新数组)

    • slice(1) 从第一位开始截取
    • slice(1,3) 第1位截取到第3位
    • slice(0) 复制 ```javascript let arr = [1,2,3,4,5]; arr.slice(1) //[2,3,4,5] arr.slice(1,3) //[2,3]

let arr2 = arr.slice(0)

  1. <a name="AwIxf"></a>
  2. # 增删改查
  3. <a name="A6eRm"></a>
  4. #### 增
  6.    - 在开头添加 **arr.unshift**  （修改原数组，返回新长度）
  7.    - 在尾部添加 **arr.push()**   （修改原数组，返回新长度）
  8.    - 在中间添加 **arr.splice(index,0,'xxx')**  （修改原数组）
  9. ```javascript
  10. let arr = [1,2,3,1,2,3];
  11. arr.splice(3,0,'添加')  
  12. arr   //[1,2,3,'添加',1,2,3]

删

  • 删除开头 arr.shift() （修改原数组，返回新长度）
  • 删除尾部 arr.pop() （修改原数组，返回新长度）

  • 删除中间 （修改原数组）

    • arr.splice(index,1) 删除索引处一位
    • arr.splice(index,1,’x’) 删除索引处一位并在删除位置添加
    • arr.splice(index,1,’x’,’y’) 删除索引处一位并在删除位置添加
      1. let arr = [1,2,3,1,2,3];
      2. arr.splice(3,1,'添加')  
      3. arr   //[1,2,3,'添加',2,3]

  • 数组中的方法 delete

    1. let arr = [1,2,3];
    2. delete arr[0]
    3. arr   //[emprty,2,3]  数组长度不变,稀疏数组

  • 修改 length (不建议使用)

    • arr.length = 2

改

  • 反转顺序 arr.reverse （修改原数组）

  • 自定义顺序 arr.sort((a,b) => {}) 正数b在前排列 负数a在前排列 a-b(升序) b-a(降序)

    1. let arr = [5,1,3];
    2. arr.sort((a,b) => {
    3. return a-b    //        默认升序
    4. })
    5. //  [1,3,5]
    6. arr.sort((a,b) => b-a)
    7. //  [5,3,1]

  • map **n变n**

    • 修改每一个值
      1. let arr = [1,2,3];
      2. arr.map(ele => ele + 1)   //ES6语法糖 等同于arr.map(function(ele){return ele + 1})
      3. //[2,3,4]

  • filter **n变少**

    • 过滤
      1. let arr = [1,2,3];
      2. arr.fliter(ele => ele > 2)   //[2,3]

  • reduce((func,prevValue)) **n变1 **

    • 累加,数据处理 (prevValue可以是数字,字符串,对象,数组) 
      1. let arr = [1,2,3];
      2. arr.reduce((prevValue,curValue) => prevValue + curValue,100)   //106
      3. arr.reduce((prevValue,curValue) => prevValue.concat(curValue*curValue),[])  //[1,4,9] 模拟map
      4. arr.reduce((prev,cur) => prev.concat(cur % 2 == 1 ? cur:[]),[])   //[1,3]  模拟filter

      查

  • 所有属性：arr.forEach 函数作用域 for块作用域(可以break continue)

    1. let arr = [1,2,3];
    2. arr.forEach((ele,index,self) => {
    3. console.log(ele)
    4. })
    5. //1
    6. //2
    7. //3

  • 单个属性 arr[index] 索引越界会返回 undefined

    1. let arr = [1,2,3];
    2. arr[arr.length]   //undefined
    3. arr[-1]   //undefined

  • 某个元素是否在数组里 arr.indexOf()

    1. let arr = [1,1,2,3];
    2. arr.indexOf(1)   //0 存在就返回在数组里的第一个相同值的索引值
    3. arr.indexOf(6)   //-1 不存在返回-1

  • 按条件查找 arr.find 按条件查找索引 arr.findIndex

    1. let arr = [1,1,2,3];
    2. arr.find((ele) => ele % 2 == 0)      
    3. //2