配列、関数、オブジェクトに対する JavaScript ES6 拡張機能の一般的な概要

1.1. Array.from()

Array.fromメソッドは、配列のようなオブジェクト(配列のようなオブジェクト)とトラバース可能なオブジェクト(iterable)の2つのタイプのオブジェクトを実際の配列に変換するために使用されます。オブジェクト (ES6の新しいデータ構造SetとMapを含む)。

以下は配列のようなオブジェクトで、Array.fromはそれを実数の配列に変換します。

let arrayLike = {

    '0': 'a',

    '1': 'b',

    '2': 'c',

    length: 3};

// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from([1, 2, 3])

// [1, 2, 3]

Array.from('hello')

// ['h', 'e', 'l', 'l', 'o']

Array.from は、配列の map メソッドに似た 2 番目のパラメーターを受け取ることもでき、各要素を処理し、処理された値を返された配列に入れるために使用されます。 。

Array.from(arrayLike, x => x * x);

// 等同于Array.from(arrayLike).map(x => x * x);

 

Array.from([1, 2, 3], (x) => x * x)

// [1, 4, 9]

1.2.Array.of()

Array.ofメソッドは、値のセットを配列に変換するために使用されます。

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length // 1

1.3.entries()、keys()、values()の配列インスタンス

ES6は提供します3 つの新しいメソッド —— エントリ()、keys()、values() - は、配列を反復処理するために使用されます。どちらも for...of ループを使用して走査できるトラバーサー オブジェクトを返します。唯一の違いは、keys() がキー名の走査であるのに対し、values() はキー値の走査であることです。 , entrys()は、キーと値のペアの走査です。

for (let index of ['a', 'b'].keys()) {

  console.log(index);

}

// 0// 1

for (let elem of ['a', 'b'].values()) {

  console.log(elem);

}

// 'a'// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {

  console.log(index, elem);

}

// 0 "a"// 1 "b"

1.4. 関数パラメータのデフォルト値

ES6 関数パラメータのデフォルト値を設定、つまりパラメータ定義の直後に記述することができます。

function log(x, y = 'World') {

  console.log(x, y);}

log('Hello') // Hello World

log('Hello', 'China') // Hello China

log('Hello', '') // Hello

パラメータ変数はデフォルトで宣言されているため、letやconstを使って再度宣言することはできません。

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}

上記のコードでは、パラメータ変数xは関数本体でデフォルトで宣言されており、letやconstで再度宣言することはできず、それ以外の場合はエラーが報告されます。 。

1.5. スプレッド演算子の応用

(1) 配列のマージ

スプレッド演算子は、配列のマージを記述する新しい方法を提供します。

// ES5[1, 2].concat(more)

// ES6[1, 2, ...more]

var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];

// ES5的合并数组

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]

1.6. アロー関数

ES6では「arrow」の使用が可能になります(=> ) 関数を定義します。

var f = v => v;

上記のアロー関数は次と同等です:

var f = function(v) {

return v;

};

例

$(function() {

       var a=()=>{

         const [a, b, c, d, e] = 'hello';

            console.log(a++b++c++d++e);

       }

        a();//不带参数

//h__e__l__l__o

    var b=(name,password)=>{

         

            console.log("用户名："+name+",密码："+password);

       }

      b("张三","123456");//带参数

//用户名：张三,密码：123456

        });

1.7.

オブジェクトの拡張

1.8.

プロパティの簡潔な表現

ES6

オブジェクトのプロパティやメソッドとして直接記述することもできます。この種の書き方はより簡潔です。

りー

　　

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

1.9. 属性的遍历

ES6 一共有5种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 或字符串，也不管是否可枚举。

以上的5种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。

• 首先遍历所有属性名为数值的属性，按照数字排序。

• 其次遍历所有属性名为字符串的属性，按照生成时间排序。

• 最后遍历所有属性名为 Symbol 值的属性，按照生成时间排序。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })

// ['2', '10', 'b', 'a', Symbol()]

　　

上面代码中，Reflect.ownKeys方法返回一个数组，包含了参数对象的所有属性。这个数组的属性次序是这样的，首先是数值属性2和10，其次是字符串属性b和a，最后是 Symbol 属性。

 

注释：对于Object.values等ES2017刚出来的函数，大多数浏览器不支持，暂时就不列出来了

以上が配列、関数、オブジェクトに対する JavaScript ES6 拡張機能の一般的な概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。