示例代码托管在:http://www.github.com/dashnowords/blogs

博客园地址:《大史住在大前端》原创博文目录

华为云社区地址:【你要的前端打怪升级指南】

一. 题目

改造下面的代码,使之输出0 - 9,写出你能想到的所有解法。

首先作为前端开发者,你起码得知道下面的代码会输出什么,强烈建议自己动手试试能写出多少种解法。

for (var i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}

二. 解法风暴

console.log(i)在执行时,会按照词法作用域来取得循环条件中的变量 i的值,本题的基本思路实际上就是如何在console.log语句for循环条件之间添加(或修改)代码来隔离变量 i的词法作用域。

解法一:最容易想到的方法——ES6块级作用域

//最容易想到的就是使用let实现的局部作用域
for (let i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
//变式
for (var i = 0; i< 10; i++){
let a = i;
setTimeout(() => {
console.log(a);
}, 1000)
}

解法二:大多数前端曾接触过的第一种方法——IIFE(立即执行函数)

for(var i = 0; i < 10; i++){
(function(i){
setTimeout(() => {
console.log(i);
},1000)
})(i);
}

解法三:比较优雅的做法——setTimeout可以接收多个参数

//setTimeout的函数签名是setTimeout(fn, delay, ...params),params会作为fn执行时的实参传入
for (var i = 0; i< 10; i++){
setTimeout((i) => {
console.log(i);
}, 1000, i);
}

解法四:利用函数方法bind为setTimeout传入预设参数

/*Function.prototype.bind(thisArg, ...args)
* 会得到一个新函数,新函数执行时预先设置了this和一部分参数,相当于把setTimeout改造成了偏函数
* bind执行后,setTimeout的第一个参数仍然是一个函数。
*/
for (var i = 0; i < 10; i++){
setTimeout(((i) => {
console.log(i);
}).bind(null,i), 1000);
}

解法五:利用禁术with

with的作用是延长作用域链会在词法作用域末端继续添加参数定义,在正式开发中通常是禁用的。下图右侧的scope一栏中就可以看到local作用域之上又多了一个with引入的作用域,其中就包含传入的i值。

for(var i = 0; i < 10; i++){
with({i}){
setTimeout(() => { console.log(i); },1000)
}
}

解法六:利用Promise传递决议结果来隔离作用域

//在每一轮循环中的i作为实参传递给promise的onFinished函数实现作用域隔离
for(var i = 0; i < 10; i++){
new Promise((resolve,reject)=>{
resolve(i);
}).then((i)=>{
setTimeout(() => { console.log(i); },1000)
}).catch(err=>{
console.log(err);
})
}

解法七:利用try...catch来隔离作用域

for(var i = 0; i < 10; i++){
try{
throw i;
}catch(i){
setTimeout(() => { console.log(i); },1000)
}
}

解法八:浏览器环境下setTimeout第一个参数可以为undefined(node.js中会报错)

//console.log相当于同步运行,跟setTimeout实际没什么关系了
for (var i = 0; i< 10; i++){
setTimeout(
console.log(i)
, 1000)
}

解法九:篡改console.log

let result = [];
let consoleLog = console.log;
console.log = (n)=> {
result.push(n);
if(result.length === 10) result.map((i,id)=>consoleLog(id));
} for(var i = 0; i < 10; i++){
setTimeout(() => {
console.log(i);
},1000)
} //变式——稍微有点欠扁
console.log = (function(){
let consoleLog = console.log;
let i = 0;
return n => i++ === 9 && consoleLog('0,1,2,3,4,5,6,7,8,9');
})(); for(var i = 0; i < 10; i++){
setTimeout(() => {
console.log(i);
},1000)
}

解法十:不按套路出牌的骚操作

for (var i = 0; i < 10; i++){
setTimeout(() => {
console.log(i++ % 10);
}, 1000);
} //变式
for (var i = 0; i < 10; i++){
setTimeout(() => {
console.log(i++);
}, 1000);
}
i = 0;

javascript基础修炼(13)——记一道有趣的JS脑洞练习题的更多相关文章

  1. javascript基础修炼(13)——记一道有趣的JS脑洞练习题【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  2. javascript基础修炼(5)—Event Loop(Node.js)

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 一道考察异步知识的面试题 题目是这样的,要求写出下面代码的输出: setTimeout(() => { co ...

  3. javascript基础修炼(2)——What's this(上)

    目录 一.this是什么 二.近距离看this 三. this的一般指向规则 四. 基本规则示例 五. 后记 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一.thi ...

  4. javascript基础修炼(4)——UMD规范的代码推演

    javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...

  5. javascript基础修炼(7)——Promise,异步,可靠性

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 别人是开发者,你也是 Promise技术是[javascript异步编程]这个话题中非常重要的,它一度让我感到熟悉 ...

  6. javascript基础修炼(8)——指向FP世界的箭头函数

    一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...

  7. javascript基础修炼(10)——VirtualDOM和基本DFS

    1. Virtual-DOM是什么 Virtual-DOM,即虚拟DOM树.浏览器在解析文件时,会将html文档转换为document对象,在浏览器环境中运行的脚本文件都可以获取到它,通过操作docu ...

  8. javascript基础修炼(11)——DOM-DIFF的实现

    目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...

  9. javascript基础修炼(1)——一道十面埋伏的原型链面试题

    在基础面前,一切技巧都是浮云. 题目是这样的 要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = ...

随机推荐

  1. CF1027D Mouse Hunt 思维

    Mouse Hunt time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  2. codeforces 816 E. Karen and Supermarket(树形dp)

    题目链接:http://codeforces.com/contest/816/problem/E 题意:有n件商品,每件有价格ci,优惠券di,对于i>=2,使用di的条件为:xi的优惠券需要被 ...

  3. hdu 1671 Phone List 字典树模板

    Given a list of phone numbers, determine if it is consistent in the sense that no number is the pref ...

  4. ie表单提交提示下载文件

    使用jquery的ajaxform提交form表单 如果在html中多了   enctype ="multipart/form-data"   属性值 提交时就会在ie8中提示下载 ...

  5. ResourceDictionary主题资源替换(二) :通过加载顺序来覆盖之前的主题资源

    之前的ResourceDictionary主题资源替换(一)通过加载顺序来覆盖之前的主题资源,介绍了WPF框架对ResourceDictionary资源的合并规则. 此篇介绍一种在编译期间,实现资源替 ...

  6. FreeSql (三十四)CodeFirst 迁移说明

    FreeSql 支持 CodeFirst 迁移结构至数据库,这应该是(O/RM)必须标配的一个功能. 与其他(O/RM)不同FreeSql支持更多的数据库特性,而不只是支持基础的数据类型,这既是优点也 ...

  7. apache ignite系列(四):持久化

    ignite持久化与固化内存 1.持久化的机制 ignite持久化的关键点如下: ignite持久化可防止内存溢出导致数据丢失的情况: 持久化可以定制化配置,按需持久化; 持久化能解决在大量缓存数据情 ...

  8. 大数据平台搭建 - cdh5.11.1 - oozie安装

    一.简介 oozie是hadoop平台开源的工作流调度引擎,用来管理hadoop作业,属于web应用程序,由oozie server 和oozie client构成. oozie server运行与t ...

  9. 单点登录(Single Sign On)解决方案

    单点登录(Single Sign On)解决方案 需求 多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. A 网站和 B 网站是同一家公司的关联服务.现在要求,用户只要在其中一个网 ...

  10. [C++] 重载运算符与类型转换(1)

      1.形式:返回值 operator符号(参数列表){}   2.不能被重载的运算符::: 作用域运算符  .*   . 成员访问运算符   ?: 条件运算符:某些运算符(逗号,,取地址&, ...