周陆军博客Appearance
js看输出题总结
数组的理解
javascript
var obj = {
'2':3,
'3':4,
'length':2,
'splice':Array.prototype.splice,
'push':Array.prototype.push
}
obj.push(1)
obj.push(2)
obj.push(3)
console.log(obj)
{
'2':1
'3':2,
'4':3,
'length':5,
'splice':Array.prototype.splice,
'push':Array.prototype.push
}- obj 有长度，相当于类数组
- 调用数组的 push，会在数组的最后加一项，每次长度加一
- push(key)时，会隐式调用 toString 方法转为字符串
- key 值相同被覆盖
事件循环
宏任务：setInterval()，setTimeout()，setImmediate()，xhr回调
微任务 1：new Promise()
- Promise 是异步的，是指他的 then()和 catch()方法，Promise 本身还是同步的
- 有 resolve()后，才能执行 then(),有 reject()，不执行 then()
微任务 2：async await
- async function(){} 表示函数内存在异步操作
- await 强制下面代码等待，直到这行代码得出结果(await setTimeout 无效，适用于 ajax)
事件优先级：同步任务>异步任务(微任务(process.nextTick优先)>宏任务(取决于延时时间))
浏览器和node的事件循环区别
node会在每个阶段之间执行微任务，6个阶段:
- timers 阶段：这个阶段执行 timer（setTimeout、setInterval）的回调
- I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调
- idle, prepare 阶段：仅 node 内部使用
- poll 阶段：获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里
- check 阶段：执行 setImmediate() 的回调
- close callbacks 阶段：执行 socket 的 close 事件回调
process.nextTick是独立于 Event Loop 之外的，它有一个自己的队列，当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行
javascriptsetTimeout(()=>{ console.log('timer1') Promise.resolve().then(function() { console.log('promise1') }) }, 0) setTimeout(()=>{ console.log('timer2') Promise.resolve().then(function() { console.log('promise2') }) }, 0) //浏览器:timer1=>promise1=>timer2=>promise2 //node:timer1=>timer2=>promise1=>promise2看输出
javascript
//浏览器
(function () {
setTimeout(() => {
console.log(0);
});
new Promise((resolve) => {
console.log(1);
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
Promise.resolve().then(() => console.log(5));
}).then(() => {
console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8));
});
console.log(9);
})();
//1、9、5、0、6、2、7、4、8、3
//node.js
console.log("1");
setTimeout(function () {
console.log("2");
process.nextTick(function () {
console.log("3");
});
new Promise(function (resolve) {
console.log("4");
resolve();
}).then(function () {
console.log("5");
});
});
process.nextTick(function () {
console.log("6");
});
new Promise(function (resolve) {
console.log("7");
resolve();
}).then(function () {
console.log("8");
});
setTimeout(function () {
console.log("9");
process.nextTick(function () {
console.log("10");
});
new Promise(function (resolve) {
console.log("11");
resolve();
}).then(function () {
console.log("12");
});
});
//1，7，6，8，2，4，3，5，9，11，10，12
let test = async function () {
await new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
resolve();
}, 3000);
}).then(() => {
console.log(2);
});
console.log(3);
await new Promise((resolve, reject) => {
console.log(4);
setTimeout(() => {
resolve();
}, 1000);
}).then(() => {
console.log(5);
});
console.log(6);
};
test();
//1
//2
//3
//4
//5
//6运算符优先级
('b' + 'a' + + 'a' + 'a').toLowerCase()
=('b' + 'a' + (+ 'a') + 'a').toLowerCase()//正号优先级大于加号
=('b' + 'a' + Number('a') + 'a').toLowerCase()//隐式转换
=('ba' + NaN + 'a').toLowerCase()
=('ba' + 'NaN' + 'a').toLowerCase()
=('baNaNa').toLowerCase()
='banana'精度丢失
javascript
0.1 + 0.2 === 0.3//false
(0.1 * 10 + 0.2 * 10) / 10) == 0.3; // true
function numbersequal(a,b){ return Math.abs(a-b)<Number.EPSILON; }
Number.EPSILON=(function(){ //解决兼容性问题
return Number.EPSILON?Number.EPSILON:Math.pow(2,-52);
})();
var a=0.1+0.2， b=0.3;
console.log(numbersequal(a,b)); //truetrycatchfinallyreturn执行顺序
try 里面放 return，finally 会执行完再 return
javascript
// return 执行了但是没有立即返回，而是先执行了finally
function kaimo() {
try {
return 0;
} catch (err) {
console.log(err);
} finally {
console.log("a");
}
}
console.log(kaimo()); // a 0
// finally 中的 return 覆盖了 try 中的 return。
function kaimo() {
try {
return 0;
} catch (err) {
console.log(err);
} finally {
return 1;
}
}
console.log(kaimo()); // 1变量生命周期
javascript
a; // undefined 变量提升
b; // ReferenceError 临时死区 const
c; // ReferenceError 临时死区 let
var a = "value";
const b = 3.14;
let c = true;
a; //'value'
b; //3.14
c; //truejavascript
var a = 10;
function foo() {
console.log(a); // undefined
var a = 20; // 使上面的a变成局部作用域
}
foo();javascript
var a = 10;
function foo() {
console.log(a); // ReferenceError
let a = 20; // 使上面的a变成局部作用域
}
foo();javascript
var a = 10;
function foo() {
console.log(a); // 全局作用域10
}
foo();javascript
var a = 10;
function foo() {
console.log(a); // undefined
var a = 20; // 使上面的a变成局部作用域
console.log(a); //20
}
console.log(a); //10
foo();this的指向
javascript
var x = 10; // global scope
var foo = {
x: 90,
getX: function () {
return this.x;
},
};
foo.getX(); // 90,函数里的this指向foo
let xGetter = foo.getX;
xGetter(); // 10,函数里的this指向window
let getFooX = foo.getX.bind(foo); //使用call和apply同理
getFooX(); // 90javascript
var num = 1;
let obj = {
num: 2,
add: function() {
this.num = 3;
// 这里的立即指向函数，因为我们没有手动去指定它的this指向，所以都会指向window
(function() {
// 所有这个 this.num 就等于 window.num
console.log(this.num);
this.num = 4;
})();
console.log(this.num);
},
sub: function() {
console.log(this.num)
}
}
// 下面逐行说明打印的内容
/**
* 在通过obj.add 调用add 函数时，函数的this指向的是obj,这时候第一个this.num=3
* 相当于 obj.num = 3 但是里面的立即指向函数this依然是window,
* 所以 立即执行函数里面console.log(this.num)输出1，同时 window.num = 4
*立即执行函数之后，再输出`this.num`,这时候`this`是`obj`,所以输出3
*/
obj.add() // 输出 1 3
// 通过上面`obj.add`的执行，obj.name 已经变成了3
console.log(obj.num) // 输出3
// 这个num是 window.num
console.log(num) // 输出4
// 如果将obj.sub 赋值给一个新的变量，那么这个函数的作用域将会变成新变量的作用域
const sub = obj.sub
// 作用域变成了window window.num 是 4
sub() // 输出4isNaN和Number.isNaN函数的区别
- isNaN:传入任何非数字值均为NaN
- Number.isNaN:先判断是否数字，再判断NaN
javascript
isNaN('a')//true
Number.isNaN('a')//false隐式转换
javascript
console.log([] + [])->console.log("" + "")->""
console.log({} + [])->console.log("[object Object]" + "")->"[object Object]"
console.log([] == ![])->console.log(0 == !true)->console.log(0 == false)->true
console.log(true + false)->console.log(1 + 0)->1[]==false,[]==![],[]==0,''==0,""=="" true
{}==false,{}==!{},{}==0,NaN==0 false