每日十条JavaScript经验技巧(二)


Posted in Javascript onJune 23, 2016

1. 非数值类型转数值

使用Number()转换时:

  1. undefined会转为NaN
  2. 如果字符串以0开始,浏览器会忽略前导0,不会按照八进制进行转换
  3. 如果字符串以0x开始,浏览器会按照十六进制转化为十进制返回
  4. 如果字符串有字符,除(+,-,.)外都会转为NaN,十六进制时,字符串包含任何非数字字符都返回NaN
  5. 如果是对象转换,则对象先使用valueof(),然后按照规则转换。如果无valueOf方法,则调用toString方法,再转换。

使用parseInt()转换时:

  1. parseInt会忽略前导空格,直到第一个非空字符开始解析,如果为非数字或正负号,则返回NaN。如果为数字则一直解析到第一个非数字为止。注:在parseInt中小数点不是有效的数字字符
  2. parseInt能识别十进制,八进制和十六进制,但是在解析八进制时,ECMAScript 3 和ECMAScript 5存在分歧,ECMAScript 3会将070转化为56,但是ECMAScript 5会转换为70。
  3. 使用parseInt的第二个参数
  4. var num1 = parseInt("10",2);    //2 按二进制解析
    var num2 = parseInt("10",8);    //8 按八进制解析
    var num3 = parseInt("10",10);   //10 按十进制解析
    var num4 = parseInt("10",16);   //16 按十六进制解析

使用parseFloat()转换时:

parseFloat和parseInt的第一个区别在于它在解析字符串是是遇到一个无效的浮点数值字符为止,比parseInt多了.
解析十六进制数值时返回0

var num = parseFloat("0xA");  //0
var num = parseInt("0xA");   //10

parseFloat函数没有第二个可以指定基数的参数,所以只解析十进制值。
如果字符串是个整数,则返回整数而不是浮点数
var num = parseFloat("2.125e7");  //31250000

2. 使用toString()输出不同进制的数值

此条适用于整数,我们可以用toString()返回任意进制的整数。

var num = 10;
alert(num.toString());  //"10"
alert(num.toString(9));  //"11"
alert(num.toString(16));  //"a"

3. 位操作符时注意NaN和Infinity

在对NaN和Infinity使用位操作符时,这两个数值都会被当成0来处理。 如果对于非数值应用位操作符,会先使用Number()函数将该值转换为一个数值。

还有一点要注意的就是负数的无符号右移,无符号右移是以0来填充空位,而不像有符号右移以符号位填充空位,所以对正数的无符号右移和有符号右移结果相同,但对负数就不同了。无符号右移操作会把负数的二进制码当成正数的二进制码,而且负数是以补码形式表示,因此会导致无符号右移后的结果相差非常大。

var oldValue = -64;            
var newValue = oldValue >>> 5

4. 特殊的数值运算

对于数值运算,如果有一个操作数为NaN,则结果为NaN。
对非数值应用使用一元加操作或减操作(+,-,正负号),如果该值无法转换为数值(使用Number()方式转换),则返回NaN。

var s1 = "01", s2 = "1.1", s3 = "z", b = false,
o = {
valueOf: function(){
 return -1;
}
};
s1 = +s1;  //1   +改为-:  -1
s2 = +s2;  //1.1       -1.1
s3 = +s3;  //NaN       NaN
b = +b;   //0        0
o = -o;  //-1        1

Infinity和0相乘等于NaN,和非0数相乘为Infinity和-Infinity,取决于乘数的正负号。Infinity和Infinity相乘等于Infinity。

var num1 =Infinity, num2 = 0, num3 = -2 ,num4 = -Infinity;
alert(num1 * num2);   //NaN
alert(num1 * num3);   //-Infinity
alert(num1 * num4);   //-Infinity

零除零为NaN,非零数除以零为Infinity或-Infinity。Infinity除以Infinity为NaN
对于取模运算,下面等式成立:

Infinity%2=NaN;
2%-Infinity=2;
0%Infinity=0;    //只要被除数为0,除数不为NaN,结果都为0
Infinity%0=NaN;   //被除数可以为任意数,除数只要为0,结果都为NaN
Infinity%Infinity=NaN

加法运算:如果两个操作数都是字符串则+变为字符串连接。如果一个为字符串,一个为数值,将数值转换为字符串,然后连接字符串,如果一个操作数是对象,布尔值则先调用它们的valueOf方法,如无,在调用toString方法。再根据返回值类型,判断+号应该连接字符串还是相加。

Infinity + -Infinity = NaN;

var p = {
  valueOf: function () {
    return -1;
  }
};
var num =1;
var result = num +p;
alert(result);          // 0 相加

