JavaScript6里出現(xiàn)了哪些新語法、新特征?
新版本 javascript6/ECMAScript2015 在去年出來了,我們現(xiàn)在普遍使用的javascript 5是在2009年出來的,相隔這么多年,變化比較大,添加了一些很好用的特性。
下面就看幾個(gè)簡單而實(shí)用的小特性:
1、模板文本需要在字符串中加入變量時(shí),通常做法就是使用字符串拼接,如
var param = 'b';var str = 'a ' + param + ' c';
ES6中簡單了,可以直接在字符串中添加變量
var str = `a ${param} c`;
注意,使用的是反引號(hào) “,而不是 ”
2、多行字符串例如想定義一個(gè)html代碼片段,放在一行很難看,想用多行,還得用字符串拼接
var html ='<div>' +'<span>test</span>' +'</div>';
一堆加號(hào)和引號(hào),很麻煩
ES6中的反引號(hào)就能簡單的解決
var html =`<div><span>test</span></div>`;
非常清晰,里面還可以直接加變量,很方便
3、參數(shù)默認(rèn)值想給參數(shù)設(shè)置默認(rèn)值時(shí),需要我們手工處理,例如
function (width, height) {var height = height || 300;var width = width || 600;...}
ES6可以直接指定默認(rèn)值
function (width=600, height=300) {...} 4、解構(gòu)賦值
例如有一個(gè)json對(duì)象
var data = {name:'dys', age:1};
想取得name,age屬性的話,需要分別獲取
var name = data.name;var age = data.age;
ES6可以自動(dòng)獲取并賦值
var {name, age} = data;
這幾個(gè)示例只是比較簡單的語法方面的便利特性,ES6還有一些比較深入的改進(jìn),例如
箭頭函數(shù)、Promises、Classes ……
如何使用ES6
ES6是個(gè)新東西,兼容性還是個(gè)大問題,直接使用肯定是不可行了
還好,已經(jīng)有了ES6的代碼轉(zhuǎn)換器,可以把ES6的代碼轉(zhuǎn)為ES5的代碼(例如 babel),可以讓我們使用ES6,又不擔(dān)心兼容問題
我還沒實(shí)際應(yīng)用,不知道實(shí)際兼容效果是否有那么好
babel的官網(wǎng) https://babeljs.io/
babel 示例
babel有g(shù)ulp插件,下面是個(gè)簡單的ES6代碼轉(zhuǎn)換示例
(1)安裝環(huán)境
需要你的機(jī)器上已經(jīng)裝了nodejs、gulp
然后安裝babel客戶端
$ npm install -g babel-cli
在項(xiàng)目目錄下安裝相關(guān)插件
$ npm install gulp$ npm install --save-dev gulp-babel$ npm install --save-dev babel-preset-es2015
(2)測(cè)試腳本
用ES6方式寫一個(gè)測(cè)試 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"));});
這個(gè)腳本的意思是使用babel把a(bǔ).js編譯并輸出到dist目錄下
(3)執(zhí)行編譯
在項(xiàng)目目錄中執(zhí)行
$ gulp
執(zhí)行結(jié)束后,到dist目錄下查看編譯后的a.js
相關(guān)文章:
1. WMLScript腳本程序設(shè)計(jì)第1/9頁2. 利用CSS3新特性創(chuàng)建透明邊框三角3. XML入門的常見問題(三)4. Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例5. 多級(jí)聯(lián)動(dòng)下拉選擇框,動(dòng)態(tài)獲取下一級(jí)6. 不要在HTML中濫用div7. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)8. vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程9. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂代碼10. 詳解CSS偽元素的妙用單標(biāo)簽之美
