JavaScript 有太多“神奇”之处我想不用再多赘述!
本篇带来 JS 几个“神奇”设计,先别急着吐槽,有遇到过加强更正,没遇到过以后尽量避免!
奥力给,冲了!🏄
你有鹰眼吗?
请问以下这段代码,输出是?
const numbers = [1, 2, 3, 4];
for (var i = 0; i < numbers.length; i++);{
console.log(`The number is ${numbers[i]}`)
}
复制代码
结果是:
// The number is undefined
复制代码
哈?先别急,再看一段代码:
const numbers = [1, 2, 3, 4];
for (var i = 0; i < numbers.length; i++){
console.log(`The number is ${numbers[i]}`)
}
复制代码
它的打印才是:
// The number is 1
// The number is 2
// The number is 3
// The number is 4
复制代码
你有鹰眼吗? 原来,这两端代码的差异在于 for 循环括号条件后的那个分号!!
for (var i = 0; i < numbers.length; i++); <==== 就是这个分号
复制代码
。。。u1s1,多少有点扯了,多个分号不会报错,并且是另外一种结果;
变量提升?
再猜下以下这段代码的输出:
numbers();
var numbers = function () {
console.log("Number one");
}
numbers();
function numbers() {
console.log("Number two");
}
numbers();
复制代码
答案是:
// Number two
// Number one
// Number one
复制代码
这也很神奇,以不同方式定义函数会带来不同的效果~
变量提升总会搞得人五迷三道~
除了 function numbers() 这样声明函数会导致变量提升,还有 var 声明方式导致的变量提升,比如:
console.log(a);
var a;
console.log(b);
复制代码
// undefined
// Uncaught ReferenceError: b is not defined
复制代码
闭包?
猜以下输出:
let counter = function() {
let k = 0;
return () => k++;
}();
console.log(counter());
console.log(counter());
console.log(counter());
console.log(counter());
复制代码
答案是:
没错,闭包记录了执行结果;
闭包的另一种情况:
let count = 0;
(function immediate() {
if (count === 0) {
let count = 1;
console.log(count); // What is logged?
}
console.log(count); // What is logged?
})();
复制代码
结果是:
神奇~ 闭包就得细看~
this 指向?
this 指向别提了,就更神奇!
猜以下代码输出:
var length = 4;
function callback() {
console.log(this.length);
}
const object = {
length: 5,
method() {
arguments[0]();
}
};
object.method(callback, 1, 2);
复制代码
输出是:
数组长度?
const fruits = [‘mango’, ‘apple’];
fruits.length = 0;
console.log(fruits[0]);
复制代码
竟然可以通过设置长度的方式,清除数组:
神奇~~
<hr>
小感:说是 JS 的神(qi)奇(pa),其实也就是 JS 作为脚本语言的灵活的特点,面对这些特点,得尤其小心使用,才不至于被搞蒙~~
OK,以上就是本篇分享~ 撰文不易,点赞鼓励👍👍👍
我是掘金安东尼,公众号同名,日拱一卒、日掘一金,再会~
评论