📜  一些 js es6 - Javascript (1)

📅  最后修改于: 2023-12-03 15:06:09.770000             🧑  作者: Mango

一些 JS ES6 - JavaScript

JavaScript 是一种脚本语言,最初是用于网页前端开发,但现在也用于服务器后端开发、桌面应用程序和游戏开发等领域。ES6 是 JavaScript 的第六个版本,也称为 ECMAScript 2015。它引入了许多新的语言特性,使得 JavaScript 语言更具表现力和易用性。

新特性
let 和 const

ES6 引入了两个新的变量声明关键字 letconst。与 var 关键字不同,letconst 声明的变量有块级作用域,可以避免变量提升和变量重定义等问题。

// 使用 let 声明变量
let x = 1;
x = 2;

// 使用 const 声明常量
const PI = 3.14;

// 下面的代码会报错,因为常量不能被重新赋值
PI = 3.1415;
箭头函数

ES6 引入了箭头函数,使得定义简单的函数更加便捷。箭头函数还具有词法作用域,绑定了上下文的 this 对象,避免了在回调函数中使用 bind() 做上下文绑定的问题。

// 使用箭头函数定义匿名函数
const sum = (a, b) => a + b;

// 等价于
function sum(a, b) {
  return a + b;
}
模板字符串

ES6 引入了模板字符串,使用反引号 (`) 包含模板字符串。模板字符串可以包含变量、表达式和换行符等内容。

// 使用模板字符串拼接字符串
const name = 'John';
const message = `Hello, ${name}!

Welcome to my website.`;
解构赋值

ES6 引入了解构赋值,可以快速而方便地从数组或对象中提取数据。解构赋值还可以在函数参数中使用,使函数调用更加简洁。

// 解构数组
const [x, y] = [1, 2];
console.log(x, y); // 输出: 1 2

// 解构对象
const { name, age } = { name: 'John', age: 25 };
console.log(name, age); // 输出: John 25

// 在函数参数中使用解构赋值
function print({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}

print({ name: 'John', age: 25 }); // 输出: John is 25 years old.
类和继承

ES6 引入了类和继承机制,使得 JavaScript 更加面向对象。类定义使用 class 关键字,类的成员使用 constructor() 和箭头函数等语法定义。子类继承使用 extends 关键字。

// 定义一个简单的类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// 继承 Person 类
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  study() {
    console.log(`${this.name} is studying at ${this.school}.`);
  }
}

const john = new Student('John', 18, 'MIT');
john.greet(); // 输出: Hello, my name is John and I'm 18 years old.
john.study(); // 输出: John is studying at MIT.
总结

以上是一些 ES6 的新特性介绍,包括变量声明、箭头函数、模板字符串、解构赋值和类等语言特性。这些特性使得 JavaScript 更易用、更具表现力和更符合现代编程的要求。如果你是 JavaScript 初学者或者想要深入了解 JavaScript,不妨去了解一下 ES6 的新特性。