ES6二

2020.12.6 22.10

es6==>陣列的擴充套件、函式的擴充套件、類

01陣列的擴充套件

let score=[60,70,40,80,90,59,72,48,33];
var n=score.filter(n=>n<60);//過濾值小於60的元素
console.log(n);//[40,59,48,33]

2.刪除(es5)
splice(引數1,引數2,引數3)
引數1開始的位置(下標) 引數2刪除的個數 引數3插入的元素

let score=[60,70,40,80,90,59,72,48,33];
//從下標為1的元素開始刪除(此元素不刪除)，刪除2個元素，插入3個值為100的元素
score.splice(1,2,100,100,100);
console.log(score);//[60,70,100,100,100,80,90,59,72,48,33]

3.替換(es6)
copyWithin(引數1,引數2,引數3)
引數1：替換開始的位置(下標) 引數2：複製開始的位置 引數3：複製結束的位置 含開始不含結束
替換:用複製的元素替換原來的元素

let score=[60,70,40,80,90,59,72,48,33];
console.log(score);
//從下標為2的元素開始替換，從下標為3的元素開始複製,到下標為7的元素結束
var q=score.copyWithin(2,3,7);
//替換位置:40,複製的元素80,90,59,72
console.log(q);//[60,70,80,90,59,72,72,48,33]
原陣列:[60,70,40,80,90,59,72,48,33]
替換後:[60,70,80,90,59,72,72,48,33]

只是替換，複製的元素的數量。複製的如果多餘需要替換的。陣列不會擴充套件，只會替換應有的數量
例如複製4,2,3,5 需要將[100,90,80,70]中的90和80替換掉。複製4個，替換2個
替換後的陣列:[100,4,2,70]

值可以是負值。從右到左。從-1開始
負值的時候，一定要保證開始的位置，小於結束的位置

//				-7,-6,-5,-4,-3,-2,-1
let score=[60,70,40,80,90,59,72,48,33];
console.log(score);
//從下標為-4的元素開始替換，從下標為-5的元素開始複製,到下標為-1的元素結束
var q=score.copyWithin(-4,-5,-1);
//替換位置:59,複製的元素90,59,72,48
console.log(q);//[60,70,40,80,90,90,59,72,48]
原陣列:[60,70,40,80,90,59,72,48,33]
替換後:[60,70,40,80,90,90,59,72,48]

以下寫法不規範 一般不建議正負交叉寫
score.copyWithin(-4,-1,-5)

02.函式的擴充套件

函式的引數
1.預設引數

//es6
function add(a,b=5000){
	console.log(`姓名:${a},公積金:${b}`);
}
add('abc');//b不給值就預設5000

//es5
function add(a,b){
// 如果b的值存在，就賦值給b 否則b的值就是5000
	b=b||5000;
	console.log('姓名:'+a+','+'公積金:'+b);
}
add('abc');

2.引數擴充套件/展開(剩餘引數)
arguments獲取使用者輸入的所有實參
arguments是類陣列物件

function add(x,y,z){
	console.log(arguemnts);//[1,2,3]
}
add(1,2,3);

剩餘引數 ...變數名 用來獲取函式的多餘實參，只能放置在形參結尾，不能放置開始或者中間。
剩餘引數是一個陣列

function add(x,y,z,...argu){//argu只是變數名
	console.log(argu);//[4,5,6]
}
add(1,2,3,4,5,6,);

箭頭函式
箭頭函式 去除function,()和{}之間使用=>

//普通函式
function add(x){
	console.log(x);
}
//箭頭函式
let add=(x)=>{console.log(x);}

3種簡寫:

1.()內只有一個引數可以省略()
普通函式function add(x){ console.log(x); }
箭頭函式:let add=x=>{console.log(x);}

2.函式體只有return語句 可以直接省略{}和return，此簡寫下若只省略{}不省略return會報錯,反之則不會
普通函式:function add(x){ return x>10; }
箭頭函式:let add=x=>x>10;

3.函式體只有一句普通程式碼 可以直接省略{}
普通函式:function add(x){ console.log(x>10); }
箭頭函式:let add=x=>console.log(x>10);

箭頭函式的3個注意點:
1.箭頭函式內部，沒有arguments，只能使用剩餘引數

