1、ECMAScript6 實(shí)用筆記(更新中...)
一芍殖、簡介
1搓蚪、目前常用的版本是ECMAScript3.0，后來改了名字叫ECMAScript5
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)烘豹，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)诺祸，是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序携悯，成為企業(yè)級(jí)開發(fā)語言。
ECMAScript 和 JavaScript 的關(guān)系是筷笨，前者是后者的規(guī)格憔鬼，后者是前者的一種實(shí)現(xiàn)
2、ECMAScript6的特點(diǎn)：
- ES6增添了許多必要的特性胃夏，例如模塊和類轴或，塊級(jí)作用域，常量與變量
3仰禀、瀏覽器的支持程度
4照雁、可以通過Babel轉(zhuǎn)碼器把ES6寫的代碼轉(zhuǎn)成ES5的，就不用擔(dān)心運(yùn)行環(huán)境是否支持
5答恶、chrome下使用ES6為保證可以正常使用大部分語法囊榜，需要使用嚴(yán)格模式，即在js開始部分加上'use strict'
6亥宿、在firefox下使用ES6為保證可以正常使用大部分語法卸勺，需要知道測(cè)試版本，即在script標(biāo)簽的type屬性中加上“application/javascript;version=1.7”屬性值
二烫扼、let
let 聲明變量的關(guān)鍵字
1曙求、在相同的作用域內(nèi)，let不能重復(fù)聲明一個(gè)變量（不同的作用域內(nèi)除外）
2、let聲明的變量不會(huì)被預(yù)解析
3悟狱、暫時(shí)性死區(qū)
'use strict' //嚴(yán)格模式静浴，即在js開始部分加上'use strict'
console.log(a); //undefined let聲明的變量不會(huì)被預(yù)解析
var a=12;
var a='kaivon';
console.log(a);
//console.log(b); //報(bào)錯(cuò) 不能提前使用
let b=20;
//let b=30; //報(bào)錯(cuò) let不能重復(fù)聲明一個(gè)變量（不同的作用域內(nèi)除外）
console.log(b);
{
let str='kaivon';
console.log(str);
}
三、塊級(jí)作用域
塊級(jí)作用域批是的是一對(duì)大括號(hào)就是一個(gè)作用域
塊級(jí)作用域可以直接寫一對(duì)大括號(hào)挤渐，以后就不用寫自執(zhí)行函數(shù)了
{
let a=12;
function fn(){
let a=20;
console.log(a);
}
fn();
}
四苹享、const 常量
const 聲明一個(gè)常量，一旦聲明后就不能修改了
1浴麻、如果聲明后再去修改的話就會(huì)報(bào)錯(cuò)
2得问、只聲明不賦值也會(huì)報(bào)錯(cuò)
3、只能先聲明后使用软免，不會(huì)被提前解析
4宫纬、不能重復(fù)聲明一個(gè)常量
注意：const聲明的對(duì)象中的屬性是可以修改的
'use strict'
var a=12;
a='kaivon';
console.log(a);
const str='kaivon';
//str=12; //報(bào)錯(cuò) 聲明后再去修改的話就會(huì)報(bào)錯(cuò)
console.log(str);
//const b; //報(bào)錯(cuò) 只聲明不賦值也會(huì)報(bào)錯(cuò)
//console.log(c); //報(bào)錯(cuò) 只能先聲明后使用，不會(huì)被提前解析
const c=20;
//const c='kaivon'; //報(bào)錯(cuò) 不能重復(fù)聲明一個(gè)常量
//聲明一個(gè)對(duì)象后膏萧，可以對(duì)它里面的屬性進(jìn)行修改
const obj={
name:'kaivon'
};
obj.name='陳學(xué)輝';
console.log(obj); //const聲明的對(duì)象中的屬性是可以修改的
五漓骚、數(shù)組解構(gòu)賦值
解構(gòu)賦值:
按照一定的模式，從數(shù)組或者對(duì)象中把數(shù)據(jù)拿出來榛泛，對(duì)變量進(jìn)行賦值
數(shù)組解構(gòu)賦值:
等號(hào)左邊與右邊必需都是數(shù)組蝌蹂，數(shù)組的解構(gòu)賦值要一一對(duì)應(yīng)。如果對(duì)應(yīng)不上的話就是undefined
'use strict'
/*var a=1; //傳統(tǒng)聲明變量
var b=2;*/
var [a,b,c]=[1,2,3]; //可以使用數(shù)組進(jìn)行批量聲明變量
console.log(a,b,c); //1 2 3
let [x,,y,z]=[1,2,3]; //數(shù)組的解構(gòu)賦值要一一對(duì)應(yīng)曹锨。如果對(duì)應(yīng)不上的話就是undefined
console.log(x,y,z); //1 3 undefined
var [a,[b,c]]=[1,[2,3]];
console.log(a,b,c); //1 2 3 可以嵌套
//可以用來調(diào)換兩個(gè)值
var n1=10;
var n2=15;
var [n1,n2]=[n2,n1];
console.log(n1,n2); //15 10
//也可以用來取函數(shù)的返回值
function fn(){
return ['red','green','blue'];
}
var [d,e,f]=fn();
console.log(e); //green
六孤个、對(duì)象解構(gòu)賦值
解構(gòu)賦值:
按照一定的模式，從數(shù)組或者對(duì)象中把數(shù)據(jù)拿出來艘希，對(duì)變量進(jìn)行賦值
對(duì)象解構(gòu)賦值:
等號(hào)左邊與右邊必需都是對(duì)象硼身，名字要一一對(duì)應(yīng)硅急，順序不需要對(duì)應(yīng)覆享，對(duì)應(yīng)不上的值結(jié)果是undefined
'use strict'
var obj={
name:'kaivon',
QQ:356985332,
language:['css','html','js'],
work:function(){
console.log('js');
}
};
var {name,work,QQ,age}=obj; //等號(hào)左邊與右邊必需都是對(duì)象，名字要一一對(duì)應(yīng)
console.log(name,work,QQ,age);//kaivon 356985332 js undefined
//可以用它來取一個(gè)對(duì)象的值
function fn(){
return {
c1:'red',
c2:'green',
c3:'blue'
}
}
var {c1,c2,c3}=fn();
console.log(c2); //green
七营袜、字符串的擴(kuò)展方法
- includes(s) 字符串里面是否包含某個(gè)字符撒顿，參數(shù)是一個(gè)字符
- startsWidth(s) 字符串的開始位置的字符是否是參數(shù)的，參數(shù)是一個(gè)字符
- endsWidth(s) 字符串的結(jié)束位置的字符是否是參數(shù)的荚板，參數(shù)是一個(gè)字符
以上的幾個(gè)方法都返回一個(gè)布爾值,包含有true,不包括為false - repeat(num) 復(fù)制字符串凤壁，參數(shù)為數(shù)字，表示復(fù)制的次數(shù)跪另。參數(shù)必需是一個(gè)正數(shù)拧抖，其它的就會(huì)報(bào)錯(cuò)
'use strict'
var str='kaivon'; //聲明個(gè)字符串
console.log(str.includes('i')); //true 字符串里面包含 'i'
console.log(str.includes('b')); //false 字符串里面不包含 'b'
console.log(str.startsWith('k')); //true 開始位置包含'k'
console.log(str.endsWith('n')); //true 結(jié)束位置包含'n'
console.log(str.repeat(3)); //kaivonkaivonkaivon 復(fù)制三次
//console.log(str.repeat(-1)); //報(bào)錯(cuò) 參數(shù)必需是一個(gè)正數(shù)，其它的就會(huì)報(bào)錯(cuò)
//console.log(str.repeat(Infinity)); //報(bào)錯(cuò) 參數(shù)必需是一個(gè)正數(shù)免绿，其它的就會(huì)報(bào)錯(cuò)
八唧席、模板字符串
模板字符串：字符串及數(shù)據(jù)的拼接方式
1、字符串需要用一對(duì)反引號(hào)包起來，它可以定義多行字符串淌哟，只用一對(duì)反引號(hào)
2迹卢、要拼進(jìn)去的數(shù)據(jù)需要放在${}里面
3、大括號(hào)里還可以進(jìn)行運(yùn)算
4徒仓、大括號(hào)里還可以調(diào)用函數(shù)
var obj={
title:‘心情‘,
content:’今天很爽腐碱，吃了飯，睡了覺掉弛，還打了豆豆‘
}
var text=document.getElementById("text");
//text.innerHTML='<h1>'+obj.title+'</h1><p>'+obj.content+'</p>'; //常規(guī)的拼接方法
function fn(){
return '那么問題來了症见，豆豆爽么？';
}
//要拼進(jìn)去的數(shù)據(jù)需要放在${}里面
var str1=`<h1>${obj.title}</h1>
<p>${obj.content}</p>`;
//大括號(hào)里還可以進(jìn)行運(yùn)算
var str2=`<h1>${obj.title+'+1'}</h1>
<p>${obj.content}</p>`;
var str3=`<h1>${obj.title+'+1'}</h1>
<p>${obj.content+fn()}</p>`; //大括號(hào)里還可以調(diào)用函數(shù)
//text.innerHTML=str1;
//text.innerHTML=str2;
//text.innerHTML=str3;
九狰晚、Math對(duì)象的擴(kuò)展方法
Math.trunc(num): 去除小數(shù)部分筒饰，是直接把小數(shù)部分去掉
1、對(duì)于非數(shù)值壁晒，先調(diào)用Number方法把它轉(zhuǎn)成數(shù)字
2瓷们、對(duì)于空值和無法轉(zhuǎn)成數(shù)字的值，結(jié)果是NaN
console.log(Math.trunc(12.74)); //12
console.log(Math.trunc(0.5)); //0
console.log(Math.trunc('36.01')); //36
console.log(Math.trunc('kaivon')); //NaN
Math.sign(num): 判斷一個(gè)數(shù)是正數(shù)還是負(fù)數(shù)還是0
1秒咐、參數(shù)為正數(shù)谬晕，返回1
2、參數(shù)為負(fù)數(shù)携取，返回-1
3攒钳、參數(shù)為0，返回0
4雷滋、參數(shù)為-0不撑，返回-0
5、參數(shù)為其它值晤斩，返回NaN
console.log(Math.sign(5)); //1
console.log(Math.sign(-5)); //-1
console.log(Math.sign(0)); //0
console.log(Math.sign(-0)); //-0
console.log(Math.sign('kaivon')); //NaN
十焕檬、數(shù)組的擴(kuò)展方法
Array.from() 把類數(shù)組轉(zhuǎn)成真正的數(shù)組
任何有l(wèi)ength屬性的對(duì)象都可以用這個(gè)方法轉(zhuǎn)真正數(shù)組
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
'use strict'
var lis=document.querySelectorAll("li");
//console.log(lis);
var newLis=[].slice.call(lis); //利用以前的方法將類數(shù)組轉(zhuǎn)換為數(shù)組
var newLis=Array.from(lis); //Array.from() 把類數(shù)組轉(zhuǎn)成真正的數(shù)組
console.log(newLis); //[li, li, li, li, li]
var str='kaivon';
var newStr=Array.from(str); //任何有l(wèi)ength屬性的對(duì)象都可以用這個(gè)方法轉(zhuǎn)真正數(shù)組
console.log(newStr); //["k", "a", "i", "v", "o", "n"]
//對(duì)象身上只要有l(wèi)ength屬性就可以調(diào)用Array.from()把對(duì)象轉(zhuǎn)成數(shù)組,對(duì)象中的key必需是從0開始的數(shù)字才能轉(zhuǎn)
var obj={
0:'red',
1:'green',
2:'blue',
3:'yellow',
length:4
};
console.log(Array.from(obj)); // ['red','green','blue','yellow']
Array.of() 把一組數(shù)值轉(zhuǎn)成真正的數(shù)組
console.log(new Array()); //[]
console.log(new Array(3)); //[, , ,]
console.log(new Array(1,2,3)); //[1, 2, 3]
console.log(Array.of(1)); //[1]
console.log(Array.of(1,2,3)); //[1, 2, 3]
includes(數(shù)據(jù),起始位置) 查找數(shù)組中有沒有某個(gè)數(shù)據(jù)
var arr=['red','green','blue','yellow'];
console.log(arr.includes('red')); //true
console.log(arr.includes('pink')); //false
console.log(arr.includes('green',2)); //false
遍歷相關(guān)
- for in 循環(huán)，能夠直接讀取鍵名
- for of 循環(huán)澳泵，能夠直接讀取鍵值
它不光可以遍歷數(shù)組或者對(duì)象实愚，只要有遍歷接口的對(duì)象都可以用它
- keys() 存儲(chǔ)了數(shù)組的所有鍵名
- values() 存儲(chǔ)了數(shù)組的所有鍵值
- entries() 存儲(chǔ)了數(shù)組的所有鍵值對(duì)
'use strict'
var color=['red','green','blue','yellow'];
//for in
for(var attr in color){
console.log(attr); //0 1 2 3 直接讀取鍵名
}
//for of
for(var value of color){
console.log(value); //red green blue yellow 直接讀取鍵值
}
//字符串也可以使用for of
var str='kaivon';
for(var value of str){
console.log(value); //k a i v o n 只要有遍歷接口的對(duì)象都可以用它
}
//遍歷keys
for(var key of color.keys()){
console.log(key); //0 1 2 3 存儲(chǔ)了數(shù)組的所有鍵名
}
//遍歷values
/*for(var value of color.values()){ 存儲(chǔ)了數(shù)組的所有鍵值
console.log(value); //red green blue yellow 提示一下，chrom還不支持
}*/
//遍歷entries
for(let [key,value] of color.entries()){
console.log(key,value); //0 "red" 1 "green" 2 "blue" 3 "yellow" 存儲(chǔ)了數(shù)組的所有鍵值對(duì)
}
十一兔辅、函數(shù)參數(shù)默認(rèn)值
'use strict'
function fn(a,b){
b=b||'kaivon'; //以往設(shè)置默認(rèn)參數(shù)方法
console.log(a,b);
}
fn('hello'); //hello kaivon
fn('hello','moto'); //hello moto
//參數(shù)變量是默認(rèn)聲明的腊敲，不能用let或者const再次聲明
function fn2(a=20,b=10){ //直接將默認(rèn)參數(shù)寫在函數(shù)括號(hào)中
//console.log(a,b); //20 10
//let a=12; //報(bào)錯(cuò)
console.log(a+b); //30
}
fn2(); //30
fn2(23,45); //68
十二、箭頭函數(shù)
語法：
1维苔、function用var碰辅、let、const來表示
2介时、參數(shù)要寫在第一個(gè)等號(hào)后面
- 1没宾、如果沒有參數(shù)忍法，需要寫一對(duì)空的小括號(hào)
- 2、只有一個(gè)參數(shù)榕吼，那就直接寫饿序，不用加括號(hào)
- 3、參數(shù)有多個(gè)羹蚣，需要加一個(gè)小括號(hào)原探，參數(shù)用逗號(hào)隔開
'use strict'
/*function fn1(){
console.log('kaivon');
}
fn1();*/ //常規(guī)寫法
var fn1=()=>console.log('kaivon'); //es5寫法 如果沒有參數(shù)，需要寫一對(duì)空的小括號(hào)
fn1();
let fn2=a=>console.log(a); //只有一個(gè)參數(shù)顽素，那就直接寫咽弦，不用加括號(hào)
fn2('kaivon'); //kaivon
const fn3=(a,b)=>{ //參數(shù)有多個(gè)，需要加一個(gè)小括號(hào)胁出，參數(shù)用逗號(hào)隔開
let result=a+b;
console.log(result);
}
fn3(1,2); //3
十三型型、對(duì)象的簡潔表示法
屬性與方法都可以簡潔表示
'use strict'
/*function fn(){
var x=10;
var y=20;
function sum(){
return x+y;
}
return {x:x,y:y,sum:sum}
}
console.log(fn());*/ //常規(guī)獲取函數(shù)內(nèi)部變量及方法
function fn(){ //ES6獲取函數(shù)內(nèi)部變量及方法
var x=10;
var y=20;
function sum(){
return x+y;
}
return {
x,
y,
sum(){
return x+y;
}
}
}
console.log(fn());
console.log(fn().sum()) //30
十四、屬性名表達(dá)式
可以把表達(dá)式放在中括號(hào)里作為屬性名
'use strict'
let key='interest';
let obj={
name:'kaivon',
[key]:'打豆豆',
['show'](){
console.log(this.name);
}
}
console.log(obj);
十五全蝶、Object.is()
比較兩個(gè)值是否相等闹蒜，與===的結(jié)果一樣，但是還是有一些區(qū)別
- 返回的結(jié)果是一個(gè)布爾值
區(qū)別:
- 1抑淫、+0與-0比較的結(jié)果為false
- 2绷落、NaN與NaN比較的結(jié)果為true
'use strict'
console.log(Object.is('kaivon','kaivon')); //true
console.log(+0===-0); //true
console.log(Object.is(+0,-0)); //false
console.log(NaN===NaN); //false
console.log(Object.is(NaN,NaN)); //true
十六、Object.is()
將一個(gè)對(duì)象身上的屬性復(fù)制到另一個(gè)對(duì)象身上
- 至少需要兩個(gè)參數(shù)
- 1始苇、第一個(gè)參數(shù)為合并后的對(duì)象
- 2砌烁、從第二個(gè)參數(shù)開始往后就是所有要合并的對(duì)象
- 3、如果有同名的屬性催式，后面會(huì)把前面覆蓋了
- 4函喉、如果有嵌套的對(duì)象，是覆蓋并不是添加
'use strict'
var obj1={a:1};
var obj2={b:2};
var obj3={a:4,c:3};
Object.assign(obj1,obj2,obj3);
console.log(obj1); //{a:1,b:2,c:3} //如果有同名的屬性荣月，后面會(huì)把前面覆蓋了
//封裝個(gè)函數(shù)
const merge=(target,...souce)=>{
Object.assign(target,...souce);
return target;
}
console.log(merge(obj1,obj2,obj3)); //Object {a: 4, b: 2, c: 3}
//如果有嵌套的對(duì)象管呵，是覆蓋并不是添加
var obj4={
d:{
e:5
}
}
var obj5={
d:{
f:6
}
}
console.log(merge({},obj4,obj5)); //{a: 4, b: 2, c: 3}
十七、Set數(shù)據(jù)結(jié)構(gòu)
Set 數(shù)據(jù)結(jié)構(gòu)喉童，類似數(shù)組撇寞。所有的數(shù)據(jù)都是唯一的顿天，沒有重復(fù)的值堂氯。它本身是一個(gè)構(gòu)造函數(shù)
- size 數(shù)據(jù)的長度
- add() 添加一個(gè)數(shù)據(jù)
- deleate() 刪除一個(gè)數(shù)據(jù)
- has() 查找某條數(shù)據(jù)，返回一個(gè)布爾值
- clear() 刪除所有數(shù)據(jù)
'use strict'
var set=new Set([1,3,4,5,4,3,2]);
set.add(6); //在數(shù)據(jù)結(jié)構(gòu)中添加 6
set.delete(1); //在數(shù)據(jù)結(jié)構(gòu)中刪除 1
console.log(set.has(5)); //true 在數(shù)據(jù)結(jié)構(gòu)中查找是否有 5
set.clear(); //刪除所有數(shù)據(jù)內(nèi)容
console.log(set,set.size); //Set {1, 3, 4, 5, 2} 5
