首頁  >  文章  >  web前端  >  es6語法是一種標準嗎

es6語法是一種標準嗎

青灯夜游
青灯夜游原創
2022-10-21 16:38:07856瀏覽

es6語法是一種標準。 ES6全名為ECMAScript 6,是正式發布的JavaScript語言的一種標準,該標準的目標是使得JavaScript語言可以用來編寫複雜的大型應用程序,成為企業級開發語言。 ECMAScript和JavaScript的關係是:前者是後者的規格,後者是前者的一種實作。

es6語法是一種標準嗎

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

ES6全名為ECMAScript 6,是正式發布的JavaScript語言的一種標準,該標準的目標是使得JavaScript語言可以用來編寫複雜的大型應用程序,成為企業級開發語言。

ES6是繼ES5之後發布的JavaScript語言的新一代標準,加入了許多新的特性和語法,該標準於2015年6月17日發布了正式版本,並被正式命名為ES2015。

ECMAScript 和JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現(另外的ECMAScript 方言還有JScript 和ActionScript)

2011 年,ECMAScript 5.1 版發布後,就開始製定6.0 版了。因此,ES6 這個字的原意,就是指 JavaScript 語言的下一個版本。 ES6 的第一個版本,在 2015 年 6 月發布,正式名稱是《ECMAScript 2015 標準》(簡稱 ES2015)。 2016 年 6 月,小幅修訂的《ECMAScript 2016 標準》(簡稱 ES2016)如期發布,這個版本可以看作是 ES6.1 版,因為兩者的差異非常小,基本上是同一個標準。根據計劃,2017 年 6 月發布 ES2017 標準。

因此,ES6 既是歷史名詞,也是一個泛指,意義是5.1 版以後的JavaScript 的下一代標準,涵蓋了ES2015、ES2016、ES2017 等等,而ES2015 則是正式名稱,特指該年發布的正式版本的語言標準。我 們說 ES6 的地方,一般是指 ES2015 標準,但有時也是泛指「下一代 JavaScript 語言」。

一、區塊作用域建構let和const

#區塊作用域存在於:函數內部、區塊中(即:字元「 { 」 與「 } 」之間的區域)

#1.let宣告

  • 透過var聲明的變數存在變數提升機制,而let宣告的變數不會被提升,可將變數的作用域限制在目前程式碼區塊中
//通过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="https://img.php.cn/upload/image/162/737/761/1666341173585140.png" title="1666341173585140.png" alt="es6語法是一種標準嗎"></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="https://img.php.cn/upload/image/465/191/909/166634117986532es6%E8%AA%9E%E6%B3%95%E6%98%AF%E4%B8%80%E7%A8%AE%E6%A8%99%E6%BA%96%E5%97%8E" title="166634117986532es6語法是一種標準嗎" alt="es6語法是一種標準嗎"></p>
  • 在同一作用域下,不能使用let重複宣告已經存在的標識符,但如果在不同的作用域下,則是可以的。
// 在同一作用域下,不能使用let重复声明已经存在的标识符,但如果在不同的作用域下,则是可以的
    var a=0;
    var b=0;
    {
        let a=0;
    }
    let b=0;

es6語法是一種標準嗎

  • 使用let宣告變數,可以防止變數的重複宣告
 		var a=0;
        var a=10;//ok
        var b=1
        let b=100;

es6語法是一種標準嗎

2.const宣告

  • 每個透過const關鍵字宣告的變數必須在宣告的同時進行初始化
  • 在相同作用域下用const宣告已經存在的識別符也會導致語法錯誤
  • 使用const宣告對象,物件本身的綁定不能修改,但對象的屬性和值是可以修改的
   	const person={
            name:"zhangSan"
        };
        person.name="lisi";	 //ok
        person.age=19;	//ok
        
        person={
            name:"wangwu"
        };

es6語法是一種標準嗎

3.全域區塊作用域綁定

  • 在全域作用域中使用var宣告的變數或對象,將作為瀏覽器環境中的window對象的屬性(使用var很可能會無意中覆寫一個已經存在的全域屬性)
 		var greeting="welcome";
        console.log(window.greeting);
        console.log(window.Screen);
        var Screen="liquid crystal";
        console.log(window.Screen);

es6語法是一種標準嗎

  • #使用let或const宣告變數和常數,避免覆寫window物件的屬性
 		let greeting="welcome";
        console.log(window.greeting);
        console.log(window.Screen);
        const Screen="liquid crystal";
        console.log(window.Screen==Screen);

es6語法是一種標準嗎

總結

#######總結############# #####
  • 通过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: &#39;Johon&#39;, 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 = &#39;Kuangshen&#39;
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 = &#39;小王&#39;
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: &#39;小王&#39;}

五、定义方法简写

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

六、对象拓展运算符

符号 (...)

let person = {nameL:"oAk",age:23}
let someone1 = persion // 引用赋值
let someone2 = { ...person } // 对象拷贝
someone1.name = &#39;oAk_OLD&#39;
someone2.name = &#39;oAk_NEW&#39;
console.log(persion) // {name:&#39;oAk_OLD&#39;, age:23}
console.log(someone1) // {name:&#39;oAk_OLD&#39;, age:23}
console.log(someone2) // {name:&#39;oAk_NEW&#39;, age:23}

【相关推荐:javascript视频教程编程视频

以上是es6語法是一種標準嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn