JavaScript学习笔记

# 数组

# 1.数组新方法

# 1.1 reduce

返回的结果是叠加后的结果

//函数的返回结果会作为下一次循环的prev
let result = [1, 2, 3, 4, 5].reduce((prev, next, currIndex, ary) => {
  if (ary.length - 1 === currIndex) {
    return (prev + next) / ary.length
  }
  return prev + next
}, 0)
console.log(result)

let total = [{ price: 10 }, { price: 20 }, { price: 30 }].reduce(
  (prev, next, currIndex, ary) => {
    return prev.price + next.price
  },
  0
)
console.log(total)

Array.prototype.myReduce = function (fn, prev) {
  for (let i = 0; i < this.length; i++) {
    if (typeof prev === "undefined") {
      prev = fn(this[i], this[i + 1], i + 1, this)
      ++i
    } else {
      prev = fn(prev, this[i], i, this)
    }
  }
  return prev
}
let total = [1, 2, 3].myReduce((prev, next, currIndex, ary) => {
  return prev + next
}, 0)
console.log(total)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  • 把一个数组展平
let flat = [
  [1, 2, 3],
  [4, 5, 6],
].reduce((prev, next, index, ary) => {
  return [...prev, ...next]
})
console.log(flat)
1
2
3
4
5
6
7

# 1.1 forEach

Array.prototype.forEach = function (fn) {
  for (let i = 0; i < this.length; i++) {
    fn(this[i], i)
  }
}
;[1, 2, 3].forEach((item, index) => {
  console.log(item, index)
})
1
2
3
4
5
6
7
8

# 1.1 map

有返回值 返回值是一个新数组

Array.prototype.map = function (fn) {
  let arr = []
  for (let i = 0; i < this.length; i++) {
    arr.push(fn(this[i], i))
  }
  return arr
}
let ary = [1, 2, 3].map((item) => {
  return item * 2
})
console.log(ary)
1
2
3
4
5
6
7
8
9
10
11

# 1.1 filter

过滤 如果返回 true 表示留下 返回 false 表示删除

let arr = [1, 2, 3]
let newArr = arr.filter((item) => {
  return item > 2
})
console.log(newArr)
1
2
3
4
5

# 1.1 find

查找 返回查找的那一项 找到后就不会继续查找

let f = [1, 2, 3].find((item) => {
  return item === 5
})
console.log(f)
1
2
3
4

# 1.1 some

找到后返回 true

let s = [1, 2, 3].some((item) => {
  return item === 2
})
console.log(s)
1
2
3
4

# 1.1 .includes

;[(1, 2, 3)].includes(3)
1
  • 8).Array.from() 将类数组转换成数组
function a() {
  console.log(eval(Array.from(arguments).join("+")))
}
a(1, 2, 3)
//常见的类数组 htmlCollection arguments {0:1,1:2,2:3,length:3}
1
2
3
4
5
//数组的常见方法
//map （some,every,filter,forEach） es5
//find findIndex es6
//reduce 收敛/叠加

//for of
//Array.from
//of()

//of()
let ary = Array.of(3)
console.log(ary)
1
2
3
4
5
6
7
8
9
10
11
12

# 7.2.8 from

将类数组转换成数组

function a() {
  console.log(eval(Array.from(arguments).join("+")))
}
a(1, 2, 3)
1
2
3
4

常见的类数组 htmlCollection arguments {0:1,1:2,2:3,length:3}

# 7.2.9 of

let ary = Array.of(3)
console.log(ary)
1
2

# 7.2.5 find

  • 1.查找数据，返回查找的那一项 找到后就不会继续查找
let f = [1, 2, 3].find((item) => {
  return item === 5
})
console.log(f)
1
2
3
4

# 7.2.7 includes

;[1, 2, 3].includes(3)
1

# 其他

let a = 3
console.log(a?.b) //可选链?.
let c = 0
let d
d = c ?? a //空值合并运算符(??) c除了undefined、null之外的任何值
1
2
3
4
5
let a = 3
let c = 0
let d
a ??= d //空值赋值运算符(??=) 左侧为undefined、null之外的任何值
1
2
3
4

← 七.类 →