ES6 の拡張機能: 1. 代入の構造化。配列またはオブジェクトから値を抽出し、特定のパターンに従って変数に代入できます。 2. トラバーサー インターフェイスが文字列に追加され、文字列を "for...of ループで走査できるようになります。 3. テンプレート文字列は文字列の拡張バージョンです。 4. ラベル テンプレートは関数呼び出しの特別な形式です。 5. 関数のパラメータのデフォルト値を設定します。 6. アロー関数のこれは、上位レベルのスコープを指します。 7. 変数と関数を中括弧内に属性およびメソッドとして直接記述できるようにします。
ES6 は機能を強化します。元の構文
1、代入の構造化
# es6 では、配列またはオブジェクトから値を抽出して変数に値を代入することを、特定のパターンに従うことを「分割代入」と呼びます。 分割では、分割のソースは分割代入式の右側にあり、分割のターゲットは分割式の左側にあります。 .(1)、配列代入の構造化ES6 では、配列やオブジェクトから値を抽出し、それに応じて変数に値を割り当てることができます。
let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []本質的に、この記述方法は「パターン マッチング」に属し、等号の両側のパターンが同じである限り、左側の変数は対応する値が割り当てられます。
分解が失敗した場合、値は未定義になります。もう 1 つのケースは、分解が不完全です。つまり、等号の左側の変数です。パターンは配列の一部とのみ一致します。等号の右側。この場合でも、分割は成功します。
Set 構造体の場合、配列の分割代入を使用することもできます。
let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"
- 割り当てを分割すると、デフォルト値を指定できます。
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' let [x = 1] = [null];x // null
ES6 は内部的に厳密等価演算子 (===) を使用して、位置には値があります。したがって、配列メンバーが厳密に未定義と等しい場合にのみ、デフォルト値が有効になります。配列メンバーが null の場合、null は厳密に未定義と等しくないため、デフォルト値は有効になりません。
function f() { console.log('aaa'); } let [x = f()] = [1];
上記のコードでは、x は値を取得できるため、関数 f はまったく実行されません。上記のコードは、実際には次のコードと等価です。 ##(2)、オブジェクトの分割と代入
##オブジェクトの分割と配列の間には重要な違いがあります。配列は順序どおりに配置され、変数の値はその位置によって決定されます、および オブジェクトのプロパティは順序どおりではなく、正しい値を取得するには変数の名前がプロパティと同じである必要があります。
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }; foo // "aaa" bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' }; baz // undefinedオブジェクトの分割代入により、既存のオブジェクトのメソッドを変数に簡単に代入できます。
// 例一 let { log, sin, cos } = Math; // 例二 const { log } = console; log('hello') // hello上記のコードの例 1 では、Math オブジェクトの対数、サイン、コサイン メソッドを対応する変数に割り当てています。これは、より使いやすくなります。例 2 では、console.log をログ変数に割り当てます。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" foo // error: foo is not defined上記のコードでは、foo が一致パターン、baz が変数です。実際に割り当てられるのは、パターン foo ではなく、変数 baz です。
オブジェクトの構造化と代入の内部メカニズムは、まず同じ名前の属性を見つけて、それを対応する変数に割り当てることです。実際に割り当てられるのは前者ではなく後者です。
配列と同様、構造の分割は入れ子構造のオブジェクトにも使用できます。
let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
デフォルト値
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
(3)、文字列の構造化代入
配列のようなオブジェクトには長さ属性があるため、この属性も構造化代入にすることができます。 。
let {length : len} = 'hello'; len // 5(4) 数値とブール値の代入の構造化代入を構造化するとき、等号の右側が数値の場合値とブール値の場合、最初にオブジェクトに変換されます。
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true(5)、関数パラメータの構造化割り当て
function add([x, y]){ return x + y; } add([1, 2]); // 31) 変数の値を交換する
let x = 1; let y = 2; [x, y] = [y, x];2) 関数から複数の値を返す 関数は 1 つの値のみを返すことができます。複数の値を返す場合は、それらのみを返すことができます。 配列またはオブジェクトに入れて返します。代入を分割すると、これらの値を取得するのが非常に便利になります。
// 返回一个数组 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();3) 関数パラメータの定義 分割代入により、パラメータのセットを変数名に簡単に対応付けることができます。
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});4) JSON データの抽出
代入の構造化は、JSON オブジェクトからデータを抽出する場合に特に便利です。
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]5) Map 構造のトラバース
Iterator インターフェイスでデプロイされたオブジェクトは、for...of ループを使用してトラバースできます。 Map 構造は Iterator インターフェイスをネイティブにサポートしており、変数の分割と代入により、キー名とキー値を取得するのが非常に便利です。
const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is worldキー名のみ、またはキー値のみを取得したい場合は、次のように記述できます。
// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }
2、文字列の強化
ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。
"\uD842\uDFB7"
// "?"
"\u20BB7"
// " 7"
ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。
ES6 为字符串添加了遍历器接口,使得字符串可以被for…of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
模板字符串之中还能调用函数。如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar
字符串的新增方法
1,String.fromCodePoint()
ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。
2,String.raw()
ES6 还为原生的 String 对象,提供了一个raw()方法。该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。
String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!",显示的是转义后的结果 "Hi\n5!"
String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!",显示的是转义后的结果 "Hi\u000A!"
3, 实例方法:includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
3,函数的增强
(1)标签模板
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
let a = 5;
let b = 10;
function tag(s, v1, v2) {
console.log(s[0]);
console.log(s[1]);
console.log(s[2]);
console.log(v1);
console.log(v2);
return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
箭头函数的this指向上级作用域
const name = 'tony'
const person = {
name: 'tom',
say: () => console.log(this.name),
sayHello: function () {
console.log(this.name)
},
sayHi: function () {
setTimeout(function () {
console.log(this.name)
}, 500)
},
asyncSay: function () {
setTimeout(()=>console.log(this.name), 500)
}
}
person.say() //tony
person.sayHello() //tom
person.sayHi() //tony
person.asyncSay() //tom
4.对象的扩展
属性的简洁表示法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。除了属性简写,方法也可以简写。
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
const o = {
method() {
return "Hello!";
}
};
// 等同于
const o = {
method: function() {
return "Hello!";
}
};
1、如果key与value变量名相同,省略:value
2、省略函数:function
3、计算属性:[Math.random()]
const bar = 'bar'
const obj = {
bar,
fn () {
console.log('1111')
},
[Math.random()]: '123'
}
console.log(obj)
【推荐学习:javascript视频教程】
ES5 提供String.fromCharCode()方法,用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符。
ES6 还为原生的 String 对象,提供了一个raw()方法。该方法返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,往往用于模板字符串的处理方法。
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
2、省略函数:function
3、计算属性:[Math.random()]
以上がes6 で強化された機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1)Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2)特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3)Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。その核となるアイデアは、コンポーネントを通じてUIを構築することです。 1.コンポーネントは、UIロジックとスタイルをカプセル化する反応の基本単位です。 2。仮想DOMと状態管理はコンポーネントの作業の鍵であり、状態はSetStateから更新されます。 3.ライフサイクルには、マウント、更新、アンインストールの3つのステージが含まれます。パフォーマンスは、合理的に使用して最適化できます。 4. UseStateとContextapiを使用して、状態を管理し、コンポーネントの再利用性とグローバルな州管理を改善します。 5.一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。これは、ReactDevtoolsを介してデバッグできます。 6.パフォーマンス最適化の提案には、メモの使用、不必要な再レンダリングの回避、および私たちの使用が含まれます

HTMLを使用してReactでコンポーネントとデータをレンダリングすることは、次の手順を通じて達成できます。JSX構文の使用:JSX構文を使用してHTML構造をJavaScriptコードに埋め込み、コンパイル後にDOMを操作します。コンポーネントはHTMLと組み合わされます。Reactコンポーネントはプロップを介してデータを渡し、などのHTMLコンテンツを動的に生成します。データフロー管理:Reactのデータフローは、親コンポーネントから子コンポーネントに渡される一方通行であり、アプリコンポーネントが名前を挨拶に渡すなど、データフローが制御可能であることを保証します。基本的な使用例:マップ関数を使用してリストをレンダリングするには、フルーツリストのレンダリングなどのキー属性を追加する必要があります。高度な使用例:UseStateフックを使用して状態を管理し、ダイナミクスを実装する

Reactは、ユーザーインターフェイスを構築するための効率的で柔軟な方法を提供するため、シングルページアプリケーション(SPA)を構築するための好ましいツールです。 1)コンポーネント開発:複雑なUIを独立した再利用可能な部分に分割して、保守性と再利用性を向上させます。 2)仮想DOM:仮想DOMと実際のDOMの違いを比較することにより、レンダリングパフォーマンスを最適化します。 3)状態管理:状態および属性を介したデータフローを管理して、データの一貫性と予測可能性を確保します。

Reactは、メタがユーザーインターフェイスを構築するために開発したJavaScriptライブラリであり、そのコアはコンポーネント開発と仮想DOMテクノロジーです。 1。コンポーネントと状態管理:Reactは、コンポーネント(関数またはクラス)とフック(UseStateなど)を介して状態を管理し、コードの再利用性とメンテナンスを改善します。 2。仮想DOMとパフォーマンスの最適化:仮想DOMを介して、実際のDOMを効率的に更新してパフォーマンスを向上させます。 3.ライフサイクルとフック:フック(使用効果など)は、関数コンポーネントがライフサイクルを管理し、副作用操作を実行できるようにします。 4。使用例:基本的なHelloworldコンポーネントから高度なグローバル州管理(USECONTEXTおよび

Reactエコシステムには、状態管理ライブラリ(Reduxなど)、ルーティングライブラリ(Reactrouterなど)、UIコンポーネントライブラリ(材料-UIなど)、テストツール(JESTなど)、およびビルディングツール(Webpackなど)が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

Reactは、ユーザーインターフェイスを構築するためにFacebookが開発したJavaScriptライブラリです。 1. UI開発の効率とパフォーマンスを改善するために、コンポーネントおよび仮想DOMテクノロジーを採用しています。 2。Reactのコア概念には、コンポーネント化、状態管理(UseStateやUseEffectなど)、および仮想DOMの作業原則が含まれます。 3。実際のアプリケーションでは、基本的なコンポーネントレンダリングから高度な非同期データ処理へのReactサポートがサポートされます。 4.主要な属性の追加や誤ったステータスの更新を忘れるなどの一般的なエラーは、ReactDevtoolsとログを介してデバッグできます。 5.パフォーマンスの最適化とベストプラクティスには、React.Memo、コードセグメンテーション、コードの読み取り可能な状態を維持し、信頼性を維持することが含まれます


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

メモ帳++7.3.1
使いやすく無料のコードエディター

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ドリームウィーバー CS6
ビジュアル Web 開発ツール
