ECMAScript6 實用筆記

樂前端發表於2018-01-08

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

#ECMASCRIPT6筆記
2017-08-11
筆記
實用技巧筆記
2021-03-13
筆記
ADB 實用筆記
2019-07-13
筆記
ECMAScript6簡介
2017-12-18
ECMAScript6 教程（一）
2015-07-23
swift學習筆記《5》- 實用
2018-09-05
Swift筆記
redis與叢集實用操作筆記
2022-01-27
Redis筆記
【實用筆記】PowerShell 美化成 oh-my-zsh
2020-11-26
筆記
Microsoft OneNote（實用的雲筆記軟體）
2022-07-12
ROS筆記
超實用的筆記軟體：Outline for Mac
2022-03-31
筆記Mac
vim實用技巧（第二版）學習筆記
2018-01-28
筆記
筆記本省電問題分析及其實用小技巧
2016-12-13
筆記
[筆記]最佳實踐
2018-11-12
筆記
haproxy實驗筆記
2017-11-09
筆記
bootstrap實踐筆記
2016-08-16
boot筆記
用速記提高聽力記筆記效率
2011-10-17
筆記
ChartDirector應用筆記（一）
2013-12-29
筆記
ChartDirector應用筆記（二）
2013-12-29
筆記
ChartDirector應用筆記（三）
2014-01-03
筆記
【Pandas學習筆記02】處理資料實用操作
2021-11-26
筆記
ECMAScript6變數的解構賦值
2017-12-19
變數賦值
GitHub Tips （很實用，值得收藏）—— 《GitHub入門與實踐》筆記
2016-09-11
Github筆記
lfs 6.3實驗筆記
2018-04-26
筆記
【筆記】堆及其實現
2017-10-29
筆記
jquery最佳實踐筆記
2016-07-24
jQuery筆記
OpenStack實戰指南筆記
2014-11-07
筆記
TRIZ——物理矛盾應用筆記
2022-08-04
筆記
快應用入門筆記
2018-03-22
筆記
IHttpModule和IHttpHandler 應用筆記
2009-10-14
HTTP筆記
實用的可手寫筆記軟體：GoodNotes 5 Mac
2022-03-27
筆記GoMac
內控上線實施應用體驗工作筆記0517
2012-05-17
筆記
用來記筆記的三個 Emacs 模式
2019-05-01
筆記Mac模式
馬克筆記—Android 端開源的 Markdown 筆記應用
2019-03-04
筆記Android
webpack4實操筆記
2018-08-13
Web筆記
harbor安裝實操筆記
2020-12-30
筆記
Vue.js 實踐筆記
2016-09-22
Vue.js筆記
Android AOP 實踐筆記
2017-05-13
Android筆記
【筆記】oracle 陣列實現
2009-01-14
筆記Oracle陣列

ECMAScript6 實用筆記

ECMAScript6 實用筆記

一、簡介

二、let

三、塊級作用域

四、const 常量

五、陣列解構賦值

六、物件解構賦值

七、字串的擴充套件方法

八、模板字串

九、Math物件的擴充套件方法

十、陣列的擴充套件方法

十一、函式引數預設值

十二、箭頭函式

十三、物件的簡潔表示法

十四、屬性名錶達式

十五、Object.is()

十六、Object.is()

十七、Set資料結構

十八、 展開運算子

相關文章

十八、展開運算子