ECMAScript 6（ES6）作为JavaScript的一种新标准，于2015年发布。它引入了许多新特性和语法改进，使得JavaScript在语法和功能上更加强大和灵活。

块级作用域

ES6引入了let和const关键字，用于声明块级作用域的变量和常量。与var不同，块级作用域中的变量只在其所在的块内部可见。

let 关键字：

let 声明的变量具有块级作用域，只在声明的代码块内有效。
不能重复声明同一个变量，否则会报错。
变量在声明之前不能访问，这被称为"暂时性死区"。

变量可以被重新赋值。

javascript 复制代码

  {
    console.log(x); // 报错，暂时性死区
    let x = 10;
    console.log(x); // 输出 10
  }

  console.log(x); // 报错，x未定义

const关键字：

const 声明的变量也具有块级作用域。
一旦声明，就不能再被重新赋值，它是一个常量。
在声明时必须初始化，不能只声明不赋值。

对于对象类型的常量，虽然不能直接修改其引用，但可以修改其属性值。

ini 复制代码

 const PI = 3.14;
 console.log(PI); // 输出 3.14

 PI = 3.14159; // 报错，无法重新赋值

 const person = {
   name: 'Alice',
   age: 25
 };

 person.age = 26; // 合法，修改对象属性值

 person = {}; // 报错，无法重新赋值整个对象

箭头函数

箭头函数是一种简化函数书写和作用域绑定的方式。它使用箭头语法(=>)定义函数，并且自动绑定上下文，有以下特点：

简洁：不需要写 function 关键字、花括号和 return 关键字。
隐式返回值：如果函数体只有一个表达式，可以省略花括号和 return 关键字，直接将表达式作为返回值。
继承外部 this：箭头函数没有自己的 this，它继承了外部作用域的 this 值。这在回调函数中非常有用。

需要注意的是，箭头函数不具有自己的 this 值，也不能使用 arguments 和 new 关键字。如果需要使用这些功能，还是需要使用传统的函数声明方式。

javascript 复制代码

// 传统函数表达式
let sum1 = function(a, b) {
  return a + b;
};

// 箭头函数表达式
let sum2 = (a, b) => a + b;

console.log(sum1(1, 2)); // 输出 3
console.log(sum2(1, 2)); // 输出 3

// 隐式返回值
let double1 = function(x) {
  return x * 2;
};

let double2 = x => x * 2;

console.log(double1(3)); // 输出 6
console.log(double2(3)); // 输出 6

// 继承外部 this
let obj = {
  name: 'Alice',
  sayHi: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

obj.sayHi(); // 输出 "Hello, Alice"，因为箭头函数继承了 obj 的 this

默认参数值

ES6允许为函数参数指定默认值，当参数未传递时，将使用默认值。

javascript 复制代码

function greet(name = "World") {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出: Hello, World!
greet("Alice"); // 输出: Hello, Alice!

解构赋值

解构赋值是一种从数组或对象中提取值并赋给变量的方式，它可以让我们更方便地获取和操作复杂数据结构中的数据。解构赋值的语法使用花括号 {} 或方括号 [] 来指定要提取的值的位置。

数组解构赋值：通过在赋值语句的左边使用与数组元素对应的模式来进行解构赋值。

scss 复制代码

let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a);     // 输出 1
console.log(b);     // 输出 2
console.log(rest);  // 输出 [3, 4, 5]

对象解构赋值：通过在赋值语句的左边使用与对象属性对应的模式来进行解构赋值。
javascript 复制代码
```
let { name, age } = { name: 'Alice', age: 20 };
console.log(name);  // 输出 'Alice'
console.log(age);   // 输出 20
```
默认值：在解构赋值时可以为变量设置默认值，当解构的值为 undefined 时会使用默认值。
javascript 复制代码
```
let [a = 1, b = 2] = [undefined, 3];
console.log(a);  // 输出 1
console.log(b);  // 输出 3
```

嵌套解构：可以对嵌套的数组或对象进行解构赋值。

javascript 复制代码

let [a, [b, c]] = [1, [2, 3]];
console.log(a);  // 输出 1
console.log(b);  // 输出 2
console.log(c);  // 输出 3

let { name, info: { age } } = { name: 'Alice', info: { age: 20 } };
console.log(name);  // 输出 'Alice'
console.log(age);   // 输出 20

扩展运算符

扩展运算符用于展开数组、字符串、对象等可迭代对象。它使用三个点 ... 来表示，可以将一个可迭代对象拆分成独立的元素，并将这些元素作为参数传递给函数、添加到数组或对象中，或者用于创建新的数组或对象。

数组展开：

ini 复制代码

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr);  // 输出 [1, 2, 3, 4, 5]

字符串展开：

ini 复制代码

const str = 'hello';
const chars = [...str];
console.log(chars);  // 输出 ['h', 'e', 'l', 'l', 'o']

对象展开：可以将对象展开为独立的属性。

ini 复制代码

const obj = { name: 'Alice', age: 20 };
const newObj = { ...obj, gender: 'female' };
console.log(newObj);  // 输出 { name: 'Alice', age: 20, gender: 'female' }

函数传参：可以将数组作为参数传递给函数，每个数组元素都会作为独立的参数被传递给函数。
javascript 复制代码
```
function sum(a, b, c) {
  return a + b + c;
}
const nums = [1, 2, 3];
console.log(sum(...nums));  // 输出 6
```

数组合并：可以将多个数组合并成一个新的数组。

ini 复制代码

const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr);  // 输出 [1, 2, 3, 4]

模版字符串

模板字符串，也被称为反引号字符串。它使用反引号 包裹字符串内容，并可以在其中插入变量或表达式，使用${}`````来包裹。模板字符串提供了更直观、简洁且易于阅读的方式来拼接字符串，特别适合用于动态生成 HTML、JSON 数据格式化等场景。。

基本用法：使用反引号 ````` 包裹字符串内容，可以在其中直接插入变量或表达式。
ini 复制代码
```
const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message);  // 输出 "Hello, Alice!"
```

多行字符串：模板字符串可以跨越多行，而不需要使用 \n 或 + 进行连接。

vbnet 复制代码

const text = `
  This is a
  multi-line
  string.
`;
console.log(text);
/*
输出:
  This is a
  multi-line
  string.
*/

表达式插入：在模板字符串中可以插入变量、表达式或函数调用等。

ini 复制代码

const num1 = 5;
const num2 = 10;
const sum = `The sum of ${num1} and ${num2} is ${num1 + num2}.`;
console.log(sum);  // 输出 "The sum of 5 and 10 is 15."

嵌套模板字符串：可以在模板字符串中嵌套使用其他模板字符串。

ini 复制代码

const name = 'Alice';
const message = `Hello, ${`My name is ${name}`}!`;
console.log(message);  // 输出 "Hello, My name is Alice!"

原始字符串：使用标签函数可以对模板字符串进行处理，并返回一个新的字符串。

ini 复制代码

function uppercase(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (values[i]) {
      result += values[i].toUpperCase();
    }
  }
  return result;
}
const name = 'Alice';
const message = uppercase`Hello, ${name}!`;
console.log(message);  // 输出 "Hello, ALICE!"

本文到这就结束啦，其他的特性我们就不再细聊了，欢迎下次再来一起学习ヾ(◍°∇°◍)ﾉﾞ！！

探索ES6的新特性：提升JavaScript开发的效率与可读性

块级作用域

箭头函数

默认参数值

解构赋值

扩展运算符

模版字符串