8
アロー関数と呼ばれるECMAScript 6で導入された構文で、「引数のないthisを返す無名関数」を作成しています。
前半の()は関数の仮引数宣言です。この場合は()ですので引数を取りませんが、一般的には(a, b, c, ..., z)のように宣言します。また引数が1個の場合a =>のように括弧を省略することが出来ます。
後半のthisは関数の本体で{ return this; }の省略形です。
またアロー関数には「アロー関数が作成されたときのthisの値がアロー関数内部で使用されるthisの値になる」という特徴があります。
仮に質問文のコードをfunctionを使って
baz(function () { return this });
と書き換えると、...
6
プロパティ名がSymbol.iteratorシンボルであるメソッドを定義します。
また、Generator メソッドにすると楽です。
class A {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
}
const a = new A();
for (const item of a) {
console.log(item); // 1 2 3
}
他の例:
class B {
constructor() {
this._list = [1,2,3];
}
*[Symbol.iterator]() {
for (const ...
6
ECMAScript 2015 (ES6) / ECMAScript 2016 でも Strict Mode の区別は継続します。
後方互換性のために、既存の振る舞いは変更できません。
ただ、後方互換性を考える必要が無い所はデフォルトで Strict Mode の振る舞いになります。
具体的には、
Class 定義の内部
Modules として読み込まれたコード全体
です。
Class 定義の内部
class A {
foo() {
console.log("ここは Strict Mode です");
}
}
console.log("ここは Strict Mode ではありません");
function foo() {
"use strict";
...
5
6.1.7.2 Object Internal Methods and Internal Slots に説明があります。それに基づくと回答は以下になります。
プロパティとは異なる?
異なります。
内部的な場所なので、意図的にアクセスすることはできない?
できません。正確には、アクセスする方法は規定されていません。
ただし slot によってはアクセスする方法が規定されている場合もあります。
決められたルールに従って処理されるので利用者は気にする必要がない、ということでしょうか?
基本的にはその通り、気にする必要はありません。
それとも__proto__みたいに、非推奨だけれどもアクセスする方法はあるのでしょうか?
実装やslotの内容によってはある可能性があります。
...
5
MDNの説明より引用:
ECMAScript 6 では let は変数をブロックの先頭へ引き上げます。しかし、その変数を宣言より前で参照することは ReferenceError を引き起こします。ブロックの始めから変数宣言が実行されるまで、変数は "temporal dead zone" の中にいるのです。
「巻き上げ(hoisting)は行われるが TDZ; Temporal Dead Zone であるため ReferenceError となる」が答えかと思います。
4
様々なオブジェクトが Iterator を通した反復をサポートすることを考えたとき、どのオブジェクトに対しても同じ方法で Iterator の取得が行えると便利です。そこで ES6 では Symbol を使い、foo[Symbol.iterator]() として Iterator を取得するように決めました。このようにして Iterator を取得できるオブジェクトを Iterable オブジェクトと呼びます。
Iterator は Iterator プロトコルに沿って next() を実装しているオブジェクトで、
配列などで使われる組み込みの Iterator
ジェネレーター関数で生成したジェネレーターオブジェクト
自前で next() を実装したオブジェクト
などがあります。実装方法は異なりますが、...
4
Promiseのthenメソッドは引数を省略した場合でも、コールバック関数が暗黙的に設定されます。これはEcmascript6の仕様で、ブラウザの独自実装ではありません。
このコードは、
hoge.then(function (m) {
alert(m)
})
hoge.catch(function (e) {
alert("catch")
alert(e)
alert("catch")
})
これと等価です:
hoge.then(function (m) {
alert(m)
}, function (e) {
throw e
})
hoge.then(function (m) {
return m
}, function (e) {
...
4
無理だと思います。テンプレートリテラルは文字列リテラルとは違います。またテンプレートリテラル内の式表現は解決後の値でしかスクリプトから参照できないようです。テンプレートを動的に生成し評価させたいのなら、ソースコードを再評価させることになりますから、 eval を使用する方向になるでしょう。
同じようなテンプレートエンジンを自前で作るにしても、名前空間の仕組み上、呼び出した関数の中では呼び出し元の変数を参照できないので、変数名を指定するようなテンプレートの作成は難しいところです。特に宣言済みのローカル変数名リストへのアクセスができないのが痛い。
それでも、シンプルな値置換のテンプレートエンジンは簡単に作成できる言語ですので、値を変数名のみではなく、eval 前提表現、または、DSL ...
3
ES6を、現行のブラウザで動くJavaScriptに変換するツールは、Babelなどの定番transpilerがありますね。
逆方向(JavaScriptをモダンに書き換える)は、ぐぐってみたらLebab というのを見つけました。
3
抽象演算ToIntegerは、仕様に基づき疑似jsコードで書くと次のようになります:
const ToInteger = argument => {
// 1. Let number be ? ToNumber(argument).
const number = Number(argument);
// 2. If number is NaN, return +0.
if (isNaN(number)) {
return +0;
}
// 3. If number is +0, -0, +∞, or -∞, return number.
if (number === 0 || !isFinite(number)) {
...
3
出力の順番を見てみると、うまくいっていないことがわかると思います。
質問文のコードは、要するに次のコードと同じです。
var a = 3;
var b = 4;
var add = (a, b) => console.log(a + b);
console.log(a, b); // 3 4
add(a,b); // 7
3
Arrow functions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }
アロー関数では1行の式の場合、returnを省略できることになっています。
省略せずに書くと下記のようになります。
const check = (user) => { return `Good ${user}`; }
そのため、functionを使用して書くと下記のようになります。
...
2
ESLint の自動修正機能を使うのもひとつの手です。
no-var, prefer-const, prefer-arrow-callback, object-shorthand 等、自動修正によって ES5 のコードを ES2015 (ES6) に直してくれるルールがあります。
参考: ES6ルール一覧, ESLint最初の一歩
2
ドキュメントには書かれていないようですが、babel の polyfill をロードする必要があるようです。
application.js に下記の記述を加えたら動作しました。
//= require babel/polyfill
rails 4.2.1
sprockets 3.2.0
sprockets-es6 0.6.2
browserify-rails 1.0.1
2
名前のままですが、functionはsrc/jsfun.cpp、Objectはsrc/jsobj.cppに実装があります。arrayなども同様です。
classについては、基本的に文法が追加されているだけなので機能としての実装は存在しません。強いて言うなら、src/frontend/Parser.cppでしょうか。
2
for..of は Iterator と組み合わせるものであり、プロパティ名の列挙にはこれまで通り for..in を使う必要があります。 Array や Map は Iterator を提供している(Iterable)ので for...of が使えます。
これまでプロパティの列挙が for..in でできていた一方で、 arguments のような配列モドキや独自のコレクションを Array.prototype.forEach のように反復処理する方法はありませんでした。一部の処理系では Array.forEach などの一般化した実装も提供していましたが、これは配列のように length プロパティとインデックスアクセスを用いるものですから、ES6 で登場する Generator ...
2
そのまま使うのは無理です
JavaScriptのimportしたモジュールはモジュールごとに分割されています.
現状,
import Foo from './Foo';
は
const Foo = require('./Foo');
のほとんど構文糖衣です.
そしてモジュールの変数はモジュールごとに分離されています.
よって参照を共通させることは出来ません.
これが出来てしまうと,importした先でモジュールの名前が衝突すると動かなくなり,モジュールを導入した意味がなくなってしまいます.
もしモジュールをimportなしに使えるとすると,例えばライブラリAがUtil.jsを作っているときに,アプリケーションにUtil.jsを追加してimportするとライブラリAのUtil....
2
オブジェクト指向プログラミングをサポートしている言語は、どの言語でも、静的メソッドからインスタンスを参照できません。質問にある例だと、もっとも簡単な解決策はvalidatePropメソッドを非静的メソッドにする方法です:
class TestClass{
constructor(prop){
// ちなみに、パラメターを使ってからこれをバリデーションするのは変な書き方です
this.prop = prop;
this.validateProp(prop);
}
validateProp(prop){
// ...
this.prop = 5;
}
}
静的メソッドにこだわりがあれば:
class TestClass{
...
2
コメント欄にてunaristさんから頂いた情報の通りとなりますが
https://babeljs.io/docs/plugins/preset-env/
にてkangax/compat-tableを元に定期生成されているものが
https://github.com/babel/babel-preset-env/blob/master/data/built-ins.json
にて参照可能なようです。
"es6.promise": {
"chrome": 51,
"edge": 13,
"firefox": 45,
"safari": 10,
"node": 6.5,
"ios": 10,
"opera": 38,
"electron": ...
1
scripts/fetch_catch.jsの13行目において、messageをmessgaeと打ち間違えています。
想定されるものの代わりにundefinedが得られる場合は、このようにプロパティ名(message)を打ち間違えている(存在しないプロパティ名を指定したのでundefinedが返されている)ことがよくありますので、重点的に確認されるとよいと思います。
1
ECMA Script 2015 の仕様書の Promise(executor) の記述 に従うと、回答は以下のとおりになります。
reject('テスト');が実行されるタイミングは?
Promise(executor) の実行中です。
promiseオブジェクトが作成される前、それともpromiseオブジェクト作成後に実行?
利用する観点では、作成される(完了する)前です。厳密に言うと作成中ですね。
Promise {[[PromiseStatus]]: は"pending"後"rejected"? それとも最初から"rejected"なのでしょうか?
利用する観点では、最初から rejected です。厳密には、内部状態として pending 後に rejected ...
1
同じ意味です。
前者の executor には function(resolve, reject) { .... } という2引数の関数を渡す必要が有る、ということを示したかったのでしょう。つまり以下の様な、別のものを渡す使い方はできない(しない)、ということでもあります。
// 何も渡さない
new Promise();
// オブジェクトを渡す
new Promise({
run: function() {... }
});
// 引数のない関数を渡す(resolveできないので、やる意味が無い)
new Promise(function() {
// do something
});
JavaScriptの関数引数には型を指定する方法がありませんので、...
1
https://github.com/webpack/webpack/issues/1021
こちらに方法が載っていました。
package.jsonのbrowserフィールドに無害化したいモジュール名を入力し、webpack.config.babel.jsのexternalsは削除することで、bundle.jsをhtmlから読み込んでもエラーが発生しなくなりました。
package.json
{
"name": "webpack-external-trouble",
"private": true,
"browser": {
"express": false
},
"scripts": {
"build": "webpack"
},
"...
1
これですかね?
for (var k in hoge) {
console.log(k + ' = ' + hoge[k]);
}
1
設定ファイルをJSで記述し、一番テンプレートリテラルそのままで使える方法を考えてみました。
~~定義~~
function MyTemp(scope_obj) {
return key => {
with(scope_obj) {
return {
HELLO : `Hello, ${name}!`,
HELLO2: `Hello2, ${name}!`,
HELLO3: `Hello3, ${name}!`
}[key]
}
}
}
~~利用~~
var scope_obj = {
name: "Mike"
}
var temp = new MyTemp(scope_obj)
var str = ...
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
ecmascript-6 × 38javascript × 27
promise × 5
node.js × 2
webpack × 2
非同期 × 2
ruby-on-rails × 1
c++ × 1
google-apps-script × 1
angularjs × 1
google-chrome × 1
firefox × 1
safari × 1
sinatra × 1
babeljs × 1