【ES 6学習】-(3)ES 6関数と配列拡張特性の概要

ES 6+では,関数,オブジェクト,文字列,配列,正則および数値などのオブジェクトに対して特性の拡張を行い,本稿ではES 6における関数と配列の拡張特性を簡単に紹介する.

一、関数の拡張

1.関数のデフォルト

ES 6から、関数パラメータのデフォルト値を設定できます.すなわち、パラメータ定義の後に直接書くことができます.これにより、コードが簡潔で自然になり、2つのメリットがあります.

は、どのパラメータにデフォルト値が省略可能な

があるかを明確に知ることができる.

は将来のコード最適化に有利であり、このパラメータを削除しても従来のコードが

を実行できないことはない.
また、パラメータ変数はデフォルトで宣言されているため、letコマンドとconstコマンドを使用して再宣言することはできません.デフォルト値を定義したパラメータは、関数の末尾パラメータであるべきであり、どのパラメータが省略されているのかを簡単に見ることができます.末尾パラメータにデフォルト値が設定されていない場合は省略できません.また、undefinedが表示されない限り、デフォルト値のあるパラメータを直接省略することはできません.
使用パラメータのデフォルト値は、使用パラメータのデフォルト値と使用可能です.コードの例:

function({x, y = 5}){
    console.log(x, y);
}
f({});//undefined, 5
f({x:1,y:2});//1,2
f({x:1});//1,5

また、「ES 6標準入門」では、次の2つの興味深い例が挙げられています.

function m1({x:0,y:0} = {}){
    return [x, y];
}

function m2({x,y} = {x:0,y:0}){
    return[x, y];
}

m1()//[0,0]
m2();//[0,0]

m1({x:3, y:8});//[3,8]
m2({x:3,y:8});//[3,8]

m1({x:3});//[3,0]
m2({x:3});//[3, undefined]

m 1関数パラメータは、デフォルト値が空のオブジェクトに設定されていますが、m 2関数のパラメータのデフォルト値は、特定の属性を持つオブジェクトですが、デフォルト値は設定されていません.
lengthプロパティ
デフォルト値を指定した後の関数のlength属性は、デフォルト値を指定していないパラメータの数を返します.length属性の意味は、関数が入力パラメータを予想する個数であり、あるパラメータがデフォルト値を指定した後に予想される入力パラメータには、デフォルト値を指定したパラメータは含まれません.

2.restパラメータと拡張演算子

ES 6は、Javaの不確定な数のパラメータに似た関数の余分なパラメータを取得するためにrestパラメータ(形式は'...変数名')を導入し、restパラメータは不定個数のパラメータを指定した変数名の配列に変換し、多くの配列関数で動作することができます.rest関数は関数の最後のパラメータでなければなりません.そうしないと、エラーが報告されます.
restパラメータとは逆に、拡張演算子...配列をカンマで区切られたパラメータシーケンスに変換します.拡張演算子は、配列の代わりに多くの用途を提供するapplyメソッドです.次に、配列の最大値を求める異なる書き方を示します.

//ES5
Math.max.apply(null,[14,2,4]);
//ES6
Math.max(...[14,2,4]);

連結配列

var arr1 = ['a', 'b'];
var arr2 = ['c', 'd'];
var arr3 = ['e'];
//ES5
arr1.contact(arr2,arr3);
//ES6
[...arr1, ...arr2, ...arr3];//['a', 'b', 'c', 'd', 'e']

構築賦値と組み合わせると、生成配列を組み合わせることができます.

const [first, ...rest] = [1, 2, 3, 4, 5];
first //1
rest //[2,3,4,5]

文字列を配列に変換

[..."hello"]// ['h', 'e', 'l', 'l', '0']

拡張演算子を使用すると、32ビットのUnicode文字を正しく認識できます.
類似配列のオブジェクト、Set、Map、Generator関数の変換

//    
var nodelist = document.querySelectorAll('div');
var array = [...nodelist]

//  Map。Map Set    Iterator   ,      Iterator               
let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
    ]);
let arr = [...map.keys()];//[1, 2, 3]

//  Generator  ,Generator              ,            
var go = function*(){
    yield 1;
    yield 2;
    yield 3;
};

3.nameプロパティ

関数のname属性は関数名を返し、匿名関数の場合、ES 5は空の文字列を返し、ES 6は実際の関数名を返します.Functionコンストラクション関数が返す関数の例name属性値は「anonymous」であり、bindが返す関数name属性値には「bound」接頭辞が加算されます

