原题来自: javascript-puzzlers

读者可以先去做一下感受感受. 当初笔者的成绩是 21/44…

当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了….

不过, 对于基础知识的理解是深入编程的前提. 让我们一起来看看这些变态题到底变态不变态吧!

第1题

1

["1", "2", "3"].map(parseInt)

知识点:

• Array/map
• Number/parseInt

首先, map接受两个参数, 一个回调函数 callback, 一个回调函数的this值

其中回调函数接受三个参数 currentValue, index, arrary;

而题目中, map只传入了回调函数–parseInt.

其次, parseInt 只接受两个两个参数 string, radix(基数). radix的合法区间是2-36. 默认是10.

所以本题即问

1
2
3

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);

首先后两者参数不合法. 第一个笔者猜测0和不传一样被认为是10.

所以答案是 [1, NaN, NaN]

第2题

1

[typeof null, null instanceof Object]

两个知识点:

• Operators/typeof
• Operators/instanceof
• Operators/instanceof(中)

typeof 返回一个表示类型的字符串.

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上.

这个题可以直接看链接… 因为 typeof null === 'object' 自语言之初就是这样….

typeof 的结果请看下表:

1
2
3
4
5
6
7
8
9
10

type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"

所以答案 [object, false]

第3题

1

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

知识点:

• Array/Reduce

arr.reduce(callback[, initialValue])

reduce接受两个参数, 一个回调, 一个初始值.

回调函数接受四个参数 previousValue, currentValue, currentIndex, array

需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.

所以第二个表达式会报异常. 第一个表达式等价于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

答案 an error

第4题

1
2

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

两个知识点:

• Operators/Operator_Precedence
• Operators/Conditional_Operator

简而言之 + 的优先级 大于 ?

所以原题等价于 'Value is true' ? 'Somthing' : 'Nonthing' 而不是 'Value is' + (true ? 'Something' : 'Nonthing')

答案 'Value is Something'

第5题

1
2
3
4
5
6
7
8
9

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

这个相对简单, 一个知识点:

• Hoisting

在 JavaScript中， functions 和 variables 会被提升。变量提升是JavaScript将声明移至作用域 scope (全局域或者当前函数作用域) 顶部的行为。

这个题目相当于

1
2
3
4
5
6
7
8
9
10

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

所以答案是 'Goodbye Jack'

第6题

1
2
3
4
5
6
7

var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
    count++;
}
console.log(count);

一个知识点:

• Infinity

在 JS 里, Math.pow(2, 53) == 9007199254740992 是可以表示的最大值. 最大值加一还是最大值. 所以循环不会停.

第7题

1
2
3

var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});

答案是 []

看一篇文章理解稀疏数组

• 译 JavaScript中的稀疏数组与密集数组
• Array/filter

我们来看一下 Array.prototype.filter 的 polyfill:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';
    if (this === void 0 || this === null) {
      throw new TypeError();
    }
    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }
    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) { // 注意这里!!!
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }
    return res;
  };
}

我们看到在迭代这个数组的时候, 首先检查了这个索引值是不是数组的一个属性, 那么我们测试一下.

1
2
3

0 in ary; => true
3 in ary; => false
10 in ary; => true

也就是说 从 3 - 9 都是没有初始化的’坑’!, 这些索引并不存在与数组中. 在 array 的函数调用的时候是会跳过这些’坑’的.

第8题

1
2
3
4
5

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

• JavaScript的设计缺陷?浮点运算：0.1 + 0.2 != 0.3

IEEE 754标准中的浮点数并不能精确地表达小数

那什么时候精准, 什么时候不经准呢? 笔者也不知道…

答案 [true, false]

第9题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

两个知识点:

• Statements/switch
• String

switch 是严格比较, String 实例和 字符串不一样.

1
2
3
4
5
6

var s_prim = 'foo';
var s_obj = new String(s_prim);
console.log(typeof s_prim); // "string"
console.log(typeof s_obj);  // "object"
console.log(s_prim === s_obj); // false

答案是 'Do not know!'

