JS高级篇

一、参数

1.动态参数（arguments）

<script>
  function get() {
    // console.log(arguments)  [2,3,4]
    for (let i = 0; i < arguments.length; i++) {
      console.log(arguments[i])
    }
  }
  get(1, 2, 3)
</script>

控制台展示

2.剩余参数（…arr）

<script>
  function get(a, b, ...arr) {
    console.log(a)
    console.log(b)
    console.log(arr)
  }
  get(1, 2, 3, 4)
</script>

控制台展示

二、展开运算符

<script>

  const arr1 = [1, 2, 3]  
  // 求数组最大值
  console.log(Math.max(...arr1)) // 3
  // 求数组最小值
  console.log(Math.min(...arr1)) // 1
  
  // 合并数组
  const arr2 = [4, 5]
  const arr = [...arr1, ...arr2]
  console.log(arr) // [1, 2, 3, 4, 5]

</script>

三、数组解构

<script>

  const [q, w, e] = [1, 2, 3]
  console.log(q) // 1
  console.log(w) // 2
  console.log(e) // 3

  // 交换2个变量的值
  let a = 1
  let b = 2;
  [b, a] = [a, b]
  console.log(a, b) // 2 1
  
</script>

四、遍历（forEach）

<script>
  const arr = ['one', 'two', 'three']
  arr.forEach(function (element, index) {
    console.log(element)  // 数组元素
    console.log(index) // 索引号
  })
</script>

控制台展示

五、筛选数组（filter）

<script>

  const arr = [10, 20, 30]
  // 返回的符合条件的新数组
  const news = arr.filter(function (element, index) {
    return element >= 20
  }) 
  console.log(news) // [20, 30]
  
</script>

六、内置构造函数

1.对象的拷贝（assign）

<script>

  const t = { username: 'tong', age: 20 }
  
  // 获得所有的属性名
  console.log(Object.keys(t))
  
  // 获得所有的属性值
  console.log(Object.values(t))
  
  // 对象的拷贝
  Object.assign(t, { gender: '男' })
  console.log(t)
  
</script>

控制台展示

2.创建数组（ Array）

<script>
	const arr = new Array(1, 2)
	console.log(arr) // [1, 2]
</script>

3.累计器（ reduce）

<script>

	// arr.reduce(function(累计值, 当前元素){}, 起始值)
	
	const arr = [1, 2]
    const r = arr.reduce((p, item) => p + item)
    console.log(r) // 3
    
</script>

表格整理

关键字	作用	说明
forEach	遍历数组	不返回，用于不改变值，经常用于查找打印输出值
filter	过滤数组	筛选数组元素，并生成新数组
map	迭代数组	返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce	累计器	返回函数累计处理的结果，经常用于求和等

七、改变this指向

1.call()

fn.call(this的指向,实参)

2.apply()

fn.apply(this的指向,[实参])

3.bind()

fn.bind(this的指向)
注意
bind() 方法不会调用函数，但是能改变函数内部this 指向

总结

（1）Array

重点

1. forEach： 用于遍历数组，替代 for 循环
2. filter： 过滤数组单元值，生成新数组
3. map： 迭代原数组，生成新数组
4. join： 数组元素拼接为字符串，返回字符串
5. find： 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined
6. every： 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false

了解

1. some： 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false
2. concat： 合并两个数组，返回生成新数组
3. sort： 对原数组单元值排序
4. splice： 删除或替换原数组单元
5. reverse： 反转数组
6. findIndex： 查找元素的索引值

（2）String

重点

关键字	说明
length	用来获取字符串的度长
split(‘分隔符’)	用来将字符串拆分成数组
substring（开始索引号[,结束索引号]）	用于字符串截取
startsWith(字符串)	检测是否以某字符开头
includes(字符串)	判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false

了解

关键字	说明
toUpperCase	将字母转换成大写
toLowerCase	将就转换成小写
indexOf	检测是否包含某字符
endsWith	检测是否以某字符结尾
replace	替换字符串，支持正则匹配
match	查找字符串，支持正则匹配

（3）Number

<script>
	const num = 10.123456
	// 保留两位小数，四舍五入
    console.log(num.toFixed(2)) // 10.12
</script>

重点

• toFixed(整数)：用于设置保留小数位的长度