返回

ES6 语法一(部分)

前端

ES6 是 ECMAScript 6.0 的简称,是 JavaScript 语言的下一代标准。ES6 是 JavaScript 的重大更新,引入了许多新特性,包括箭头函数、let 和 const、模板字面量、展开运算符、剩余参数和默认参数等。这些新特性使得 JavaScript 代码更加简洁、易读和易于维护。

箭头函数

箭头函数是 ES6 中引入的新函数语法。箭头函数与传统函数最大的区别在于,箭头函数没有自己的 this ,并且箭头函数体不能使用 return 关键字。箭头函数的语法如下:

(parameters) => expression

例如,以下是一个将两个数字相加的箭头函数:

(a, b) => a + b

箭头函数也可以包含多行代码,但多行代码的箭头函数必须使用大括号将代码块括起来。例如,以下是一个将两个数字相加并返回结果的箭头函数:

(a, b) => {
  let sum = a + b;
  return sum;
};

let 和 const

letconst 是 ES6 中引入的两个新的变量声明关键字。let 声明的变量是块级作用域的,而 const 声明的变量是常量,不能重新赋值。

let x = 10;
const y = 20;

// 重新赋值x
x = 20;

// 重新赋值y
y = 30; // 报错:TypeError: Assignment to constant variable.

模板字面量

模板字面量是 ES6 中引入的新字符串语法。模板字面量使用反引号 (`) 将字符串括起来,并且可以在字符串中嵌入变量和表达式。

const name = "John";
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // 输出:Hello, my name is John and I am 30 years old.

展开运算符

展开运算符是 ES6 中引入的新运算符,用于将数组或对象展开为一组参数或属性。

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

const sum = (...numbers) => {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
};

console.log(sum(1, 2, 3, 4, 5)); // 输出:15

剩余参数

剩余参数是 ES6 中引入的新参数类型,用于收集函数调用中除了已声明参数之外的所有参数。剩余参数必须放在函数参数列表的最后。

function sum(...numbers) {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出:15

默认参数

默认参数是 ES6 中引入的新参数类型,用于为函数参数指定默认值。默认参数必须放在函数参数列表的最后。

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

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

总结

ES6 是 JavaScript 语言的重大更新,引入了许多新特性,包括箭头函数、let 和 const、模板字面量、展开运算符、剩余参数和默认参数等。这些新特性使得 JavaScript 代码更加简洁、易读和易于维护。