es6 syntax is a standard. The full name of ES6 is ECMAScript 6, which is an officially released standard for the JavaScript language. The goal of this standard is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise-level development language. The relationship between ECMAScript and JavaScript is: the former is a specification of the latter, and the latter is an implementation of the former.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

The full name of ES6 is ECMAScript 6, which is an officially released standard for the JavaScript language. The goal of this standard is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise-level development language.

ES6 is a new generation standard of JavaScript language released after ES5, adding many new features and syntax. The standard was released as an official version on June 17, 2015, and was officially named ES2015.

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)

2011 , after the release of ECMAScript version 5.1, the development of version 6.0 began. Therefore, the original meaning of the word ES6 refers to the next version of the JavaScript language. The first version of ES6 was released in June 2015, and its official name is "ECMAScript 2015 Standard" (ES2015 for short). In June 2016, the slightly revised "ECMAScript 2016 Standard" (referred to as ES2016) was released as scheduled. This version can be regarded as the ES6.1 version, because the difference between the two is very small and they are basically the same standard. According to the plan, the ES2017 standard will be released in June 2017.

Therefore, ES6 is both a historical term and a general term. It means the next generation standard of JavaScript after version 5.1, covering ES2015, ES2016, ES2017, etc., while ES2015 is the official name, specifically referring to The official version of the language standard released that year. When we talk about ES6, we generally refer to the ES2015 standard, but sometimes we also refer to the "next generation JavaScript language" in general.

1. Block scope constructs let and const

Block scope exists inside: function , block (ie: the area between the characters " { " and " } ")

1.let statement

• Declared through var There is a variable promotion mechanism for variables, but variables declared by let will not be promoted. The scope of the variable can be limited to the current code block

