每日十条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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
Vue实现导航栏菜单
Aug 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
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
网络安全方面的面试题
2015/11/04 面试题
财务部经理岗位职责
2014/02/03 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
小学校长开学致辞
2015/07/29 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
高中数学课堂教学反思
2016/02/18 职场文书