evantianx
commented
7 years ago ['1', '2', '3'].map(parseInt)返回值为?
答案💯 : [1, NaN, NaN]
回顾📖 ：
-
map()方法在调用 callback 时，会传递给它三个参数: 当前正在遍历的元素，元素索引及原数组本身。 其中前两个参数一定会传给回调函数，而第三个可以忽略。 -
parseInt()方法可以有两个参数，第二个为进制数。在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理： a. 如果字符串 string 以"0x"或者"0X"开头, 则基数是 16 (16 进制). b. 如果字符串 string 以"0"开头, 基数是 8（八进制）或者 10（十进制），那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用 10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix 参数的值。 c. 如果字符串 string 以其它任何值开头，则基数是 10 (十进制)。
解析✍️ :
'1' 和 0 分别作为字符串和进制数传给parseInt()，此时按照十进制转换 '1'，得到数字 1;
'2' 和 1 分别作为字符串和进制数传给parseInt()，此时进制数非法，得到 NaN;
'3' 和 2 分别作为字符串和进制数传给parseInt()，此时按照二进制转换 '3'，无法转换故得到 NaN;
Bonus👏🏻 :
function returnInt (ele) {
return parseInt(ele, radix)
}
['1', '2', '3'].map(returnInt) // 返回[1, 2, 3]关于 ES6 模块
ECMAScript 6 入门 #module ECMAScript modules in browsers 待补充
小技巧
- toggle 两个值
// 一般写法 if (x === a) { x = b } else if (x === b) { x = a }// 简洁写法 x = a ^ b ^ x - 检测两个数值是否正负一致
if ((x ^ y) >= 0) { // ... } - 替代
Math.floor()的方法Math.floor(4.9) // 4 4.9 | 0 // 4 -
对小数取整
浮点数是不支持位运算的，所以会先直接去除小数部分，转成整数再进行位运算，就好像是对浮点数向下求整
~~可以进行类型转换,位运算会默认将非数字类型转换成数字类型再进行运算~~(5.2) == 5;看尤大写的 HN 源码习来
rel=noopener的作用当我们设置一个链接
target='_blank'的时候，在新打开的页面上window.opener是指向前一个页面的，也就是说我们可以获取前一个页面的信息，这是非常危险的！ 如何解决？ 添加rel=noopener或者rel=noreferrer
JS 判断是否为 IE 浏览器的方法
/**
* 利用 IE 的注释 hack 判断 IE 浏览器版本号，也可以不传参仅判断是否为 IE
*
* @param {number} version 要检测的 IE 版本号
*/
var isIE = function(ver){
var b = document.createElement('b')
b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
return b.getElementsByTagName('i').length === 1
}Don't use switch
遗漏 break 关键字的时候容易造成不易发现的 bug。
建议写成:
var tokenActions = {
'{': handleOpen,
'[': handleOpen,
']': handleClose,
'}': handleClose
};
function processToken(token) {
if (typeof tokenActions[token] !== 'function') {
throw new Error('Invalid token.');
}
return tokenActions[token](token);
}Why is getElementsByTagName() faster than querySelectorAll()?
总结下：
getElementsByTagName()获取到的是 live NodeList；而querySelectorAll()获取到的是 static NodeList Static NodeList 比较慢的原因在于它要求获取当前 DOM 的一个快照，找到所有符合要求的元素; 而 live NodeList 则无需这样.为什么 getElementsByTagName 比 querySelectorAll 方法快 简单讨论 querySelectorAll Vs getElementsByTagName 区别
NPM SCRIPTS: TIPS EVERYONE SHOULD KNOW
关于 npm script 的很多技巧
TEMPORAL DEAD ZONE (TDZ) DEMYSTIFIED
let / const 变量在声明之前不能访问并不是因为两者不存在声明提前，只是 TDZ！
The variables are created when their containing Lexical Environment is instantiated [...] but may not be accessed in any way until the variable’s LexicalBinding is evaluated.
Why Mapping a Constructed Array in JavaScript Doesn’t Work
const arr = Array(100).map((_, i) => i);
console.log(arr[0] === undefined); // truesolution:
const arr = [...Array(100)].map((_, i) => i);
console.log(arr[0] === 0); // truesparse array
几个要点：
-
trailing comma 不会为数组添加一个 hole
-
数组中逗号之间为空时会形成 hole:
[ 1, ,2 ] // hole at index(1) -
检测 hole 的唯一方法是
array.hasOwnProperty(index)[ 1, ,2 ].hasOwnProperty(1) // false -
数组中的遍历方法如
map,forEach,every等都不会在 hole 位置调用回调函数const a = new Array(1000); let ctr = 0; a.forEach(() => ctr++); console.log(ctr); // 0 - the callback was never called [ 1, ,2 ].map(x => x*x) // [ 1, <empty>, 4] [ 1, , 2].filter(x => true) // [1, 2]keys 和 values 遍历是可以在 hole 位置触发回调的：
const a = [ 'a', , 'b' ] for (let [index, value] of a.entries()) { console.log(index, value) } /* logs: * 0 'a' * 1 undefined * 2 'b' */由于 ES6 中的数组展开底层实现其实也是遍历，所以展开 sparse array 时会将 hole 变为 undefined
[...[ 'a', , 'b' ]] // [ 'a', undefined, 'b' ] -
对于大型 sparse array 的构建来说，
new Array()要快于Array.from()
原型
reduce
重写 reduce
const reduce = (fn, acc, arr) => {
if (arr.length === 0) return acc
const [ head, ...tail ] = arr
return reduce(fn, fn(acc, head), tail)
}分配数组
将用户中的男性和女性分别放到不同的数组里:
const users = [
{ name: "Adam", age: 30, sex: "male" },
{ name: "Helen", age: 27, sex: "female" },
{ name: "Amy", age: 25, sex: "female" },
{ name: "Anthony", age: 23, sex: "male" },
];const partition = (arr, isValid) =>
arr.reduce(([male, female], cur) =>
isValid(cur) ? [ [ ...male, cur ], female ] : [ male, [...female, cur] ]
, [])
const isMale = item => item.sex === 'male'
const [ male, female ] = partition(users, isMale) cssText
如何禁止弹出层背景滚动
如何避免条件语句 hell
5 Tips to Write Better Conditionals in JavaScript
Replacing switch statements with Object literals
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
const functionC = ()=>{/*send log*/}
return new Map([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB],
[/^guest_.*$/,functionC],
//...
])
}
const onButtonClick = (identity,status) => {
let action = [ ...actions() ].filter(([key,value]) => (key.test(`${identity}_${status}`)))
action.forEach(([key,value]) => value.call(this))
}利用 map 正则匹配，实现更好地解耦
可以预测的 JS 对象属性值顺序
Why Facebook's api starts with a for loop
了解所谓的 JSON hijacking
npm
列出项目直接依赖真正版本号（if use semver）
npm list --depth=0 查看某个包的信息（维护者，依赖项等）
npm view vue Tricks of Resting and Spreading JavaScript Objects
-
动态删除某个对象的属性
const removeProp = prop => ({ prop, ...rest }) => rest // eg const removeName = removeProp('name') removeName({ id: 1, name: 'John', age: 25 }) // { id: 1, age: 25 }
IDE & 构建工具
PhpStorm
光标停留在
<img>的src属性上，按住shift即可显示图片⌘+↑ 打开
nav bar方便查找跳转项目内文件按住Alt，拖拽鼠标即可竖向选择
双击⌘然后按住，可以弹出侧边和底部的工具栏
⌘+R同时打开搜索栏和替换栏，同理也可用在路径搜索(Shift+⌘+R)✔️
Alt+⌘+T 为选中的代码选择包裹块(if之类的)
若当前未选中任何代码，按下Ctrl+C会复制光标所在行的代码
重构当前代码(变量名)，可以按下Ctrl+T
⌘+O 查找类 Shift+⌘+O 查找文件 Alt+⌘+delete 查找变量，方法 Shift+⌘+A 查找动作(记不清快捷键的时候可以用）
Shift+⌘+O 搜索文件，在文件名后添加
:+行号可以直接跳转到选定文件行Alt+F12 打开终端
Webstorm在代码右上侧提供了浏览器预览按钮
直接点击和按住Shift预览的区别:
F1 查询相关文档
F12 聚焦于工具栏 Esc 聚焦于编辑区 Shift+Esc聚焦于编辑区且关闭当前工具栏
Shift+⌘+delete 返回到上次修改的位置(内容不作变动) Shift+Alt+C 列出最近所做的修改
Shift+⌘+V 选择历史复制记录进行粘贴
Ctrl+Alt+R 弹出
run/debug菜单右键点击HTML标签，在弹出菜单中选择「show applied styles for tag」,即可查看标签所有样式
VS Code
快速打开文件 Cmd+P 输入文件名并选中即可前往所要查看的文件
设定当前显示语言项
⌘ + K + M
命令行中用 VS Code 打开
lorem
lorem + number 输出几个无意义字符
状态栏 Shift+Cmd+M 打开错误提示状态栏 Cmd+K+M 打开文件语言类型选择栏
文字编辑 Shift+Alt+Up / Down 复制当前行到上或下行 Alt+Up／Down 向上或向下移动当前行 Cmd+Up ／Down 快速到达代码第一行或最后一行
快速跳转到与当前括号相匹配的另一个括号处 Ctrl + Cmd + \
关闭左侧编辑器导航
explore.editor.visible：0
BrowserSync
指定入口文件: