JavaScript 中加号操作符细节

JavaScript是一门非常优秀的语言。我喜欢它的灵活性,因为可以使用它做很多事情,比如说改变变量的类型,可以给对像添加方法或属性,也可以在不同的变量类型上使用操作符等等。

然而,要灵活的用好JavaScript还是需要付出一定的代价。开发人员需要了解如何使用不同的操作符处理不同类型,比如加法(+)、等于或全等于(==和===),不等于或不全等(!==或===)等。同时许多操作符都可以使用自己的方式来处理类型的转换。

加法操作符

最常用的操作符之一是加法操作符:+。这个操作符是用来连接字符串和数字。

规则1:字符串连接

// string + string = string (concatenation)
var result = "Hello, " + "World!";
console.log(result); // "Hello, World!"

规则2:数字加法运算

// number + number = number (addition)
var result = 10 + 5;  
console.log(result);// 15

JavaScript可以使用object、array、null或者undefined上使用操作符。接下来,我们看看使用这些的规则和细节。

使用规则

来看看下面的一些示例,了解JavaScript中如何通过操作符转换一些类型:

operand + operand = result  
  • 如果操作符数中有一个对象,它将转换为原始值(string、number或boolean)
  • 如果操作符数中有一个字符串,第二个操作数将转换成字符串,并且连接在一起转换成一个字符串
  • 在其它情况之下,两个操作数转换为数字并且将执行加法运算

对象转换的规则:

  • 如果对象类型是一个Date,可以使用toString()方法
  • 在其它情况下使用valueOf()方法,它将返回一个原始值
  • 如果valueOf()方法不能将它返回一个原始值,可以使用toString()方法。而这种情况大部分情况下都会发生

如果两个操作数是原始类型,那么操作符将会作检查,如果至少一个操作数是字符串的话,将会把它们当字符串连接在一起。在其它情况之下,只会把操作数当作数字,并且做加法运算。

学习示例

下面的示例帮助你更好的理解加法操作符,同时能了解一些更复杂情况之下如何时转换。

示例1: 数字和字符串

var result = 1 + "5"; //"15"
  • 1 + “5”:根据规则2,第二个操作数是一个字符串,那么数字1将会变成字符串”1″
  • “1” + “5”: 字符串连接
  • “15”

第二个操作数是一个字符串。第一个操作数把number转换成string,然后将它们连接在一起。

示例2: 数字和数组

var result = [1,3,5] + 1; // “1,3,51”

  • [1,3,5] + 1: 根据规则一,数组[1,3,5]将原始值转换出来”1,3,5″
  • “1,3,5” + 1: 根据规则二,数字1将会转换成字符串”1″
  • “1,3,5” + “1”: 字符串连接
  • 1,3,51

第一个操作数是一个数组array,它将值转换为字符串,第二个操作数是数字,它将值转换为字符串,然后将两个字符串连接在一起。

示例3: 数字和布尔值

var result = 10 + true; // 11
  • 10 + true: 根据规则三,布尔值true将转换为数字1
  • 10 + 1: 数字做加法运算
  • 11

因为两个操作数都不是字符串,布尔值将转换为数字符,然后作数字加法运算。

示列4:数字和对象

var result = 15 + {};//"15[object Object]"
  • 15 + {}: 第二个操作数是一个对象,根据规则一和对象转换为字符串[object Object]
  • 15 + “[object Object]”: 根据规则二,数字15转换为字符串”15″
  • “15” + “[object Object]”: 字符串连接
  • “15[object Object]”

第二个操作数是一个对象,它将转换为一个字符串。因为valueOf()方法返回的是对象本身,而不是一个原始值,使用toString()方法,它返回的是一个字符串。

第二个操作数转换之后是一个字符串,此时数字也将转换为一个字符串,然后两个操作数做字符串连接。

示例5: 数字和null

var result = 8 + null; //8
  • 8 + null: 因为操作数没有字符串,根据规则三,null将转换为数字0
  • 8 + 0: 两个数字做加法运算
  • 8

如果操作数不是对象或字符串时,null将转换为数字,然后做数字的加法运算。

示例6: 字符串和null

var result = "queen" + null; // "queennull"
  • “queen” + null: 因为第一个操作数是一个字符串,根据规则二,null将转换为一个字符串”null”
  • “queen” + “null”: 字符串连接
  • “queennull”

因为第一个操作数是一个字符串,所以null将转换为一个字符串”null”,然后两个操作数做字符串连接。

