2016年12月06日

ES2015(ES6)のIterator

ES2015(ES6)ではIterableなオブジェクトというのが追加されている。

Iterableなオブジェクトはfor-of文で取得する事ができます、わかりやすいのが配列である。

for (let item of [1,2,3]) {
console.log(item);
}


他にもargumentsオブジェクトやnodeListなどいわゆる配列ライクなオブジェクトもIterableなオブジェクトとして定義されているfor-of文で取得する事ができます。

面白いところではStringオブジェクトなどもIterableなオブジェクトとして定義されておりfor-of文で取得する事ができます。

for (let item of 'abcde') {
console.log(item);
}


Iteratorとは?



Iterableなオブジェクトがそんな感じならIteratorとは何かというと、
Iterableなオブジェクトにnext()メソッドを付与して1個づつ取り出しができるようにしたオブジェクトです。
[Symbol.iterator]()を実行することでIteratorオブジェクトを作成できます。

const items = [1, 2, 3];
const iterator = items[Symbol.iterator]();
iterator.next();//Object {value: 1, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//Object {value: 2, done: false}
iterator.next();//{value: undefined, done: true}


取り出した際にvalueプロパティに値がdoneプロパティに出し切ったかのオブジェクトが出力され、出し切ったらdoneがtrueになります。
タグ:iterator ES6 ES2015
posted by ねこまんま at 13:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年07月12日

ES2016(ES7)のbind syntax

ES2016(ES7)のbind syntaxでは以下のようにbind()を記述できる、

::this.handleIncrement


Babelの場合以下のように変換を行う。

this.handleIncrement.bind(this);


続きを読む
タグ:ES2016 ES7
posted by ねこまんま at 17:38 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES2015(ES6)の慣れるまで読みにくい記述

React/ReduxのMiddlewareで見かける以下の記述。

const logger = store => next => action => {
next(action);
}


Arrow Functionの特性を活かした感じの記述でBabelでは以下のように変換を行います。

var logger = function logger(store) {
return function (next) {
return function (action) {
console.log("before");
next(action);
console.log("after");
};
};
};
続きを読む
タグ:ES2015 ES6 BABEL
posted by ねこまんま at 07:21 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2016年06月22日

イベント処理

メンテナブルJavaScriptを呼んでいて、イベント処理のハンドラ分岐が意識できていなかったのでメモ続きを読む
posted by ねこまんま at 14:58 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月30日

ES6の基本 - Generator

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Generator



function名の前に*(アスタリスク)をつけると実行時にGenerator Objectを生成します。Generator Objectのnextメソッドを実行するとyield宣言した箇所まで関数を実行します。yieldの値はvalueプロパティで取得できます。

