web先端学習ノート(1)

9月5日

array.push(...newArray)    //        

//   a b  
// ES6  
var a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);    // 2 1

// Babel   ES5 
var a = 1,
    b = 2;
var _ref = [b, a];
a = _ref[0];
b = _ref[1];
console.log(a, b);    // 2 1

//                  
var domRect = element.getBoundingClientRect();

//     index1、index2     ，           
_.pullAt(array, [index1, index2]);

9月6日
Promiseオブジェクト

Promiseには3つの状態があります.そして状态が変わると、もう二度と変えられなくなります.

Promiseは新築後すぐに実行します.

たとえば:

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

上記のコードでは、timeout方法は、時間が経過してから発生する結果を示すPromise例を返している.指定された時間(msパラメータ)が過ぎると、Promise例の状態はresolvedとなり、then方法によって結合されたコールバック関数がトリガされる.

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});

// 2
// 1

上記のコードでは、resolve(1)を呼び出しても、後のconsole.log(2)が実行され、最初に印刷されます.これは直ちにresolovedのPromiseが今週のイベントサイクルの最後に実行されるためで、いつもこのサイクルの同期タスクより遅くなります.

var promise = new Promise(function (resolve, reject) {
  resolve('ok');
  setTimeout(function () { throw new Error('test') }, 0)
});
promise.then(function (value) { console.log(value) });
// ok
// Uncaught Error: test

Promise.resolve()は、次の「イベントサイクル」の開始ではなく、本船の「イベントサイクル」 で実行される.

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上記のコードでは、setTimeout(fn, 0)は次の「イベントサイクル」の開始時に実行され、Promise.resolve()は本ラウンドの「イベントサイクル」の終了時に実行され、console.log('one')は直ちに実行されるので、最初に出力される.
文字列

includes():ブール値を返します.パラメータ文字列が見つかったかどうかを表します.

starts With():ブール値を返し、パラメータ文字列が元の文字列の先頭にあるかどうかを示します.

endsWith():ブール値を返し、パラメータ文字列が元の文字列の末尾にあるかどうかを示します.

repeat():新しい文字列を返し、元の文字列をn回繰り返すことを表します.パラメータが小数であれば、整理されます.

padStart()、padEnd():文字列補完長の機能です.文字列の長さが足りない場合は、頭または尾に補完されます.padStart()はヘッド補完用で、padEnd()はテール補完用である.

includes()、startsWith()、endsWith()は、第2のパラメータが入ってきて、検索を開始する位置に入ることをサポートしています.padStart()、padEnd()JS配列は重黒魔法になります.
配列を使ってSetオブジェクトを新規作成し、それを行列に変換します.

var array = [1, 2, 3, 4, 1, 2, 3, 4];

console.log([...new Set(array)]);    // [1, 2, 3, 4]

console.log(Array.from(new Set(array)));    // [1, 2, 3, 4]

阮一峰ES 6入門