ES6(ECMAScript 6.0)
ECMAScript 6.0 (hereafter referred to as ES6) is the next-generation standard for the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.
Relationship between ECMAScript and JavaScript
To clarify this issue, we need to review history. In November 1996, Netscape, the creator of JavaScript, decided to submit JavaScript to the standardization organization ECMA, hoping that the language would become an international standard. The following year, ECMA released the first edition of Standard Document 262 (ECMA-262), which specified the standard for the browser scripting language, and called this language ECMAScript, which was version 1.0.
Therefore, the relationship between ECMAScript and JavaScript is that the former is a specification of the latter, and the latter is an implementation of the former (other ECMAScript dialects include Jscript and ActionScript)
basic grammar
let declare variable
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
const declares constants (read-only variables)
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
destructuring assignment
Destructuring assignment is an extension of the assignment operator.
It is a kind of pattern matching against arrays or objects, and then assigning values to the variables.
The code is concise and easy to read, and the semantics are clearer; it also facilitates the acquisition of data fields in complex objects.
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
//2、对象解构
let user = {
name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let {
name, age } = user//注意：结构的变量必须是user中的属性
console.log(name, age)
template string
The template string is equivalent to the enhanced version of the string, with backticks `, in addition to being used as a normal string, it can also be used to define a multi-line string, and you can also add variables and expressions to the string.
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${
name},I am ${
age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${
f()}`
console.log(string2); // Game start,have fun!
Declaring Object Shorthand
const age = 12
const name = "Amy"
// 传统
const person1 = {
age: age, name: name}
console.log(person1)
// ES6
const person2 = {
age, name}
console.log(person2) //{age: 12, name: "Amy"}
Define method shorthand
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
Object spread operator
The spread operator (…) is used to extract all traversable properties of the parameter object and copy them to the current object.
// 1、拷贝对象
let person1 = {
name: "Amy", age: 15}
let someone = {
...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {
age: 15}
let name = {
name: "Amy"}
let person2 = {
...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
Arrow functions (arrow functions are mostly used for the definition of anonymous functions)
Arrow functions provide a more concise way of writing functions. The basic syntax is:
parameters => function body
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b