ES6 全网打尽系列(1)-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59139771/article/details/129827537

ES6 全网打尽系列(1)

本期涉及

1、let和const

2、箭头函数

let和const

1、一句话概述：用于声明变量和常量，let声明的变量可以被重新赋值，而const声明的常量不可被重新赋值。

let和const是ES6中新增的两个关键字，用于声明变量。它们与ES5中的var有些不同。

let声明的变量是块级作用域，只在当前代码块内有效。而var声明的变量是函数作用域或全局作用域，可能会造成变量污染。

const声明的变量也是块级作用域，但是它声明的是常量，一旦声明就不能再改变。

2、let的例子：

function test() {
  let a = 1;
  if (true) {
    let a = 2;
    console.log(a); // 2
  }
  console.log(a); // 1
}
test();

这段代码定义了一个函数test，函数内部有两个块级作用域。在函数内部的第一个块级作用域中，使用let声明了一个变量a并赋值为1。在第二个块级作用域中，也使用let声明了一个变量a并赋值为2。由于let声明的变量是块级作用域，所以第二个块级作用域中的变量a只在该块级作用域内有效，不会影响到第一个块级作用域中的变量a。因此，第一个console.log输出的是2，第二个console.log输出1

3、const的例子：

const one = 1;
one = 2; // TypeError: Assignment to constant variable.

这段代码定义了一个常量one并将其赋值为1。然后尝试将one的值改为2，但是由于one是一个常量，所以会抛出TypeError: Assignment to constant variable错误，因为常量的值不能被重新赋值。

箭头函数

1、一句话概述：使用箭头符号（=>）定义函数，可以简化函数的书写，同时还可以绑定this指向。

箭头函数是ES6中的一种新的函数定义方式，它可以更简洁地定义函数，并且可以避免this指向的问题。

箭头函数的语法如下：

(param param2, …, paramN) => { statements }

其中，参数列表可以为空，或者包含一个或多个参数。如果只有一个参数，可以省略括一个表达式，也可以是一个代码块。

下面是一些箭头函数的示例：

2、传统函数和箭头函数的对比

传统函数

function add(a, b) {
  return a + b;
}

箭头函数

const add = (a, b) => a + b;

3、箭头函数的this指向

const obj = {
  name: 'yuyu',
  sayName: function() {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  }
};

obj.sayName(); // 输出：yuyu
obj.sayNameArrow(); // 输出：