JavaScript / js #33
Comments
RegExp trickszero-width assertation
new RegExp(str) escape
escapeRegExp("All of these should be escaped: \ ^ $ * + ? . ( ) | { } [ ]");
>>> "All of these should be escaped: \\ \^ \$ \* \+ \? \. \( \) \| \{ \} \[ \] "实例千分位分隔符function sep(s){
return s.replace(/\B(?=(\d{3}+(?!\d)))/g,',');
} |
Object.defineProperty / Object.createnode里面的 util.inherits |
|
hover = mouseenter + mouseleave mouseover / mouseout |
|
mouseover v.s mouseenter
http://www.runoob.com/try/try.php?filename=tryjquery_event_mouseenter_mouseover https://jsfiddle.net/magicdawn/j9Lbs5yv/ mouseenter 不冒泡，但是只进入div3, 会先 mouseenter div1, mouseenter div2， 1 -> 2 -> 3 mouseleave 不冒泡，但是leave3，会先 leave3 -> leave 2 -> leave1 冒泡: 一个 Event 实例 |
|
global variablevar x = 'global';
delete x; // false
global.x = 'global';
delete x; // true |
Q & AQ
我会从博客园汤姆大叔的博客中的解释来回答. see
A
变量对象 VO & 活动对象一个执行上下文中会存在
在上下文对象的VO属性包含这些内容 context.VO = {
// 函数形参
// 函数定义
// 变量定义
}在进入上下文开始执行时, 这些相关的key会存在于 VO中,并初始化成默认值, 并在执行时依次填入的. see example alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20第一个alert是function, 因为VO key 的顺序是 1形参 2函数声明 3变量声明 作用域ES5中只有函数能创建一个新的作用域, 执行上下文, 即是代码块. 函数的context context = {
// 变量对象
VO: {
// 1. 形参
// 2. 函数声明
// 3. 变量定义
},
this: this值
"[[scope]]": [
parentContext.VO,
...
globalContext.VO
]
}可以看到在函数context中存在一个 最后函数的 fn.scope = [fnContext.VO].concat(fnContext.[[scope]]) , 就是函数的作用域数组以自己的VO打头, 上溯至父级context的VO, 直至globalContext.VO为止. 变量查找变量会沿着作用域链, 并且深入原型链, 解析变量名. VO变量对象并没有原型, 从下例子看出 Object.prototype.x = 10;
var x = 20;
var fn = ()=>{
alert(x); // 20
};函数fn的作用域链会是这样 闭包
就是说在JS中闭包是 函数以及此函数所携带的作用域数据的结合.
终于可以给for循环做个好好的解释了: var data = [];
for (var k = 0; k < 3; k++) {
data[k] = function () {
alert(k);
};
}为什么直接data[k] = function(){ alert(k) }这样做k总是3, 因为闭包 data[0] data[1] data[2]的
为什么加一层自执行函数可以. for (var k = 0; k < 3; k++) {
(function temp(k){
data[k] = function () {
alert(k);
};
})(k);
}此时他们的scope属性如下
|
undefined & null
null是一个表示"无"的对象，转为数值时为0； nullnull表示"没有对象"，即该处不应该有值
undefinedundefined表示"缺少值"，就是此处应该有一个值，但是还没有定义
|
|
Array.prototype.reduce 关于 initialValue
|
二进制http://stackoverflow.com/questions/9939760/how-do-i-convert-an-integer-to-binary-in-javascript http://stackoverflow.com/questions/16155592/negative-numbers-to-binary-string
|
instanceofhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof 语法 看 constructor.prototype 在不在 object 的原型链( QA这个比较有趣， 结论x instanceof Object 总是为true，因为 constructor.prototype 即 Object.prototype = null, 是原型链的顶端，总会成立的。除了 null undefined 不止 |
Array LikeQ 怎么判断 isArrayA
1 & 2 都是可以的, 对于 toString.call(o), 有一些好玩的 对于 primitive value / null / undefined 都有用 Updatesee 夭寿啊~所以还是老实用 Object.prototype.toString / Array.isArray 吧 lodashhttps://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L8646 |
RegExpFlags
g
regexp.test 使用
m
|
string 与 byte[] 互转拿到 ArrayBuffer, 先转成 Uint8Array, 数组
String.fromCharCode(...arr); // 即可
dataurl -> blob/**
* https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata/5100158
*/
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1])
else byteString = unescape(dataURI.split(',')[1])
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], { type: mimeString })
}atob / btoahttps://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob
escape / unescape
escape('abc123'); // "abc123"
escape('äöü'); // "%E4%F6%FC"
escape('ć'); // "%u0107"
// special characters
escape('@*_+-./'); // "@*_+-./" |
property descriptor
默认值
|
scrollTop / clientTop / offsetTopLinks
Summary
clientWidth / offsetWidth / scrollWidth
|
Object.ishttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is 与 // +0 -0
+0 === -0 // true
Object.is(+0, -0) // false
// NaN / Number.NaN
NaN === Number.NaN // false
Object.is(NaN, Number.NaN) // true |
NaN / Number.NaN / isNaN / Number.isNaN
|
HTMLScriptElementasync & deferhttps://juejin.cn/post/6844904166528139277#heading-12 简单来说 |
main threadhttps://developer.mozilla.org/en-US/docs/Glossary/Main_thread 浏览器使用单个线程
https://segmentfault.com/a/1190000041729574#item-2-5 |
Some Tricks on JavaScript.
API
The text was updated successfully, but these errors were encountered: