ES 6新機能
4170 ワード
1.letとconst
ここをクリック-前のブログで述べたように、ここでは説明しません.❤~
2.解体
配列とオブジェクトから値を抽出し、変数に値を付与し、解構と呼ぶ.
はいれつかいそう
対象解构
文字列の解体
適用:
関数パラメータの解構賦値
関数の戻り値
変数の交換
3.拡張演算子(...)
配列の一部として
配列コピー
連結配列
オブジェクトのマージ
クラス配列を配列に変換
4.文字列拡張(テンプレート文字列、includes)
比較的複雑な文字列のつなぎ合わせに対して、``方式を採用することができます
5.配列拡張(find,filter,map,forEach,Array.from,for...of)
find:最初の条件を満たすメンバーを見つけるfilter:すべての条件を満たすメンバーを見つけるmap:新しい配列をマッピングforEach:循環配列、新しい配列をマッピングするArray.from:クラス配列を配列に変換する方法for...of:ループ配列の要素:for(val of arr)、ループ配列のインデックス:for(index of arr.keys()、ループ配列のインデックスと値:for([index,val]of arr.entries()
6.オブジェクト拡張(略記、マージ)
属性と変数が同じ名前の場合
オブジェクトのマージ
7.関数拡張(矢印関数=>)
1.矢印関数のthisは、宣言時のthis(親ドメインのthis)通常関数のthis呼び出し時のthis 2を指す.矢印関数ではargumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません....restパラメータで置き換えることができます.矢印関数は、コンストラクション関数、すなわちnewコマンドを使用してはいけません.そうしないと、エラーが発生します.
8.setとmap
setメンバーの値はすべて一意で、重複値はなく、通常は配列で再計算されます.
mapはオブジェクトに類似しており、キー値ペアの集合でもあるが、「キー」の範囲は文字列に限らず、様々なタイプの値(オブジェクトを含む)をキーとすることができる.言い換えれば、オブジェクトの属性名は文字列でなければならず、mapの属性名は他のタイプのものであってもよい
9.symbol
基本データ型symbolは、ユニークな値を表し、他の属性名と競合しないことを保証します.
10.クラス(継承)
ES 5:クラスもコンストラクション関数属性をコンストラクション関数に書きます.メソッドはプロトタイプの下のコンストラクション関数にprototype属性を書きます.プロトタイプオブジェクトを指し、すべてのインスタンス化オブジェクトで共有できます.
子クラスは親の属性とメソッドを継承します:1.継承属性:サブクラス構築関数で親の属性を継承するには、親を通過する必要があります.call(this)継承属性2.継承方法:サブクラスのprototype=new親クラスのインスタンス化対象サブクラス構築関数の下prototype属性、本来のconstructorはサブクラスの構築関数を指す
ES 6ではClassはextendsキーワードで継承が可能であり,ES 5がプロトタイプチェーンを修正する方式で継承を実現するよりも,明瞭で便利である.ES6:
まとめ:
ES 6に追加されたのは上記だけではありません.以上、私がまとめたのは最も重要で、最も把握しなければならないと思います.皆さんのご指導を歓迎します!!❤
ここをクリック-前のブログで述べたように、ここでは説明しません.❤~
2.解体
配列とオブジェクトから値を抽出し、変数に値を付与し、解構と呼ぶ.
はいれつかいそう
let arr = [1,2];
let [a,b] = arr;
console.log(a,b);//1,2
対象解构
let obj = {
name:' z',
age:18,
x:'aaa',
y:'bbb'
}
let { x,y } = obj;
let { name:m,age:n } = obj;
console.log(x,y);
console.log(m,n);
文字列の解体
let str = "123abcd";
let [a,b,c,d,e,f] = str;
console.log(a,b,c,d,e,f);
適用:
関数パラメータの解構賦値
function fn([x,y,z=100]){
console.log(x,y,z);//1 2 3
}
fn([1,2,3])
関数の戻り値
function f2(){
return [1,2,3.4];
}
let [a,b,c,d] = f2();
console.log(a,b,c,d);
変数の交換
let a = 5;
let b = 6;
[a,b] = [b,a];
console.log(a,b);
3.拡張演算子(...)
配列の一部として
let arr = [1,2,3,4];
let arr2 = [5,6,...arr];
console.log(arr2);//5,6,1,2,3,4
配列コピー
let arr = [1,2,3,4];
let arr1 = [...arr];
console.log(arr1);//1,2,3,4
連結配列
let arr4 = [1,2,3];
let arr5 = [4,5];
let arr6 = [...arr4,...arr5];
console.log(arr6);//1,2,3,4,5
オブジェクトのマージ
let obj1 = {
name:'zs'
}
let obj2 = {
name:'lisi',
school:'z'
}
let obj3 = {...obj1,...obj2};
console.log(obj3);
クラス配列を配列に変換
var aLi = document.getElementsByTagName("li");
var arr = [];
for(var i=0;i<aLi.length;i++){
arr.push(aLi[i]);
}
console.log(arr);
let arr2 = [...aLi];
console.log(arr2);
4.文字列拡張(テンプレート文字列、includes)
比較的複雑な文字列のつなぎ合わせに対して、``方式を採用することができます
let a = 3;
let b = 4;
console.log(`${a}+${b} ${a+b}`);//3+4 7
5.配列拡張(find,filter,map,forEach,Array.from,for...of)
find:最初の条件を満たすメンバーを見つけるfilter:すべての条件を満たすメンバーを見つけるmap:新しい配列をマッピングforEach:循環配列、新しい配列をマッピングするArray.from:クラス配列を配列に変換する方法for...of:ループ配列の要素:for(val of arr)、ループ配列のインデックス:for(index of arr.keys()、ループ配列のインデックスと値:for([index,val]of arr.entries()
6.オブジェクト拡張(略記、マージ)
属性と変数が同じ名前の場合
var obj = {
name:name,
age:age,
say:function(){
console.log("haha");
}
}
//
var obj1 = {
name,
age,
say(){
console.log("haha");
}
}
オブジェクトのマージ
var obj1 = {
name:'zs'
}
var obj2 = {
name:'lisi',
age:20
}
Object.assign(obj1,obj2);
console.log(obj1);
7.関数拡張(矢印関数=>)
1.矢印関数のthisは、宣言時のthis(親ドメインのthis)通常関数のthis呼び出し時のthis 2を指す.矢印関数ではargumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません....restパラメータで置き換えることができます.矢印関数は、コンストラクション関数、すなわちnewコマンドを使用してはいけません.そうしないと、エラーが発生します.
8.setとmap
setメンバーの値はすべて一意で、重複値はなく、通常は配列で再計算されます.
let x = new Set([1,2,2,3,3,4]);
console.log(x);//1,2,3,4
// :set , , [...x] Array.from(x);
mapはオブジェクトに類似しており、キー値ペアの集合でもあるが、「キー」の範囲は文字列に限らず、様々なタイプの値(オブジェクトを含む)をキーとすることができる.言い換えれば、オブジェクトの属性名は文字列でなければならず、mapの属性名は他のタイプのものであってもよい
let p1 = new Map();
p1.set('age',10);
p1.set('name',"lisi");
console.log(p1);
//{"age" => 10}
{"name" => "lisi"}
9.symbol
基本データ型symbolは、ユニークな値を表し、他の属性名と競合しないことを保証します.
10.クラス(継承)
ES 5:クラスもコンストラクション関数属性をコンストラクション関数に書きます.メソッドはプロトタイプの下のコンストラクション関数にprototype属性を書きます.プロトタイプオブジェクトを指し、すべてのインスタンス化オブジェクトで共有できます.
子クラスは親の属性とメソッドを継承します:1.継承属性:サブクラス構築関数で親の属性を継承するには、親を通過する必要があります.call(this)継承属性2.継承方法:サブクラスのprototype=new親クラスのインスタンス化対象サブクラス構築関数の下prototype属性、本来のconstructorはサブクラスの構築関数を指す
ES 6ではClassはextendsキーワードで継承が可能であり,ES 5がプロトタイプチェーンを修正する方式で継承を実現するよりも,明瞭で便利である.ES6:
class Person{
constructor(){
...
}
}
class Coder extends Person{
constructor(){
super();//super
...
}
}
まとめ:
ES 6に追加されたのは上記だけではありません.以上、私がまとめたのは最も重要で、最も把握しなければならないと思います.皆さんのご指導を歓迎します!!❤