JavaScript基础、技巧、防坑

1.使用var定义的是局部变量,不使用var定义的是全局变量

      function test(){
        //全局变量污染
        name = "Tomcat";
      }
      function show(){
        alert(name);
      }
      test();
      show();

运行结果
这里写图片描述
2.两种方式定义对象和数组

    var obj = new Object();
    obj.name = 'cat';
    obj.age = 22;
    alert(obj.name+'-'+obj.age);

    var person = {};
    person.name = 'lili';
    person.age = 25;
    alert(person.name+'-'+person.age);

    var arr = new Array();
    for(var i = 0;i<5;i++){
       arr.push(i);
    }
    alert(arr.toString());

    var array = [];
    for(var i =0;i<5;i++){
      array.push(i);
    }
    alert(array.toString());

运行结果
这里写图片描述
这里写图片描述
3.javascript内置对象
(1)Number
alert(10/3);小数的最后一位是5
这里写图片描述
alert((10/3).toFixed(2));
这里写图片描述
(2)String对象

   function testSubstr(){
      var result = "Hello World!";
      alert(result.substr(0, 5)); // Hello
      alert(result.indexOf("W")); // 6
    }
    testSubstr();
    截取出来的结果包含0这个位置,不包含5这个位置。

4.等值判定
==是值相等。而===严格值相等,除了值相等之外还必须类型相同
true、1、false、0、null、undefined、NaN
alert(true==1); // true
alert(true !== 1); // true
alert(false == 0); // true
alert(false !== 0); //true
alert(null == undefined); // true
alert(null !== undefined); //true
NaN和谁都不等,和自己也不等。
6. !操作符
对任意东西取两次非,就会收获一个布尔值。
alert(!!obj); // true
如果原来的对象非空,最终收获true; 否则最终收获false。
0、null、undefined、”“、NaN等取反操作为true
7.||运算符

  function genObj(id){
     obj.id = id||'id1001';
   }

如果传入的值不合法(0、null、undefined、”“、NaN)之一,则最终obj对象的Id属性值为id1001.
该”穿越”操作主要用来参数过滤和容错处理,把默认值放到最后一个即可保证一定不会出现参数错误。
8.类型转换
(1).字符串优先

   var result = "1"+6;
   alert(result); // 16

任意对象和字符串“相加“总是尝试进行字符串连接操作。

   var array=[1,2,3,4];
   alert(array+",5"); //1,2,3,4,5

JS会首先强行调用array.toString(),把array转换成字符串,然后进行字符串连接。

   var peop = {10:"Hello World!"};
   alert(peop["10"]); // Hello World!

对象的Key总是字符串。
9.typeof 语句

 var People = function(name){
     this.name = name;
  }
 var pOne = new People("smith");
 alert(typeof pOne); // object

typeof能准确判断的类型有number、string、boolean、object、function、undefined。对于自己定义的类,不能做出确切判断。
10.delete运算符

  var obj = {name:'tom',age:23};
  alert(obj.name); //tom
  delete(obj.name);
  alert(obj.name); // undefined

delete可以把一些不需要的属性动态的删除掉。
11.[]运算符

 alert(obj.name); // tom
 alert(obj['name']); // tom

因为”.”操作符是有局限的,只有确切知道对象中有个name属性时,才能用它获取这个属性。如果不确定对象中有哪些属性,可以用[]运算符,然后配合for…in语法进行属性枚举。

  for(var attr in obj){
    console.info(attr+'-'+obj[attr]);
   }
  // name-tom
  // age-23

12.()运算符
(function(){alert(‘hello world!’)})(); // hello world!
自执行的函数。
13.eval语句

  alert(eval("2+3")); // 5
  eval("alert('Hello World!')"); // Hello World!

14.三目运算符

  var isTop = false;
  var result = isTop?"置顶":"不置顶";
  alert(result); //不置顶

15.for…in语句

    // 将对象source的属性拷贝给target
    function copyAttr(target,source,defaults){
      if(defaults){
           copyAttr(target, defaults);
       }
       if(target&&source&&typeof source=='object'){
         for(var p in source){
           target[p] = source[p];
         }
       }
       return target;
    }
    var tar = {};
    var result = copyAttr(tar, person);
    alert(result.name+"-"+result.age); // lili-25

16.命名空间
为了减少命名冲突(全局变量污染),我们通常都会尽量减少使用全局变量。
更好的办法是将变量和方法定义在不同的命名空间中。这种方法的实质就是只定义一个全局变量,并将其他变量和方法定义为该变量的属性。

    var App = App||{};
    App.copyAttr = function(target,source,defaults){
      if(defaults){
           copyAttr(target, defaults);
       }
       if(target&&source&&typeof source=='object'){
         for(var p in source){
           target[p] = source[p];
         }
       }
       return target;
    }
    var result = App.copyAttr({}, person);
    alert(result.name+"-"+result.age); // lili-25
var App = App||{};
App.namespace = function(name) {
        var paths = name.split(".");
        var current = App;
        for ( var i in paths) { //i是数组的索引
            if (!current[paths[i]]) {
                current[paths[i]] = {};
            }
            current = current[paths[i]]; //current = {};
        }
    };
    App.namespace("dom.style");
    相当于
    var App = {
        dom : {
            style : {}
        }
    }

参考《EXT江湖》、《JavaScript面向对象》

猜你喜欢

转载自blog.csdn.net/linjinhuo/article/details/78566573