示例7: 数字和undefined

var result = 12 + undefined; // NaN
  • 12 + undefined: 因为没有任何一个操作数是字符串,根据规则三,undefined将转换为一个数字NaN
  • 12 + NaN: 做数字加法运算
  • NaN

因为没有操作数是对象或字符串,undefined将转换为NaN。两个数字做加法运算,因为任何一个数字和NaN做加法运算,其值都等于NaN

console.log(1 + "5"); // "15"
console.log([1, 3, 5] + 1); //"1,3,51"
console.log(10 + true); //11
console.log(15 + {}); //"15[object Object]"
console.log(8 + null); // 8
console.log("queen" + null); // "queennull"
console.log({} + null); // "[object Object]null"
console.log(12 + undefined); //NaN
console.log("w3cplus" + undefined);//"w3cplusundefined"
console.log([] + null); // "null"
console.log([] + undefined); // "undefined"
console.log([] + "w3cplus"); // "w3cplus"

总结

为了避免潜在的问题,不在对旬上直接使用加法操作符,除非明确使用toString()或valueOf()方法。

如上面的示例所示,上面有一些特列的案例。简单点说,如果开发人员知道确切的数据类型在做加法操作的时候,知道场景的转换规则,将会帮助你减少出错的概率,让你编码也更开心。

via:w3cplus

10个jQuery代码片段 助你高效Web开发

在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。

1、检测Internet Explorer版本

当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题。尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始终是一个能够容易检测的好东西。当然了,下面的代码也能用于检测别的浏览器。

$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
});

2、平稳滑动到页面顶部

这是一个最广泛使用的jQuery效果:对一个链接点击下会平稳地将页面移动到顶部。这里没什么新的内容,但是每个开发者必须要会偶尔编写一下类似函数

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

jquery

3、固定在顶部

非常有用的代码片段,它允许一个元素固定在顶部。对导航按钮、工具栏或重要信息框是超级有用的。

$(function(){
	var $win = $(window)
	var $nav = $('.mytoolbar');
	var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
	var isFixed=0;

	processScroll()
	$win.on('scroll', processScroll)

	function processScroll() {
	var i, scrollTop = $win.scrollTop()

	if (scrollTop >= navTop && !isFixed) { 
		isFixed = 1
		$nav.addClass('subnav-fixed')
	} else if (scrollTop <= navTop && isFixed) {
		isFixed = 0
 		$nav.removeClass('subnav-fixed')
	}
}

4、用其他内容取代html标志

jQuery使得用另外一个东西取代html标志很简单。可以利用的余地无穷无尽。

$('li').replaceWith(function(){
  return $("<div />").append($(this).contents());
});

5、检测视窗宽度

现在移动设备比过时的电脑更普遍,能够方便去检测一个更小的视窗宽度会很有帮助。幸运的是,用jQuery来做超级简单。

var responsive_viewport = $(window).width();

/* if is below 481px */
if (responsive_viewport < 481) {
    alert('Viewport is smaller than 481px.');
} /* end smallest screen */

6、自动定位并修复损坏图片

如果你的站点比较大而且已经在线运行了好多年,你或多或少会遇到界面上某个地方有损坏的图片。这个有用的函数能够帮助检测损坏图片并用你中意的图片替换它,并会将此问题通知给访客。

$('img').error(function(){
	$(this).attr('src', 'img/broken.png');
});

7、检测复制、粘贴和剪切的操作

使用jQuery可以很容易去根据你的要求去检测复制、粘贴和剪切的操作。

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

8、遇到外部链接自动添加target=”blank”的属性

当链接到外部站点时,你可能使用target=”blank”的属性去在新界面中打开站点。问题在于target=”blank”属性并不是W3C有效的属性。让我们用jQuery来补救:下面这段代码将会检测是否链接是外链,如果是,会自动添加一个target=”blank”属性。

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

9、在图片上停留时逐渐增强或减弱的透明效果

另一个“经典的”代码,它要放到你的工具箱里,因为你会不时地要实现它。

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});

10、在文本或密码输入时禁止空格键

在很多表格领域都不需要空格键,例如,电子邮件,用户名,密码等等等。这里是一个简单的技巧可以用于在选定输入中禁止空格键。

$('input.nospace').keydown(function(e) {
	if (e.keyCode == 32) {
		return false;
	}
});

via:codeceo

jQuery API  速查表