// ジェネレータを返す関数を定義する
function *func(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");
console.log(gen.next().value,"out");


var marked0$0 = [func].map(regeneratorRuntime.mark);
function func() {
return regeneratorRuntime.wrap(function func$(context$1$0) {
while (1) switch (context$1$0.prev = context$1$0.next) {
case 0:
console.log(1, "in");
context$1$0.next = 3;
return 1;

case 3:
console.log(2, "in");
context$1$0.next = 6;
return 2;

case 6:
console.log(5, "in");
context$1$0.next = 9;
return 5;

case 9:
console.log("foo", "in");
context$1$0.next = 12;
return "foo";

case 12:
console.log("last", "in");

case 13:
case "end":
return context$1$0.stop();
}
}, marked0$0[0], this);
}

// ジェネレータを取得する
var gen = func();

console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");
console.log(gen.next().value, "out");


以下のように無名関数を利用して一気にGenerator Objectを生成することも可能です。

// ジェネレータを取得する
var gen = (function *(){
console.log(1,"in");
yield 1;
console.log(2,"in");
yield 2;
console.log(5,"in");
yield 5;
console.log("foo","in");
yield "foo";
console.log("last","in");
})();
タグ:BABEL ES6 generator
posted by ねこまんま at 13:27 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月28日

ES6の基本 - Class

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Class



これまでnew functionなどを利用してclassを利用してきたがES6で他の言語と同等のclassが追加されました。

class Person{
//コンストラクタ
constructor(name) {
this.name = name;
}
//メソッド
say() {
return 'My Name is ' + this.name;
}
//静的メソッド
static say2(name) {
return '私の名前は' + name;
}
}
var taro = new Person('太郎');
console.log(taro.say());//My Name is 太郎
console.log(Person.say2("taro "));//私の名前はtaro

class Man extends Person{
isMan() {
return true;
}
}
class Woman extends Person{
isMan() {
return false;
}
}

var taro = new Man('太郎');
console.log(taro.isMan());//true
var hanako = new Woman('花子');
console.log(hanako.isMan());//false


var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Person = (function () {
//コンストラクタ

function Person(name) {
_classCallCheck(this, Person);

this.name = name;
}

//メソッド

_createClass(Person, [{
key: 'say',
value: function say() {
return 'My Name is ' + this.name;
}

//静的メソッド
}], [{
key: 'say2',
value: function say2(name) {
return '私の名前は' + name;
}
}]);

return Person;
})();

var taro = new Person('太郎');
console.log(taro.say()); //My Name is 太郎
console.log(Person.say2("taro ")); //私の名前はtaro

var Man = (function (_Person) {
_inherits(Man, _Person);

function Man() {
_classCallCheck(this, Man);

_get(Object.getPrototypeOf(Man.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Man, [{
key: 'isMan',
value: function isMan() {
return true;
}
}]);

return Man;
})(Person);

var Woman = (function (_Person2) {
_inherits(Woman, _Person2);

function Woman() {
_classCallCheck(this, Woman);

_get(Object.getPrototypeOf(Woman.prototype), 'constructor', this).apply(this, arguments);
}

_createClass(Woman, [{
key: 'isMan',
value: function isMan() {
return false;
}
}]);

return Woman;
})(Person);

var taro = new Man('太郎');
console.log(taro.isMan()); //true
var hanako = new Woman('花子');
console.log(hanako.isMan()); //false


このようにconstructorで簡単にコンストラクタの設定ができ、staticで静的メソッドが定義できます。
タグ:ES6 BABEL class
posted by ねこまんま at 19:23 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - concise methods

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

concise methods



ES6ではメソッドの定義が簡潔になりました。以下のように「:function」を省略できるようになっています。

var bar = {
fuga : "ok",
foo() {
console.log(this.fuga);
}
};

bar.foo();//ok


var bar = {
fuga: "ok",
foo: function foo() {
console.log(this.fuga);
}
};

bar.foo(); //ok
posted by ねこまんま at 18:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2015年09月26日

ES6の基本 - Function Arguments

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

可変長の引数



ES5以前では可変長の引数を受け取る際にargumentsを利用していましたが、ES6では任意の変数名で受け取ることができます。引数宣言時に.(ドット)を3つつなげて記述します。また、Arrayオブジェクトに変換されるためargumentsより使いやすいですね。

var bar = (...arg) => {
console.log(arg);//[1, 2, 3, 4]
console.log(Array.isArray(arg));//true
};

bar(1,2,3,4);


var bar = function bar() {
for (var _len = arguments.length, arg = Array(_len), _key = 0; _key < _len; _key++) {
arg[_key] = arguments[_key];
}

console.log(arg); //[1, 2, 3, 4]
console.log(Array.isArray(arg)); //true
};

bar(1, 2, 3, 4);


引数の初期値



関数の引数に初期値を設定できるようになりました。

function bar(foo = 3) {
console.log(foo);
}
bar(4);//4
bar();//3


function bar() {
var foo = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0];

console.log(foo);
}
bar(4); //4
bar(); //3


var bar = (foo = 3) => {
console.log(foo);
}
bar(4);//4
bar();//3


var bar = function bar() {
var foo = arguments.length <= 0 || arguments[0] === undefined ? 3 : arguments[0];

console.log(foo);
};
bar(4); //4
bar(); //3
posted by ねこまんま at 12:14 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - const

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

const



constは定数宣言を行う構文です。定数は習慣的に大文字で宣言を行います。

BABELでは1回しか定数宣言されていない場合はvar宣言に変換を行います。

const FOO ="bar";
console.log(FOO);//bar


var FOO = "bar";
console.log(FOO);


しかし、2回以上同一の定数が宣言された場合コンパイルを行わずにエラーを出力します。

const FOO ="bar";
console.log(FOO);//bar
FOO ="bar2";
console.log(FOO);
タグ:ES6 CONST BABEL
posted by ねこまんま at 11:54 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

ES6の基本 - Arrow Function

BabelでES6を始めるにあたってES6の基本文法とBabelがどのようにコンパイルするかを理解するためにまとめておきます。

Arrow Function



代表的な省略構文であるArrow Function。

このようなコードが以下のように変換される。関数リテラルが無名関数ではなく有名関数で生成されているのに違和感ありですが。

var bar = () => {
console.log("ok");
};


var bar = function bar() {
console.log("ok");
};


引数を取った場合も一緒です。

var bar = (x) => {
console.log("ok");
};


var bar = function bar(x) {
console.log("ok");
};


引数の括弧は省略できる

var bar = x => {
console.log("ok");
};


var bar = function bar(x) {
console.log("ok");
};


return を行い1行しかない場合は場合は { }も省略できる

var bar = x => x+1;


var bar = function bar(x) {
return x + 1;
};


jQueryなどを利用している場合は以下のように記述するとfunctionの記述を省略できます。

$(()=>{
console.log("ok");
});


$(function () {
console.log("ok");
});
posted by ねこまんま at 03:56 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2013年07月22日

JavaScriptの正規表現のmオプション

正規表現の先頭(^)や最後($)は検索文字列に対応している為、以下のような正規表現はマッチしません。

var str = "abc\ndef";
str.match(/^d/);//null


var str = "abc\ndef";
str.match(/c$/);//null


mオプションを指定することで先頭(^)や最後($)が各行二大して適応されるようになります。

var str = "abc\ndef";
str.match(/c$/m);//["c"]


var str = "abc\ndef";
str.match(/^d/m);//["d"]
posted by ねこまんま at 12:33 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

new RegExp()で特殊文字を入力する際の注意

new RegExp()で以下のように特殊文字を入力しようとしたら動かなくてはまった。

var regexp = new RegExp("^(\S*)$");


以下のようにバックスラッシュをさらにバックスラッシュでエスケープする必要がある。

var regexp = new RegExp("^(\\S*)$");
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

JavaScriptの正規表現で改行にマッチ

.などでマッチできると思ったら、.は改行以外の任意の文字列にマッチだった。

[\S\s]とすることで空白と空白以外の文字列にマッチできる。

String.match(/^([\S\s]{3})([\S\s]*)$/);

タグ:正規表現
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2013年01月31日

数値を3桁ごとにカンマで区切り

数値を3桁ごとにカンマで区切り関数。

function number_format(str){
var str_arr = str.toString().split(".");
var num = str_arr[0].replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num+(str_arr[1]?"."+str_arr[1]:"");
}


3桁ごとのカンマを取り除く関数

function number_deformat(str){
return str.toString().split(",").join("")-0;
}
posted by ねこまんま at 23:22 | Comment(1) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年12月17日

forEachでDOM要素をループする

forEachメソッドを利用してDOM要素をループさせようとすると上手くいかない。

document.getElementsByTagName("p").forEach(function(){
//do something
});


Arrayオブジェクトじゃないので当たり前と言えばあたりまえだけど。

次のように空のArrayオブジェクトにループにcallメソッドを利用すればDOMをループでまわすことができますよ。

[].forEach.call(document.getElementsByTagName("p"),function(ele){
//do something
});
posted by ねこまんま at 20:36 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月23日

isPrototypeOfメソッド

オブジェクトで利用することができ、他のオブジェクトのプロパティとして使われているか確認できます。

var hoge = {}
var Foo = function(){}
Foo.prototype = hoge;
var foo = new Foo();
hoge.isPrototypeOf(foo)// true


このサンプルだとhogeはfooのプロパティとして利用されているので。
タグ:isPrototypeOf
posted by ねこまんま at 05:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月22日

hasOwnPropertyメソッド

オブジェクトのプロパティがオブジェクト自身が持つものかどうか確認するメソッド。

var Hoge = function(){
this.foo = "foo";
}
Hoge.prototype.foo2 = "foo2";
var hoge = new Hoge();
hoge.hasOwnProperty("foo")//true
hoge.hasOwnProperty("foo2")//false


これでprototypeで作成されたオブジェクトと区別ができる。
タグ:hasOwnProperty
posted by ねこまんま at 20:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

propertyIsEnumerableメソッド

propertyIsEnumerableメソッドはプロパティが加算できるかどうか確認できます。加算できるとfor inの際に列挙されます。

var hoge = {a:1,b:2};
hoge.propertyIsEnumerable("a");//true


var hage = [1,2,3];
hage.propertyIsEnumerable("length");//false

posted by ねこまんま at 20:13 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

protptypeプロパティ

JavaScriptでは関数にコンストラクタ関数を利用してオブジェクトを追加する方法とprototypeプロパティを利用してオブジェクトを追加する方法がある。

var Hoge = function(){
this.foo = "foo";
this.bar = function(){return "bar"}
}
Hoge.prototype.foo2 = "foo2";
Hoge.prototype.bar2 = function(){
return "bar2";
}
var hoge = new Hoge();
console.log(hoge.foo);//foo
console.log(hoge.bar());//bar
console.log(hoge.foo2);//foo2
console.log(hoge.bar2());//bar2


prototypeで追加されたオブジェクトはコンストラクタ関数への参照の為、コンストラクタ関数に変更を加えるとすでに生成されたインスタンスも含めて全てのオブジェクトに反映されます。

var Hoge = function(){}
var hoge = new Hoge();
console.log(hoge.foo2);//undefined
Hoge.prototype.foo2 = "foo2";
console.log(hoge.foo2);//foo2


コンストラクタ関数を利用して追加したオブジェクトとprototypeプロパティを利用して追加したオブジェクトではコンストラクタ関数を利用して追加したオブジェクトのほうが先に参照されます。コンストラクタ関数を利用して追加したオブジェクトがない場合にprototypeプロパティを利用して追加したオブジェクトが参照されます。

var Hoge = function(){
this.foo = "foo";
this.remove = function(){
delete this.foo
}
}
Hoge.prototype.foo = "foo2";
var hoge = new Hoge();
console.log(hoge.foo);//foo
hoge.remove()
console.log(hoge.foo);//foo2


タグ:protptype
posted by ねこまんま at 19:46 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月17日

Functionオブジェクト

関数オブジェクトはlegthプロパティを持っていてい、これには関数がとれる引数の数が格納されています。

var hoge = function(a,b,c) {}
hoge.length//3


また、callerプロパティに自身を実行した関数への参照が格納されています。(自身への参照はarguments.caller)

var hoge = function() {
console.log(hoge.caller);
}
hoge();//native code
var hoge2 = function(){
hoge();
}
hoge2();//hoge
タグ:function legth
posted by ねこまんま at 02:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする