每日十条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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python中update的基本使用方法详解
2019/07/17 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Django celery异步任务实现代码示例
2020/11/26 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
2014道德模范事迹材料
2014/02/16 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
医院见习报告范文
2014/11/03 职场文书
七年级作文之秋游
2019/10/21 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
MySQL学习之基础命令实操总结
2022/03/19 MySQL