ES6新增特性

【說明】ES5和ES6是javascript語法發(fā)展過程中的新增版本，對一些語法及功能性方法作了增加，因些，對于一些舊的瀏覽器來說，有很大的兼容性問題。因些，我們在做一些開發(fā)工作時，對一些瀏覽器的兼容有一定要求時，一定要慎用。

ES6新增數(shù)據(jù)類型

ES6中引入一第七種數(shù)據(jù)類型，Symbol類型

Symbol類型：一種新的原始數(shù)據(jù)類型，表示一個獨一無二的值。

為何要引入？

? ? ? ? 如果有一個對象obj,對象下有一個fn方法，有一天突然要對這個對象擴展一些新功能，一不小心又添加了一個fn方法，于是之前定義好的fn方法會被新添加的fn方法覆蓋。為了解決這種現(xiàn)象，js就引入了Symbol這個獨一無二的值，常常用于對象的屬性中。

每個從Symbol()返回的symbol值都是唯一的。一個symbol值能作為對象屬性的標識符，讓該屬性具有唯一性和私密性；這是該數(shù)據(jù)類型僅有的目的

Symbol類型值的創(chuàng)建

let s = Symbol();

typeof s;//"symbol"

?

let s1 = Symbol();

console.log(s == s1);//false，是兩個不同的值

【注】創(chuàng)建Symbol類型值，不能使用new關鍵字創(chuàng)建，因為Symbol是一個值，而不是一個對象。而new是創(chuàng)建一個對象。

Symbol的參數(shù)

//let s1 = Symbol('name');//name參數(shù)是這個Symbol原始類型值的名稱,用于對這個值的描述，用來區(qū)分這個原始類型值是哪一個

?

var s1 = Symbol("name1");

var s2 = Symbol("name2");

console.log(s1);

console.log(s2);

在對象屬性中的使用

? ? ? ? var a = Symbol("isa");

? ? ? ? var b = Symbol("isb");

? ? ? ? var obj = {

? ? ? ? ? ? name: "tom",

? ? ? ? ? ? age : 19,

? ? ? ? ? ? [a] : "a",

? ? ? ? ? ? [b] : "b"

? ? ? ? }

? ? ? ? obj.a = 2;//不會將obj中的[a]屬性修改

? ? ? ? obj["a"] = 3;//不會將obj中的[a]屬性修改

? ? ? ? console.log(obj);

在對象中不會被迭代

? ? ? ? var a = Symbol("isa");

? ? ? ? var b = Symbol("isb");

? ? ? ? var obj = {

? ? ? ? ? ? name: "tom",

? ? ? ? ? ? age : 19,

? ? ? ? ? ? [a] : "a",

? ? ? ? ? ? [b] : "b"

? ? ? ? }

? ? ? ? for(var key in obj){

? ? ? ? ? ? console.log(key);//name age

? ? ? ? }

? ? ? ? console.log(Object.keys(obj));//["name", "age"]

? ? ? ? console.log(Object.getOwnPropertyNames(obj));//["name", "age"]

? ? ? ? // 可以使用ES6中Object的新增API迭代

? ? ? ? console.log(Object.getOwnPropertySymbols(obj)[0]) //[Symbol(isa), Symbol(isb)]

新增變量聲明方式let和const

let 和 const 的使用方式和 var 沒有區(qū)別,但是聲明出的變量，使用規(guī)則有所不同，let 和 const 多了一些對變量的限制

let和const聲明變量的共同點：

1，不允許重復聲明變量

2，有自己的塊級作用域

3，沒有變量提升

4，暫時性死區(qū)：作用域下，通過let聲明的變量， 變量聲明之前的區(qū)域，該變量不可用，這個區(qū)域就稱作暫時性死區(qū)。

let聲明變量

let a = 9;

const聲明變量

1.const聲明常量值

const q = 5;

2.const聲明引用值

const arr = [1,2,3];

var,let,const的區(qū)別:

1、let聲明的時候可以不賦值，const聲明的時候必須賦值

2、let聲明的變量，可以改變，const聲明的變量，不可以改變（引用數(shù)據(jù)類型的地址不可變，數(shù)據(jù)可變）。

