ES6新特性詳解

2021-09-20 09:10:43 字數 2775 閱讀 5937

①let 和const都是塊級作用域,並且都不會有變數提公升

②const宣告的變數都會被認為是常量,不能被修改,但如果被const修飾的是物件,物件中的屬性值可以被修改

看一道簡單的題目

var funcs = 

for (var i = 0; i < 5; i++) )

} funcs.foreach(function(func) )

輸出結果顯而易見是輸出五個5,但如果想輸出0~9應該怎麼做呢?看下es5和es6分別怎麼做

// es5告訴我們可以利用閉包解決這個問題

var funcs =

for (var i = 0; i < 5; i++)

})(i) )}

funcs.foreach(function(func) )

//es6中只需要使用let

const funcs =

for (let i = 0; i < 10; i++) )

}funcs.foreach(func => func())

第乙個用途,基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定

//es5 

var name = 'lili'

console.log('hello' + name)

//es6

const name = 'lili'

console.log(`hello $`) //hello lili

第二個用途,在es5時我們通過反斜槓(\)來做多行字串拼接。es6反引號(``)直接搞定。

// es5

var msg = "hi \

man!

"// es6

const template = `hello world

`

對於字串es6當然也提供了很多厲害也很有意思的方法

const str = 'hahay'

console.log(str.includes('y')) // true

const str = 'he'

console.log(str.repeat(3)) // 'hehehe'

const str = 'hello world!'

console.log(str.startswith('hello')) // true

console.log(str.endswith('!')) // true

函式預設引數

//es5

function

action(num)

//es6

function

action(num = 200)

箭頭函式

//es6

[1,2,3].map(x => x + 1)

//es5

[1,2,3].map((function(x)).bind(this))

鍵值對簡寫

//es5

function

people(name, age) ;

}//es6

function

people(name, age) ;

}//方法同樣適用

//es5

const people =

}//es6

const people =

}

淺拷貝object.assign()

const objb = 

const objc = {} // 這個為目標物件

const obj = object.assign(objc, objb)

console.log(objb) //

console.log(objc) //

console.log(obj) //

//obj為 objc的淺拷貝

//雖然assign被定義為淺拷貝,但是第乙個引數傳入{}可以達到深拷貝的效果

const objb =

const obj = object.assign({}, objb)

console.log(objb) //

console.log(obj) //

此時obj為objb的深拷貝

var people = 

//es5

var name = people.name

var age = people.age

//es6

const = people

//陣列同樣適用

var arr = [1,2,3];

const = arr;

//陣列

const color = ['red', 'yellow']

const colorful = [...color, 'green', 'pink']

console.log(colorful) //[red, yellow, green, pink]

//物件

const alp =

const alphabets =

console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

本文**

掘金

es6新特性 ES6新特性(一)

var 1 var宣告的是函式作用域 區域性 但在if for等定義的變數是全域性的 2 var 具有變數提公升,預解析 3 在同乙個作用域下,var可以宣告多次 4 var 宣告的變數會掛載到window上 let1 let不存在變數提公升,在變數使用之前,必須要先宣告 2 let在同一作用域下,...

ES6新特性須知

1.1es5之前函式想要賦預設值var funes5 function a,b,c 1.2es6開始函式想要賦預設值var funes6 function a 50,b 60,c 70 2.1es5之前字串拼接或者拼接屬性值只能如下var a lbj var b 50 var c name a ye...

es6新特性分享

1 字串查詢 es5使用是indexof 返回字元第一次出現的位置int值 es6新增了3個方法 includes startswith endwith 返回bool值 includes 是否包含字元 startswith 首字母是否包含字元 endwith 末尾是否包含字元 2 數值擴充套件 nu...