JavaScriptの下線(第三者ライブラリ)

11535 ワード

JavaScriptは関数式プログラミング言語で、高次関数とクローズドをサポートします.関数式プログラミングは非常に強力で、非常に簡潔なコードを書くことができます.例えばArayのmap()とfilter()の方法:Arayはmap()とfilter()の方法がありますが、Objectはこれらの方法がありません.また、低バージョンのブラウザ、例えばIE 6～8もこれらの方法がないですが、どうすればいいですか?直接に成熟した信頼できる第三者オープンソースライブラリを探して、統一した関数を使ってmap()、filter()これらの操作を実現します.選択したサードパーティはアンダースコアです.jQueryが異なるブラウザ間のDOM操作の違いを統一したように、簡単にDOMを操作できます.undersscoreは完備した関数式プログラミングのインターフェースを提供しています.JavaScriptで関数式プログラミングをより便利に実現できます.jQueryはロードする時、自分自身を唯一のグローバル変数に結びつけます.undersscoreはこれと似ています.自分自身を唯一のグローバル変数_に結びつけます.これもなぜアンダースコアという名前ですか?アンダースコアでmap()を実現する操作は以下の通りです.

 _.map([1, 2, 3], (x) => x * x); // [1, 4, 9]

どのように見るとAray.map()を直接使うよりも面倒くさいですが、undersscoreのmap()はObjectにも役立ちます.

_.map({ a: 1, b: 2, c: 3 }, (v, k) => k + '=' + v); // ['a=1', 'b=2', 'c=3']

コレクション
underscoreは、集合類オブジェクトに対して一貫したインターフェースを提供している.集合類とは、ArayとObjectのことで、MapとSetはしばらくサポートされていません.Arayのmap()とfilter()は似ていますが、undescoreのmap()とfilter()はObjectに作用することができます.Objectに使用する場合、着信の関数はfunctionであり、最初のパラメータはvalueを受信し、第二のパラメータはkeyを受信する.

var obj = {
    name: 'bob',
    school: 'No.1 middle school',
    address: 'xueyuan road'
};
var upper = _.map(obj, function (value, key) {
    return key.toUpperCase(),value.toUpperCase();
});
alert(JSON.stringify(upper));

なぜObjectに対してmap()を作って操作したのですか?Objectが合理的なはずです.mapを.mapObjectに変えてみます.
every/some
セットのすべての要素が条件を満たすとき.every()関数はtrueに戻り、セットの少なくとも一つの要素が条件を満たすとき.some()関数はtrueに戻ります.

_.every([1,4,7,-3,-9],(x)=>x>0);//false
_.some([1,4,7,-3,-9],(x)=>x>0);//ture

集合がObjectの時、私達は同時にvalueとkeyを得ることができます.

var obj = {
    name: 'bob',
    school: 'No.1 middle school',
    address: 'xueyuan road'
};
var r1 = _.every(obj, function (value, key) {
var re = /[A-Z]+/;
    return !re.test(key) && !re.test(value);
});
var r2 = _.some(obj, function (value, key) {
var re = /[A-Z]+/;
    return !re.test(key) && !re.test(value);
});