3、var聲明的變量有變量提升，沒有塊級作用域，可以重復聲明，let和const都相反

箭頭函數(shù)

ES6中新增了書寫函數(shù)的方式，值得注意的是：箭頭函數(shù)只能在書寫匿名函數(shù)的時候使用

this指向的總結

箭頭函數(shù)的書寫方式

var fn = () => {alert("ok")};fn();

只能在匿名函數(shù)上使用

box() => {};//語法錯誤：箭頭函數(shù)參數(shù)列表格式錯誤：Uncaught SyntaxError: Malformed arrow function parameter list

所有匿名函數(shù)都可以寫成前頭函數(shù)

//自定義函數(shù) var fn = () => {}; //定時器(回調函數(shù)) setTimeout(() => {}); //對象下 var obj = { fn : () => {}; } 事件 document.onclick = () => {} 回調函數(shù) arr.forEach((ele,index,array) => {}); 自執(zhí)行函數(shù) (() => {})();

箭頭函數(shù)的參數(shù)

1.正常傳參

var fn = (a,b) => { alert(a+b); } fn(2,3);?

2.只有一個參數(shù)時可省略小括號

var fn = a => { alert(a); } fn(2);

函數(shù)體只有一行代碼時可以省略大括號,并自帶返回值

var fn = a => a + 5; var val = fn(2); alert("返回值：" + val);//7

剪頭函數(shù)中沒有自己的this,this來源于上一層的上下文(來自父級作用域);

var fn = () => {

? ? console.log(this); // window

}

document.onclick = () => {

? ? console.log(this); // window

}

var obj = {

? ? fn : () => {

? ? ? ? console.log(this); // window

? ? }

}

document.onclick = function(){

? ? var fn = () => {

? ? ? ? console.log(this); // document

? ? }

}

document.onclick = function(){

? ? var obj = {

? ? ? ? fn : () => {

? ? ? ? ? ? console.log(this); // document

? ? ? ? }

? ? }

}

document.onclick = function(){

? ? setTimeout(() => {

? ? ? ? console.log(this); // document

? ? })

}

?

【說明】箭頭函數(shù)中沒有自己的this指向，this來源于聲明時所在父級作用域。

箭頭函數(shù)中沒有arguments

