JavaScript深度学习（五）—— 数组、类数组详解

数组

定义数组

• var arr = [1,2,3,4,5];
• var arr = new Array(1,2,3,4,5);
• 当new Array(10),中只有一位的时候，会默认为一个长度为10的空数组
• arr[10]=“abc” , 会把abc赋值给数组的第十位

添加数据

• 数组[数组长度] = 数据：向数组末尾添加一个数据
• push(数据) //从数组最后一位添加数据(可添加多个)，并返回组长度
• unshift(数据) //在数组的第一位添加数据(可添加多个)，并返数组长度
• splice() //添加新数据[及切除数据]

删除数据

• delete 数组[下标]: 这种做法不会导致数组其他的属性发生变化，因此，该做法会导致产生稀松数组，所以不推荐使用该做法。

• pop() //删除数组最后一位，并返回此值。(传参无效)
• shift() //删除数组的第一位，并返回此值。(传参无效)
• splice() //切除数据[及添加新数据]。

其他操作

• 数组排序：sort()
• 数组清空
  • 数组.splice(0, 数组.length);
  • 数组.length = 0;
• 查找数组中某一项的下标
  • 数组.indexOf(数据) 找到返回坐标，找不到返回-1
  • 数组.lastIndexOf(数据) 找到最后一个匹配的下标
• 遍历
  • 普通for
  • foreach
  • for-in(遍历对象)
• 过滤 filter
• 更多往下看…

静态方法(Array直接调用的方法)

• from方法：可以将一个伪数组转换为真数组
  • 使用：Array.from方法(arguments)
• isArray方法：判断一个给定的数据，是否为一个真数组
  • 使用：Array.isArray(arguments)
• of方法：类似于中括号创建数组，依次赋予数组每一项的值
  • 使用：Array.of(1,2,3) == [1,2,3]

实例方法(数组对象调用的方法)

• push(数据) //从数组最后一位添加数据(可添加多个)，并返回组长度
• pop() //删除数组最后一位，并返回此值。(传参无效)
• reverse() //数值反转(传参无效)
• shift() //删除数组的第一位，并返回此值。(传参无效)
• sort() //数组升序排列。[可自定义][降序加.reverse()]
• unshift(数据) //在数组的第一位添加数据(可添加多个)，并返数组长度
• fill()：将数组内容全部替换为()里面的内容
  • 数组.fill(数据)：将数组的所有项，填充为指定的数据
  • 数组.fill(数据, 开始下标): 将数组从开始下标起，到数组的末尾，填充为指定的数据
  • 数组.fill(数组, 开始下标，结束下标): 将数组从开始下标起，到数组的结束下标（取不到），填充为指定的数据
• splice() //切除数据[及添加新数据]。(从第几位开始，截取长度，在切口处添加新的数据)，返回被切除的数据。

无副作用方法详解（不改变原数组）

• concat：把另一个数组拼接到数组
  • 使用：var newArr = arr1.concat(arr2,arr3)
• includes: 数组中是否包含满足条件的元素
  • 使用：arr.includes(查找数据[,开始查找的坐标])，返回布尔值
• join：可以把数组连成一个字符串
  • arr.join("-")：“1-2-3”。默认’,'连接
• toString()//把数组转化成字符串
  • 使用:arr.toString(),“1,2,3”
• split：把字符串按传参拆分成一个数组。
  • 使用：str.split(’-’)：[“1”,“2”,“3”]
• arr.indexOf(x)，判断数组是否存在x,若存在返回x在arr中的位置，没有则返回-1
• arr.contains(‘xx’) 判断集合中是否含有xx
• slice() //截取arr.slice(开始的坐标,结束的坐标) ，返回截取内容
  • arr.slice() :空截，可以把类数组转换为数组
  • 可以写负数
  • 不写结束下标默认到末尾
• indexOf 传入数组数据，找到返回坐标，找不到返回-1
• lastIndexOf(数据) 找到最后一个匹配的下标
• forEach: 遍历数组

  arr.forEach(function(item,index,arr){
      //分别是 数组项，下标，数组本身
  })
  

• every：是否所有元素都满足条件

  arr.every(function(item,index,arr){
      return item > 100;//如果所有项都满足条件返回true
  })
  

• some：是否至少有一个元素满足条件

  arr.every(function(item,index,arr){
      return item > 100;//如果所有项都满足条件返回true
  })
  

• filter：过滤，得到满足条件的元素组成的新数组

  arr.filter(function(item){
      return item>100;//返回所有满足条件的项组成的数组
  })
  

• find: 查找第一个满足条件的元素，返回元素本身，如果没有找到，返回undefined

  var arr[{xxx:60},{xxx:60}];
  arr.find(function(item){
      return item.score >= 60;//返回满足条件的item
  })
  

• findIndex: 查找第一个满足条件的元素，返回元素的下标

  arr.findIndex(function(item){
      return item.score >= 60; 
      //返回第一个满足条件的元素下标。这种实现indexOf无法办到
  })
  

• map：映射，将数组的每一项映射称为另外一项

  //得到一个新数组，新数组的每一项是一个对象
  //对象包含两个属性：name、score
  arr.map(function(item,i){
      return {
          name:"学生"+(i+1),
          score:item
      }
  });
  //得到一个学生的姓名数组
  arr.map(function(item){
      return item.name;
  })
  

• reduce：统计，累计

  • 执行原理：把数组内的值依次放入函数里，得到的结果为s，然后继续将s和下一个值进行计算
  • 如果数组只有一个参数，此函数不会运行
  • 如果没有参数，此函数会报错
  • 可以加初始值处理上面的问题arr.reduce(function(s, item){},0)
    • 如果不传参不会报错，如果传一个参数会和默认值进行运算
    • 0代表调用函数时的第一个参数值

  var sum = arr.reduce(function(s, item){
      return s+item; //
  })
  

• 数组链式编程

  var arr = [22,33,44,55,66,77,88];
  //对数组进行随机排序
  //只取及格分数
  //得到学生对象的数组（每个学生对象包含姓名和分数）
  var result = arr.sort(function(){
      return Math.random() - 0.5;
  }).filter(function(item){
      return item >= 60;
  }).map(function(item, i){
      return {
          name:`学生`${i+1},
          score:item
      }
  });
  console.log(result); //返回及格学生数组
  

一些常见用法：

splice()常见用法：
var arr = [1,2,3,4]
//用法1：切除数据
arr.splice(0,1) //[2,3,4]
arr.splice(-1,1) //[1,2,3]  //原理：num += num > 0 ? 0 :this.length;
//用法2：更改数据
arr.splice(0,1,9) //[9,2,3,4]
//用法3：插入数据
arr.splice(0,0,9) //[9,1,2,3,4]

sort()自定义方法（sort()方法预留的接口）
规则：
1.必须写俩形参
2.看返回值，
    (1)返回值为负数时，前面数在前。
    (2)返回值为正数行，后面数在前。
    (3)为0，不动
    arr.sort(function(a,b){
        //里面可以自己写规则。
        // return a-b;  升序(冒泡排序)
        // return b-a;  降序(冒泡排序)
        return b-a; 
    });
数组乱序排列
        arr.sort(function() {
            return Math.random() - 0.5;
        });
对象数组根据属性排序
    var a1 = {
        age: 11
    }
    var a2 = {
        age: 18
    }
    var a3 = {
        age: 15
    }
    var arr = [a1, a2, a3]
    arr.sort(function(a, b) {
        return b.age - a.age
    })

数组的遍历

• 方法一：普通for循环

• 方法二：for…in…

  • for-in和for的区别：for是遍历下标[可以循环到每一个项]，for-in是遍历对象属性[循环不到没有值的项]

• 方法二：forEach循环：arr.forEach(fn)：把数组的每一位都放入函数进行运行

• for 效率 大于 foreach 原因：

for 循环没有任何额外的函数调用栈和上下文；

forEach函数签名实际上是

array.forEach(function(currentValue, index, arr), thisValue)

它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；

类数组

定义

1. 属性要为索引（数字）属性
2. 必须要有length属性
3. 最好加上push方法
4. splice可以让类数组的样子像数组[]

   var obj = {
       "0": "a",
       "1": "b",
       "2": "c",
       name: "du",
       age: 18,
       length: 3,
       push: Array.prototype.push,
       splice: Array.prototype.splice
   }

类数组转换为数组的方法

• 方法一：Array.from(arguments);。
• 方法二：Array.prototype.slice.call(arguments);

arguments :传入参数列表，一个类数组对象

    function printArgs() {
        console.log(arguments);
    }
    printArgs("A", "a", 0, { foo: "Hello" });
    执行结果：["A", "a", 0, Object] //arguments 是个类数组对象