Is es6 syntax a standard?

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声明的变量
  //函数内部
        function changeState(flag) {
            if (flag) {
                var color = "red"
            } else {
                console.log(color);
                return null;
            }
        }
        changeState(false);
   //块中
        {
            var a = 1;
        }
        console.log("a=" + a);
   //for循环中
        for (var i = 0; i <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/162/737/761/1666341173585140.png?x-oss-process=image/resize,p_40" class="lazy" title="1666341173585140.png" alt="Is es6 syntax a standard?"></p><pre class="brush:php;toolbar:false"> //通过let声明的变量
            //函数内部
            function changeState(flag) {
                if (flag) {
                    let color = "red"
                } else {
                    console.log(color);
                    return null;
                }
            }
            changeState(false);
       
            //块中
            {
                let a = 1;
            }
            console.log("a=" + a);
      
            //for循环中
            for (let i = 0; i <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/ae4e9436b32da42a0fd6ccd91f3142c6-3.png?x-oss-process=image/resize,p_40" 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重复声明已经存在的标识符，但如果在不同的作用域下，则是可以的
    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声明的变量存在变量提升机制，而let声明的变量不会被提升，可将变量的作用域限制在当前代码块中
• 在同一作用域下，不能使用let重复声明已经存在的标识符，但如果在不同的作用域下，则是可以的
• 使用let声明变量，可以防止变量的重复声明
• 每个通过const关键字声明的变量必须在声明的同时进行初始化
• 在同一作用域下用const声明已经存在的标识符也会导致语法错误
• 使用const声明对象，对象本身的绑定不能修改，但对象的属性和值是可以修改的
• 在全局作用域中使用var声明的变量或对象，将作为浏览器环境中的window对象的属性（使用var很可能会无意中覆盖一个已经存在的全局属性）
• 使用let或const声明变量和常量，避免覆盖window对象的属性

二、解构赋值

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；

也方便了复杂对象中数据字段获取。

//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: 'Johon', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let { name, age } = user//注意：解构的变量必须和user中的属性同名
console.log(name, age)

三、模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，

还可以在字符串中加入变量和表达式。

// 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
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.

四、声明对象简写

const age = 12
const name = '小王'
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: '小王'}

五、定义方法简写

// 传统
const person1 = {
sayHi:function(){
console.log('Hi')
}
}
person1.sayHi();//'Hi'
// ES6
const person2 = {
sayHi(){
console.log('Hi')
}
}
person2.sayHi() //'Hi'

六、对象拓展运算符

符号 (...)

let person = {nameL:"oAk",age:23}
let someone1 = persion // 引用赋值
let someone2 = { ...person } // 对象拷贝
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}

【相关推荐：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!