var func1 = function(){};
func1.name;//ES5:""   ES6:func1

//                ,ES5/ES6                     
const bar = function baz(){};
bar.name();//baz

4.矢印関数

ES 6では、*矢印=>*を使用して関数を定義できます.矢印の左側はパラメータで、右側はメソッドです.パラメータが不要な場合はパラメータ部分をカッコで表し、メソッドボディが1行以上ある場合はカッコで囲み、returnで返します.

var f = v => v;
//   
var f = function(v){ return v};

var f = ()=>5;
//   
var f = function(){
    return 5;
}

矢印関数のいくつかの点に注意してください.*関数内のthisは、常にこの関数が定義されているオブジェクトです.矢印関数には独自のthisがないため、内部のthisが外層コードブロックであるthis*は構造関数として使用できません.すなわちnewコマンドを使用できません.argumentsオブジェクトを使用できません.このオブジェクトは関数内に存在しません.*の代わりにrestを使用できます.yieldコマンドを使用できません.そのため、矢印関数はGenerator関数として使用できません.

5.関数バインド、末尾カンマ、末尾呼び出しの最適化

ES 7は、call、apply、bind呼び出しの代わりに関数バインドを提案し、演算子は二重コロン*:*、座標はオブジェクトであり、右は関数であり、左のオブジェクトをコンテキスト環境(すなわちthisオブジェクト)として右の関数に自動的にバインドする.チェーンコールは元のオブジェクトを返しますか?

let {find, html} = jake;

document.querySelectorAll("div.myClass")
::find("p")
::html("hahaha");

テールコール最適化
テールコールは関数式プログラミングの重要な概念であり、ある関数の最後のステップが別の関数を呼び出すことを指す.末尾呼び出しは、関数操作の最後のステップであれば末尾に表示されなくてもよい.
関数の呼び出し中に呼び出しスタックが形成されます.テール呼び出しは他の呼び出しとは異なり、テール呼び出しが関数の最後のステップであるため、外層関数の呼び出しスタックは必要ありません.これにより、内層の呼び出しスタックのみが保持されます.したがって、すべての関数がエンドコールである場合、呼び出しを実行するたびに1フレームしかないことが完全に可能になり、メモリが大幅に節約されます.これは、いわゆるエンドコール最適化です.
テールコールは再帰を最適化できます.関数呼び出し自体が再帰となり,末尾呼び出し自体が末尾再帰となる.呼び出しスタックを大量に保存する必要があるため、メモリが非常に消費されます.最後の再帰はこの問題をよく解決した.最後の再帰の実装では、再帰関数を書き換え、最後に自身のみが呼び出されることを保証する必要があることが多い.方法は,使用するすべての内部変数を関数のパラメータに変えることである.しかし、このようにすると、関数の可読性が低下し、ここでは2つの方法が解決されます.1つは、テール再帰関数の外に通常の形式の関数を提供してテール再帰関数を呼び出し、もう1つはコリー化であり、関数式プログラミングの概念であり、多パラメータの関数数を単一パラメータの形式に変換することです.
最後のカンマ
ES 6から関数の最後のパラメータに末尾カンマを許可

function func(
  foo,
  bar,){
}

二、配列の拡張

1.ES 6配列の方法拡張

Array.from()この方法は、2つのオブジェクトを真の配列に変換するために使用される:類似配列のオブジェクトと遍歴可能なオブジェクト(ES 6の新しいデータ構造SetとMapを含む).Iteratorインタフェースを配備したデータ構造であれば、Array.from()はいずれも配列に変換することができ、また類似配列のオブジェクトもサポートする.簡単に言えばlength属性が必要であり、length属性のあるオブジェクトはArray.from()メソッドを配列に変換します.

let arraryList = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
};
//ES5  
var arr1 = [].slice.call(arrayLike);//['a', 'b', 'c']
//ES6  
let arr = Arrary.from(arrayLike);//['a', 'b', 'c']

//          ,     map             
Array.from([1,2,3], (x)=>x*x);//[1,4,9]

//     ** ... **      Iterator            ,        。

この方法により,種々の値を真の配列に変換しmap機能を提供することができる.これは,元のデータ構造が1つあれば,まず値の処理を行い,その後配列構造に変換し,さらに数の多い配列法を用いることができることを意味する.
Array.from()メソッドは、文字列を配列に変換し、文字列の長さを返します.様々なUnicode文字を正しく扱うことができるため、JavaScriptがuFFFFより大きい文字を2文字のbugとして扱うことを避けることができる.
Array.of()は、配列構造関数Array()の不足を補うために主に値のセットを配列に変換するために使用される.
Array()メソッドは、1つのパラメータのみが指定された配列の長さを表し、2つ以上のパラメータのみがパラメータからなる配列を返します.そしてアリーof()メソッドは常にパラメータ値からなる配列を返し,パラメータがなければ空の配列を返す.

