js常用易错运算符
2018-07-15 本文已影响2人
慕凌峰
第一章、js中常用类型
-
Number
-
String
-
Date
-
Array
-
Error
-
RegExp (正则)
-
Math
-
Boolean
一、常用类型的数据处理
1、Number
1.1 指定小数位（toFixed()）
function fixNumber() {
// 3.33
alert((10/3).toFixed(2));
}
fixNumber();
2、String
2.1 字符串截取（substr/substring）
前闭后开，Ext中只有
substring
function substr() {
var temp = "问君能有几多愁，恰似一江春水向东流。";
// 问君能有几多愁
alert(temp.substr(0,7));
// 恰似一江春水向东流
alert(temp.substring(8,17));
}
substr();
2.2 查找字符串出现的位置（indexOf()）
function indexOf() {
var temp = "问君能有几多愁，恰似一江春水向东流。";
// 12
alert(temp.indexOf("春水"));
}
indexOf();
二、常用运算符及表达式
1、易混淆的等值表达式
- ==
值相等
- ===
严格相等=值相等 + 类型相同
- !=
值不相等
- !==
严格不相等=值不相等 or 类型不相同
2、神奇的“!”运算
- 对任意东西取两次非操作，就会得到一个布尔值
function equalsTest() {
var obj = {};
var arr = [];
// false
alert(!obj);
// false
alert(!arr);
// true
alert(!!obj);
// true
alert(!!arr);
}
equalsTest();
3、类型转换技巧
- 字符串优先原则
对于 字符串 + 某种类型，都是字符串优先，即任何数据类型或对象和字符串进行“+”操作，总是尝试字符串连接操作
function str() {
var result = "1" + 5;
var obj = {};
// 15
alert(result);
// 1[Object Object]
alert("1" + obj);
}
str();
先强行进行 arr.toString()，再进行字符串拼接
function str() {
var arr = [1,2,3];
// 1,2,34
alert(arr + "4");
}
str();
4、对象的key总是字符串
对于js中定义的 var obj = {1:"小明"}; 这里的key 1 其实也是一个字符串
function str() {
var obj = {1:"小明"};
// 小明
alert(obj[1]);
// 小明 （js内部会使用 Number的toString()方法，把它转换成字符串）
alert(obj["1"]);
}
str();
5、instanceOf
Animal = function (name) {
this.name = name;
}
var animal = new Animal("小狗狗");
// true
alert(animal instanceof Animal);
// true
alert(animal instanceof Object);
6、typeof
它可以准确判断的类型有：Number、String、boolean、Object、function、undefined
Animal = function (name) {
this.name = name;
}
var animal = new Animal("小狗狗");
// object (无法准确到Animal，这是js的局限性)
alert(typeof animal);
7、delete
var obj = {};
obj.name = "小明";
// 小明
alert(obj.name);
delete obj.name;
// undefined
alert(obj.name);
8、[]运算符
var obj = {};
obj.name = "小明";
// 小明
alert(obj.name);
// 小明
alert(obj["name"]);
- 说明：
其作用等同于“.”，可以来访问对象的属性，但是因为“.”操作时有局限性的，它要求必须确切的知道对象中有一个
name属性，才能够用它获取到这个属性。如果不知道对象有哪些属性，又想把它所有的属性都拿出来，就可以使用“[]”运算符。
var obj = {name:"小明",age:23};
var result = "";
for(var p in obj){
result += p + "--->" + obj[p] + "\n";
}
// name--->小明
// age--->23
alert(result);
9、()运算符
- 可以自动执行函数
可以放函数自动执行
(
function () {
alert("自动执行的函数");
}
)();
- 返回最后一个表达式的值
小括号里面用逗号隔开的表达式，会被依次执行，然后返回最后一个执行的结果。
var a,b,c;
// 3
alert((a=1,b=2,c=3));
// 1
alert(a);
// 2
alert(b);
// 3
alert(c);
利用小括号这个特性，还可以进行匿名函数操作
var a = 0;
var fn = ( a=10, function(){
// 100
alert(a*10);
}
);
fn();
10、eval 语句
evaluate：求值
eval("...");
// 5
alert(eval("2+3"));
// Hello eval!
eval("alert('Hello eval!')");
// Hi baby!
eval(
"(
function say(){
alert('Hi baby!');
}
)()"
);
11、三目运算符
var isTrue = false;
// 错误
alert( isTrue ? "正确" : "错误");
12、for ... in 语句
- 遍历出一个对象的所有属性
<html>
<head>
<meta http-equiv="Content-Type" content ="text/html; charset = utf-8"/>
<title>DumpTest</title>
</head>
<body>
<div id = "myDiv">
<p>我来风自来，</p>
<p>我去云自归。</p>
</div>
<button onclick="testDump()">测试 dump</button>
</body>
</html>
<script type="text/javascript">
function dump(obj) {
var win = window.open('','dump','');
var temp = [];
for(var p in obj){
temp.push(p);
}
temp.sort();
var str = "<table border=1>";
for(var i=0; i<temp.length; i++){
str += "<tr><td>" + temp[i] + "</td><td>" + obj[temp[i]] + "</td></tr>";
}
str += "</table>";
win.document.body.innerHTML = str;
}
function testDump() {
var div = document.getElementById('myDiv');
dump(div);
}
</script>
13、Ext.apply() 属性拷贝
Ext.onReady(function() {
var p1 = {name:'小明',age:23};
var p2 = {};
Ext.apply(p2,p1);
// {"name":"小明","age":23}
alert(Ext.encode(p2));
});
- 源码：
Ext.apply = function(o, c, defaults) {
if(defaults) {
Ext.apply(o, defaults);
}
if(o && c && typeof c == 'object') {
for(var p in c) {
o[p] = c[p];
}
}
return o;
}
14、vith 语句
<html>
<head>
<meta http-equiv="Content-Type" content ="text/html; charset = utf-8"/>
<title>with</title>
<style type="text/css">
.myDiv{
width: 100px,
height: 100px,
background-color:#00ff00;
}
</style>
</head>
<body>
<div id = "myDiv">
</div>
<button onclick="change()">修改</button>
</body>
</html>
<script type="text/javascript">
// <div id = "newId" class = "myDiv">
function change() {
with(myDiv) {
id = "newId";
className = "myDiv";
}
}
</script>
尽量不要用
with