第10题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function showCase2(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase2(String('A'));

解释:
String(x) does not create an object but does return a string, i.e. typeof String(1) === "string"

还是刚才的知识点, 只不过 String 不仅是个构造函数 直接调用返回一个字符串哦.

答案 'Case A'

第11题

1
2
3
4
5
6
7
8
9
10
11

function isOdd(num) {
    return num % 2 == 1;
}
function isEven(num) {
    return num % 2 == 0;
}
function isSane(num) {
    return isEven(num) || isOdd(num);
}
var values = [7, 4, '13', -9, Infinity];
values.map(isSane);

一个知识点

• Arithmetic_Operators#Remainder

此题等价于

1
2
3
4
5

7 % 2 => 1
4 % 2 => 0
'13' % 2 => 1
-9 % % 2 => -1
Infinity % 2 => NaN

需要注意的是 余数的正负号随第一个操作数.

答案 [true, true, true, false, false]

第12题

1
2
3

parseInt(3, 8)
parseInt(3, 2)
parseInt(3, 0)

第一个题讲过了, 答案 3, NaN, 3

第13题

1

Array.isArray( Array.prototype )

一个知识点:

• Array/prototype

一个鲜为人知的实事: Array.prototype => [];

答案: true

第14题

1
2
3
4
5
6

var a = [0];
if ([0]) {
  console.log(a == true);
} else {
  console.log("wut");
}

• JavaScript-Equality-Table

一图胜千言

答案: false

第15题

1

[]==[]

== 是万恶之源, 看上图

答案是 false

第16题

1
2

'5' + 3
'5' - 3

两个知识点:

• Arithmetic_Operators#Addition
• Arithmetic_Operators#Subtraction

+ 用来表示两个数的和或者字符串拼接, -表示两数之差.

请看例子, 体会区别:

1
2
3
4
5
6
7
8
9
10

> '5' + 3
'53'
> 5 + '3'
'53'
> 5 - '3'
2
> '5' - 3
2
> '5' - '3'
2

也就是说 - 会尽可能的将两个操作数变成数字, 而 + 如果两边不都是数字, 那么就是字符串拼接.

答案是 '53', 2

第17题

1

1 + - + + + - + 1

这里应该是(倒着看)

1
2
3
4
5
6
7
8

1 + (a)	 => 2
a = - (b) => 1
b = + (c) => -1
c = + (d) => -1
d = + (e) => -1
e = + (f) => -1
f = - (g) => -1
g = + 1   => 1

所以答案 2

第18题

1
2
3

var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });

稀疏数组. 同第7题.

题目中的数组其实是一个长度为3, 但是没有内容的数组, array 上的操作会跳过这些未初始化的’坑’.

所以答案是 ["1", undefined × 2]

第19题

1
2
3
4
5
6
7
8
9

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

这是一个大坑, 尤其是涉及到 ES6语法的时候

知识点:

• Functions/arguments

首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.

也就是说 arguments 是一个 object, c 就是 arguments[2], 所以对于 c 的修改就是对 arguments[2] 的修改.

所以答案是 21.

然而!!!!!!

当函数参数涉及到 any rest parameters, any default parameters or any destructured parameters 的时候, 这个 arguments 就不在是一个 mapped arguments object 了…..

请看:

1
2
3
4
5
6
7
8
9

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c=3) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

答案是 12 !!!!

请读者细细体会!!

第20题

1
2
3
4

var a = 111111111111111110000,
    b = 1111;
a + b;

答案还是 111111111111111110000. 解释是 Lack of precision for numbers in JavaScript affects both small and big numbers. 但是笔者不是很明白……………. 请读者赐教!

第21题

1
2

var x = [].reverse;
x();

这个题有意思!

知识点:

• Array/reverse

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

也就是说 最后会返回这个调用者(this), 可是 x 执行的时候是上下文是全局. 那么最后返回的是 window.

答案是 window

第22题

1

Number.MIN_VALUE > 0

true

今天先到这里, 下次我们来看后22个题!

Gulp是前端自动化的一个非常有用的工具, 如何使用Gulp甚至可以单开一个系列(一定会的!).

在使用Gulp的过程中, 有一个非常讨厌的问题, 就是监听文件删除事件.

设想这样一个场景, 我们在src/写ES6, 通过gulp-babel转化为ES5文件, 输出到build/下, 同时, 使用gulp-inject将build/下的js文件通过script标签的方式添加到index.html中;

