JavaScript（ES6）入門

ES6

1、介紹

ECMAScript? 6（簡稱ES6）是于2015年6月正式發布的JavaScript 語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

另外，一些情況下ES6也泛指ES2015及之后的新增特性，雖然之后的版本應當稱為ES7、ES8等。

2、新增功能

? ? 2.1、let

ES6新增了let命令，用來聲明變量。它的用法類似于var ，但是所聲明的變量，只在let命令所在的代碼塊內有效。

? ? 2.2、const

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變，且聲明時必須立即初始化，不能留到以后賦值。const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。

? ? 2.3、匿名函數簡寫

function(){}?匿名函數簡寫，語法()=>{}。

? ? 2.4、模板字符串

聲明一些html標簽的字符串更簡便，語法：`? ` 。

? ? 2.5、對象定義

屬性名和變量名一致的對象僅使用變量即可無需定義屬性名。

? ? 2.6、模塊

?? ??? ?? ? ES6引入了模塊系統，可以導出和導入模塊。

實戰：

<!DOCTYPE html>

<html lang="en">

<head>

????<meta charset="UTF-8">

????<title>ECMA6</title>

</head>

<body>

????<div id="app">

????????

????</div>

</body>

</html>

<script src="js/axios.min.js"></script>

<script src="js/vue.js"></script>

<script>

????//es6 1.變量聲明??var??原因: 使用var聲明變量存在作用范圍混淆問題

????//??let?????:用來聲明局部變量???好處: 作用范圍嚴謹從代碼聲明出開始到代碼塊結束??一般在

??????????????????聲明基本變量使用推薦使用let

????//??const???:用來聲明js中常量???好處: 一旦被賦值不能被修改???推薦使用這兩個關鍵字聲明

?????????????????????變量聲明js中對象時推薦使用const 數組

????//es6 2.在使用匿名函數時作為參數時候 function(){}???推薦使用es6中箭頭函數

? ? //?(參數,參數)=>{函數體}

????axios.get("url").then(function(res){}).catch(function(err){});

????

????axios.get("url").then((res)=>{

? ??

????}).catch((err)=>{});

????

????//注意:

????//??????1.當箭頭函數沒有參數時或者參數大于1個必須加入()

????//??????2.當箭頭函數只有一個參數時 () 可以省略不寫

????//??????3.當函數體中只有一行代碼時函數體{} 可以省略不寫

????//??????4.箭頭函數和匿名函數最大區別??箭頭函數沒有自己this???匿名函數存在自己的this

????//es6 3. 模板字符串???使用語法:??` `

????let html = "<button οnclick=\"test('+id+')\">點我</button>" +

????????????????????"<button οnclick=\"test('+id+')\">點我</button>";

????

????let html1 = `<div>

????? ? ? ? ? ? ? ? <h1>我是小黑</h1>

????? ? ? ? ? ? ? ? <button οnclick="test()">點我</button>

????? ? ? ? ? ? </div>`;

????//es6 4. 對象定義??便利: 在定義對象時如果對象屬性名和變量名一致,寫一個即可

????let id = 21;

????let name = "小王";

????let age = 23;

????

????//es5.x版本

????const emp = {id:id,name:name,age:age};

????

????//es6.x版本

????const emp1 = {id,name,age}

? ? //es6 5. 模塊導出和導入

????// 導出

????// math.js

? ? export const add = (a, b) => a + b;

? ? export const subtract = (a, b) => a - b;

????// 導入

????// main.js

????import { add, subtract } from './math.js';

????console.log(add(2, 3)); // 5

????console.log(subtract(5, 3)); // 2

</script>

了解更多參考文檔： 1.1 ES6 教程 | 菜鳥教程

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/17686.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/17686.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/17686.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！