你可能不知道的一些JavaScript 奇技淫巧
这里记录一下以前学习各种书籍和文章里边出现的JS的小技巧,分享给大家,也供自己查阅,同时感谢那些发现创造和分享这些技巧的前辈和大牛们。
1、遍历一个obj的属性到数组
var a=[];
for(a[a.length] in obj);
return a;
乍一看可能比较蒙,不过仔细分析还是不难理解的。常见用法是for(var key in obj),这里key初始也是undefined的,a[a.length]整体也是undefined,所以二者其实是等价的。在for循环中,obj的属性会依次赋值给key,同样,也依次赋值给a[a.length],这里length一直在变,就巧妙地挨个赋值给数组的每一个元素了。
2、重复字符串(如abc=>abcabc)
function repeat(target,n){
return (new Array(n+1).join(target));
}
改良版本:
function repeat(target,n){
return Array.prototype.join.call(
{length:n+1},target);//之所以要创建带length属性的对象,是因为调用数组原型方法时,必须是一个类数组对象,而类数组对象的条件就是length为非负整数
}
不新建数组,而是用拥有length属性的对象替代,然后调用数组的join方法,性能提升很大
再改进:
var repeat=(function(){
var join=Array.prototype.join,obj={};
return function(target,n){
obj.length=n+1;
return join.call(obj,target);
}
})();
利用闭包将对象和join方法缓存起来,不用每次都新建对象和寻找方法
3、for循环中,当第二项为false时会终止循环,这里并不一定存在比较,可以直接赋值,如果赋值为undefined之类的值时,转成bool值也为假,因此也会终止,比如遍历数组可以写成:
for(var i=arr.length,element;element=arr[—-i];){…}
这里,第二项一定是arr[—-i]而非arr[i--],如果是后者的话,上来就是undefined,就不会执行循环体,或者for(var i=0,element;element=arr[i++];){…}
4、NaN是JS中唯一不等于自己的值,因此可以用来判断一个变量是否真的为NaN:a!==a
5、“<”,”+”等运算符会强制符号两边的表达式执行valueOf然后比较,所以如果两边是函数或者对象,而又重写了该对象的valueOf方法,就会自动执行两边的方法。如:
var a={valueOf:function(){console.log(“aaa”);}},b={valueOf:function(){console.log(“bbb”);}};
a<b;//会输出:aaa;bbb;false;
6、JS具备自动插入分号的能力,但是自动插入分号并不是万能的,其有三条规则:
1)只在”}”标记之前、一个或多个换行之后以及程序输入的结尾被插入;
function box(){
var val=undefined;
return {
set:function(x){val=x;},
get:function(){return val;}
};
}
var b=box();
b.get();//“undefined”
b.set(5);
b.get();//5
这一点很重要,比如在函数的for循环体内返回闭包或者有闭包取for循环的计数器值,那么这个闭包取到的永远是for循环结束时i的最终值,因为闭包存储的是它的引用而非当时的值副本。
8、JS没有块级作用域,因此通常情况下函数内部的所有变量都是绑定到函数作用域的,也就是说相当于都在函数一开始就声明了的,一个例外就是try/catch中的变量是块级的,只属于try/catch块。
9、众所周知,在函数内部声明函数是可以的,但是在在函数内的局部块里声明,可能会出现问题:
function f(){return “global”;}
function test(x){
function f(){return “local”}
var result=[];
if(x){
result.push(f());
}
result.push(f());
return result;
}
test(true);//[“local”,”local”]
test(false);//[“local”]
将函数声明到if块中:
function f(){return “global”;}
function test(x){
var result=[];
if(x){
function f(){return “local”}
result.push(f());
}
result.push(f());
return result;
}
test(true);//?
test(false);//?
function f(){return “global”;}
function test(x){
var result=[];
if(x){
var g=function(){return “local”}
result.push(g());
}
result.push(f());
return result;
}
10、用js创建字典的时候,如果是利用对象的方式(因为JS对象的核心是一个字符串属性名称和属性值的映射表),会遇到一个问题就是原型污染,因为获取字典属性值的时候用hasOwnProperty还好,如果用for in遍历的话,不仅会遍历对象本身,包括它的原型,因此如果在其他地方污染了Object的原型,那么for in就会产生非预期的结果,这时可能会用hasOwnProperty来先检测该对象本身是否含有属性来避免原型污染,然而更极端的情况是连hasOwnProperty这个原型方法都有可能被污染。避免原型污染的方法是在创建字典对象的时候用Object.create(null)来创建一个完全空对象,这个对象没有原型,这个方法是ES5的,在没有这个方法可用的时候,最好是创建字典类,然后在字典类里用数组来存储有序集合,自己维护这个集合。
11、JS中的类数组对象可以享用数组的大部分原型方法如map等,类数组对象是指满足两个条件的对象:一是具备合理范围值内的length属性,二是length属性大于该对象的最大索引,索引是一个合理范围的证书,它的字符串表示的是对象的一个key;但是数组的一个原型方法contact是不能被类数组对象调用的,因此需要先用[].slice.call把类数组对象转换为真正的数组比如[].slice.call(arguments)。
12、并不是所有时候都需要继承,继承也不是完美的,有时候会创造比他能解决的更多的问题,特别是当层次关系没那么明显的时候,这时候应该多用结构类型(又叫鸭子类型,如果它看起来像鸭子、游泳像鸭子并且叫声像鸭子,那么它就是鸭子),用结构类型设计灵活的对象接口的时候,不需要创建类工厂来返回类的实例,而是直接返回对象,对象具备预期的方法和属性,比如:
SomeObj.someWidget=function(opts){
return {
a:blabla,
b:function(){...},
c:blabla
}
}
原文链接:http://www.cnblogs.com/dson/p/4415278.html
你可能不知道的一些JavaScript 奇技淫巧的更多相关文章
- 你可能还不知道的关于JavaScript类型的细节?
类型 七种类型: Undefined Null Boolean String Number Symbol Object Undefined.Null 阅读问题:为什么有的编程规范要求使用void 0 ...
- ES6 你可能不知道的事 – 基础篇
序 ES6,或许应该叫 ES2015(2015 年 6 月正式发布),对于大多数前端同学都不陌生. 首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性 你可能不知道的事,希望能为各位同学 ...
- JavaScript中你可能不知道的九件事
今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己曾经没有注意过的细节. 我这些细节列在这里.分享给可能相同不知道的朋友: 1.使用 document.write() ...
- JavaScript中你所不知道的Object(二)--Function篇
上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...
- js值----你所不知道的JavaScript系列(6)
1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...
- js类型----你所不知道的JavaScript系列(5)
ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型等. 1.内置类型 JavaScript 有七种内置类型: • 空值(null) • 未定义( ...
- 闭包----你所不知道的JavaScript系列(4)
一.闭包是什么? · 闭包就是可以使得函数外部的对象能够获取函数内部的信息. · 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. · 闭包就 ...
- let和const----你所不知道的JavaScript系列(2)
let 众所周知,在ES6之前,声明变量的关键字就只有var.var 声明变量要么是全局的,要么是函数级的,而无法是块级的. var a=1; console.log(a); console.log( ...
- LHS 和 RHS----你所不知道的JavaScript系列(1)
变量的赋值操作会执行两个动作, 首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后在运行时引擎会在作用域中查找该变量, 如果能够找到就会对它赋值.----<你所不知道的Ja ...
随机推荐
- Nodejs随笔(三):全局对象之process
process是全局对象,在任何地方都可以访问,而且它是EventEmitter的一个实例(关于EventEmitter后面会提到). process对象对一些标准的输入输出流进行了封装,如stdin ...
- pythonj基础之 多线程
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...
- 表达式求值(河南省第四届ACM试题-C题)题解
以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定指定的一个由3种函数组成的表达式,计算其数值. [题目分析] 一开始以为是后缀表达式,后来抽了没想出来,最后用了递归的方法解 ...
- 容易上手-类似ERP系统 简单特效
今天大概简单写一个效果, 这个效果 很容易 上手的: html: <style type="text/css">.menu_list ul{display:none;} ...
- 在PHP代码中处理JSON 格式的字符串的两种方法:
总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...
- 在Linux手动把文件转码的方法,防止乱码出现
iconv -f utf-8 -t gb2312 report.html > report_test.html
- Oracle EBS-SQL (BOM-12):BOM清单查询
select msi.segment1 装配件编码 ,msi.description 装配件描述 ,msi. ...
- js题
function newStr(){ return "hi";}function turn(str){ str.toString = newStr;}var str1 = &quo ...
- L1 正则 和 L2 正则的区别
L1,L2正则都可以看成是 条件限制,即 $\Vert w \Vert \leq c$ $\Vert w \Vert^2 \leq c$ 当w为2维向量时,可以看到,它们限定的取值范围如下图: 所以它 ...
- 开源DirectShow分析器和解码器: LAV Filter
LAV Filter 是一款开源的DirectShow视频分离和解码软件,他的分离器LAVSplitter封装了FFMPEG中的libavformat,解码器LAVAudio和LAVVideo则封装了 ...