ES6 新特性,快速熟悉es6
ES6新特性
let命令
- ES6新增了
let
命令,用來宣告變數,它的用法類似於var,但是所宣告的變數,只在let命令所在的程式碼塊內有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
let
命令避免了迴圈變數洩露為全域性變數
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上面程式碼中,變數i只用來控制迴圈,但是迴圈結束後,它並沒有消失,洩露成了全域性變數。
變數的解構賦值
- ES6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
- 本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1 , 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 解構賦值允許指定預設值。
var [foo = true] = [];
foo // true
[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
模版字串
傳統的JavaScript語言,輸出模板通常是這樣寫的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
上面這種寫法相當繁瑣不方便,ES6引入了模板字串解決這個問題。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
模板字串(template string)是增強版的字串,用反引號(`)標識。它可以當作普通字串使用,也可以用來定義多行字串,或者在字串中嵌入變數。
// 普通字串
`In JavaScript '\n' is a line-feed.`
// 多行字串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字串中嵌入變數
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
Number全域性物件
ES6將全域性方法parseInt()和parseFloat(),移植到Number物件上面,行為完全保持不變。
函式變化
- ES6允許為函式的引數設定預設值,即直接寫在引數定義的後面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 引數預設值可以與解構賦值的預設值,結合起來使用。
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- ES6引入rest引數(形式為“…變數名”),用於獲取函式的多餘引數,這樣就不需要使用arguments物件了。rest引數搭配的變數是一個數組,該變數將多餘的引數放入陣列中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 箭頭函式
ES6允許使用“箭頭”(=>)定義函式。
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};
const full = ({ first, last }) => first + ' ' + last;
// 等同於
function full(person) {
return person.first + ' ' + person.last;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
擴充套件運算子
擴充套件運算子(spread)是三個點(…)。它好比rest引數的逆運算,將一個數組轉為用逗號分隔的引數序列。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
擴充套件運算子的應用
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合併陣列
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合併陣列
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES5
a = list[0], rest = list.slice(1)
// ES6,與解構賦值結合
[a, ...rest] = list
//函式的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
物件
- ES6允許直接寫入變數和函式,作為物件的屬性和方法。這樣的書寫更加簡潔。
var birth = '2000/01/01';
var Person = {
name: '張三',
//等同於birth: birth
birth,
// 等同於hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 屬性名錶達式,ES6 允許字面量定義物件時,用方法二(表示式)作為物件的屬性名,即把表示式放在方括號內。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};
相關推薦
ES6 新特性,快速熟悉es6
ES6新特性 let命令 ES6新增了let命令,用來宣告變數,它的用法類似於var,但是所宣告的變數,只在let命令所在的程式碼塊內有效。{ let a = 10; var b = 1; } a // ReferenceError: a is not d
程序員必須知道的六大ES6新特性
log 註意 string 回調函數 三種 -c 新的 構造 但是 一 、字符串擴展 1、傳統上,JavaScript只有indexOf方法,可以用來確定一個字符串是否包含在另一個字符串中。ES6又提供了三種新方法。 includes():返回布爾值,表示是否找到了參數字
ES6新特性
nbsp pil 書寫 無法訪問 tar with 模塊化 程序 document ES6新特性概覽 箭頭操作符 如果你會C#或者Java,你肯定知道lambda表達式,ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數,而右
ES6新特性:解構賦值(上)
變量賦值 什麽 模式 註意 只需要 一個數 html 代碼 內容 1:什麽是解構賦值 按照一貫的套路,接下來的內容是解釋:什麽是解構賦值? 來看看官方的解釋: ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(
ES6新特性使用小結(三)
數組 col kset 布爾值 key 報錯 false 新特性 垃圾 九、數據類型 Symbol /* * Symbol 數據類型 概念: Symbol 提供一個獨一無二的值 * */ { let a1 = Symbol(); let a2
ES6新特性使用小結(四)
aso 數據 定義 mon 過濾 != style nbsp com 十一、Proxy 、Reflect ①、Proxy 的概念和常用方法 { let obj = { //1、定義原始數據對象
ES6新特性概覽
contains c# hub docs 鍵值對 邏輯 chang 控制臺 app 轉自:https://www.cnblogs.com/Wayou/p/es6_new_features.html 本文基於lukehoban/es6features ,同時參考了大量博客資料
ES6新特性之 promise
實現 因此 error script led 得到 color 設置 回調 新的ES6中引入了promise的概念,其目的是讓回調更為優雅。層層嵌套的回調會讓javascript失去美感和可讀性,同時javascript也推薦采用鏈式的方式去書寫函數調用。於是Promi
ES6新特性基礎知識點總結
一:ES6的一些陣列方法 1、foreach 對於一個數組 var colors=["red","green","blue"]; //ES5 for(var i=0;i<colors.length;i++){ console.log(colors[i]); } //ES6 c
ES6新特性-函式的簡寫(箭頭函式)
作者:just4you 來源:CSDN 原文:https://blog.csdn.net/just4you/article/details/79258799 (感謝分享) 通常函式的定義方法 var fn = function(...){ ...... } //例如:
ES6新特性之模組Module用法解析
這篇文章主要介紹了ES6新特性之模組Module用法,簡要說明了模組Module的概念、功能並結合例項形式分析了模組Module的使用方法與相關注意事項,需要的朋友可以參考下 ##一、Module簡介 ES6的Class只是面向物件程式設計的語法糖,升級了ES5的建構函式的原型鏈繼承的寫法
前端入門21-JavaScript的ES6新特性
宣告 本篇內容全部摘自阮一峰的:ECMAScript 6 入門 阮一峰的這本書,我個人覺得寫得挺好的,不管是描述方面,還是例子,都講得挺通俗易懂,每個新特性基本都還會跟 ES5 舊標準做比較,說明為什麼會有這個新特性,這更於理解。 所以,後續不會再寫個關於 ES6 系列的文章了,就在這篇裡大概的列舉一下
ES5&ES6新特性
ES5和6的一些新特性 1、let和const var有一個問題,就是定義的變數有時會莫名奇妙的成為全域性變數。 for(var i = 0; i < 5; i++){ console.log(i); } console.log("迴圈外:" + i)  
JS_9.錯誤處理&ES6新特性
錯誤處理 && ES6新特性-1 1 錯誤處理 1.1 錯誤處理定義 1.2 Error物件 1.3 try/catch 2 ES6新特性-1 2.1 E
22.ES6新特性彙總
1.let :塊級作用域、沒有預解析、不能重複宣告同一個變數 const常量 NUM = 10 ;常量不可修改,如果是物件的話,可以修改值 2.解構賦值 eg1:obj = {data:123},可以直接將data從obj中解構出來:let {data} = obj;
ES6新特性簡介
1.變數宣告const和let 我們都是知道在ES6以前,var關鍵字宣告變數。無論宣告在何處,都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如: function aa() { if(bool) {
JavaScript ES6新特性
一、預設引數 原來的書寫 var obj=function(name,age,color){ name=name||xiaoming; age=age||18 &n
H5中的es6新特性淺析
結構標籤:header、footer、aside、section、article、nav、figure 表單標籤:email、number、range、date、search、color 媒體標籤:video、audio、embed 其他功能標籤:process(
【ES6新特性---let 和 const 命令】
具體參考:http://es6.ruanyifeng.com/#README let 和 const 命令 let 命令 塊級作用域 const 命令 頂層物件的屬性 global 物件 let 命令 基本用法 ES6 新增了l
ES6新特性:Javascript中的Map和WeakMap物件
Map物件 Map物件是一種有對應 鍵/值 對的物件, JS的Object也是 鍵/值 對的物件 ; ES6中Map相對於Object物件有幾個區別: 1:Object物件有原型, 也就是說他有預設的key值在物件上面, 除非我們使用Object.create(null)建立一個沒有原型