增改文件都是极好的, 但是如果删除了src/下的某个文件, build/ 下的文件并不会自动删除, 所以index.html还是会引用.

怎么解决呢? Show Me the CODE!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

gulp.task('watch', ['clean', 'build'], function () {
    gulp.watch('src/index.html', ['inject']);
    var watcher = gulp.watch(['src/**/*', '!src/index.html'], ['babel', 'inject']);
    watcher.on('change', function (event) {
        if (event.type === 'deleted') {
            var src = path.relative(path.resolve('src'), event.path);
            src = src.replace(/.es6$/, '.js');
            var dest = path.resolve(buildDir, src);
            del.sync(dest);
        }
    });
});

最关键的还是这个 var watcher = gulp.watch() 啦, watcher这个句柄就可以监听文件变动的事件了, 其中, event 就有type的属性, 用于表示是新增文件, 还是修改文件, 亦或是删除文件, 然后path属性表示当前变动的文件地址, 知道了这些信息, 就可以干任何事情啦!

• Gulps gulp.watch not triggered for new or deleted files?

• Handling the Delete Event on Watch

• Webpack Fundamentals(视频系列教程)
• 如何使用 Webpack - webpack-howto (翻译)(Instagram)
• 配套视频, Instagram团队Peter-Hunt的分享
• 视频: Advanced Webpack (Lonely Planet的前端) 很多实用的技巧
• Webpack 入门指迷
• Webpack 性能优化 （一）(使用别名做重定向)
• 基于webpack搭建前端工程解决方案探索 (评论更精彩)
• webpack-seed (一个基于webpack搭建的工程例子 很有借鉴意义 可以做到同时支持SPA和多页面型的项目)
• 基于webpack搭建前端工程解决方案探索
• 【前端构建】WebPack实例与前端性能优化
• gulp + webpack 构建多页面前端项目

请关注 xiaoyu2er/awesome-webpack

自由的接触信息应该是每个人不可剥夺的基本人权.

持续更新! 敬请关注! google-mirror-check npm包已发布

如果您是以下镜像的作者, 且不希望出现在以下列表中，可以联系我移除链接。

• http://gc.ihuan.me/ (1440ms)
• http://soguge.com/ (1476ms)
• http://s.8090st.com/ (1816ms)
• https://g.jikewenku.cn/ (2338ms)
• http://www.bjgong.tk/ (2964ms)
• https://g.alexyang.me/ (3293ms)
• https://g.libnull.com/ (3681ms)
• https://g.zrj766.com/ (3861ms)
• https://ggss.cf/ (4127ms)
• https://ggso.in/ (4500ms)
• https://www.onenew.net/ (4861ms)
• http://hao.cytbj.com/ (5395ms)
• http://www.zzq2.com/ (5428ms)
• http://ggss.cf/ (5947ms)

在 mac 中打开一个文件会有一个默认的应用. 但是这个应用往往不是我们希望的那个. 比如我想打开一个 .c, Mac 会启动 XCode来打开这个文件, 这往往不是我希望的.
再比如我想打开一个 .md 文件, 这货居然没有默认打开方式, 这个时候我们可能会右击然后找到那个打开方式, 设置成为 sublime 或者 mou.

但是碰到一个 .markdown的文件, 系统又蒙圈了, 还是不知道用什么打开, 当然我们也可以按照刚才说的去修改.

那么有没有一个快捷的方式, 可以批量的修改系统中所有文件的默认打开方式呢? 有! 就是我们今天要介绍的 duti

Concepts

duti是 Mac 下的一个命令行工具, 主要作用为不同文件类型设置默认的应用. duti 的意思其实就是 default for UTI

在介绍如何使用之前我们需要明确几个概念:

UTI

Mac 下的文件类型被定义为 Uniform Type Identifiers (UTI). 例如, HTML 文件的 UTI 是 public.html; Word 文档的 UTI 是 com.microsoft.word.doc.
那么改变文件类型的默认打开方式的第一步就是确认文件类型啦.

第一个方式是去看苹果列出来的 UTI Uniform Type Identifiers Reference

第二个方式是使用 mdls 命令, 这哥们的作用就是: lists the metadata attributes for the specified file
那么如何使用呢, 很简单只要把你想要获得 UTI 的文件作为参数就好了

1
2
3
4
5
6
7
8
9
10

$ mdls test.txt
kMDItemContentType             = "public.plain-text"
kMDItemContentTypeTree         = (
    "public.plain-text",
    "public.text",
    "public.data",
    "public.item",
    "public.content"
)

我们可以看到其中就有这样的输出(截取). 可以看到一个 .txt 文件的 UTI 就是 public.plain-text, 那么下面这一坨是干什么的呢?
因为文件类型也有一个具体和宽泛的划分嘛, 越往下约 general.
再来看一个

1
2
3
4
5
6
7
8
9
10

$ mdls test.css
kMDItemContentType             = "public.css"
kMDItemContentTypeTree         = (
    "public.css",
    "public.text",
    "public.data",
    "public.item",
    "public.content"
)

public.css 就是 .css 的 UTI.

Bundle ID

Bundle ID (应用标识符)) 是 iOS 或者 Mac 应用的唯一标识. 也就是我们希望用什么软件打开我们的文件的那个软件的 ID 啦.

可以用以下命令获得 Bundle ID:

1
2
3
4
5
6
7
8

$ osascript -e 'id of app "Finder"'
com.apple.finder
$ osascript -e 'id of app "Atom"'
com.github.atom
$ osascript -e 'id of app "Sublime Text 2"'
com.sublimetext.2

Bundle Id & UTI

那么知道了文件的类型UTI, 知道了软件的 Bundle ID, 距离设定文件的默认程序其实就差一步了.
还有一个概念, 就是这个软件对于这个文件是个什么角色. 其实我们这里大部分情况只需要关心 editor 这个角色. 就是编辑角色. 其他的没啥用.

• all: application handles all roles for the given UTI.
• viewer: application handles reading and displaying documents with the given UTI.
• editor: application can manipulate and save the item. Implies viewer.
• shell: application can execute the item.
• none: application cannot open the item, but provides an icon for the given UTI.

Usage

好了, 介绍了这么多概念, 终于到了修改文件默认打开方式的时候了!

1

duti [ -hVv ] [ settings_path ]

如果上述语句没有给settings_path, duti 将会从标准输入读取配置. 如果setting_path是个文件夹的话, 那么 duti 将会从文件夹内的所有文件中读取配置.

那么这个 setting_path 文件的每一行其实需要三个字段:

• 应用的标识符 Bundle ID (比如: com.apple.Safari)
• 文件类型的 UTI (比如: public.html), 扩展名或者 MIME 类型
• 应用对于 UTI 的角色是什么 (比如, editor 编辑器)

options

• -s: 选项会让 duti 从命令行读参数.
• -x ext: 选项会让 duti 输出参数中扩展名对应的默认应用
• -d uti: 打印 UTI 的默认应用.
• -l uti: 打印 UTI 的所有可用应用.
• -V: 打印版本.
• -v: 详细输出.
• -h: 帮助.

examples

使用 -s 选项, 从命令行读取参数:

1
2

duti -s com.apple.Safari public.html all
duti -s com.apple.Finder ftp

但是我比较喜欢把这个设定放到一个文件里, 比如 duti-sublime,
我希望用 Sublime 打开 .md, .css, .js, 以及富文本文件, 纯文本文件, 以及一些 shell 脚本.
那么我的文件内容如下:

1
2
3
4
5
6
7

com.sublimetext.2    net.daringfireball.markdown  editor
com.sublimetext.2    public.css	editor
com.sublimetext.2    public.script	editor
com.sublimetext.2    public.source-code  editor
com.sublimetext.2    public.rtf  editor
com.sublimetext.2    public.plain-text   editor
com.sublimetext.2    public.unix-executable   editor

运行命令:

1

duti duti-sublime

然后我们在使用 -x 选项, 打印 UTI 的默认应用

1
2
3
4

$ duti -x css
Sublime Text 2.app
/opt/homebrew-cask/Caskroom/sublime-text/2.0.2/Sublime Text 2.app
com.sublimetext.2

双击test.css就是Sublime打开啦~

Reference

• https://developer.apple.com/library/mac/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html
• http://superuser.com/questions/209145/how-to-get-a-files-uti-from-the-command-line-in-mac-os-x