ホームページ > ウェブフロントエンド > jsチュートリアル > 配列、関数、オブジェクトに対する JavaScript ES6 拡張機能の一般的な概要

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

巴扎黑
リリース: 2017-07-22 16:56:21
オリジナル
1323 人が閲覧しました

1.1. Array.from()

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

以下は配列のようなオブジェクトで、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
ログイン後にコピー

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

function foo(x = 5) {

  let x = 1;

 // error

  const x = 2; 

// error

}
ログイン後にコピー

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

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种方法可以遍历对象的属性。

1for...in

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

2Object.keys(obj)

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

3Object.getOwnPropertyNames(obj)

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

4Object.getOwnPropertySymbols(obj)

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

5Reflect.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方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性210,其次是字符串属性ba,最后是 Symbol 属性。

 

注释:对于Object.valuesES2017刚出来的函数,大多数浏览器不支持,暂时就不列出来了

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート