【保存版】js 現場で役立つスニペット集

【保存版】js 現場で役立つスニペット集:

どんなに多次元の配列でもディープコピー（値渡し）する

/** 
 * @return {[type]}         [description] 
 */ 
Array.prototype.clone = function() { 
  return JSON.parse(JSON.stringify(this)); 
}; 

.map の多次元版

/** 
 * INFO: 3次元以降に対応していない。したい。 
 * @param  {[type]} 
 * @return {[type]} 
 */ 
Array.prototype.mapAll = function(fn) { 
  return this.map((a, y)=> { 
    return a.map((v, x)=> { 
      return fn(v, { x:x, y:y }, this); 
    }); 
  }); 
}; 

右回転する

/** 
 * 右回転する 
 * INFO: 3次元以降に対応していない。したい。 
 * @return {[type]} [description] 
 */ 
Array.prototype.turn = function() { 
  return this.mapAll((_, p, a)=> this[this.length-1-p.x][p.y]); 
}; 

条件にあてはまる要素のkeyを配列にして返す

// 例 
var a = [ { number: 10 }, { number: 20 }, { number: 20 }, { number: 30 } ]; 
var b = a.reduce(function( prev, curr, index, array ) { 
    if ( curr.number === 20 ) { 
        prev.push( index ); 
    } 
    return prev; 
}, [] ); 
console.log(b); 

JSON.parse can parse 'false', '1' to false, 1 as well.

/** 
   * @return {any} - "getAttribute" is return null when not found the attribute. 
   */ 
  getValueByAttr(attributeName) { 
    var v = document.querySelector('[data-aja-meta-search]').getAttribute(attributeName); 
    // INFO: parse `'false'`, `'1'` to `false`, `1` as well. 
    return JSON.parse(v); 
  } 

２つの配列をマージする

• コンフリクト起きた要素はcallbackが発火される
• callbackを使ってどちらの値を使うかなど選択できる

/** 
 * 非破壊型 
 * sample: `[0,1].merge(1, [0,0]) => [0,0,0]` 
 * @param  {[type]}   X   - 位置をindexで指定 
 * @param  {[type]}   arr - マージしたい配列 
 * @param  {Function} fn  - call when conflict. 
 * @return {[type]}       [description] 
 * 
 * INFO: .map関数でやりたかったが値が特殊値`empty`の場合はmapのコールバックが呼ばれないorz 
 */ 
Array.prototype.merge = function(X, arr, fn = function(val1, val2) { return val2 }) { 
  var newArr = []; 
  var newArrLength = Math.max(X + arr.length, this.length); 
  for (var i = 0; i < newArrLength; i++) { 
    var val = this[i]; 
    if(i<X) { 
      newArr[i] = val; 
    } 
    else if(undefined !== this[i] && undefined !== arr[i-X]) { 
      newArr[i] = fn(val, arr[i-X], i); 
    } 
    else { 
      newArr[i] = undefined !== arr[i-X] ? arr[i-X] : this[i]; 
    } 
  } 
  return newArr; 
}; 

縦軸と横軸入れ替える

/** 
 * 縦軸と横軸入れ替える 
 * `左上と右下を結ぶ`軸で入れ替えるのであらゆる面で都合が良い 
 * @return {[type]} 
 */ 
Array.prototype.transpose = function() { 
  return this[0].map((_, i)=> this.map(a=> a[i])); 
} 

consoleに視認性良く表示させる

/** 
 * 2次元配列専用 
 * @return {[type]} 
 */ 
Array.prototype.stringify = function() { 
  var str = '\n'; 
  this.forEach((arr)=> { 
    str += JSON.stringify(arr) + "\n"; 
  }); 
  return str; 
}; 

条件(fn)にあった場所を{x, y}の配列で返す

/** 
 * INFO: 3次元以降に対応していない。したい。 
 * @param {function} 
 *        @arg {any} - {探索中の値} 
 *        @arg {object} - {x,y} 
 * @return {Array} 
 */ 
Array.prototype.getPositions = function(fn) { 
  return this.map((a, y)=> { 
    return a.map((v, x)=> { 
      return fn(this[y][x], { x:x, y:y }) ? { x:x, y:y } : undefined; 
    }).filter((v)=> v!==undefined); 
  }) 
  // INFO: 2次元配列を1次元配列に 
  .reduce((pre,current) => {pre.push(...current);return pre},[]); 
}; 
 
// 以下も同じ 
 
Array.prototype.getPositions = function(fn) { 
  return this.reduce((prev1,curr1,y,a)=> { 
    return a.reduce((prev2,curr2,x)=> { 
      if (fn(this[y][x], { x:x, y:y })) { 
        prev1.push({ x:x, y:y }); 
      } 
      return prev1; 
    }, []); 
  }, []); 
};