ES6新增特性
【說明】ES5和ES6是javascript語法發(fā)展過程中的新增版本贤旷，對(duì)一些語法及功能性方法作了增加，因些砾脑，對(duì)于一些舊的瀏覽器來說幼驶，有很大的兼容性問題。因些韧衣，我們?cè)谧鲆恍╅_發(fā)工作時(shí)盅藻，對(duì)一些瀏覽器的兼容有一定要求時(shí)，一定要慎用畅铭。
ES6新增數(shù)據(jù)類型
ES6中引入一第七種數(shù)據(jù)類型氏淑，Symbol類型
Symbol類型：一種新的原始數(shù)據(jù)類型，表示一個(gè)獨(dú)一無二的值硕噩。
為何要引入假残？
? ? ? ? 如果有一個(gè)對(duì)象obj,對(duì)象下有一個(gè)fn方法，有一天突然要對(duì)這個(gè)對(duì)象擴(kuò)展一些新功能炉擅，一不小心又添加了一個(gè)fn方法辉懒，于是之前定義好的fn方法會(huì)被新添加的fn方法覆蓋。為了解決這種現(xiàn)象谍失，js就引入了Symbol這個(gè)獨(dú)一無二的值眶俩，常常用于對(duì)象的屬性中。
每個(gè)從Symbol()返回的symbol值都是唯一的袱贮。一個(gè)symbol值能作為對(duì)象屬性的標(biāo)識(shí)符仿便，讓該屬性具有唯一性和私密性体啰；這是該數(shù)據(jù)類型僅有的目的
Symbol類型值的創(chuàng)建
let s = Symbol();
typeof s;//"symbol"
?
let s1 = Symbol();
console.log(s == s1);//false，是兩個(gè)不同的值
【注】創(chuàng)建Symbol類型值嗽仪，不能使用new關(guān)鍵字創(chuàng)建荒勇，因?yàn)镾ymbol是一個(gè)值，而不是一個(gè)對(duì)象闻坚。而new是創(chuàng)建一個(gè)對(duì)象沽翔。
Symbol的參數(shù)
//let s1 = Symbol('name');//name參數(shù)是這個(gè)Symbol原始類型值的名稱,用于對(duì)這個(gè)值的描述，用來區(qū)分這個(gè)原始類型值是哪一個(gè)
?
var s1 = Symbol("name1");
var s2 = Symbol("name2");
console.log(s1);
console.log(s2);
在對(duì)象屬性中的使用
? ? ? ? var a = Symbol("isa");
? ? ? ? var b = Symbol("isb");
? ? ? ? var obj = {
? ? ? ? ? ? name: "tom",
? ? ? ? ? ? age : 19,
? ? ? ? ? ? [a] : "a",
? ? ? ? ? ? [b] : "b"
? ? ? ? }
? ? ? ? obj.a = 2;//不會(huì)將obj中的[a]屬性修改
? ? ? ? obj["a"] = 3;//不會(huì)將obj中的[a]屬性修改
? ? ? ? console.log(obj);
在對(duì)象中不會(huì)被迭代
? ? ? ? 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 多了一些對(duì)變量的限制
let和const聲明變量的共同點(diǎn)：
1，不允許重復(fù)聲明變量
2雳殊，有自己的塊級(jí)作用域
3橘沥，沒有變量提升
4，暫時(shí)性死區(qū)：作用域下夯秃，通過let聲明的變量座咆， 變量聲明之前的區(qū)域，該變量不可用仓洼，這個(gè)區(qū)域就稱作暫時(shí)性死區(qū)介陶。
let聲明變量
let a = 9;
const聲明變量
1.const聲明常量值
const q = 5;
2.const聲明引用值
const arr = [1,2,3];
var,let,const的區(qū)別:
1、let聲明的時(shí)候可以不賦值色建，const聲明的時(shí)候必須賦值
2哺呜、let聲明的變量，可以改變箕戳，const聲明的變量某残，不可以改變（引用數(shù)據(jù)類型的地址不可變，數(shù)據(jù)可變）漂羊。
3驾锰、var聲明的變量有變量提升，沒有塊級(jí)作用域走越，可以重復(fù)聲明椭豫，let和const都相反
箭頭函數(shù)
ES6中新增了書寫函數(shù)的方式，值得注意的是：箭頭函數(shù)只能在書寫匿名函數(shù)的時(shí)候使用
this指向的總結(jié)
箭頭函數(shù)的書寫方式
var fn = () => {alert("ok")};fn();
只能在匿名函數(shù)上使用
box() => {};//語法錯(cuò)誤：箭頭函數(shù)參數(shù)列表格式錯(cuò)誤：Uncaught SyntaxError: Malformed arrow function parameter list
所有匿名函數(shù)都可以寫成前頭函數(shù)
//自定義函數(shù) var fn = () => {}; //定時(shí)器(回調(diào)函數(shù)) setTimeout(() => {}); //對(duì)象下 var obj = { fn : () => {}; } 事件 document.onclick = () => {} 回調(diào)函數(shù) arr.forEach((ele,index,array) => {}); 自執(zhí)行函數(shù) (() => {})();
箭頭函數(shù)的參數(shù)
1.正常傳參
var fn = (a,b) => { alert(a+b); } fn(2,3);?
2.只有一個(gè)參數(shù)時(shí)可省略小括號(hào)
var fn = a => { alert(a); } fn(2);
函數(shù)體只有一行代碼時(shí)可以省略大括號(hào),并自帶返回值
var fn = a => a + 5; var val = fn(2); alert("返回值：" + val);//7
剪頭函數(shù)中沒有自己的this,this來源于上一層的上下文(來自父級(jí)作用域);
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í)所在父級(jí)作用域赏酥。
箭頭函數(shù)中沒有arguments
var fn = () => { console.log(arguments);//Uncaught ReferenceError: arguments is not defined } fn(1,2,3,4,5);
函數(shù)參數(shù)的默認(rèn)值
我們?cè)诙x函數(shù)的時(shí)候，有的時(shí)候需要一個(gè)默認(rèn)值出現(xiàn)谆构，就是當(dāng)我不傳遞參數(shù)的時(shí)候裸扶，使用默認(rèn)值，傳遞參數(shù)了就使用傳遞的參數(shù)
1,原來函數(shù)參數(shù)默認(rèn)值設(shè)置
function fn(a){
a = a || 10;
alert(a);
}
fn();//輸出默認(rèn)值10
fn(20);//輸出傳遞的實(shí)參20
2,ES6默認(rèn)參數(shù)設(shè)置
function fn(a = 10){
alert(a);
}
fn();//輸出默認(rèn)值10
fn(20);//輸出傳遞的實(shí)參20
【注】箭頭函數(shù)如果你需要使用默認(rèn)值的話搬素，那么一個(gè)參數(shù)的時(shí)候也需要寫 （）呵晨。
解構(gòu)賦值
【概念】就是快速從對(duì)象或者數(shù)組中取出成員的一個(gè)語法方式
解構(gòu)數(shù)組
函數(shù)中可以通過解構(gòu)數(shù)組返回多個(gè)結(jié)果
解構(gòu)對(duì)象
通過解構(gòu)對(duì)象應(yīng)用于函數(shù)的對(duì)象傳參
輕松實(shí)現(xiàn)兩個(gè)數(shù)的交換
【注】{}是專門解構(gòu)對(duì)象的魏保，[]是專門解構(gòu)數(shù)組的，二者不能混用摸屠，字符也可以作為數(shù)組解析
var str = "1234";
var [a,b,c] = str;
console.log(a,b,c);//1 2 3
模板字符串
普通字符串的使用
模板字符串的使用
1谓罗，基本使用：
2，變量解析：
展開運(yùn)算符（擴(kuò)展運(yùn)算符）
ES6 里面號(hào)新添加了一個(gè)運(yùn)算符 “... ”季二，叫做展開運(yùn)算符
展開數(shù)組
合并數(shù)組
展開對(duì)象
合并對(duì)象
函數(shù)參數(shù)中的使用
ES6函數(shù)新增bind（val）方法
bind方法：可以實(shí)現(xiàn)函數(shù)內(nèi)部this指向的強(qiáng)制改變檩咱，不會(huì)立即執(zhí)行函數(shù)，而是返回一個(gè)已經(jīng)改變了 this 指向的新函數(shù)胯舷。
bind()方法的使用
bind()方法與call和applay的區(qū)別
call和applay也能強(qiáng)制改變函數(shù)內(nèi)部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結(jié)尾
console.log(str.startsWith("cd"));//true,字符串是否以cd開頭
console.log(str.repeat(3));//cdefcdefcdef,str重復(fù)拼接自身3次
console.log(str.padStart(9,"ab"));//ababacdef，str開頭以ab補(bǔ)全9-4個(gè)字符桑嘶，
console.log(str.padEnd(9,"ab"));//cdefababa炊汹，str結(jié)尾以ab補(bǔ)全9-4個(gè)字符，
ES6新增set集合和map集合
set集合和map集合都是ES6中新增的保存數(shù)據(jù)的方式不翩，set中保存的數(shù)據(jù)可以是任意數(shù)據(jù)類型兵扬，map中的數(shù)據(jù)以鍵值對(duì)的方式存在麻裳，值可以是任意數(shù)據(jù)類型
set集合：特點(diǎn)是自動(dòng)去重口蝠，同時(shí)提供了一些非常好用的方法
1，創(chuàng)建集合對(duì)象
var set = new Set();定義一個(gè)set空的集合對(duì)象
2津坑，添加數(shù)據(jù)? (數(shù)據(jù)會(huì)被自動(dòng)去重)
var set = new Set( [23,43,23] );//要用[ ]的方式添加數(shù)據(jù)
//錯(cuò)誤用法：
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集合轉(zhuǎn)換為真正的數(shù)組
var brr = Array.from(new Set(arr));
console.log(brr);//轉(zhuǎn)換成了數(shù)組妙蔗，并完成了數(shù)組去重
//世上最短的數(shù)組去重
var brr = [...new Set(arr)];
console.log(brr);
3，size屬性
console.log(set.size);//set數(shù)據(jù)長度
4疆瑰，方法的使用
set.add();向集合中添加一個(gè)值眉反，一次只參添加一個(gè)
set.delete(val);刪除集合中的某個(gè)值
set.has(val);判斷集合中是否有某個(gè)值
set.clear();清空集合
5，set遍歷
set.forEach( ( item ) => { console.log( item ) } );
for(var item of set){console.log( item )};
map集合
1穆役，創(chuàng)建集合對(duì)象
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);//鍵值對(duì)的個(gè)數(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刪除對(duì)應(yīng)的鍵值
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補(bǔ)充
es5 數(shù)組新增遍歷方式 for of
for ... of 遍歷數(shù)組：遍歷結(jié)果為值 但不能遍歷JSON對(duì)象，會(huì)報(bào)錯(cuò)
es5新增方法Array.from();
1淹接，Array.from(obj):
將一個(gè)含有l(wèi)ength屬性的對(duì)象十性、集合、類數(shù)組塑悼、偽數(shù)組 轉(zhuǎn)成真正的數(shù)組
2劲适，Array.from(obj，callBack):
callBack:參數(shù)是一個(gè)回調(diào)函數(shù)厢蒜，功能與數(shù)組的map方法類似
3霞势，一道面試題：定義一個(gè)函數(shù)烹植，功能實(shí)現(xiàn) 生成m個(gè)n的數(shù)組? 要求： 不利用循環(huán)
function fn(m,n){
? ? ? var newArr = Array.from( { length:m },() => {
? ? ? ? ? return n;
? ? ? });
? ? ? return newArr;
}
fn(6,3);