Array();//[]
Array(3);//[ , , ,]
Array(3,11,8);//[3,11,8]

Array.of();//[]
Array.of(1);//[1]
Array.of(1,2)//[1,2]
Arrar.of(undefined);//[undefined]

copyWithin()は、現在の配列内で指定した位置のメンバーを別の位置にコピーし(元のメンバーを上書きします)、現在の配列に戻ります.つまり、この方法を使用すると、現在の配列が変更されます.

//    
//target(  ):          
//start(  ):           ,   0,         
//end(  ):            ,        ,      
[1,2,3,4,5].copyWithin(0,3,4);//[4,2,3,4,5]

[1,2,3,4,5].copyWithin(0,-2,-1);//[4,2,3,4,5]

find()とfindIndex()メソッド
find()パラメータは、最初の条件に合致する配列メンバーを見つけるためのコールバック関数です.すべての配列メンバーは、最初の戻り値がtrueのメンバーが見つかり、メンバーが戻るまでコールバック関数を順次実行します.条件を満たすメンバーがいない場合はundefinedを返します.findIndex()メソッドは、条件を満たす最初の配列メンバーの位置を返し、すべてのメンバーが一致しない場合は-1を返します.
さらに,この2つの方法は,コールバック関数をバインドするために2番目のパラメータを用いたthisオブジェクトを受け入れることもでき,配列のNaNメンバーを識別することもでき,indexOf法の不足を補うことができる.
fill()配列を所定の値で埋め込む

//            ,             
['a','b','c'].fill(7);//[7, 7, 7]
//       、    ,              
['a', 'b', 'c'].fill(7,1,2);//['a', 7, 'c']

entires()、keys()、values()は配列を遍歴するために使用され、1つの遍歴器オブジェクトがfor...ofで循環することができることを返します.keys()はキー名の遍歴であり、value()はキー値の遍歴であり、entires()はキー値のペアの遍歴である.

let keys = [1,2,3].keys();
for(let index of keys){
    console.log(index);//0,1
}

let kv = ['a','b'].entires();
for(let [index, elem] of kv){
    console.log(index,elem);
}
//0，'a'
//1, 'b'

includes()は、ある配列に所定の値が含まれているかどうかを判断し、ES 7に属する文字列のincludesメソッドと同様であるが、Babelトランスコーダはサポートされている.2番目のパラメータは検索の開始位置を表し、デフォルトは0から、負数は逆数の位置を表し、配列長を超えると0からリセットされます.またこの方法ではNaNに対して誤審は生じない

[1,2,3].includes(3,3);//false
[1,2,3].includes(2)//true
[NaN].includes(NaN);//true

注意Mao、Setデータ構造のhasメソッドと区別:*Map構造のhasメソッドはキー名を検索する*Set構造のhasメソッドは値を検索するために使用されます

2.配列の空席と配列の導出

配列の空席
配列の空格子点指数グループの位置には値がありません.undefinedを含む値はありません.1つの位置の値がundefinedに等しいのは依然として値がある.ES 5では空孔処理が一致せず,ES 6では空孔をundefinedに明確に変換した.
ES 5の処理方法:

forEach()、filter()、every()、some()は、空席

をスキップします.

map()は空席をスキップしますが、この値

は保持されます.

join()とtoString()は空席をundefinedと見なし、undefinedとnullは空の文字列として処理されます.

空席の処理規則は非常に不統一であるため,空席の発生は避けるべきである
アレイ導出
配列導出により、既存の配列から新しい配列を生成できます.この機能はES 7に延期され、Babelトランスコーダはすでにこの機能をサポートしている.配列導出でfor...of構造は常に一番前にアンインストールされ、返される式は一番後ろに書かれます.

var a1 = [1,2,3,4];
var a2 = [for(i of a1) i*2];//2,4,6,8

var years = [1954, 1974, 1990, 2006, 2010, 2014];
[for(year of years) if(year > 2000) if(year<2010)year];//[2006]

次の点に注意してください.

配列で導出四角カッコは、letコマンドで宣言する変数

に類似する単独の役割ドメインを構成する.

新しい配列はすぐにメモリに生成されるので、元の配列が大きいとメモリが非常に消費されます.