你不知道的Javascript

[huguangju]

Github上有一个Javascript电子书系列比较火, 叫做You-Dont-Know-JS, 这里会总结一些里面比较有意思的东西，它处看到的也会放在这里。

用bind给console.log()设置别名

var log = console.log.bind(console);

这样调用 log('log sth.')

[ ].map(fn)利用内置函数转变数组值类型

["1", " 3", " 5"].map(Number)

比这样写简单多了 ["1", "3", "5"].map(function(i){return +i;})

巧用位运算

由于 ~-1 === 0, 而 !0 === true, 则可以在使用 indexOf 方法的情况下用 ~, 例如:

if(!~[1,2,3].indexOf(5)){  ... }

合并/扁平化 嵌套数组

var arrs = [[1,2], [3,4]];
var merged = [].concat.apply([], arrs);

merged: [1, 2, 3, 4] 参考

随机数应用

参考: [JS]Math.random()随机数的二三事

• 从数组中随机获取成员

  var items = [1, 2, 'a', 'z'];  
  items[Math.floor(Math.random() * items.length)];

• 获取指定范围内的随机数

  // 来自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
  // 返回一个介于min和max之间的随机数
  function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }
  
  // 返回一个介于min和max之间的整型随机数
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

• 生成随机的字母数字字符串

  // http://stackoverflow.com/a/12502559/4723163
  Math.random().toString(36).slice(2);
  
  // 指定生成长度
  function genRandomString(len) {
    var rmdStr = '';
    while(rmdStr.length < len) {
      rmdStr += Math.random().toString(36).slice(2);
    }
    return rmdStr.slice(0, len);
  }

Tricks

参考: 你见过哪些令你瞠目结舌的 JavaScript 代码技巧？

• 快速打印一个五分制的评分情况

/* by 郑航 from https://www.zhihu.com/question/37904806/answer/74109099 */
function getRating(rating) {
    if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
    return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
}

• 重复打印字符串n次

/* by 施浩宏 from https://www.zhihu.com/question/37904806/answer/74199322 */
function repeat(n, str){
  return new Array(n + 1).join(str)
}

• 字符串多行显示

// http://stackoverflow.com/a/805755/4723163
var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

• 时间个位补零（slice(-2)）

'8:6:7'.split(':').map(x => ('0' + x).slice(-2)).join(':');
// "08:06:07"

TODO...

扩展阅读：

从一行CSS调试代码中学到的JavaScript知识

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})