ES6_JavaScript スキルにおける非常に実用的な新機能の紹介-jsチュートリアル-php.cn

ES6_JavaScript スキルにおける非常に実用的な新機能の紹介

WBOY

リリース： 2016-05-16 15:11:20

オリジナル

1385 人が閲覧しました

ECMAScript 6 は、その最も重要な方言として、ますます私たちに近づいています。Javascript は、ES6 がもたらすものについて説明するコラム「ES6 の簡単な説明」を特別に開設しました。新しいコンテンツ。

は

の前に書かれています

ES6 はレビューのために Ecma カンファレンスに提出されました。これは、JavaScript の最新標準といくつかの糖衣構文の大きな波を迎えることを意味します。 ES6 には注目に値するものがたくさんあります。これらを記録するために最も頻繁に使用する新機能をいくつか紹介します。

1. for-of ループ

これは配列のループに最適です。その理由は、現在の es5 の配列のループの欠点をすべて補っているからです。

たとえば、for-in は配列値だけでなく、配列オブジェクトの追加のプロパティを走査します。もう 1 つのポイントは、for-in のインデックスが文字列型であることです。これは特に重要です。

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

ログイン後にコピー

もちろん、forEach() 関数もありますが、これにも Break return ができないなどの問題があります。

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

ログイン後にコピー

これは for-in よりもはるかに簡単です。しかし、上で述べたように、欠点もあります。それでは、for-of を試してみましょう:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen，满足条件之后就不在继续循环，提高了效率并且可以自由控制跳出循环或继续循环
}

ログイン後にコピー

以下をご覧ください:

for-of を使用すると、配列内の要素がループされ、追加の属性は for-in でトラバースされません。第 2 に、ループ変数の型は、すべてが文字列であるのではなく、配列内のその型と一致します。。

これら 2 つの点だけが、forEach() や for-in の代わりに for-of を選択する価値があると言えます。もちろん、これをサポートしていないブラウザもまだあります。ただし、最新バージョンの FireFox では、上記のコードは正常に実行され、期待どおりの結果が得られます。もちろん、for-of は配列に対してのみ使用されるわけではなく、DOM NodeList、文字列などの配列のようなオブジェクトに対しても使用できます。

2. テンプレート文字列

これもとても楽しくて、文字列のつなぎにも使えます。名前から、それが何をするのかがわかります。フロントエンド開発のプロセスでは、文字列を動的に結合する必要がある状況 (動的 DOM 生成、データ形式設定) などに遭遇することは避けられません:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出：hello: alexchen,welcome es6,your words is: im admin

ログイン後にコピー

テンプレートとして使用される文字列は ` 記号で囲まれていることに注意してください。このうち、$(paramenter) はプレースホルダーであり、$(obj.name) などのオブジェクトをサポートします。通常の文字列と比較して、テンプレート文字列は + 連結を使用せずに複数行で記述することができます:

hello:$(name),
welcome es6,
your words is $(words)

ログイン後にコピー

テンプレート文字列では特殊文字がエスケープされないため、セキュリティリスクには自分で対処する必要があることに注意してください。テンプレート文字列にはループ構文や条件文が組み込まれていないため、テンプレート文字列でテンプレートフレームワークを置き換えることはできません。したがって、通常の通常の文字列連結の場合は、これを使用して実行することができ、コードの見た目が少し良くなります。 PS(それ以外は役に立たないと思います。ψ(╰_╯))

ここでは、上記の組み込みループと判断分岐がない問題を解決するためのより詳細な紹介を示します:

es6-template string-mozilla

3. デフォルトパラメータ

これは少し興味深いです。これは、js 関数が関数パラメーターにデフォルト値を設定する必要がないことを誰もが知っています。たとえば、次のコードはエラーを報告します。

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

ログイン後にコピー

これは、パラメータにデフォルト値を与えることができないことも意味します。パラメータにデフォルト値を与える必要がある場合、関数内で未定義かどうかを判断する必要があります。しかし、ES6では関数内で判断してデフォルト値を割り当てるのではなく、パラメータにデフォルト値を設定することができるだけでなく、以下のように演算式を使用することもできます。

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") &#63; "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出，welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/

ログイン後にコピー

この方法は、C# などの動的言語と同様に、コードを記述する場合に非常に簡単です。これは直感的で便利です。ですので、まだまだとても使いやすいです。レストパラメータ(Restparameters)もありますが、特に使い道が見つからなかったので、興味のある方は調べてみてください

。

デフォルトのパラメータと残りのパラメータ -mozilla

ES6 には多くの新しい機能と構文があります。ご興味がございましたら、mozilla チームのブログをご覧ください。このブログには非常に詳細な紹介と一連の記事が記載されています。

mozilla-ES6 シリーズの紹介

上記は、ES6 で発見した 3 つの実用的な新機能です。これら 3 つは、日常の開発で最もよく使われるはずです。ここに記録しておきます。

ここでは ES6 の非常に実用的な新機能について説明します。お役に立てば幸いです。