js小Tips

1、数组插入/删除/替换
插入删除，最常想到的是push,shift
但splice效率会更高

2、多层嵌套if
多层if，且判断是否为具体值时，可以改为switch
但最好用Object方法

if (color) {
  if (color === 'black') {
    A();
  } else if (color === 'red') {
    B();
  } else if (color === 'blue') {
    C();
  } else if (color === 'green') {
    D();
  } else {
    E();
  }
}

var colorObj = {
  'black': A,
  'red': B,
  'blue': C,
  'green': D,
  'yellow': E
};
if (color && colorObj.hasOwnProperty(color)) {
  colorObj[color]();
}

3、undefined,null的区别
undefined是一个全局变量的特殊属性，typeof 也是 undefined。进行数值运算时，undefined是NaN。
null是一个空的对象， typeof 是 object。进行数值运算时，null返回值是0

null是JavaScript的保留关键字，而undefined却不是
undefined 在JSON中不合法，null合法

undefined 表示一个变量没有被定义，或者定义了没有赋值。
null 是用来给变量赋值，表示”没有值”

JavaScript 会给一个没有初始化的变量赋予undefined
JavaScript 从不会将值赋为null,它是被程序员用来指定一个var 没有值。

都是 false
判断变量是否为undefined typeof variable === "undefined"
判断变量是否为null variable === null
互相比较 null == undefined // true
null === undefined // false

4、使用同一个方法处理数组和单一元素
只需要先将它们并成一个数组，然后处理这个数据即可。

function printUpperCase(words) {
  var elements = [].concat(words);
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].toUpperCase());
  }
}

5、快速检测小块代码效率
快速检测javascript代码块的执行效率，我们可以使用 console 方法，比如 console.time(label) 和 console.timeEnd(label)

console.time("Array initialize");
var arr = new Array(100),
    len = arr.length,
    i;
for (i = 0; i < len; i++) {
    arr[i] = new Object();
};
console.timeEnd("Array initialize");

6、concat
concat() 方法用于连接两个或多个数组。
它不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

7、this

// 1
console.log(this); //指向全局对象也就是window
// 包含了prompt alert confirm方法...

// 2
function test() {
  console.log(this);
  this.method = function inner() {console.log(this)};
}; // 这里this也是指向全局对象
test();

//3
var obj = new test(); // 因为用的是构造器，this指向test对象

//4
obj.method(); //方法迫使this指向对象

// 5:使用call或apply迫使this指向明确的值
function foo(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}

var bar = {};
foo.apply(bar, [1, 2, 3]); //第一个参数为this
console.log(bar) // 会输出 a: 1, b: 2, c: 3

foo.call(bar, 4, 5, 6); //同样的效果
console.log(bar) //也会输出a: 4, b: 5, c: 6

关于第二个情况例子：

function test() {
  this.arr = [1,2,4];
  this.message = "I am here";
  this.fun = function() {
      this.arr.forEach(function(item) {
        console.log(this.message); //会输出3次undefined，因为this指向全局对象
    });
  }
}

var t = new test();
t.fun();

//上面例子中，this不会指向test对象，而指向全局对象

//为了避免这种情况，可以使用变量存储器this

//虽然this仍指向全局对象，但是可以使用替代变量

function test2() {
  var self = this;
  self.arr = [1,2,4];
  self.message = "I am here";
    self.fun = function() {
      this.arr.forEach(function(item) {
        console.log(self.message); //会输出I am here 3次
    });
  }
}


var t2 = new test2();
t2.fun();

8、全局变量

for(var i = 0; i < 10; i++) {
    innerLoop();
}

function innerLoop() {
    // 这是个不同的作用域
    for(i = 0; i < 10; i++) { // 缺少var语句，i指向全局作用域
           console.log("this is will show 10 times and not 100.");//只会输出10次
    }
}

这个例子中，你以为会输出100次，实际只会输出10次。
过程是，第一次i=0，进入innerLoop，但innerLoop里的i跟外面i是一个，所以这次进来时，innerLoop的i从0到10执行结束后，返回外面for函数时，i已经变成了10，而不是想象中的1。

9、迭代对象的属性
可以使用Object.keys、Object.entriees或者for循环

function a() {
  this.a= 1;
  this.b = 2;
}

function child() {
  this.c = 3;
  this.d = 4;
}

//child会继承自a
child.prototype = new a();

var obj = new child();

for (var property in obj) { //此方法不仅比Object.keys慢，而且还包含父属性
    console.log(property + ": " + obj[property]);//输出abcd及值
}

for (var property in obj) { //这会返回适合的键，但是仍比Object.keys慢 
    if(obj.hasOwnProperty(property))
        //输出cd及值
        console.log(property + ": " + obj[property]);
}

//下面两种都输出cd及值
Object.keys(obj).map((e) => console.log(`key=${e}  value=${obj[e]}`)); // 最佳的方式
Object.entries(obj).forEach(([key, value]) => console.log(`key=${key} value=${value}`)); // 这也是不错的方法

10、转换数字

var num = "123 456"
Number(num); //NaN  不是想象中的123
parseInt(num); //123
parseFloat(num); //123

11、访问对象的属性，可以 object.atr 或者 object[‘atr’]

12、 删除属性的唯一方法是使用 delete 操作符；设置属性为 undefined 或者null 并不能真正的删除属性， 而仅仅是移除了属性和值的关联。

13、

[] == true ; //false
{} == true ; //false
if([]){
  //true
}
if({}){
  //true
}