JavaScript经典案例

1.关于JavaScript Function.call()函数

function a() {
    console.log(this);
}
a.call(null);  // window

关于a.call(null); 根据EcmaScript 6 规范规定,如果第一个参数传入的对象调用者是null,或者undefined,call方法就把全局对象(浏览器上全局对象是window对象,Node.js上全局对象是global对象)作为this的值,所以不管传入null或者undefined,this都是指全局对象window。

'use strict';
function a() {
    console.log(this);
}

a.call(undefined);  // undefined

但是,在严格模式下’use strict’,传入null指的就是null,传入undefined指的就是undefined。

2.变量提升问题

if(! "a" in window){
    var a = 1;
}
alert(a);  // undefined

JavaScript只有函数作用域, 没有块作用域,所以在if 里面的赋值语句 var a = 1;
分两步
var a ; //这个声明语句会被提升到代码顶部。
a = 1;
因为if语句里面的值为false,所以不会执行a的赋值,因此结果是undefined。

3.关于==运算符(《JavaScript权威指南》)

console.log(([])?true:false);   // true
console.log(([]==false?true:false));   // true
console.log(({}==false)?true:false);  // false

不太严谨的说,“==”运算符比较“喜欢”Number类型。请看下面的例子:

Boolean({}); // true
Boolean([]); // true
Boolean(''); // false
Number({}); // NaN
Number([]); // 0
Number(''); // 0
Number(false); // 0

所以,题目中其实转换成这样的:

console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

《JavaScript权威指南》的部分相关知识点
“==”运算符(两个操作数的类型不相同时)
如果一个值是null,另一个值是undefined,则它们相等
如果一个值是数字,另一个值是字符串,先将字符串转换为数学,然后使用转换后的值进行比较。
如果其中一个值是true,则将其转换为1再进行比较。如果其中的一个值是false,则将其转换为0再进行比较。
如果一个值是对象,另一个值是数字或字符串,则将对象转换为原始值,再进行比较。

对象到数字的转换
如果对象具有valueOf()方法,后者返回一个原始值,则JavaScript将这个原始值转换为数字(如果需要的话)并返回一个数字。
否则,如果对象具有toString()方法,后者返回一个原始值,则JavaScript将其转换并返回。(对象的toString()方法返回一个字符串直接量(作者所说的原始值),JavaScript将这个字符串转换为数字类型,并返回这个数字)。
否则,JavaScript抛出一个类型错误异常。

空数组转换为数字0
数组继承了默认的valueOf()方法,这个方法返回一个对象而不是一个原始值,因此,数组到数字的转换则调用toString()方法。空数组转换为空字符串,空字符串转换为数字0。

4.JavaScript中的全局函数
JavaScript 中包含以下 7 个全局函数:
escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。

5.运算符+、“”

console.log(1+ "2"+"2");

做加法时要注意双引号,当使用双引号时,JavaScript认为是字符串,字符串相加等于字符串合并。
因此,这里相当于字符串的合并,即为122.

console.log(1+ +"2"+"2");

第一个+”2”中的加号是一元加操作符,+”2”会变成数值2,因此1+ +”2”相当于1+2=3.
然后和后面的字符串“2”相合并,变成了字符串”32”.

console.log("A"- "B"+"2");

“A”-“B”的运算中,需要先把”A”和”B”用Number函数转换为数值,其结果为NaN,在剪发操作中,如果有一个是NaN,则结果是NaN,因此”A”-“B”结果为NaN。
然后和”2”进行字符串合并,变成了NaN2.

console.log("A"- "B"+2);

根据上题所述,”A”-“B”结果为NaN,然后和数值2进行加法操作,在加法操作中,如果有一个操作数是NaN,则结果为NaN。

6.局部变量、全局变量和参数传参问题

var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);   // 2
alert(bb);  // 1

在aa函数中,bb是以传值的方式传入的,在函数中,会重新定义一个bb变量,并将其值覆为2,然后弹出变量bb的值,即为2。并不影响函数体外的bb变量,所以其值仍然为1.

7.实例化数据类型对象

var x = new Boolean(false);
if (x) {
  alert('hi');
}
var y = Boolean(0);
if (y) {
  alert('hello'); 
}  // 会alert出hi

x为Boolen对象,在if语句里的判断为true,虽然x的值为false,但是作为对象,if会直接判断为true。y为Boolen值,在if里的判断就是false值。

8.定时器

function foo() {
    console.log('first');
    setTimeout(funciton() {
        console.log('second');
    }, 5);
}
for(var i = 0; i < 50; i++) {
    foo();
}

首先全部输出first,然后全部输出second。
js 是运行于单线程环境中,定时器作用是在规定时间内将事件加入执行队列,而加入的前提是当前事件队列没有任何东西。
这里考察的知识点是回调的运行机制。
回调时,被回调的函数会被放在event loop里,等待线程里的任务执行完后才执行event loop里的代码。
因此,上述代码会先把线程里的console.log(‘first’)执行完后,再执行event loop里的console.log(‘second’)。

同理,Promise对象

