Javascript 数组操作草稿纸

// 常见数组操作

  const log = console.log.bind(console)

  let color = ['red', 'yellow', 'blue']
  log(color)

1.  判断是否是数组 
  log(Array.isArray(color))
  log(Object.prototype.toString.call(color).slice(8, -1))

2. 拿到数组的值
  log(color.valueOf())

  const messages = ['1', '2', '3'];

  log(messages.toString(), color.toString())


  // push 方法从数组末尾添加元素，返回新数组长度，这一点记住
  // pop 方法从数组末尾删除元素，返回被删除的元素
  // unshift 方法从数组头部添加元素，返回新数组长度
  // shift 方法从数组头部删除元素，返回被删除的元素
  messages.forEach(i => {
    color.push(i)
  })

  log(color)


3.  reverse() 

  // reverse() 数组反转
  log(color.reverse())


4. sort()
  // sort(fn) sort 方法可以传参，不传参的时候数组默认把所有元素先转换为 String 再排序，比较的是 ASCII 码，这个有点坑，
  // 幸好 sort 支持高阶函数，所以我们传入一个自定义的排序函数就可以实现我们正常的排序了，比如对数字排序，我们可以这样写，
  // sort 方法会修改原数组，这是需要注意的地方
  // 默认比较类型是 String
  function compare(x, y) {
    return x - y
  }

  color.sort(compare)
  log(color); // ["1", "2", "3", "blue", "yellow", "red"]

5. concat()
  // concat() 传入元素或者数组都可以
  log(color.concat(messages)) //["1", "2", "3", "blue", "yellow", "red", "1", "2", "3"]


6. slice()
  // slice() 常见截取数组的元素，返回的是一个新数组，不更改原数组，对应 String 中的 subString()
  // 如果不给slice 传入参数，则默认截取所有元素，所以我们可以很容易的复制一个数组
  // slice 可以传入负数，表示从后往前截取
  let arrCopy = color.slice()
  log(arrCopy) // ["1", "2", "3", "blue", "yellow", "red"]

  let arr = color.slice(3, -1)
  log(arr) // ["blue", "yellow"]

7. join()
  // join() 把数组元素合并为一个字符串，如果不带参数，默认用逗号分隔
  log(color.join())
  log(color.join('-'))


8.splice()
  // splice() 算是一个万能的方法对于数组的操作，根据参数不同可以实现从某处起删除多少个元素，
  // 第三个参数往后都是需要添加到末尾的元素，返回值是被删除掉的元素组成的数组
  log(color.splice(2, 3, 'hhh', 'sumin', 'test'), color)  
  // (3) ["3", "blue", "yellow"] (6) ["1", "2", "hhh", "sumin", "test", "red"]


9. indexOf()
  // indexOf() && lastIndexOf()
  // 二者都是验证数组中是否含有某个元素，返回匹配到的元素在数组中所在的位置，如果没有，则返回 -1，
  // 不同的是 indexOf 是从前往后，lastIndexOf 则相反
  log(color.indexOf('sumin'), color.lastIndexOf('ez')) // 3 -1


10. every(fn)
  // every(fn) && some(fn)
  // every and some 都是针对数组每一项运算结果判定，不同的是 every 要求必须所有的都为 true 才能返回 true，
  // some 则只要有一项为 true 则返回 true，并且剩余的元素不会再执行检测
  const num = [1, 2, 3, 4, 5, 4, 3, 2, 1]
  const every = num.every((item, index, array) => {
    return item > 2
  })
  log(every) // false

  const some = num.some((item, index, array) => {
    return item > 2
  })
  log(some) // true


11.  filter(fn)
  // filter(fn) 过滤方法 可以传入高阶函数 ，返回满足条件的元素组成的新数组，不改变原数组
  const filter = num.filter((item, index, array) => {
    return item > 2
  })
  log(filter) // [3, 4, 5, 4, 3]


12.map()
  // map() 对数组的每一项进行计算等处理，返回处理结果组成的数组，其他和 forEach 类似，只不过 forEach 没有返回值，
  // 这里注意与数据类型 Map 进行区分，不要混为一谈
  const map = num.map((item, index, array) => {
    return item > 2
  })
  log(map) // [false, false, true, true, true, true, true, false, false]


  // 顺带了解一下 ES6 的数据类型 Map，
  // 注意: JavaScript 中规定 Map 的数据结构必须是字符串键值对，
  // 类似 Java 中的 Map，新增的数据类型 Map 是为了优化查询速度的
  const m = new Map([['a', 12], ['b', 34], ['c', 67]])
  log(m.get('a')) // 12


13.forEach() 
  // forEach() 遍历数组,与 for 循环类似，不过区别在于 forEach 无法做到按指定的顺序遍历，对于稀疏数组使用 for 循环效率更好

14. reduce(fn)
  // reduce(fn) 累加求和
  // 参数  [ 前一个元素 | 当前元素，从1开始 | 后一个元素的序列，从1开始计数 | 表示该数组 ]
  // 对于 reduce 的很多用法还不是很熟悉，需要多加研究
  const reduce = num.reduce((pre, cur, index, array) => {
    return pre + cur
  })
  log(reduce) // 25

  //每一次迭代之后的结果分别为
  // [3, 3, 4, 5, 4, 3, 2, 1]
  // [6, 4, 5, 4, 3, 2, 1]
  // [10, 5, 4, 3, 2, 1]
  // [15, 4, 3, 2, 1]
  // [19, 3, 2, 1]
  // [22, 2, 1]
  // [24, 1]
  // 25