所謂ECMAScript6也就是JS6。這次更新帶來了大量的新特性,使JS程式碼更簡潔,更強大。
複習JS請走:JS入門
JS6文件請走:JS6菜鳥教程
reset
同Java中的可變引數。
public static void tell(String... info){
System.out.println(info);
}
在JS中,叫做reset
因為箭頭函式中無法使用關鍵字arguments,所以出現reset
-
reset支援普通函式和箭頭函式
-
傳參列表中只允許存在一個reset,並且必須在最後
<script>
console.log("1.reset支援普通函式和箭頭函式");
function f1(a,b,c,...info) {
console.log(a,b,c);
console.log("f1;reset="+info);
}
f1(1,2,3,4,5);
let f2=(a,b,...info)=>{
console.log(a,b);
console.log("f2;reset="+info);
}
f2(1,2,3,4,5);
/*
1 2 3
f1;reset=4,5
1 2
f2;reset=3,4,5
*/
console.log("2.傳參列表中只允許存在一個reset,並且必須在最後");
function f3(...info,...info2) {}//報錯 Rest parameter must be last formal
function f4(...info,a) {}//報錯同上
</script>
spread
可變引數的實際應用;spread也可以說是reset應用於實參之上。
-
spread應用於傳參是陣列的方法
-
spread利用解構表示式快速合併陣列
-
spread利用解構表示式快速合併物件
<script>
console.log("1.JS中的reset同Java中可變引數");
let strArr = ["A", "B"];
let f = (...arr) => {
console.log(arr);
}
f(...strArr);//['A', 'B']
console.log("2.spread利用解構表示式快速合併陣列");
let Arr1=[1,2];
let Arr2=[3,4];
let Arr3=[Arr1,Arr2];//注意這是解構表示式的用法 列印結果[Array(2), Array(2)]
console.log(Arr3);
let Arr4=[...Arr1,...Arr2];//這是spread應用於解構表示式 列印結果[1, 2, 3, 4]
console.log(Arr4);
console.log("3.spread利用解構表示式快速合併物件");
let p1={name:"張三"};
let p2={age:18};
let p3={p1,p2};
console.log(p3);//注意這是解構表示式的用法 列印結果{p1: {…}, p2: {…}}
let p4={...p1,...p2};
console.log(p4);//這是spread應用於解構表示式 列印結果{name: '張三', age: 18}
</script>
Class類語法糖
一種語法糖,讓JS物件更符合物件導向程式設計的寫法
(瞭解即可,這個語法糖真的不好吃。很想讓人吐槽)
新增class(類)、extends(繼承)、constructor(構造器)、super等關鍵字
-
類中屬性的定義
-
類中getter、setter方法、普通方法、靜態方法
-
類的構造器:(只允許有一個構造器)
-
類的繼承
<script>
console.log("1.類中屬性的定義");
console.log("2.類中getter、setter方法、普通方法、靜態方法");
class Person {
name;//成員屬性 name
#age;//私有的成員屬性 後續書寫必須把#也當作該屬性的名字 #age必須一起出現
get name(){//getter
return this.name;
}
set name(name){//setter
this.name=name;
}
get age(){
return this.#age;//把#也當作它的屬性名
}
set age(age){
this.#age=age;
}
say(){//普通方法say
//模板字串
console.log(`"${this.name}今年${this.#age}歲了"`)
}
static add(x,y){//靜態方法add
return x+y;
}
}
let p1=new Person();
p1.name="嘎子";//這裡是呼叫setter方法
p1.name;//這裡是呼叫getter方法 列印結果 嘎子
p1.age="8";
p1.say();//"嘎子今年8歲了"
console.log(Person.add(1, 2));//靜態方法可以用類名訪問 列印結果3
console.log("3.類的構造器");
class Door{
#sell;
get sell(){
return this.#sell;
}
set sell(sell){
this.#sell=sell;
}
constructor() {//無參構造 初始化為999
this.#sell=999;
}
//報錯 A class may only have one constructor
constructor(sell) {//有參構造器 一個類中只允許擁有一個構造器
this.sell=sell;//錯誤的寫法!!! JS會自動建立一個sell的屬性
this.#sell=sell;
}
}
let d1=new Door();
console.log(d1.sell);//999
console.log("4.類的繼承");
class A{
mom
constructor() {
console.log("父類的構造器");
this.mom="26個字母"
}
}
class B extends A{
//不顯示定義構造器 測試初始化子類時 父類的構造器是否會呼叫
}
let b1=new B();//父類的構造器
</script>