JavaScript6裡出現了哪些新語法、新特徵?
新版本 javascript6/ECMAScript2015 在去年出來了,我們現在普遍使用的javascript 5是在2009年出來的,相隔這麼多年,變化比較大,新增了一些很好用的特性。
下面就看幾個簡單而實用的小特性:
1、模板文字
需要在字串中加入變數時,通常做法就是使用字串拼接,如
var param = 'b'; var str = 'a ' + param + ' c';
ES6中簡單了,可以直接在字串中新增變數
var str = `a ${param} c`;
注意,使用的是反引號 “,而不是 ”
2、多行字串
例如想定義一個html程式碼片段,放在一行很難看,想用多行,還得用字串拼接
var html = '<div>' + '<span>test</span>' + '</div>';
一堆加號和引號,很麻煩
ES6中的反引號就能簡單的解決
var html = `<div> <span>test</span> </div>`;
非常清晰,裡面還可以直接加變數,很方便
3、引數預設值
想給引數設定預設值時,需要我們手工處理,例如
function (width, height) { var height = height || 300; var width = width || 600; ... }
ES6可以直接指定預設值
function (width=600, height=300) { ... }
4、解構賦值
例如有一個json物件
var data = {name:'dys', age:1};
想取得name,age屬性的話,需要分別獲取
var name = data.name; var age = data.age;
ES6可以自動獲取並賦值
var {name, age} = data;
這幾個示例只是比較簡單的語法方面的便利特性,ES6還有一些比較深入的改進,例如
箭頭函式、Promises、Classes ……
如何使用ES6
ES6是個新東西,相容性還是個大問題,直接使用肯定是不可行了
還好,已經有了ES6的程式碼轉換器,可以把ES6的程式碼轉為ES5的程式碼(例如 babel),可以讓我們使用ES6,又不擔心相容問題
我還沒實際應用,不知道實際相容效果是否有那麼好
babel的官網 https://babeljs.io/
babel 示例
babel有gulp外掛,下面是個簡單的ES6程式碼轉換示例
(1)安裝環境
需要你的機器上已經裝了nodejs、gulp
然後安裝babel客戶端
$ npm install -g babel-cli
在專案目錄下安裝相關外掛
$ npm install gulp $ npm install --save-dev gulp-babel $ npm install --save-dev babel-preset-es2015
(2)測試指令碼
用ES6方式寫一個測試 a.js
var str = `hi ${name}`;
編寫 gulpfile.js
var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.src("a.js") .pipe(babel({presets: ['es2015']})) .pipe(gulp.dest("dist")); });
這個指令碼的意思是使用babel把a.js編譯並輸出到dist目錄下
(3)執行編譯
在專案目錄中執行
$ gulp
執行結束後,到dist目錄下檢視編譯後的a.js
相關文章
- ABAP 740裡的新語法 - LET表示式
- 華為EMUI 10語音助手更新了!語音功能出現新玩法,小藝太智慧了UI
- JavaScript 新語法 「雙問號語法」與「可選鏈語法」JavaScript
- ES6新語法上
- PHP8 新特徵PHP特徵
- Vue 2.6 釋出:新語法、效能改進、向 3.0 看齊Vue
- 學習ES6新語法
- angular 新語法糖學習一Angular
- Mirai 殭屍網路出現了新的變種AI
- 使用 C# 9.0 新語法提升 if 語句美感C#
- 【Java8新特性】Lambda表示式基礎語法,都在這兒了!!Java
- MySQL8.0新特性-CTE語法支援MySql
- PHP 7.4 新語法:箭頭函式PHP函式
- 新學一種c語言寫法C語言
- IDEA 2024.3 EAP新特徵早覽!Idea特徵
- 伺服器出現了一個新軟體,一幫大佬吵起來了!伺服器
- 如何給 PHP 新增新的語法特性 (譯)PHP
- 強力學習 ES6 新語法
- 【新特性速遞】當法語遇上FineUI(Bonjour)!UI
- JDK14新特徵最全詳解JDK特徵
- Python程式語言有哪些特徵?入門分享!Python特徵
- 新的主鍵和外來鍵的語法
- 記錄:又學了一個 Laravel 新寫法Laravel
- Laravel 8 正式釋出!來看看有哪些新特性Laravel
- SAPGUI裡實現自定義的語法檢查GUI
- “偽人工智慧”三大特徵新鮮出爐,對號入座閱讀人工智慧特徵
- 為了推新遊戲,B站把局座關在了密室裡遊戲
- AI自己「長出」了類似大腦的「腦葉」?新研究揭示LLM特徵的驚人幾何結構AI特徵
- Flink 1.11.0 釋出,有哪些值得關注的新特性?
- 漢語言處理包HanLP1.6.4釋出,優化新詞發現HanLP優化
- Java出現一個新的GC:LXRJavaGC
- 新的前端框架Svelte有哪些創新? - Jannik前端框架
- 新興市場中休閒類遊戲廣告投放呈現哪些新趨勢?遊戲
- NewSQL 究竟新在哪裡?SQL
- Java8 新語法習慣 (級聯 lambda 表示式)Java
- 一些 Next Generation ABAP Platform 的新語法用例Platform
- 9.20新聞:三星釋出多色新機,《想想辦法吧,爸爸》再被推介
- 2018年, Steam上新了哪些國產文字冒險遊戲?遊戲
- 新鄉哪裡有開票-新鄉開票