" を使用して関数を定義できます、構文は "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:Web開発のためのJavaScriptライブラリの力React:Web開発のためのJavaScriptライブラリの力Apr 18, 2025 am 12:25 AM

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

Reactのエコシステム:ライブラリ、ツール、およびベストプラクティスReactのエコシステム:ライブラリ、ツール、およびベストプラクティスApr 18, 2025 am 12:23 AM

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

反応とフロントエンドの開発:包括的な概要反応とフロントエンドの開発:包括的な概要Apr 18, 2025 am 12:23 AM

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

HTMLの反応の力:現代のWeb開発HTMLの反応の力:現代のWeb開発Apr 18, 2025 am 12:22 AM

HTMLでのReactの適用により、コンポーネントと仮想DOMを通じてWeb開発の効率と柔軟性が向上します。 1)反応コンポーネントのアイデアは、UIを再利用可能なユニットに分解して、管理を簡素化します。 2)仮想DOM最適化パフォーマンス、拡散アルゴリズムを介してDOM操作を最小限に抑えます。 3)JSX構文により、JavaScriptでHTMLを作成して開発効率を向上させることができます。 4)UseStateフックを使用して状態を管理し、動的なコンテンツの更新を実現します。 5)最適化戦略には、React.memoとusecallbackを使用して不必要なレンダリングを減らすことが含まれます。

Reactの主要な機能を理解する:フロントエンドの視点Reactの主要な機能を理解する:フロントエンドの視点Apr 18, 2025 am 12:15 AM

Reactの主な機能には、コンポーネント思考、国家管理、仮想DOMが含まれます。 1)コンポーネント化のアイデアにより、UIを再利用可能な部分に分割して、コードの読みやすさと保守性を向上させることができます。 2)状態管理は、状態および小道具を通じて動的データを管理し、変更を変更しますUIの更新をトリガーします。 3)仮想DOM最適化パフォーマンス、メモリ内のDOMレプリカの最小操作の計算を通じてUIを更新します。

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とコンポーネントの分割を使用して、パフォーマンスと保守性を向上させることが含まれます。

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ヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境