var fn = () => { console.log(arguments);//Uncaught ReferenceError: arguments is not defined } fn(1,2,3,4,5);

函數(shù)參數(shù)的默認值

我們在定義函數(shù)的時候，有的時候需要一個默認值出現(xiàn)，就是當我不傳遞參數(shù)的時候，使用默認值，傳遞參數(shù)了就使用傳遞的參數(shù)

1,原來函數(shù)參數(shù)默認值設置

function fn(a){

a = a || 10;

alert(a);

}

fn();//輸出默認值10

fn(20);//輸出傳遞的實參20

2,ES6默認參數(shù)設置

function fn(a = 10){

alert(a);

}

fn();//輸出默認值10

fn(20);//輸出傳遞的實參20

【注】箭頭函數(shù)如果你需要使用默認值的話，那么一個參數(shù)的時候也需要寫 （）。

解構賦值

【概念】就是快速從對象或者數(shù)組中取出成員的一個語法方式

解構數(shù)組

函數(shù)中可以通過解構數(shù)組返回多個結果

解構對象

通過解構對象應用于函數(shù)的對象傳參

輕松實現(xiàn)兩個數(shù)的交換

【注】{}是專門解構對象的，[]是專門解構數(shù)組的，二者不能混用，字符也可以作為數(shù)組解析

var str = "1234";

var [a,b,c] = str;

console.log(a,b,c);//1 2 3

模板字符串

普通字符串的使用

模板字符串的使用

1，基本使用：

2，變量解析：

展開運算符（擴展運算符）

ES6 里面號新添加了一個運算符 “... ”，叫做展開運算符

展開數(shù)組

合并數(shù)組

展開對象

合并對象

函數(shù)參數(shù)中的使用

ES6函數(shù)新增bind（val）方法

bind方法：可以實現(xiàn)函數(shù)內部this指向的強制改變，不會立即執(zhí)行函數(shù)，而是返回一個已經改變了 this 指向的新函數(shù)。

bind()方法的使用

bind()方法與call和applay的區(qū)別

call和applay也能強制改變函數(shù)內部this指向，但與bind的使用有異同

1.相同之處

2.不同之處

【注】 箭頭函數(shù)不能使用call apply bind

字符串新增ES6方法

var str = "cdef";

console.log(str.includes("de"));//true,字符串是否包含de

console.log(str.endsWith("ef"));//true,字符串是否以ef結尾

console.log(str.startsWith("cd"));//true,字符串是否以cd開頭

console.log(str.repeat(3));//cdefcdefcdef,str重復拼接自身3次

console.log(str.padStart(9,"ab"));//ababacdef，str開頭以ab補全9-4個字符，

console.log(str.padEnd(9,"ab"));//cdefababa，str結尾以ab補全9-4個字符，

ES6新增set集合和map集合

set集合和map集合都是ES6中新增的保存數(shù)據(jù)的方式，set中保存的數(shù)據(jù)可以是任意數(shù)據(jù)類型，map中的數(shù)據(jù)以鍵值對的方式存在，值可以是任意數(shù)據(jù)類型

set集合：特點是自動去重，同時提供了一些非常好用的方法

1，創(chuàng)建集合對象

var set = new Set();定義一個set空的集合對象

2，添加數(shù)據(jù)? (數(shù)據(jù)會被自動去重)

var set = new Set( [23,43,23] );//要用[ ]的方式添加數(shù)據(jù)

//錯誤用法：

var set = new Set( 23,43,23 );

//使用方法添加數(shù)據(jù)

var set = new Set()

set.add( 23 ).set.add( 43 ).set.add( 23 )...

//使用Array.from(set)方法可以將set集合轉換為真正的數(shù)組

var brr = Array.from(new Set(arr));

console.log(brr);//轉換成了數(shù)組，并完成了數(shù)組去重

//世上最短的數(shù)組去重

var brr = [...new Set(arr)];

console.log(brr);

3，size屬性

console.log(set.size);//set數(shù)據(jù)長度

4，方法的使用

set.add();向集合中添加一個值，一次只參添加一個

set.delete(val);刪除集合中的某個值

set.has(val);判斷集合中是否有某個值

set.clear();清空集合

5，set遍歷

set.forEach( ( item ) => { console.log( item ) } );

for(var item of set){console.log( item )};

map集合

1，創(chuàng)建集合對象

var map = new Map();

2，添加數(shù)據(jù)

map.set("name","tom").set("phone","120").set("email","110@qq.com");

3，size屬性

console.log(map.size);//鍵值對的個數(shù)

4，方法的使用

map.set(key,val);//添加數(shù)據(jù)

console.log(map.get(key));//根據(jù)鍵獲取值

console.log(map.has(key));//檢測key字段在中是否存在

console.log(map.delete(key));//根據(jù)key刪除對應的鍵值

map.clear();//清空數(shù)據(jù)

console.log(map);

5，map遍歷

map.forEach(function(val,key,obj){

console.log(val,key,obj);

})

for(var arr of map){

console.log(arr[0] + "=" + arr[1]);

}

ES6補充

es5 數(shù)組新增遍歷方式 for of

for ... of 遍歷數(shù)組：遍歷結果為值 但不能遍歷JSON對象，會報錯

es5新增方法Array.from();

1，Array.from(obj):

將一個含有l(wèi)ength屬性的對象、集合、類數(shù)組、偽數(shù)組 轉成真正的數(shù)組

2，Array.from(obj，callBack):

callBack:參數(shù)是一個回調函數(shù)，功能與數(shù)組的map方法類似

3，一道面試題：定義一個函數(shù)，功能實現(xiàn) 生成m個n的數(shù)組? 要求： 不利用循環(huán)

function fn(m,n){

? ? ? var newArr = Array.from( { length:m },() => {

? ? ? ? ? return n;

? ? ? });

? ? ? return newArr;

}

fn(6,3);