ECMAScript6 實用筆記
標籤： ECMAScript6 javascript es6
- 一、簡介
- 二、let
- 三、塊級作用域
- 四、const 常量
- 五、陣列解構賦值
- 六、物件解構賦值
- 七、字串的擴充套件方法
- 八、模板字串
- 九、Math物件的擴充套件方法
- 十、陣列的擴充套件方法
- 十一、函式引數預設值
- 十二、箭頭函式
- 十三、物件的簡潔表示法
- 十四、屬性名錶達式
- 十五、Object.is()
- 十六、Object.is()
- 十七、Set資料結構
- 十八、 展開運算子
一、簡介
1、目前常用的版本是ECMAScript3.0，後來改了名字叫ECMAScript5
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。 ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現
2、ECMAScript6的特點：
- ES6增添了許多必要的特性，例如模組和類，塊級作用域，常量與變數
3、瀏覽器的支援程度
- http://kangax.github.io/compat-table/es6/
4、可以通過Babel轉碼器把ES6寫的程式碼轉成ES5的，就不用擔心執行環境是否支援 5、chrome下使用ES6為保證可以正常使用大部分語法，需要使用嚴格模式，即在js開始部分加上'use strict' 6、在firefox下使用ES6為保證可以正常使用大部分語法，需要知道測試版本，即在script標籤的type屬性中加上“application/javascript;version=1.7”屬性值
二、let
let 宣告變數的關鍵字 1、在相同的作用域內，let不能重複宣告一個變數（不同的作用域內除外） 2、let宣告的變數不會被預解析 3、暫時性死區
'use strict' //嚴格模式，即在js開始部分加上'use strict'
console.log(a); //undefined let宣告的變數不會被預解析
var a=12;
var a='kaivon';
console.log(a);
//console.log(b); //報錯 不能提前使用
let b=20;
//let b=30; //報錯 let不能重複宣告一個變數（不同的作用域內除外）
console.log(b);
{
let str='kaivon';
console.log(str);
}
複製程式碼三、塊級作用域
塊級作用域批是的是一對大括號就是一個作用域 塊級作用域可以直接寫一對大括號，以後就不用寫自執行函式了
{
let a=12;
function fn(){
let a=20;
console.log(a);
}
fn();
}
複製程式碼四、const 常量
const 宣告一個常量，一旦宣告後就不能修改了 1、如果宣告後再去修改的話就會報錯 2、只宣告不賦值也會報錯 3、只能先宣告後使用，不會被提前解析 4、不能重複宣告一個常量 注意：const宣告的物件中的屬性是可以修改的
'use strict'
var a=12;
a='kaivon';
console.log(a);
const str='kaivon';
//str=12; //報錯 宣告後再去修改的話就會報錯
console.log(str);
//const b; //報錯 只宣告不賦值也會報錯
//console.log(c); //報錯 只能先宣告後使用，不會被提前解析
const c=20;
//const c='kaivon'; //報錯 不能重複宣告一個常量
//宣告一個物件後，可以對它裡面的屬性進行修改
const obj={
name:'kaivon'
};
obj.name='陳學輝';
console.log(obj); //const宣告的物件中的屬性是可以修改的
複製程式碼五、陣列解構賦值
解構賦值:
按照一定的模式，從陣列或者物件中把資料拿出來，對變數進行賦值
陣列解構賦值:
等號左邊與右邊必需都是陣列，陣列的解構賦值要一一對應。如果對應不上的話就是undefined
'use strict'
/*var a=1; //傳統宣告變數
var b=2;*/
var [a,b,c]=[1,2,3]; //可以使用陣列進行批量宣告變數
console.log(a,b,c); //1 2 3
let [x,,y,z]=[1,2,3]; //陣列的解構賦值要一一對應。如果對應不上的話就是undefined
console.log(x,y,z); //1 3 undefined
var [a,[b,c]]=[1,[2,3]];
console.log(a,b,c); //1 2 3 可以巢狀
//可以用來調換兩個值
var n1=10;
var n2=15;
var [n1,n2]=[n2,n1];
console.log(n1,n2); //15 10
//也可以用來取函式的返回值
function fn(){
return ['red','green','blue'];
}
var [d,e,f]=fn();
console.log(e); //green
複製程式碼六、物件解構賦值
解構賦值:
按照一定的模式，從陣列或者物件中把資料拿出來，對變數進行賦值
物件解構賦值:
等號左邊與右邊必需都是物件，名字要一一對應，順序不需要對應，對應不上的值結果是undefined
'use strict'
var obj={
name:'kaivon',
QQ:356985332,
language:['css','html','js'],
work:function(){
console.log('js');
}
};
var {name,work,QQ,age}=obj; //等號左邊與右邊必需都是物件，名字要一一對應
console.log(name,work,QQ,age);//kaivon 356985332 js undefined
//可以用它來取一個物件的值
function fn(){
return {
c1:'red',
c2:'green',
c3:'blue'
}
}
var {c1,c2,c3}=fn();
console.log(c2); //green
複製程式碼七、字串的擴充套件方法
- includes(s) 字串裡面是否包含某個字元，引數是一個字元
- startsWidth(s) 字串的開始位置的字元是否是引數的，引數是一個字元
- endsWidth(s) 字串的結束位置的字元是否是引數的，引數是一個字元 以上的幾個方法都返回一個布林值,包含有true,不包括為false
- repeat(num) 複製字串，引數為數字，表示複製的次數。引數必需是一個正數，其它的就會報錯
'use strict'
var str='kaivon'; //宣告個字串
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 結束位置包含'n'
console.log(str.repeat(3)); //kaivonkaivonkaivon 複製三次
//console.log(str.repeat(-1)); //報錯 引數必需是一個正數，其它的就會報錯
//console.log(str.repeat(Infinity)); //報錯 引數必需是一個正數，其它的就會報錯
複製程式碼八、模板字串
模板字串：字串及資料的拼接方式
1、字串需要用一對反引號包起來，它可以定義多行字串，只用一對反引號 2、要拼進去的資料需要放在${}裡面 3、大括號裡還可以進行運算 4、大括號裡還可以呼叫函式
var obj={
title:‘心情‘,
content:’今天很爽，吃了飯，睡了覺，還打了豆豆‘
}
var text=document.getElementById("text");
//text.innerHTML='<h1>'+obj.title+'</h1><p>'+obj.content+'</p>'; //常規的拼接方法
function fn(){
return '那麼問題來了，豆豆爽麼？';
}
//要拼進去的資料需要放在${}裡面
var str1=`<h1>${obj.title}</h1>
<p>${obj.content}</p>`;
//大括號裡還可以進行運算
var str2=`<h1>${obj.title+'+1'}</h1>
<p>${obj.content}</p>`;
var str3=`<h1>${obj.title+'+1'}</h1>
<p>${obj.content+fn()}</p>`; //大括號裡還可以呼叫函式
//text.innerHTML=str1;
//text.innerHTML=str2;
//text.innerHTML=str3;
複製程式碼九、Math物件的擴充套件方法
Math.trunc(num): 去除小數部分，是直接把小數部分去掉
1、對於非數值，先呼叫Number方法把它轉成數字 2、對於空值和無法轉成數字的值，結果是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): 判斷一個數是正數還是負數還是0
1、引數為正數，返回1 2、引數為負數，返回-1 3、引數為0，返回0 4、引數為-0，返回-0 5、引數為其它值，返回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
複製程式碼十、陣列的擴充套件方法
Array.from() 把類陣列轉成真正的陣列
任何有length屬性的物件都可以用這個方法轉真正陣列
<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); //利用以前的方法將類陣列轉換為陣列
var newLis=Array.from(lis); //Array.from() 把類陣列轉成真正的陣列
console.log(newLis); //[li, li, li, li, li]
var str='kaivon';
var newStr=Array.from(str); //任何有length屬性的物件都可以用這個方法轉真正陣列
console.log(newStr); //["k", "a", "i", "v", "o", "n"]
//物件身上只要有length屬性就可以呼叫Array.from()把物件轉成陣列,物件中的key必需是從0開始的數字才能轉
var obj={
0:'red',
1:'green',
2:'blue',
3:'yellow',
length:4
};
console.log(Array.from(obj)); // ['red','green','blue','yellow']
複製程式碼Array.of() 把一組數值轉成真正的陣列
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(資料,起始位置) 查詢陣列中有沒有某個資料
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
複製程式碼遍歷相關
- for in 迴圈，能夠直接讀取鍵名
- for of 迴圈，能夠直接讀取鍵值
-
它不光可以遍歷陣列或者物件，只要有遍歷介面的物件都可以用它 複製程式碼
- keys() 儲存了陣列的所有鍵名
- values() 儲存了陣列的所有鍵值
- entries() 儲存了陣列的所有鍵值對
'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 只要有遍歷介面的物件都可以用它
}
//遍歷keys
for(var key of color.keys()){
console.log(key); //0 1 2 3 儲存了陣列的所有鍵名
}
//遍歷values
/*for(var value of color.values()){ 儲存了陣列的所有鍵值
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" 儲存了陣列的所有鍵值對
}
複製程式碼十一、函式引數預設值
'use strict'
function fn(a,b){
b=b||'kaivon'; //以往設定預設引數方法
console.log(a,b);
}
fn('hello'); //hello kaivon
fn('hello','moto'); //hello moto
//引數變數是預設宣告的，不能用let或者const再次宣告
function fn2(a=20,b=10){ //直接將預設引數寫在函式括號中
//console.log(a,b); //20 10
//let a=12; //報錯
console.log(a+b); //30
}
fn2(); //30
fn2(23,45); //68
複製程式碼十二、箭頭函式
語法： 1、function用var、let、const來表示 2、引數要寫在第一個等號後面
- 1、如果沒有引數，需要寫一對空的小括號
- 2、只有一個引數，那就直接寫，不用加括號
- 3、引數有多個，需要加一個小括號，引數用逗號隔開
'use strict'
/*function fn1(){
console.log('kaivon');
}
fn1();*/ //常規寫法
var fn1=()=>console.log('kaivon'); //es5寫法 如果沒有引數，需要寫一對空的小括號
fn1();
let fn2=a=>console.log(a); //只有一個引數，那就直接寫，不用加括號
fn2('kaivon'); //kaivon
const fn3=(a,b)=>{ //引數有多個，需要加一個小括號，引數用逗號隔開
let result=a+b;
console.log(result);
}
fn3(1,2); //3
複製程式碼十三、物件的簡潔表示法
屬性與方法都可以簡潔表示 , 當屬性與值的變數同名時。
'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());*/ //常規獲取函式內部變數及方法
function fn(){ //ES6獲取函式內部變數及方法
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
const name = 'Jane';
const age = 20
// es6
const person = {
name,
age
}
// es5
var person = {
name: name,
age: age
};
複製程式碼十四、屬性名錶達式
可以把表示式放在中括號裡作為屬性名
'use strict'
let key='interest';
let obj={
name:'kaivon',
[key]:'打豆豆',
['show'](){
console.log(this.name);
}
}
console.log(obj);
複製程式碼十五、Object.is()
比較兩個值是否相等，與===的結果一樣，但是還是有一些區別
- 返回的結果是一個布林值 區別:
- 1、+0與-0比較的結果為false
- 2、NaN與NaN比較的結果為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()
將一個物件身上的屬性複製到另一個物件身上
- 至少需要兩個引數
- 1、第一個引數為合併後的物件
- 2、從第二個引數開始往後就是所有要合併的物件
- 3、如果有同名的屬性，後面會把前面覆蓋了
- 4、如果有巢狀的物件，是覆蓋並不是新增
'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} //如果有同名的屬性，後面會把前面覆蓋了
//封裝個函式
const merge=(target,...souce)=>{
Object.assign(target,...souce);
return target;
}
console.log(merge(obj1,obj2,obj3)); //Object {a: 4, b: 2, c: 3}
//如果有巢狀的物件，是覆蓋並不是新增
var obj4={
d:{
e:5
}
}
var obj5={
d:{
f:6
}
}
console.log(merge({},obj4,obj5)); //{a: 4, b: 2, c: 3}
複製程式碼十七、Set資料結構
Set 資料結構，類似陣列。所有的資料都是唯一的，沒有重複的值。它本身是一個建構函式
- size 資料的長度
- add() 新增一個資料
- deleate() 刪除一個資料
- has() 查詢某條資料，返回一個布林值
- clear() 刪除所有資料
'use strict'
var set=new Set([1,3,4,5,4,3,2]);
set.add(6); //在資料結構中新增 6
set.delete(1); //在資料結構中刪除 1
console.log(set.has(5)); //true 在資料結構中查詢是否有 5
set.clear(); //刪除所有資料內容
console.log(set,set.size); //Set {1, 3, 4, 5, 2} 5
複製程式碼十八、 展開運算子
在ES6中用...來表示展開運算子，它可以將陣列方法或者物件進行展開。先來看一個例子它是如何使用的。
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];
複製程式碼當然，展開物件資料也是可以得到類似的結果
const obj1 = {
a: 1,
b: 2,
c: 3
}
const obj2 = {
...obj1,
d: 4,
e: 5,
f: 6
}
// 結果類似於 const obj2 = Object.assign({}, obj1, {d: 4})
作者：這波能反殺
連結：http://www.jianshu.com/p/cfb0893c34f1
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
複製程式碼針對初學者分享Web前端相關的技術文章、工具資源、javascript、html、css、nodeJs...歡迎關注公眾號“樂前端”、leqianduan