let promise = new Promise((resolve, reject) => {
    console.log('Promise');
    resolve();
});

promise.then(function() {
    console.log('resolved');
});

console.log('Hi');

输出结果:
Promise
Hi
resolved

Promise新建后就会立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。

9.javascript异步模式的编程
回调函数,这是异步编程最基本的方法。
事件监听,另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
发布/订阅,上一节的”事件”,完全可以理解成”信号”。
Promises对象,Promises 对象是CommonJS 工作组提出的一种规范,目的是为异步编程提供统一接口。

前言   第1章使用JavaScript字符串   1.0简介   1.1连接两个或多个字符串   1.2连接字符串和另一种数据类型   1.3条件比较字符串   1.4在字符串中查找子字符串   1.5从一个字符串提取子字符串   1.6检查一个存在的、非空的字符串   1.7将一个关键字字符串分解为单独的关键字   1.8插入特殊字符   1.9处理textarea的单个行   1.10去除字符串末尾的空白   1.11左补充或右补充一个字符串   第2章使用正则表达式   2.0简介   2.1测试一个子字符串是否存在   2.2测试不区分大小写的子字符串匹配   2.3验证社会安全号码   2.4找到并突出显示一个模式的所有实例   2.5使用新字符串替换模式   2.6使用捕获圆括号交换一个字符串中的单词   2.7使用正则表达式来去除空白   2.8使用命名实体来替代HTML标签   2.9搜索特殊字符   第3章日期、时间和定时器   3.0简介   3.1打印出今天的日期   3.2打印出UTC日期和时间   3.3打印出一个ISO 8601格式日期   3.4把一个ISO 8601格式的日期转换为Date对象可接受的一种格式   3.5创建一个特定的日期   3.6规划未来的一个日期   3.7记录流逝的时间   3.8创建一个延迟   3.9创建重复性定时器   3.10使用带有定时器的函数闭包   第4章使用Number和Math   4.0简介   4.1保持一个递增的计数   4.2把十进制数转换为一个十六进制值   4.3创建一个随机数生成器   4.4随机产生颜色   4.5把表中的字符串转换为数字   4.6把表中一列的所有数字加和   4.7在角度和弧度之间转换   4.8找到页面元素可容纳的一个圆的半径和圆心   4.9计算圆弧的长度   第5章使用数组和循环   5.0简介   5.1循环遍历数组   5.2创建多维数组   5.3从数组创建一个字符串   5.4排序数组   5.5按顺序存储和访问值   5.6以相反的顺序存储和访问值   5.7创建一个新数组作为已有数组的子集   5.8在数组中搜索   5.9将一个多维数组扁平化   5.10搜索和删除或替换数组元素   5.11对每个数组元素应用一个函数   5.12对数组中的每个元素执行一个函数并返回一个新数组   5.13创建一个过滤后的数组   5.14验证数组内容   5.15使用一个关联数组来存储表单元素名和值   第6章使用JavaScript函数构建重用性   6.0简介   6.1创建一段可重用的代码   6.2把单个数据值传递到函数   6.3把复杂的数据对象传递给函数   6.4创建一个动态运行时函数   6.5把一个函数当做参数传递给另一个函数   6.6实现递归算法   6.7创建能够记住其状态的函数   6.8使用一个通用的科里化函数提高应用程序性能   6.9使用缓存计算(Memoization)来提高应用程序性能   6.10使用匿名函数包装全局变量   第7章处理事件   7.0简介   7.1检测页面何时完成载入   7.2使用Event对象捕获鼠标点击事件的位置   7.3创建一个通用的、可重用的事件处理函数   7.4根据修改的条件来取消一个事件   7.5阻止事件在一组嵌套元素中传播   7.6捕获键盘活动   7.7使用新的HTML 5拖放   7.8使用Safari方向事件和其他移动开发环境   第8章浏览器模块   8.0简介   8.1请求Web页面访问者确认一项操作   8.2创建一个新的、下拉式的浏览器窗口   8.3找到关于浏览器的访问页面   8.4警告Web页面访问者将要离开页面   8.5根据颜色支持更改样式表   8.6根据页面大小修改图像尺寸   8.7在CMS模板页面中创建面包屑路径   8.8将一个动态页面加入书签   8.9针对后退按钮、页面刷新来保持状态   第9章表单元素和验证   9.0简介   9.1访问表单文本输入值   9.2动态关闭或打开表单元素   9.3根据一个事件从表单元素获取信息   9.4当点击单选按钮的时候执行一个动作   9.5检查一个有效的电话号码   9.6取消表单提交   9.7阻止重复表单提交   9.8隐藏和显示表单元素   9.9根据其他表单选择修改一个选项列表   第10章调试和错误处理   10.0简介   ……   第11章访问页面元素   第12章创建和删除元素和属性   第13章使用Web页面空间   第14章使用JavaScript、CSS和ARIA创建交互和可访问性效果   第15章创建富媒体和交互应用程序   第16章JavaScript对象   第17章JavaScript库   第18章通信   第19章使用结构化数据   第20章持久化   第21章JavaScript创新用法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值