var fn=(x,y,z,...b)=>{
	console.log(b);//[4,5]
	console.log(arguments);//報錯,arguments is not defined
}
fn(1,2,3,4,5);

練習:在箭頭函式中，獲取所有實參
方法一:

//由於剩餘引數argu是一個陣列，所以可以用concat連線
let fn=(x,y,z,...argu)=>console.log([x,y,z].concat(argu));
fn(1,2,3,4,5);

方法二:

let fn=(x,y,z,...argu)=>{
	var p=[x,y,z];
	p.push(argu);
	console.log(p);//[,1,2,3,[4,5,6]]
}	
fn(1,2,3,4,5,6);

如果要進行排序輸出:

let add=(...argu)=>console.log(argu.sort((a,b)=>a-b));
add(5,4,3,2,1);//[1,2,3,4,5]

2.箭頭函式的this
箭頭函式中的this指向的是定義的時候所在的物件，而不是使用的時候所在的物件
call、apply、bind不能修改箭頭函式中this的指向

var a=()=>{console.log(this)};//window
var stu={
	name:'zs'
}
a.call(stu);//普通函式下this會指向stu
a();

3.箭頭函式不可以當做建構函式使用,也就是說，不可以使用new命令，否則會丟擲錯誤。
var Product=(title)=>{ this.title=title; }
var p=new Product('標題');
以上操作會報錯

箭頭函式，使用注意點
1箭頭函式中的this指向的是定義的時候所在的物件，而不是使用的時候所在的物件
2箭頭函式不可以當做建構函式使用,也就是說，不可以使用new命令，否則會丟擲錯誤。
3 箭頭函式內部，沒有arguments，只能使用剩餘引數

03.class類

es6類可以說是建構函式加原型的複合。
es6類的概念，只是"語法糖"。es6實現的關於類的大多數功能都可以通過es5方法實現。
類就是封裝事物
結構:

class 類名{
	constructor(){
		放置屬性
		//也可以在此放置方法
	}
	放置方法1//(方法之間不加符號,加符號會報錯)
	放置方法2
	放置方法...
}

class Product{
	constructor(title,price){
		this.title=title;
		this.price=price;
	}
	buy(){
		console.log(`花費${this.price}購買了${this.title}`);
	}
}
let p=new Product('手機',3999);
p.buy();

方法放置位置的區別:

class Product{
	constructor(title,price){
		this.title=title;
		this.price=price;
		
		/*書寫在constructor中的方法，
		每一次例項物件的時候，都會重新生成一個新的方法。(效率偏低)
		針對於每一個物件，執行的方法都是一樣的，這個時候就會造成資源浪費(例項物件的方法)*/
		
		/*this.buy=function(){
			console.log(`花費${this.price}購買了${this.title}`);
		}*/
	}
	//放置在此處的方法，相當於放置在了Product.prototype內部(原型的方法)
	buy(){
		console.log(`花費${this.price}購買了${this.title}`);
	}
}
let p=new Product('手機',3999);
let m=new Product('口紅',399);
p.buy();
console.log(p.buy==m.buy);//false,執行方法一樣，儲存地址不一樣

放在constructor裡的都是自有方法,和constructor同級的都是繼承來的,如?的buy方法
通過hasOwnProperty可以判斷是自有還是繼承

console.log(p.hasOwnProperty('title'));//true
console.log(p.hasOwnProperty('buy'));//false

如果是需要每個物件都有的方法/屬性,如商品的顏色等,放在constructor中
共用的方法,如購買商品,加入購物車,放在和constructor同級的地方

判斷某個例項物件是否屬於某個建構函式/類
例項物件 instanceof 建構函式/類如 p instanceof Product

console.log(p.constructor==Product);//例項物件通過constructor和建構函式相關聯
console.log(p.__proto__==Product.prototype);//例項物件的__proto__指向建構函式的prototype
console.log(Product.prototype.isPrototypeOf(p));//建構函式的prototype存在於例項物件的原型鏈中
console.log(Object.prototype.isPrototypeOf(p));//最頂層obj的prototype存在於例項物件的原型鏈中

藍線是原型鏈

原型和原型鏈圖示參考自:連結

2020.12.7 02:55