ECMAScript6知識點1

時間 2019-11-13

標籤 ecmascript6 ecmascript 知識欄目 JavaScript 简体版

原文原文鏈接

參考資料

微軟中文javascript文檔javascript

阮一峯老師的 ECMAScript 6入門css

infoq 深刻淺出ES6html

ECMAScript 2015 簡易教程java

張鑫旭老師的blog，相關連接放在相應的位置es6

一.變量

1.1 let

let 相似java的變量聲明方式，嚴格模式，chrome

let特性：
           一、不容許重複聲明
           二、沒有預解析。
           三、塊級做用域數組

一對{}包括的區域稱爲代碼塊
塊級做用域指一個變量或者函數只在該區域才起做用。
從塊的開始到聲明這段的區域暫存死區瀏覽器

1.不容許重複聲明閉包

let a = 1;
let a =3; //Uncaught SyntaxError: Identifier 'a' has already been declared

類比java代碼 wordpress

//類比java的變量聲明
int a = 1;
int a = 2;//重複聲明

2.沒有預解析。[暫存死區]

console.log(a);//error Uncaught ReferenceError: a is not defined
	let a = 1;

類比java

//類比java的變量在使用前須要先聲明
public static void main(String[] args) {
		System.out.println(a);//a cannot be resolved to a variable
		int a =1;
	}

對比var

console.log(a);// 由於有與解析的存在，a這裏就爲undefined，不會報錯。
var a = 1;

三、塊級做用域

let聲明的做用域是在{}裏面，而var是在函數做用域內，

{
		let i = 1;//利用let 聲明的i  在外部沒法引用
	}
	console.log(i);	// Uncaught ReferenceError: i is not defined

對比var

{
		var i = 1;
	}
	console.log(i);	//利用var 聲明的i  在外部仍是能夠引用到。

利用let聲明的變量就能夠不用考慮for循環的外部引用問題了。

let：

var tt = [1,2,3];
	for (let i = 0; i < tt.length; i++) {
		tt[i]
	};
	console.log(i);	//ReferenceError: i is not defined;i 只是在 for的{}區域內有效，

對比var

var tt = [1,2,3];
	for (var i = 0; i < tt.length; i++) {
		tt[i]
	};
	console.log(i);	//利用var 聲明的i  在外部仍是能夠引用到。

例子：1.定時器

for (var i = 0; i < 10; i++) {
			setTimeout(function  () {
				console.log(i); //閉包的問題，打印結果都爲10，簡單的理解，
								//i聲明後沒有馬上被使用，而是通過了一段時間後才使用。
								//因此for循環跑完了。i值固定了。
			})
		};

若是須要每次的i打印的不同，就讓i馬上被使用，

使用var的方式，能夠使用匿名函數自執行的方式

for (var i = 0; i < 100; i++) {
			(function  (i) {
				setTimeout(function  () {
					console.log(i); //函數馬上執行了。i被使用了。因此每次的i的值都是不同的
				})
			})(i)
		};

若是使用let的方式的話

for (let i = 0; i < 10; i++) {
			setTimeout(function  () {
				console.log(i); //let是強類型:對比java，與閉包就沒多大關係了。
			})
		};

例子：2選項卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {
		display: none;
	}
	.show{
		display:block;
	}
	.active {
		background-color: yellow;
	}
	</style>
</head>
<body>
	<input type="button" value="btn1" class="active">
	<input type="button" value="btn2">
	<input type="button" value="btn3">
	<div class="show">div1</div>
	<div>div2</div>
	<div>div3</div>
	<script type="text/javascript">
		var tabs = document.getElementsByTagName('input');
		var divs = document.getElementsByTagName('div');
		for(let i =0, len = tabs.length;i<len;i++){
			tabs[i].onclick = function  () {
				for (let i = 0; i < tabs.length; i++) {// 這裏使用了和外面同樣的let聲明方式也沒有關係，
				//由於let是強類型的&&塊級做用域
					tabs[i].className="";
					divs[i].className="";
				}
				this.className="active";
				divs[i].className="show";
			}
		}
		
		
	</script>
