【js小技巧(4)】前端小菜也想来日更

65 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

仅用一行生成[0, 1, ..., N-1]数列

使用下面一行代码,我们就可以生成0…(N-1)数列:

    Array.apply(null, {length: N}).map(Function.call, Number);
    // 例如: Array.apply(null, {length: 2}).map(Function.call, Number); // 可生成[0, 1]

另外一种方法,我们可以利用Array.from来实现:

    Array.from(new Array(N),(val,index)=>index);

如果你需要生成的是[1, 2, …, N],可以这样:

    // 方法一(N为你所需要的数组长度)
    Array.apply(null, {length: N}).map(function(value, index){
      return index + 1;
    });
    // 方法二(N为你所需要的数组长度)
    Array.from(new Array(N),(val,index)=>index+1);

将truthy/falsy转换为布尔值

可以使用 !! 操作符将 truthyfalsy 值转换为布尔值:

    !!""; // false
    !!0; // false
    !!null; // false
    !!undefined; // false
    !!NaN; // false

    !!"hello"; // true
    !!1; // true
    !!{}; // true
    !![]; // true

过滤并排序字符串列表

在我们的例子里准备用不同版本语言的JavaScript 保留字的列表,但是你会发现,有很多重复的关键字而且它们并没有按字母表顺序排列:

    var keywords = ['do', 'if', 'in', 'for', 'new', 'try', 'var', 'case', 'else', 'enum', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'delete', 'export', 'import', 'return', 'switch', 'typeof', 'default', 'extends', 'finally', 'continue', 'debugger', 'function', 'do', 'if', 'in', 'for', 'int', 'new', 'try', 'var', 'byte', 'case', 'char', 'else', 'enum', 'goto', 'long', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'final', 'float', 'short', 'super', 'throw', 'while', 'delete', 'double', 'export', 'import', 'native', 'public', 'return', 'static', 'switch', 'throws', 'typeof', 'boolean', 'default', 'extends', 'finally', 'package', 'private', 'abstract', 'continue', 'debugger', 'function', 'volatile', 'interface', 'protected', 'transient', 'implements', 'instanceof', 'synchronized', 'do', 'if', 'in', 'for', 'let', 'new', 'try', 'var', 'case', 'else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch', 'typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue', 'debugger', 'function', 'arguments', 'interface', 'protected', 'implements', 'instanceof', 'do', 'if', 'in', 'for', 'let', 'new', 'try', 'var', 'case', 'else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with', 'await', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while', 'yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch', 'typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue', 'debugger', 'function', 'arguments', 'interface', 'protected', 'implements', 'instanceof'];

我们可以通过 filtersort 对他们进行过滤、排序:

    var filteredAndSortedKeywords1 = keywords
      .filter(function (keyword, index) {
          return keywords.lastIndexOf(keyword) === index;
        })
      .sort(function (a, b) {
          return a < b ? -1 : 1;
        });
    // ES6的语法可以这样写
    const filteredAndSortedKeywords2 = keywords
      .filter((keyword, index) => keywords.lastIndexOf(keyword) === index)
      .sort((a, b) => a < b ? -1 : 1);

最后得到:

    filteredAndSortedKeywords1 = ['abstract', 'arguments', 'await', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum', 'eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield']

使用立即执行函数表达式

立即执行函数表达式( IIFE - immediately invoked function expression)是一个立即执行的匿名函数表达式,它在Javascript中有一些很重要的用途:

    (function() {
     // Do something
     }
    )();

这是一个立即执行的匿名函数表达式,它在有JavaScript一些特别重要的用途。

两对括号包裹着一个匿名函数,使匿名函数变成了一个函数表达式。于是,我们现在拥有了一个未命名的函数表达式,而不是一个全局作用域下或在任何地方定义的的简单函数。

类似地,我们也可以创建一个命名过的立即执行函数表达式:

    (someNamedFunction = function(msg) {
	console.log(msg || "Nothing for today !!")
    }) (); // 输出 --> Nothing for today !!
    
    someNamedFunction("Javascript rocks !!"); // 输出 --> Javascript rocks !!
    someNamedFunction(); // 输出 --> Nothing for today !!