ES6语法详解+面试必备

ES6（ECMAScript 2015）是JavaScript的一个版本，它于2015年发布。ES6引入了很多新的语法和功能，使得JavaScript更加强大、灵活和易于使用。

一、块级作用域：

ES6引入了let和const关键字，可以在块级作用域中声明变量，解决了以前使用var声明变量可能导致的问题。在ES6之前，JavaScript中的变量声明使用var关键字，它具有函数作用域而不是块级作用域。这意味着使用var声明的变量可以在其所在的函数内部任何位置访问，而不仅仅是在声明的块级作用域内。

1、let关键字：

let关键字用于声明可变的变量，它的作用范围限定在当前的块级作用域内，包括花括号（{}）内部的任何代码块。在同一个作用域内，不能重复声明同名的let变量。

function example() {
  if (true) {
    let x = 10; // 声明一个块级作用域内的变量x
    console.log(x); // 输出 10
  }
  console.log(x); // 报错，x未定义
}

example();

2、const关键字：

const关键字用于声明常量，它的作用范围也是在当前的块级作用域内。与let不同，const声明的变量是不可变的，即不能被重新赋值。同时，const声明的变量必须在声明时进行初始化，且不能再次修改其值。

function example() {
  const PI = 3.14159; // 声明一个常量PI
  console.log(PI); // 输出 3.14159

  PI = 3.14; // 报错，常量不能被重新赋值
}

example();

二、箭头函数

ES6引入了箭头函数=>语法，简化了函数的定义和使用

1、箭头函数可以简化的函数定义

// 传统函数定义
function add(a, b) {
  return a + b;
}

// 箭头函数定义
const add = (a, b) => a + b;

2、隐式返回值

指箭头函数中省略了return关键字，并且直接返回一个表达式的值。这意味着箭头函数可以在一行代码中完成函数体的定义和返回值的指定

// 传统函数定义
function multiply(a, b) {
  return a * b;
}

// 箭头函数定义
const multiply = (a, b) => a * b;

//箭头函数中省略了return关键字，并且直接返回了a * b的结果。这就是隐式返回值的概念

需要注意的是，隐式返回值只适用于一行代码的情况。如果函数体有多行代码或者需要进行复杂的逻辑处理，仍然需要使用传统的函数定义并显式地使用return关键字。 

const calculate = (a, b) => {
  if (a > b) {
    return a - b;
  } else {
    return b - a;
  }
};

在上述示例中，根据条件判断使用了显式返回值（使用return关键字），而在其他情况下则使用了隐式返回值。这样可以兼顾简洁性和灵活性。 

3、使用箭头函数作为回调函数

在JavaScript中，回调函数是指作为参数传递给其他函数的函数。在某些情况下，我们需要在回调函数中定义一些简单的逻辑来处理数据或完成一些操作。使用箭头函数作为回调函数可以使代码更加简洁，提高开发效率。

const numbers = [1, 2, 3, 4, 5];

// 传统函数定义
//map()方法用于对数组中的每个元素进行处理，并返回一个新的数组
const square = numbers.map(function (number) {
  return number * number;
});
//在传统的函数定义中，我们需要使用function关键字，同时需要使用return关键字来指定返回值。

// 箭头函数定义
const square = numbers.map((number) => number * number);
//在箭头函数中，由于只有一行代码，我们可以使用隐式返回值的方式来简化函数定义和返回值的指定。

需要注意的是，在使用箭头函数作为回调函数时，要根据具体的情况来考虑是否需要使用括号来包裹参数。如果只有一个参数，可以省略括号，但如果没有参数或者有多个参数，则需要使用括号。 

4、使用箭头函数绑定外部this值

箭头函数可以绑定外部 this 值，这是因为箭头函数没有自己的 this 上下文。箭头函数的 this 值继承了它所在上下文的 this 值。当我们在箭头函数中使用 this 时，它指向的就是箭头函数所在的上下文中的 this 值。

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message) // 输出：Hello, World!
    }, 1000)
  }
}

在上述代码中，我们在组件的 mounted 钩子函数中使用了一个 setTimeout 函数，该函数中包含一个箭头函数作为回调函数。由于箭头函数继承了它所在上下文的 this 值，因此在箭头函数中我们可以访问到组件实例的 this 值。 

三、模板字符串

在ES6中，模板字符串是一种特殊的字符串语法，使用反引号（`）来包裹字符串内容。它允许在字符串中插入表达式，并且支持多行字符串的定义，提供了更加灵活和方便的字符串处理方式。

1、字符串插值

使用${}语法，在模板字符串中嵌入表达式或变量。这样可以方便地将变量的值插入到字符串中

const name = 'SHANDONG';
const message = `Hello, ${name}!`;
console.log(message); // 输出：Hello, SHANDONG!

2、多行字符串

使用模板字符串可以方便地定义多行字符串，而无需使用\n进行换行操作

const multiline = `
  This is
  a multiline
  string.
`;
console.log(multiline);
// 输出：
//   This is
//   a multiline
//   string.

3、嵌套使用

模板字符串可以嵌套使用，可以在一个模板字符串中插入另一个模板字符串

const name = 'Alice';
const message = `Hello, ${`Welcome, ${name}!`} How are you?`;
console.log(message); // 输出：Hello, Welcome, Alice! How are you?

总而言之，ES6中的模板字符串提供了一种更加灵活和方便的字符串处理方式。它支持字符串插值，在字符串中嵌入表达式或变量；支持定义多行字符串，无需使用\n进行换行；还可以嵌套使用，将一个模板字符串插入到另一个模板字符串中。这些特性使得模板字符串在处理复杂字符串逻辑时更加简洁和直观。

四、解构赋值

一种特殊的赋值语法，可以方便地将数组或对象中的值解构到变量中；

这样可以简化变量的声明和赋值操作，提高代码的可读性和可维护性。

1、数组解构

使用数组解构可以将数组中的元素解构到变量中。解构时需要使用方括号（[]）来包裹变量名

const numbers = [1, 2, 3, 4];
const [a, b, c, d] = numbers;
console.log(a, b, c, d); // 输出：1 2 3 4

在上面的例子中，数组中的第一个元素被解构到变量a中，第二个元素被解构到变量b中，以此类推。如果数组中的元素数量少于变量数量，未被解构的变量将会是undefined。

const numbers = [1, 2, 3];
const [a, b, c, d] = numbers;
console.log(a, b, c, d); // 输出：1 2 3 undefined

2、对象解构

使用对象解构可以将对象中的属性解构到变量中。解构时需要使用花括号（{}）来包裹变量名，并且变量名要与对象属性名相同

const person = { name: 'asd', age: 20 };
const { name, age } = person;
console.log(name, age); // 输出：asd 20

在上面的例子中，对象中的name属性被解构到变量name中，age属性被解构到变量age中。如果对象中没有对应的属性，变量将会是undefined。

const person = { name: 'asd', age: 20 };
const { name, age,sex } = person;
console.log(name, age,sex); // 输出：asd 20 undefined

3、默认值

可以为解构赋值设置默认值，当变量未被解构时将会使用默认值。

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

在上面的例子中，变量c设置了默认值为3。由于数组中只有两个元素，变量c未被解构，因此使用了默认值。

4、剩余操作符

可以使用剩余操作符（...）将剩余的数组元素或对象属性解构到一个新的数组或对象中。

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

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

在上面的例子中，使用剩余操作符可以将剩余的数组元素或对象属性解构到一个新的数组或对象中。在数组解构中，剩余操作符需要放在最后；在对象解构中，剩余操作符可以放在任意位置。

五、默认参数

在ES6中，可以为函数的参数设置默认值，这样在函数调用时，如果没有传递该参数或传递的值为undefined，就会使用默认值。这样可以简化函数的调用，避免出现undefined的情况。

1、设置默认值

在函数定义时，可以通过赋值运算符（=）来为参数设置默认值。

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

greet(); // 输出：Hello, Guest!
greet('Alice'); // 输出：Hello, Alice!

在上面的例子中，greet函数的name参数设置了默认值为'Guest'。当没有传递参数或传递的参数为undefined时，将会使用默认值

2、默认值表达式

function multiply(a, b = 2 * a) {
  return a * b;
}

console.log(multiply(5)); // 输出：50
console.log(multiply(5,2)); // 输出：10

在上面的例子中，multiply函数的b参数设置了默认值为2 * a。当没有传递第二个参数时，将会使用默认值，计算结果为b=5 * 2 = 10,a*b=5*10=50;当传递第二个参数，就会直接计算a*b=5 * 2 = 10

3、默认参数对arguments对象的影响

使用默认参数不会影响arguments对象的长度

function sum(a, b = 0) {
  console.log(arguments.length);
  return a + b;
}

console.log(sum(1)); // 输出：1，返回：1
console.log(sum(1, 2)); // 输出：2，返回：3

sum函数的b参数设置了默认值为0。即使没有传递第二个参数，arguments对象的长度仍然是1。

需要注意的是，默认参数的作用域是函数内部，而不是全局作用域。这意味着默认参数可以访问函数体内的其他变量和参数，但不能访问函数外部的变量。

六、Promise

Promise 是一种用于处理异步操作的对象。它可以将异步操作封装成一个 Promise 对象，通过 then() 方法来添加回调函数，当异步操作完成时自动执行回调函数。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(1000).then(() => console.log('1 秒后输出该信息'));

在上面的例子中，定义了一个 delay() 函数，该函数返回一个 Promise 对象。该 Promise 对象会在指定的时间间隔之后自动执行 resolve() 方法，从而触发 then() 方法中设置的回调函数。使用 Promise 对象可以使异步操作的代码更加清晰、简洁，并且可以避免回调地狱的问题。

Promise 对象还提供了一些其他的方法，例如 catch() 方法可以捕获异步操作中的异常，并且可以通过 Promise.all() 方法来并行处理多个异步操作。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, '3 秒后输出该信息');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // 输出：[1, 2, "3 秒后输出该信息"]
});

在上面的例子中，我们通过 Promise.resolve() 方法来创建了两个 Promise 对象，并且通过 new Promise() 方法创建了一个延时执行的 Promise 对象。我们将三个 Promise 对象放入了一个数组中，并且使用 Promise.all() 方法来并行处理这些异步操作。当所有异步操作都完成时，then() 方法中设置的回调函数将会被自动执行。

总的来说，平时使用，

jiekouming().then((res)=>{

console.log(res)

})

七、简化对象字面量的语法

ES6 简化对象字面量的语法主要包括两个方面的改进：属性名和方法名的简写、计算属性名。

1、属性名和方法名的简写

在 ES6 之前，如果我们需要将一个变量作为对象的属性名，通常需要使用计算属性名。例如：

const obj = {
  [propName]: 'value'
};

在 ES6 中，我们可以使用属性名和方法名的简写来更加方便地创建对象。

const name = 'John';
const age = 20;

const obj = {
  name,
  age,
  sayHi() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
};

obj.sayHi(); // 输出：Hi, my name is John, I'm 20 years old.

在上面的例子中，我们使用了属性名和方法名的简写语法，将变量 name 和 age 直接作为了对象的属性名。同时，我们也定义了一个 sayHi() 方法，并且在对象初始化时直接将其作为了一个属性。

2、计算属性名

ES6 提供了计算属性名的语法，允许我们在对象字面量中使用表达式来作为属性名。

const propName = 'size';

const obj = {
  [propName + 'Label']: 'Size',
  ['get' + propName]() {
    return this[propName];
  },
  set [propName](value) {
    this._size = value;
  },
  get [propName]() {
    return this._size;
  }
};

console.log(obj.sizeLabel); // 输出：Size

obj.size = 10;
console.log(obj.getSize()); // 输出：10

在上面的例子中，我们在对象字面量中使用了计算属性名的语法，将变量 propName 和字符串 'Label' 进行了拼接，并且作为了一个属性名。同时，我们也定义了一个计算属性 size，并且使用 get 和 set 关键字来定义了该属性的读取和修改方法。

八、扩展运算符

ES6 中的扩展运算符用三个连续的点 ... 表示，主要用于将一个可迭代对象（如数组、字符串或类数组对象）展开成多个元素

1、数组的展开

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

在上面的例子中，我们使用扩展运算符将两个数组 arr1 和 arr2 展开，并且合并成一个新的数组 combinedArray。

2、字符串的展开

const str = 'hello';
const chars = [...str];

console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

在上面的例子中，我们使用扩展运算符将字符串 str 展开成一个字符数组 chars，每个字符都成为了数组的一个元素。 

3、函数的参数传递

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result); // 输出：6

 在上面的例子中，我们定义了一个求和函数 sum()，并且使用扩展运算符将数组 numbers 的元素作为函数的参数进行传递。

4、对象的展开

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // 输出：{ foo: 'bar', baz: 'qux' }

在上面的例子中，我们使用扩展运算符将两个对象 obj1 和 obj2 的属性展开，并且合并成一个新的对象 mergedObj。

扩展运算符不仅可以用于数组、字符串、对象的展开，还可以用于函数调用时的参数展开等场景，能够让我们更方便地处理和操作数据。