alert('every key-value are lowercase: ' + r1 + '
some key-value are lowercase: ' + r2);

max/min
この2つの関数は、セット内の最大値と最小値を直接返します.

var arr = [3, 5, 7, 9];
_.max(arr); // 9
_.min(arr); // 3
//       -Infinity Infinity，           ：
_.max([])
-Infinity
_.min([])
Infinity
  ，     Object，max() min()    value，   key：
_.max({ a: 1, b: 2, c: 3 }); // 3

グループBy
groupBy()は、集合の要素をkeyに従って分類し、keyは着信関数によって返される:

var scores = [20, 81, 75, 40, 91, 59, 77, 66, 72, 88, 99];
var groups = _.groupBy(scores, function (x) {
    if (x < 60) {
        return 'C';
    } else if (x < 80) {
        return 'B';
    } else {
        return 'A';
    }
});
//   :
// {
//   A: [81, 91, 88, 99],
//   B: [75, 77, 66, 72],
//   C: [20, 40, 59]
// }

shuffle/sample

shuffle()             ：
//           ：
_.shuffle([1, 2, 3, 4, 5, 6]); // [3, 5, 4, 6, 2, 1]
sample()             ：
//           ：
//    1 ：
_.sample([1, 2, 3, 4, 5, 6]); // 2
//    3 ：
_.sample([1, 2, 3, 4, 5, 6], 3); // [6, 1, 4]

もっと完全な関数はundersscoreの文書を参照してください.http://underscorejs.org/#collections
行列
first/last
名前の通り、この2つの関数はそれぞれ最初と最後の要素を取ります.

'use strict';
var arr = [2, 4, 6, 8];
_.first(arr); // 2
_.last(arr); // 8
flatten

flatten()    Array，    Array        Array，flatten()              ：
_.flatten([1, [2], [3, [[4], [5]]]]); // [1, 2, 3, 4, 5]
zip / unzip

zip()                  ，           。  ，    Array     ，   Array     ，  ，          ， zip()    ：
var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
_.zip(names, scores);
// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]
unzip()     ：

'use strict';
var namesAndScores = [['Adam', 85], ['Lisa', 92], ['Bart', 59]];
_.unzip(namesAndScores);
// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]

object
zipを使うより、名前と点数を直接Objectにしないのはなぜですか?焦らないでください.objectの関数はこれをするものです.

var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
_.object(names, scores);
// {Adam: 85, Lisa: 92, Bart: 59}
  _.object()     ，  JavaScript Object  。

レンゲ
range()はあなたに素早くシーケンスを生成させて、for循環でもう実現しなくてもいいです.

//  0    10:
_.range(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

//  1    11：
_.range(1, 11); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

//  0    30，  5:
_.range(0, 30, 5); // [0, 5, 10, 15, 20, 25]

//  0    -10，  -1:
_.range(0, -10, -1); // [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]

もっと完全な関数はundersscoreの文書を参照してください.http://underscorejs.org/#arrays
Funtions
ビッド
ビッドは何のために使いますか?まずよくある間違いの使い方を見ます.

'use strict';

console.log('Hello, world!');
//   'Hello, world!'

var log = console.log;
log('Hello, world!');
// Uncaught TypeError: Illegal invocation

consolone.logの代わりにロゴを使いたいなら、上のようにしてはいけません.logを直接呼び出して入ってきたthisポインタはundefinedです.

'use strict';

var log = console.log;
//   call   console    this:
log.call(console, 'Hello, world!')
//   Hello, world!

このようにすると面倒くさいです.コンサート・ソロ・ロゴをそのまま使うほうがいいです.しかし、ビッドは私達のためにconsolieオブジェクトを直接ロゴ()のthisポインタに結びつけることができます.その後、log()を呼び出すと、直接に正常に起動できます.

'use strict';

var log = _.bind(console.log, console);
log('Hello, world!');
//   Hello, world!

パーティー
partialとは、関数の偏り関数を作成することです.偏関数は何ですか?例を見ます
もし私たちがx yを計算するなら、Math.pow(x,y)を呼び出すだけでいいです.
2 yをよく計算すると、Math.pow(2,y)を書くのが面倒くさいです.新しい関数を作成したらそのままpow 2 N(y)を書けばいいです.この新しい関数pow 2 N(y)はMath.pow(x,y)によって作成された偏り関数です.元の関数の最初のパラメータを固定しました.

'use strict';

var pow2N = _.partial(Math.pow, 2);
pow2N(3); // 8
pow2N(5); // 32
pow2N(10); // 1024

最初のパラメータを固定したくないなら、第二のパラメータを固定したいですが、どうすればいいですか?例えば、偏り関数cube(x)を作成したいです.x 3を計算して、_を使ってもいいです.プレースホルダとして、2番目のパラメータを固定します.

'use strict';

var cube = _.partial(Math.pow, _, 3);
cube(3); // 27
cube(5); // 125
cube(10); // 1000

偏関数を作成する目的は、元の関数のいくつかのパラメータを固定することで、新しい関数の呼び出しの難易度を下げることができます.memoize
関数の呼び出しが大きい場合、結果をキャッシュして、後続の呼び出し時に直接結果を得ることができるようにすることができます.例を挙げると、階乗を計算するのに時間がかかります.

'use strict';

function factorial(n) {
    console.log('start calculate ' + n + '!...');
    var s = 1, i = n;
    while (i > 1) {
        s = s * i;
        i --;
    }
    console.log(n + '! = ' + s);
    return s;
}

factorial(10); // 3628800
//        :
// start calculate 10!...
// 10! = 3628800
 memoize()              ：

'use strict';

var factorial = _.memoize(function(n) {
    console.log('start calculate ' + n + '!...');
    var s = 1, i = n;
    while (i > 1) {
        s = s * i;
        i --;
    }
    console.log(n + '! = ' + s);
    return s;
});

//      :
factorial(10); // 3628800
//        :
// start calculate 10!...
// 10! = 3628800

//      :
factorial(10); // 3628800
//

同じ呼び出しに対しては、例えばfactoral(10)を2回連続で呼び出し、2回目の呼び出しは計算されず、前回の計算後のキャッシュの結果をそのまま返します.でも、あなたがfactorial(9)を計算すると、また計算し直します.
factoral()を改善して再帰的に呼び出させることができます.

'use strict';

var factorial = _.memoize(function(n) {
    console.log('start calculate ' + n + '!...');
    if (n < 2) {
        return 1;
    }
    return n * factorial(n - 1);
});

factorial(10); // 3628800
//       factorial(1)~factorial(10)      :
// start calculate 10!...
// start calculate 9!...
// start calculate 8!...
// start calculate 7!...
// start calculate 6!...
// start calculate 5!...
// start calculate 4!...
// start calculate 3!...
// start calculate 2!...
// start calculate 1!...

factorial(9); // 362880
// console

オンス
名前を考えて、onece()はある関数が実行され、一回だけ実行されることを保証します.もしあなたが一つの方法を持っているなら、ユーザーはページで二つのボタンのいずれかを注文して実行できます.ワンス()保証関数で一回だけ呼び出してもいいです.何回クリックしてもいいです.

'use strict';

var register = _.once(function () {
    alert('Register ok!');
});

//     :
register();
register();
register();

delay
delay()は関数を遅延させて実行することができ、効果はsetTimeout()と同じですが、コードは明らかに簡単です.

'use strict';

// 2    alert():
_.delay(alert, 2000);
             ，       ：

'use strict';

var log = _.bind(console.log, console);
_.delay(log, 2000, 'Hello,', 'world!');
// 2    'Hello, world!':

もっと完全な関数はundersscoreの文書を参照してください.http://underscorejs.org/#functions
Objecs keys/allKeys
keys()は非常に便利に自分自身のkeyに戻りますが、プロトタイプチェーンから引き継がれたものは含まれません.

function Student(name, age) {
    this.name = name;
    this.age = age;
}
Student.prototype.school = 'No.1 Middle School';
var xiaoming = new Student('  ', 20);
_.allKeys(xiaoming); // ['name', 'age', 'school']
values

 keys()  ，values()  object               ：

'use strict';

var obj = {
    name: '  ',
    age: 20
};

_.values(obj); // ['  ', 20]
  ，  allValues()，       。

mapObject
mapObject()はobjectに対するmapバージョンです.

'use strict';

var obj = { a: 1, b: 2, c: 3 };
//          ，value  ，key  :
_.mapObject(obj, (v, k) => 100 + v); // { a: 101, b: 102, c: 103 }

invert
invert()はobjectのkey-valueごとに交換して、keyはvalueになり、valueはkeyになります.

'use strict';

var obj = {
    Adam: 90,
    Lisa: 85,
    Bart: 59
};
_.invert(obj); // { '59': 'Bart', '85': 'Lisa', '90': 'Adam' }
extend / extendOwn

extend()   object key-value      object   ：

'use strict';

var a = {name: 'Bob', age: 20};
_.extend(a, {age: 15}, {age: 88, city: 'Beijing'}); // {name: 'Bob', age: 88, city: 'Beijing'}
//   a       ：
a; // {name: 'Bob', age: 88, city: 'Beijing'}
  ：      key，   object value      object value。

extendOwn() extend()  ，                   。

clone
オブジェクトをコピーする場合は、clone(clone)を使って、既存のオブジェクトの属性をすべて新しいオブジェクトにコピーします.

var source = {
    name: '  ',
    age: 20,
    skills: ['JavaScript', 'CSS', 'HTML']
};
var copied = _.clone(source);

なお、clone()は「レプリカ」です.「レプリカ」とは、2つのオブジェクトが同じkeyで参照されているvalueは同じオブジェクトです.isEqualです.
isEqualは二つのobjectを深さ比較し、内容が完全に同じなら、trueに戻ります.

var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};
var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};

o1 === o2; // false
_.isEqual(o1, o2); // true

isEqual()   Array     ：

'use strict';

var o1 = ['Bob', { skills: ['Java', 'JavaScript'] }];
var o2 = ['Bob', { skills: ['Java', 'JavaScript'] }];

o1 === o2; // false
_.isEqual(o1, o2); // true

もっと完全な関数はundersscoreの文書を参照してください.http://underscorejs.org/#objects
chainingはjQueryがチェーンコールをサポートしていることを覚えていますか?

$('a').attr('target', '_blank')
      .append(' ')
      .click(function () {});
         ， underscore     ，      ：

_.filter(_.map([1, 4, 9, 16, 25], Math.sqrt), x => x % 2 === 1);
// [1, 3, 5]

チェーンに書いて呼び出してもいいですか?
できる
undersscoreは対象包装の成能をチェーンで呼び出す方法を提供しています.chain関数です.

_.chain([1, 4, 9, 16, 25])
 .map(Math.sqrt)
 .filter(x => x % 2 === 1)
 .value();
// [1, 3, 5]

一歩ずつ戻ってくるのは包装対象ですので、最終ステップの結果はvalue()を呼び出して最終結果を得る必要があります.

Javascript浮動小数点数は正確に計算されます.