</body>
</html>

1.2 const

const 聲明常量，相似java的static final，用法也相似

好比聲明瞭變量的話，const強調變量的引用不能再修改，而不是說變量的引用裏面的值不能被修改

const a = {
		name:"test",
		age:1
	};
	a.name="test2";//修改常量的引用的內部的值是能夠的。
	console.log(a.name,a.age);

1.3 變量的解構賦值

ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

1.3.1 數組的解構賦值

let ori = [1,2,[3,4]];
		let [a,b,[c]] = ori;//數組是按照順序一個個賦值的。注意，這裏到3，沒有到4.
		console.log(a,b,c);

若是模式不對，就會報錯。

let ori = [1,2,[3,4]];
		let [a,b,d,[c]] = ori;//這裏d沒法匹配原來的模式串。因此報錯了。
		console.log(a,b,c);

1.3.2 對象的解構

let oriObj ={
			foo:function  () {
				
			},
			o:{name:"oo",age:1},
			arr:[1,2,3],
			str:'sss'
		}
		let {foo,o} = oriObj;//對象的結構賦值使用的是key去對應。更多的內容參考阮一峯老師的es6
		console.log(foo,o);

注意模式匹配，如上面的例子，若是咱們想匹配name的值，對比上面的例子，要使用下面的寫法，注意對象的解構賦值，要注意模式串的匹配。還有嵌套匹配的時候模式不是變量。

let oriObj ={
			foo:function  () {
				return "tt";
			},
			o:{name:"oo",age:1},
			arr:[1,2,3],
			str:'sss'
		}
		let {foo,o:{name}} = oriObj;//參考阮一峯老師的es6講解，這裏o是一個模式不是一個變量，因此o是不能賦值的。
		console.log(foo,name);

二.字符串

2.字符串擴展

2.1 codePointAt

var s = '𠮷';
		console.log(s.length);//特殊字符須要用4個字節[2個字符]去存儲
		s.charCodeAt(0);
		s.charCodeAt(1);
        console.log(s.codePointAt(0));//找碼點值。
        console.log(s.codePointAt(1));

2.2 fromCodePoint

這是一個靜態方法【String.xxx】。返回碼點對應的值。

好比上面的碼點值。

var s = '𠮷';
		//console.log(s.length);//特殊字符須要用4個字節[2個字符]去存儲
		//s.charCodeAt(0);
		console.log(s.codePointAt(1));
		console.log(String.fromCodePoint(s.codePointAt(1)));

2.3 at

這個方法在有些瀏覽器下面不支持

xxxStr.at();//返回對應位置的字符

2.4 repeat

字符串重複

str.repeat(2);//字符串重複

2.5 模板字符串

let name = "hello";
		let age = 2;
		console.log(`您的名字是${name},您的年紀是${age}`);

2.6 unicode表示法

超過\u0000到\uFFFF的字符將碼點放入{}也能夠顯示出來。

console.log('\u0061');
		console.log('\u{20BB7}');//超出部分使用{}填入碼點也能夠顯示
		console.log('\u{41}\u{42}\u{43}')

2.7 includes

參數格式：

1.要查找的字符串，2.起始位置

結果：boolean

var tt = "hello kitty";
		console.log(tt.includes("he",0));

2.8 startsWith && endsWith

參數格式：

1.要查找的字符串，2.起始位置

結果：boolean

三數值

3 數值擴展

3.1 數值表示法：二進制和八進制

二進制表示使用0b，八進制使用0o;

console.log(0b1111);
		console.log(0o711);

3.2 trunc

去除小數點

Math.trunc(1.234)

3.3 sign

判斷正負，最重要的是判斷0主要是正0仍是負0；

3.4 hypot

返回全部參數的平方和的平方根，勾股定理

四數組

4 數組擴展

4.1 from

Array.from，將類數組轉爲真正的數組

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<script type="text/javascript">
		var divs = document.getElementsByTagName('div');
		var eles = [].slice.call(divs);//使用原生的處理方式
		console.log(eles);
		let eles2 = Array.from(divs);//類數組轉爲真正的數組
		console.log(eles2);


	</script>
	
</body>
</html>

直接轉換字符串

console.log(Array.from("string"));

4.2 of

Array.of，將一組參數，轉爲數組

var arr = Array.of(1,2,3,4,5);

這個方法解決new Array(5)，這裏5是一個長度的問題。

4.3 find

找出第一個符合條件的數組元素【返回元素自己】
       參數：
           一、回調函數
           二、回調函數內this的指向
       遍歷整個數組，遍歷過程當中調用回調函數，若是回調函數的返回值爲true，則返回當前正在遍歷的元素。
       若是全部元素都不符合條件則返回undefined

var arr = [1,2,3,4,6];
	var n = arr.find(function(value,index){
        console.log(arguments);//這裏有三個參數。
		return value > 4;
	})
	console.log(n);

4.4 findIndex

找出第一個符合條件的數組元素的位置
       參數：
           一、回調函數
           二、回調函數內this的指向
       遍歷整個數組，遍歷過程當中調用回調函數，若是回調函數的返回值爲true，則返回該數組元素的位置。
       若是全部元素都不符合條件則返回-1

4.5 fill

arr.fill()
       用來填充數組
       參數:
               一、填充的內容
               二、起始位置
               三、結束位置

var arr = [1,2,3,4,5];

	arr.fill(6,2,4);//填充6，從2位到第4位[1, 2, 6, 6, 5]

	console.log(arr);

	arr.length = 10;
	arr.fill(0);//將數組填充相同的元素
	console.log(arr);

4.6 for of 循環遍歷

能夠用在實現了遍歷接口的變量上，字符串和數組默認是實現了遍歷iterator接口了。

vs for in[遍歷對象]

var arr = [1,2,3,4,6];
	for(let item of arr){
		console.log(item);//遍歷數組
	}
	var str = 'miaov';
	for(let item of str){
		console.log(item);//遍歷字符串
	}
	var obj = {
		a:1,
		b:2,
		c:3
	};
	for(var value of obj){
		console.log(value); //error，對象默認沒有實現遍歷iterator接口
	}

4.7 keys() && values()&&entries()

默認是values，因此不用寫也能夠。

keys()獲得key集合

var arr = [1,2,3,4,6];
	for(let key of arr.keys()){
		console.log(key);//返回數組下標 index
		
	}

entries鍵值對

var arr = [1,2,3,4,6];
	for(let [key,value] of arr.entries()){//利用解構賦值的方式，這裏不能使用{key,value}的寫法。
		console.log(key,value);
	}

4.8數組推導

數組推導
ES6提供簡潔寫法，容許直接經過現有數組生成新數組，這被稱爲數組推導（array comprehension）。

注意下面的寫法，[xx表達式，不能寫{}];

var arr = [1,2,3,4,5];
	var arr2 = [for (value of arr) if(value %2 ==0) value*2 ];

	console.log(arr2);

4.9 有用的連接

ES5中新增的Array方法詳細說明

五對象

5.1對象的簡潔聲明

1.函數返回對象

function  fn(x,y) {
		return {x,y};//相似結構賦值的語法
	}

	var tt = fn(1,2);

2.對象的簡潔表示法

下面的聲明方式相似java的寫法了。對比java除了不用聲明返回值和做用域等

var obj = {
		name:"momo",
		showName(){  //對象內部聲明函數
			return this.name;
		}
	}
	
	console.log(obj.showName());

3.屬性名錶達式

將表達式放在[]，做爲對象的key

var sex = '男';
	var person = {
		name:'momo',
		[sex]:false, //sex是外部變量
		['get'+'name'](){
			return this.name;
		}
	};

	console.log(person.getname());
	console.log(person[sex])

5.2 對象的擴展

1. is

/*
		Object.is()判斷傳入的參數是不是相等的

	*/
	console.log(0 === -0)
	console.log(Object.is(0,-0))
	console.log(Object.is(NaN,NaN))

2.assign

相似jq的extends方法了。

/*
		Object.assign(target [,source1 ... sourceN])
		將source對象的可枚舉屬性賦值到target對象上。
		注意：若是目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。

	*/
	var obj1 = {};
	var obj2 = {
		name:'zMouse'
	};
	var obj3 = {
		name:'duoduo',
		age:34
	}
	Object.assign(obj1,obj2,obj3);

	console.log(obj1);

3.getPrototypeOf && setPrototypeOf

/*
		Object.getPrototypeOf(object)
		用來獲取一個對象的prototype對象
		 Object.setPrototypeOf(object,prototype)
		用來設置一個對象的prototype對象
	*/

	var Cat = function(name){
		this.name = name;
	};
	Cat.prototype.showname = function(){
		return this.name;
	};
	var Person = function(){

	};
	Person.prototype.dadoudou = function(){

	};
	var c1 = new Cat('momo');
	//console.log(Object.getPrototypeOf(c1))

	// Object.setPrototypeOf(c1,Person.prototype);//這裏塞值塞的是原型對象，不然會

	// console.log(Object.getPrototypeOf(c1))

4 _proto_

讀取和設置當前對象的prototype對象

須要參考相關資料

var obj = {
   _proto_:super
}

5 proxy

參數：1，須要被代理的對象，2.設置對象

設置對象須要有一個get，set方法。以下所示。

proxy簡單的說就是obj的一個替身，對代理的訪問和設置會觸發get&set方法。

get & set 都要有return，不過set的return只是爲了避免讓報錯而已。若是要在set裏面給代理塞值，就要使用

obj[attr] = value;

var obj = {
		a:1,
		b:2
	};

	var p1 = new Proxy(obj,{
		get(obj,attr){//當屬性被訪問的時候觸發
			// console.log(obj,attr)


			return obj[attr];
		},	
		set(obj,attr,value){//當屬性值修改時觸發。
			//console.log(obj,attr,value)
			if(value < 100){
				obj[attr] = value;
			}
			
			return 2; 
		}
	})
	//console.log(p1.a)
	p1.a = 1000;

	console.log(p1.a)

6.observe

vs proxy

observer，兩個參數，第一個，就是被觀察對象。第二個就是回調。第三個，add，update...[觸發類型]

unobserve，解綁。

當obj改變的時候會調用，不監控訪問，

這個方法在未來的版本會移除【'Object.observe' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/6147094632988672 for more details.】

var obj = {
		a:1,
		b:2
	};
	function fn(a){
		console.log(a);
	}
	Object.observe(obj,fn); //觀察obj，fn回調。
	obj.a = 3;
	 console.log(obj.a)
	Object.unobserve(obj,fn)
	obj.a = 4;

7.Reflect.ownKeys(obj)

返回全部類型的鍵名

vs Object.keys() 用法相同。

var obj = {
		a:1,
		b:2
	};
//console.log(Object.keys(obj)) //遍歷接口
	//console.log(Reflect.ownKeys(obj))

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

ECMAScript6知識點1

參考資料

一.變量

1.1 let

1.2 const

1.3 變量的解構賦值

1.3.1 數組的解構賦值

1.3.2 對象的解構

二.字符串

2.字符串擴展

2.1 codePointAt

2.2 fromCodePoint

2.3 at

2.4 repeat

2.5 模板字符串

2.6 unicode表示法

2.7 includes

2.8 startsWith && endsWith

三 數值

3 數值擴展

3.1 數值表示法：二進制和八進制

3.2 trunc

3.3 sign

3.4 hypot

四 數組

4 數組擴展

4.1 from

4.2 of

4.3 find

4.4 findIndex

4.5 fill

4.6 for of 循環遍歷

4.7 keys() && values()&&entries()

4.8數組推導

4.9 有用的連接

五 對象

5.1對象的簡潔聲明

1.函數返回對象

2.對象的簡潔表示法

3.屬性名錶達式

5.2 對象的擴展

1. is

2.assign

3.getPrototypeOf && setPrototypeOf

4 _proto_

5 proxy

6.observe

7.Reflect.ownKeys(obj)

三數值

四數組

五對象