var p = {
  valueOf: function () {
    return "not a num";
  }
};
var num =1;
var result = num +p;
alert(result);        //1not a num 字符串连接

减法运算:减法运算和加法运算十分相似,关于对象的处理也是一样,所以不再说明。

Infinity - Infinity = NaN;
-Infinity - -Infinity = NaN;

5. 关系操作符的使用

关系操作符就是小于(<)、大于(>)、小于等于(<=)和大于等于(>=)

只要有一个数值,就会执行数值比较,另一个不为数值,则转为数值。对象先用valueOf,后用toString。其实对象无论执行什么运算都是这样,有valueOf,则用valueOf返回值,否则使用toString返回值。
两个都为字符串,则比较字符串的字符编码值(ASCII值)
关于第一个还要注意,在一个时候字符串一个是数值时,字符串无法转数值时,即为NaN会出现如下情况

var result = "a" < 3;  //false a转换为NaN
var result = "a" >= 3;  //false 任何数和NaN进行相比都为false

6. ==和===

在JavaScript中,如果等式两边类型不同,或者仅包含一个对象,那么比较会分为两种情况,转型后比较和不转型直接比较。 ==是先转换在比较,===是不转换直接比较。 对于来说===,只要类型不相等就返回false。 而对于==来说,分为如下几种情况:

true会转换为1,false会转换为0。
字符串和数值比较,字符串会转换为数值。
如果等式两边只有一个对象,这个对象会调用valueOf得到基本类型,如无valueOf方法调用toString方法。如果两边都是对象则不转型。

var p = {
  "name":"a"
};
var q = {
  "name":"a"
}
var o =p;
alert(q==p);  //false  p和q指向的对象的地址不同,虽然对象的内容是相同的
alert(o==p);  //true

下面是特殊的比较情况

null == undefined  //true
NaN != NaN     //true
NaN == NaN     //false
"NaN" == NaN    //false
undefined == 0   //false
null == 0      //false

7. for-in语句

for-in语句输出顺序不可预测,次序可能因为浏览器不同而有所差异。
要迭代的变量未null或undefined时,ECMAScript 5下不再抛出错误而是不执行循环体。如果想向前兼容,则在循环前判断不为null或undefined。

8. swithc语句

switch可以使用任何数据类型。
case的值可以是常量,变量和表达式。
switch语句在比较值时使用的是全等比较操作符(===)。

var num = 25;
switch (true) {
 case num<0:
  alert("less 0");
  break;
 case num>=0:
  alert("more than 0");
  break;
 default:
  alert("error");

}

9 函数的使用

函数内没有return语句或return不带任何返回值,则函数都会返回undefined。
函数的定义时和函数的调用时参数不比保持一致。换句话说两种参数(形参和实参)并没有任何联系。函数定义时提供的变量只是使用时较为方便,就算不定义也可以获得传递给函数的参数(通过arguments[])。

function howManyArgs(){
 alert(arguments.length);
}
howManyArgs("a");     // 1
howManyArgs("a","b");   // 2
howManyArgs();      // 0

形参和arguments[]之间的关系如下,注意严格模式和非严格模式区别。

function howManyArgs(ss){
 arguments[0]="test";
 arguments[1]="test2"
 alert(arguments[0]);  //test
 alert(arguments[1]);  //test2
 alert(ss);       //test
}
howManyArgs("a");
function howManyArgs(ss){
"use strict"
arguments[0]="test";
arguments[1]="test2"
alert(arguments[0]);   //test
alert(arguments[1]);   //test2
alert(ss);        //a
}
howManyArgs("a");

10. 函数参数的使用

在定义函数时,我们会把用到的参数写到函数的括号内,但是在有多个可选参数的情况下就会不够灵活,这个时候可以使用对象封装多个可选参数。

function displayInfo(args){
  var output = "";
  if (typeof args.name == "string"){
   output += "Name: " + args.name + "\n";
  }
  if(typeof args.age == "number"){
   output += "Age: "args.age + "\n";
  }
  alert(output);
 }
 displayInfo({
  name: "Nicholas",
  age: 29
 });
 displayInfo({
  name: "Greg"
 });
Javascript 相关文章推荐
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
js实现图片放大展示效果
Aug 30 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
jQuery实现查找最近父节点的方法
Jun 23 #Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 #Javascript
每日十条JavaScript经验技巧(一)
Jun 23 #Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 #Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 #Javascript
JavaScript基于原型链的继承
Jun 22 #Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 #Javascript
You might like
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
python实现按行切分文本文件的方法
2016/04/18 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python飞机大战游戏实例讲解
2020/12/04 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
校优秀毕业生主要事迹
2014/05/26 职场文书
民主生活会剖析材料
2014/09/30 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
php字符串倒叙
2021/04/01 PHP