//通過var聲明的變量
??//函數(shù)內(nèi)部
????????function?changeState(flag)?{
????????????if?(flag)?{
????????????????var?color?=?"red"
????????????}?else?{
????????????????console.log(color);
????????????????return?null;
????????????}
????????}
????????changeState(false);
???//塊中
????????{
????????????var?a?=?1;
????????}
????????console.log("a="?+?a);
???//for循環(huán)中
????????for?(var?i?=?0;?i?<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/162/737/761/1666341173585140.png" class="lazy" title="1666341173585140.png" alt="Is es6 syntax a standard?"></p><pre class="brush:php;toolbar:false">?//通過let聲明的變量
????????????//函數(shù)內(nèi)部
????????????function?changeState(flag)?{
????????????????if?(flag)?{
????????????????????let?color?=?"red"
????????????????}?else?{
????????????????????console.log(color);
????????????????????return?null;
????????????????}
????????????}
????????????changeState(false);
???????
????????????//塊中
????????????{
????????????????let?a?=?1;
????????????}
????????????console.log("a="?+?a);
??????
????????????//for循環(huán)中
????????????for?(let?i?=?0;?i?<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/ae4e9436b32da42a0fd6ccd91f3142c6-3.png" class="lazy" title="166634117986532Is es6 syntax a standard?" alt="Is es6 syntax a standard?"></p>

• In the same scope, you cannot use let to repeatedly declare an existing identifier, but if it is in a different scope, it is possible.

//?在同一作用域下，不能使用let重復(fù)聲明已經(jīng)存在的標(biāo)識(shí)符，但如果在不同的作用域下，則是可以的
????var?a=0;
????var?b=0;
????{
????????let?a=0;
????}
????let?b=0;

• Using let to declare variables can prevent repeated declaration of variables

?		var?a=0;
????????var?a=10;//ok
????????var?b=1
????????let?b=100;

2.const declaration

• Every variable declared through the const keyword must be initialized at the same time as the declaration
• Use const in the same scope Declaring an existing identifier will also cause a syntax error
• Use const to declare an object. The binding of the object itself cannot be modified, but the properties and values ??of the object can be modified

???	const?person={
????????????name:"zhangSan"
????????};
????????person.name="lisi";	?//ok
????????person.age=19;	//ok
????????
????????person={
????????????name:"wangwu"
????????};

3. Global block scope binding

• Variables or objects declared using var in the global scope will be used as attributes of the window object in the browser environment (Using var is likely to inadvertently overwrite an existing global property)

?		var?greeting="welcome";
????????console.log(window.greeting);
????????console.log(window.Screen);
????????var?Screen="liquid?crystal";
????????console.log(window.Screen);

• Use let or const to declare variables and constants to avoid overwriting window Properties of objects

?		let?greeting="welcome";
????????console.log(window.greeting);
????????console.log(window.Screen);
????????const?Screen="liquid?crystal";
????????console.log(window.Screen==Screen);

Summary

• 通過var聲明的變量存在變量提升機(jī)制，而let聲明的變量不會(huì)被提升，可將變量的作用域限制在當(dāng)前代碼塊中
• 在同一作用域下，不能使用let重復(fù)聲明已經(jīng)存在的標(biāo)識(shí)符，但如果在不同的作用域下，則是可以的
• 使用let聲明變量，可以防止變量的重復(fù)聲明
• 每個(gè)通過const關(guān)鍵字聲明的變量必須在聲明的同時(shí)進(jìn)行初始化
• 在同一作用域下用const聲明已經(jīng)存在的標(biāo)識(shí)符也會(huì)導(dǎo)致語法錯(cuò)誤
• 使用const聲明對(duì)象，對(duì)象本身的綁定不能修改，但對(duì)象的屬性和值是可以修改的
• 在全局作用域中使用var聲明的變量或?qū)ο?，將作為瀏覽器環(huán)境中的window對(duì)象的屬性（使用var很可能會(huì)無意中覆蓋一個(gè)已經(jīng)存在的全局屬性）
• 使用let或const聲明變量和常量，避免覆蓋window對(duì)象的屬性

二、解構(gòu)賦值

解構(gòu)賦值是對(duì)賦值運(yùn)算符的擴(kuò)展。

他是一種針對(duì)數(shù)組或者對(duì)象進(jìn)行模式匹配，然后對(duì)其中的變量進(jìn)行賦值。

在代碼書寫上簡(jiǎn)潔且易讀，語義更加清晰明了；

也方便了復(fù)雜對(duì)象中數(shù)據(jù)字段獲取。

//1、數(shù)組解構(gòu)
// 傳統(tǒng)
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、對(duì)象解構(gòu)
let user = {name: 'Johon', age: 18}
// 傳統(tǒng)
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：解構(gòu)的變量必須和user中的屬性同名
console.log(name, age)

三、模板字符串

模板字符串相當(dāng)于加強(qiáng)版的字符串，用反引號(hào) `,除了作為普通字符串，還可以用來定義多行字符串，

還可以在字符串中加入變量和表達(dá)式。

// 字符串插入變量和表達(dá)式。變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達(dá)式。
let name = 'Kuangshen'
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Kuangshen,I am 28 years old next year.

四、聲明對(duì)象簡(jiǎn)寫

const age = 12
const name = '小王'
// 傳統(tǒng)
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: '小王'}

五、定義方法簡(jiǎn)寫

// 傳統(tǒng)
const person1 = {
sayHi:function(){
console.log('Hi')
}
}
person1.sayHi();//'Hi'
// ES6
const person2 = {
sayHi(){
console.log('Hi')
}
}
person2.sayHi() //'Hi'

六、對(duì)象拓展運(yùn)算符

符號(hào) (...)

let person = {nameL:"oAk",age:23}
let someone1 = persion // 引用賦值
let someone2 = { ...person } // 對(duì)象拷貝
someone1.name = 'oAk_OLD'
someone2.name = 'oAk_NEW'
console.log(persion) // {name:'oAk_OLD', age:23}
console.log(someone1) // {name:'oAk_OLD', age:23}
console.log(someone2) // {name:'oAk_NEW', age:23}

【相關(guān)推薦：javascript視頻教程、編程視頻】

The above is the detailed content of Is es6 syntax a standard?. For more information, please follow other related articles on the PHP Chinese website!