ES6知识盲点整理

Posted 2021-10-14 大忽悠爱忽悠

ES6知识盲点整理

• 箭头函数
• JS数组的map()方法
• 关于严格模式普通函数和箭头函数中this的指向问题
• call、apply和bind的区别
• 深入理解ES6箭头函数里的this
• ES6(...)展开运算符

---

箭头函数

箭头函数

---

JS数组的map()方法

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法:

var new_array = arr.map
(
function callback(currentValue,index,array)
{
 ...
 return ...
}
,thisArg)

参数:

callback
生成新数组元素的函数，使用三个参数：

currentValue
callback 数组中正在处理的当前元素。

index可选
callback 数组中正在处理的当前元素的索引。

array可选
map 方法调用的数组。

thisArg可选
执行 callback 函数时值被用作this。

返回值:

一个由原数组每个元素执行回调函数的结果组成的新数组。

Array.prototype.map()

---

关于严格模式普通函数和箭头函数中this的指向问题

1.在ES5,ES6中，全局作用域下无论是否为严格模式this都指向window

2.全局作用域中函数中的this：es5，非严格模式this指向window，严格模式下的this指向undefined；es6箭头函数的this都指向window。

关于严格模式普通函数和箭头函数中this的指向问题

---

call、apply和bind的区别

call调用 将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window; call中第一个参数之后是要传递给方法的参数列表。

apply与call相似，不同之处在于传递给方法的参数形式不一致。apply传递给方法的参数是数组的形式。

call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法。

---

深入理解ES6箭头函数里的this

深入理解ES6箭头函数里的this，看这篇就够了

关于箭头函数中的this的指向

---

ES6(…)展开运算符

在ES6中用…来表示展开运算符，它可以将数组方法或者对象进行展开。先来看一个例子它是如何使用的。

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
 
 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

arr1中的值完全克隆到了arr2中（arr1改变arr2中还是最初的值）。当然，展开对象数据也是可以得到类似的结果

const obj1 = {
  a: 1,
  b: 2, 
  c: 3
}
 
const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}
 
 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

展开运算符还常常运用在解析结构之中，例如我们在Raect封装组件的时候常常不确定props到底还有多少数据会传进来，就会利用展开运算符来处理剩余的数据。

这种方式在react中十分常用
const props = {
  size: 1,
  src: 'xxxx',
  mode: 'si'
}
props 设置了基础数据，后续数据根据展开运算符植入
 
 
const { size, ...others } = props;
 
console.log(others)
 
然后再利用暂开运算符传递给下一个元素，再以后封装react组件时会大量使用到这种方式，正在学习react的同学一定要搞懂这种使用方式
<button {...others} size={size} />

展开运算符还用在函数的参数中，来表示函数的不定参。只有放在最后才能作为函数的不定参，否则会报错。

// 所有参数之和
const add = (a, b, ...more) => {
    return more.reduce((m, n) => m + n) + a + b
}
 
console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39

ES6(…)展开运算符

es6展开运算符 …

---