ES6 の新しい拡張機能: 1. 関数パラメータのデフォルト値の設定を許可; 2. 新しい矢印関数、矢印「=>」を使用して関数を定義でき、構文「var function name =」 (parameter )=>{...}"; 3. 拡張要素文字「...」は、配列をカンマで区切られたパラメータ列に変換したり、一部のデータ構造を配列に変換したりできます。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
es6 の新しい拡張機能
1. 関数パラメータ
ES6
関数パラメータにデフォルト値を設定できるようにする
function log(x, y = 'World') { console.log(x, y); } console.log('Hello') // Hello World console.log('Hello', 'China') // Hello China console.log('Hello', '') // Hello
関数の仮パラメータはデフォルトで宣言されており、let
または const
# を使用して再度宣言することはできません##
function foo(x = 5) { let x = 1; // error const x = 2; // error }パラメータのデフォルト値を構造化代入のデフォルト値と組み合わせて、
foo
関数の上のfunction foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined 5 foo({x: 1}) // 1 5 foo({x: 1, y: 2}) // 1 2 foo() // TypeError: Cannot read property 'x' of undefined
を使用できます。構造化は、パラメータはオブジェクトです。パラメータが指定されていない場合、変数
x および
y は生成されず、エラーが報告されます。
function foo({x, y = 5} = {}) { console.log(x, y); } foo() // undefined 5# を回避するには、ここでデフォルト値を設定します。 ##パラメータのデフォルト値は、非末尾パラメータでない場合、関数の末尾パラメータである必要があります。パラメータはデフォルト値に設定されます。実際、このパラメータは省略されません。
function f(x = 1, y) { return [x, y]; } f() // [1, undefined] f(2) // [2, undefined] f(, 1) // 报错 f(undefined, 1) // [1, 1]
2. 関数の属性
関数の長さ属性length
が返されます。デフォルト値が指定されていないパラメータの数 <pre class='brush:php;toolbar:false;'>(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2</pre>
パラメータは length# にはカウントされません ##Attributes
(function(...args) {}).length // 0
パラメータにデフォルト値が最後のパラメータではない場合、
length 属性は次のパラメータでカウントされなくなります。 (function (a = 0, b, c) {}).length // 0 (function (a, b = 1, c) {}).length // 1
name 属性
を返します。関数の関数名
var f = function () {}; // ES5 f.name // "" // ES6 f.name // "f"名前付き関数が変数に割り当てられている場合、
name
属性は名前付き関数の元の名前を返しますconst bar = function baz() {}; bar.name // "baz"
Function コンストラクターによって返される関数インスタンス、name 属性の値は
anonymous
(new Function).name // "anonymous"
bind です。 返される関数、 name 属性値には、プレフィックス
bound
function foo() {}; foo.bind({}).name // "bound foo" (function(){}).bind({}).name // "bound "
#3 が付加されます。関数スコープ
Onceパラメータのデフォルト値が設定されている場合、関数が宣言されて初期化されるときにパラメータは別のスコープを形成します。このスコープは初期化が完了すると消えます。パラメータのデフォルト値が設定されていない場合、この文法的な動作は表示されません。
次の例では、
y=xは別のスコープを形成しますが、
x は定義されません, したがって、グローバル変数#xxx
let x = 1; function f(y = x) { // 等同于 let y = x let x = 2; console.log(y); } f() // 1
#4を指します。厳密モード
#関数パラメータが使用している限りデフォルト値、分割代入、または展開演算子の場合、関数を明示的に厳密モードに設定することはできず、それ以外の場合はエラーが報告されます// 报错
function doSomething(a, b = a) {
'use strict';
// code
}
// 报错
const doSomething = function ({a, b}) {
'use strict';
// code
};
// 报错
const doSomething = (...a) => {
'use strict';
// code
};
const obj = {
// 报错
doSomething({a, b}) {
'use strict';
// code
}
};
関数を定義するには「arrow」 (=>) を使用します
var f = v => v; // 等同于 var f = function (v) { return v; };アロー関数にパラメーターが必要ない場合、または複数のパラメーターが必要な場合は、括弧を使用して関数を表します。パラメータ部分
var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
アロー関数のコード ブロックに複数のステートメントがある場合は、中かっこを使用してステートメントを囲み、
return ステートメントを使用して returnする必要があります。
var sum = (num1, num2) => { return num1 + num2; }オブジェクトが返された場合は、そのオブジェクトを括弧で囲む必要があります。
let getTempItem = id => ({ id: id, name: "Temp" });
注:
The this
object in the関数本体は、使用されるときではなく、定義されるオブジェクトです。オブジェクト-
コマンドは使用できません。使用しない場合、エラーはコンストラクターとして使用できません。つまり、
new - # がスローされます
##関数本体に存在しない
arguments
オブジェクトは使用できません。これを使用したい場合は、 -
の代わりに
rest
パラメータを使用できます。yield
コマンドは使用できないため、アロー関数ジェネレーター関数としては使用できません 6. 展開演算子
#ES6 は展開要素演算子を使用します。 . 残り引数の逆演算など、配列をカンマ区切りの引数列に変換する console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('p')]
// [<p>, <p>, <p>]
主に関数呼び出し時に使用し、配列を引数列に変換する function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
特定のデータ構造を配列に変換できます
[...document.querySelectorAll('p')]
配列のコピーをより簡単に実現できます
const a1 = [1, 2]; const [...a2] = a1; // [1,2]
配列のマージもより簡潔になります
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
注: 達成される内容スプレッド演算子を介したものは、参照が指す値を変更する浅いコピーであり、新しい配列に同期的に反映されます
下の例を見るとより明確になりますconst arr1 = ['a', 'b',[1,2]]; const arr2 = ['c']; const arr3 = [...arr1,...arr2] arr1[2][0] = 9999 // 修改arr1里面数组成员值 console.log(arr3 ) // 影响到arr3,['a','b',[9999,2],'c']展開演算子を構造化代入と組み合わせて配列を生成できます
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // [] const [first, ...rest] = ["foo"]; first // "foo" rest // []展開演算子が次の場合、シンボルは配列の代入に使用され、パラメータの最後のビットにのみ配置できます。それ以外の場合はエラーが報告されます。
const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错
文字列を実数の配列に変換できます
[...'hello'] // [ "h", "e", "l", "l", "o" ]
は反復子インターフェイスを定義しますスプレッド演算子を使用してオブジェクトを実数の配列に変換できます
let nodeList = document.querySelectorAll('p'); let array = [...nodeList]; let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); let arr = [...map.keys()]; // [1, 2, 3]
スプレッドを使用する場合Iterator インターフェイスのないオブジェクトの演算子を使用すると、エラーが報告されます
const obj = {a: 1, b: 2}; let arr = [...obj]; // TypeError: Cannot spread non-iterable object
七、构造函数新增的方法
关于构造函数,数组新增的方法有如下:
- Array.from()
- Array.of()
Array.from()
将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组
Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
Array.of()
用于将一组值,转换为数组
Array.of(3, 11, 8) // [3,11,8]
没有参数的时候,返回一个空数组
当参数只有一个的时候,实际上是指定数组的长度
参数个数不少于 2 个时,Array()才会返回由参数组成的新数组
Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8]
八、实例对象新增的方法
关于数组实例对象新增的方法有如下:
- copyWithin()
- find()、findIndex()
- fill()
- entries(),keys(),values()
- includes()
- flat(),flatMap()
copyWithin()
将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组
参数如下:
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2 // [4, 5, 3, 4, 5]
find()、findIndex()
find()用于找出第一个符合条件的数组成员
参数是一个回调函数,接受三个参数依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
findIndex返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v){ return v > this.age; } let person = {name: 'John', age: 20}; [10, 12, 26, 15].find(f, person); // 26
fill()
使用给定值,填充一个数组
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
注意,如果填充的类型为对象,则是浅拷贝
entries(),keys(),values()
keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历
or (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"
includes()
用于判断数组是否包含给定的值
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true
方法的第二个参数表示搜索的起始位置,默认为0
参数为负数则表示倒数的位置
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
flat(),flatMap()
将数组扁平化处理,返回一个新数组,对原数据没有影响
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
flatMap()方法对原数组的每个成员执行一个函数相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组
// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this
九、数组的空位
数组的空位指,数组的某一个位置没有任何值
ES6 则是明确将空位转为undefined,包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()
建议大家在日常书写中,避免出现空位
十、排序稳定性
将sort()默认设置为稳定的排序算法
const arr = [ 'peach', 'straw', 'apple', 'spork' ]; const stableSorting = (s1, s2) => { if (s1[0] < s2[0]) return -1; return 1; }; arr.sort(stableSorting) // ["apple", "peach", "straw", "spork"]
排序结果中,straw在spork的前面,跟原始顺序一致
以上がes6 にはどのような新しい拡張機能が追加されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Reactの利点は、その柔軟性と効率性であり、これは以下に反映されています。1)コンポーネントベースの設計により、コードの再利用性が向上します。 2)仮想DOMテクノロジーは、特に大量のデータ更新を処理する場合、パフォーマンスを最適化します。 3)リッチエコシステムは、多数のサードパーティライブラリとツールを提供します。 Reactがどのように機能し、例を使用するかを理解することにより、そのコアコンセプトとベストプラクティスをマスターして、効率的で保守可能なユーザーインターフェイスを構築できます。

Reactは、大規模で複雑なアプリケーションに適したユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1. Reactのコアはコンポーネント化と仮想DOMであり、UIレンダリングパフォーマンスを向上させます。 2。Vueと比較して、Reactはより柔軟性がありますが、大規模なプロジェクトに適した急な学習曲線があります。 3。Angularと比較して、Reactはより軽く、コミュニティの生態学に依存し、柔軟性を必要とするプロジェクトに適しています。

Reactは、仮想Domを介してHTMLで動作します。 1)ReactはJSX構文を使用してHTMLのような構造を書きます。 2)仮想DOM管理UIアップデート、拡散アルゴリズムによる効率的なレンダリング。 3)Reactdom.render()を使用して、コンポーネントを実際のDOMにレンダリングします。 4)最適化とベストプラクティスには、React.MEMOとコンポーネントの分割を使用して、パフォーマンスと保守性を向上させることが含まれます。

Reactは、eコマース、ソーシャルメディア、データの視覚化で広く使用されています。 1)電子商取引プラットフォームは、Reactを使用してショッピングカートコンポーネントを構築し、UseStateを使用して状態を管理し、イベントを処理するためにオンクリックし、機能をマップしてリストをレンダリングします。 2)ソーシャルメディアアプリケーションは、Effectを使用してAPIと対話し、動的なコンテンツを表示します。 3)データの視覚化は、React-ChartJS-2ライブラリを使用してチャートをレンダリングし、コンポーネント設計はアプリケーションを簡単に埋め込むことができます。

Reactのベストプラクティスには、フロントエンドアーキテクチャが含まれます。1。コンポーネントの設計と再利用:設計単一の責任、理解しやすく、コンポーネントをテストして高い再利用を実現します。 2。状態管理:UseState、usereducer、contextapi、またはredux/mobxを使用して、過度の複雑さを避けるために状態を管理します。 3。パフォーマンスの最適化:raceme.memo、usecallback、usememo、その他の方法を介してパフォーマンスを最適化して、バランスポイントを見つけます。 4。コード組織とモジュール性:機能モジュールに従ってコードを整理して、管理可能性と保守性を向上させます。 5。テストと品質保証:コードの品質と信頼性を確保するためのJestとReactTestingLibraryを使用したテスト

HTMLにReactを統合するには、次の手順に従ってください。1。HTMLファイルにReactとReactdomを導入します。 2。反応成分を定義します。 3. ReactDomを使用してコンポーネントをHTML要素にレンダリングします。これらの手順を通じて、静的HTMLページは動的でインタラクティブな体験に変換できます。

Reactの人気には、パフォーマンスの最適化、コンポーネントの再利用、豊富なエコシステムが含まれます。 1.パフォーマンスの最適化は、仮想DOMおよび拡散メカニズムを介して効率的な更新を実現します。 2。コンポーネントの再利用は、再利用可能なコンポーネントによって重複コードを削減します。 3.リッチなエコシステムと一方向のデータフローは、開発エクスペリエンスを向上させます。

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1)コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2)国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3)イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
