" を使用して関数を定義できます、構文は "var function name=(parameter)=>{ ... }"; 3. 拡張要素文字「...」は、配列をカンマで区切られたパラメータシーケンスに変換することができ、また、一部のデータ構造を配列に変換することもできます。"/> " を使用して関数を定義できます、構文は "var function name=(parameter)=>{ ... }"; 3. 拡張要素文字「...」は、配列をカンマで区切られたパラメータシーケンスに変換することができ、また、一部のデータ構造を配列に変換することもできます。">
検索
ホームページウェブフロントエンドフロントエンドQ&Aes6 にはどのような新しい拡張機能が追加されますか?

ES6 の新しい拡張機能: 1. 関数パラメータのデフォルト値の設定を許可; 2. 新しい矢印関数、矢印「=>」を使用して関数を定義でき、構文「var function name =」 (parameter )=>{...}"; 3. 拡張要素文字「...」は、配列をカンマで区切られたパラメータ列に変換したり、一部のデータ構造を配列に変換したりできます。

es6 にはどのような新しい拡張機能が追加されますか?

このチュートリアルの動作環境: 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>

rest

パラメータは 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) {
  &#39;use strict&#39;;
  // code
}

// 报错
const doSomething = function ({a, b}) {
  &#39;use strict&#39;;
  // code
};

// 报错
const doSomething = (...a) => {
  &#39;use strict&#39;;
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    &#39;use strict&#39;;
    // code
  }
};

5. アロー関数

関数を定義するには「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(&#39;p&#39;)]
// [<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(&#39;p&#39;)]

配列のコピーをより簡単に実現できます

const a1 = [1, 2];
const [...a2] = a1;
// [1,2]

配列のマージもより簡潔になります

const arr1 = [&#39;a&#39;, &#39;b&#39;];
const arr2 = [&#39;c&#39;];
const arr3 = [&#39;d&#39;, &#39;e&#39;];
[...arr1, ...arr2, ...arr3]
// [ &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39; ]

注: 達成される内容スプレッド演算子を介したものは、参照が指す値を変更する浅いコピーであり、新しい配列に同期的に反映されます

下の例を見るとより明確になります

const arr1 = [&#39;a&#39;, &#39;b&#39;,[1,2]];
const arr2 = [&#39;c&#39;];
const arr3  = [...arr1,...arr2]
arr1[2][0] = 9999 // 修改arr1里面数组成员值
console.log(arr3 ) // 影响到arr3,[&#39;a&#39;,&#39;b&#39;,[9999,2],&#39;c&#39;]

展開演算子を構造化代入と組み合わせて配列を生成できます

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];
// 报错

文字列を実数の配列に変換できます

[...&#39;hello&#39;]
// [ "h", "e", "l", "l", "o" ]

は反復子インターフェイスを定義しますスプレッド演算子を使用してオブジェクトを実数の配列に変換できます

let nodeList = document.querySelectorAll(&#39;p&#39;);
let array = [...nodeList];

let map = new Map([
  [1, &#39;one&#39;],
  [2, &#39;two&#39;],
  [3, &#39;three&#39;],
]);

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 = {
    &#39;0&#39;: &#39;a&#39;,
    &#39;1&#39;: &#39;b&#39;,
    &#39;2&#39;: &#39;c&#39;,
    length: 3
};
let arr2 = Array.from(arrayLike); // [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]

还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组

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: &#39;John&#39;, age: 20};
[10, 12, 26, 15].find(f, person);    // 26

fill()

使用给定值,填充一个数组

[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;].fill(7, 1, 2)
// [&#39;a&#39;, 7, &#39;c&#39;]

注意,如果填充的类型为对象,则是浅拷贝

entries(),keys(),values()

keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

or (let index of [&#39;a&#39;, &#39;b&#39;].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of [&#39;a&#39;, &#39;b&#39;].values()) {
  console.log(elem);
}
// &#39;a&#39;
// &#39;b&#39;

for (let [index, elem] of [&#39;a&#39;, &#39;b&#39;].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 = [
  &#39;peach&#39;,
  &#39;straw&#39;,
  &#39;apple&#39;,
  &#39;spork&#39;
];

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Reactを使用したフロントエンド開発:利点とテクニックReactを使用したフロントエンド開発:利点とテクニックApr 17, 2025 am 12:25 AM

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

React vs.他のフレームワーク:比較と対照オプションReact vs.他のフレームワーク:比較と対照オプションApr 17, 2025 am 12:23 AM

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

HTMLでのDemyStifice React:すべてがどのように機能するかHTMLでのDemyStifice React:すべてがどのように機能するかApr 17, 2025 am 12:21 AM

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

対応中の反応:実際のアプリケーションの例対応中の反応:実際のアプリケーションの例Apr 17, 2025 am 12:20 AM

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

Reactを使用したフロントエンドアーキテクチャ:ベストプラクティスReactを使用したフロントエンドアーキテクチャ:ベストプラクティスApr 17, 2025 am 12:10 AM

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

HTML内の反応:動的WebページのJavaScriptを統合しますHTML内の反応:動的WebページのJavaScriptを統合しますApr 16, 2025 am 12:06 AM

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

Reactの利点:パフォーマンス、再利用性などReactの利点:パフォーマンス、再利用性などApr 15, 2025 am 12:05 AM

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

反応:動的でインタラクティブなユーザーインターフェイスを作成します反応:動的でインタラクティブなユーザーインターフェイスを作成しますApr 14, 2025 am 12:08 AM

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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