javascript进阶(二)— — 小技巧合集

一、 == 与 ===的区别

  1、==可以允许进行类型转换后进行比较
  2、===只用于浅拷贝的对象进行比较，引用地址不一致则false
   

  

[12] === 12    // is false
[12]  == 12    // is true
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' === false  // is false

二、判断数据类型的方法

  1、toString.call 准确判断数据类型：Array、String、Object、RegExp、Number、Undefined、Null、Date、Boolean、Function
  2、typeof 粗略判断数据类型：undefined、number、string、boolean、object、function
  3、instanceOf 判断一个函数是否为另一个函数的实例。
  4、Array.isArray ECMAScript 新增方法，用来判断参数是否为数组。
  5、isFinite 判断是否为Infinity和null

三、JSON.parse()和JSON.stringify()

  1、parse用于从一个字符串中解析出json对象
  2、stringify()用于从一个对象解析出字符串
  

四、什么是原型和原型链

  Javascript中，所有数据类型都有一个默认属性：proto，这个叫做原型。而该隐藏属性中又包含其它数据对象的proto，这种原型的嵌套包含就叫原型链。

五、prototype属性有什么作用

  本质上，js中的基本数据类型Functoin/Object/Number/Array/boolean都是函数。（用typeof 可以查看）而prototype是函数的专有属性，当该函数被实例化时，prototype属性可以被实例所继承，即

var fun = function(){};
var a = new fun();
a.__proto__ === fun.prototype; //true

在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

六、arguments是什么数据类型

函数内部自动创建的一个类似数组的获取函数实参的隐藏对象。

七、js中有函数作用域但是没有块级作用域。

var x = 1;
console.log(x); // 1
if (true) {
    var x = 2;
    console.log(x); //2
}
console.log(x);// 2

八、使用自调用函数IIFE

函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ）。格式如下：

(function(){
    // 置于此处的代码将自动执行
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

九、apply方法

  apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

    var x = 0;
　　function test(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test; // o = { x: 1; test: function() { alert(this.x); } }
　　o.m.apply(); //apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为o.m.apply(o); //运行结果就变成了1，证明了这时this代表的是对象o。

b、数组之间追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
//array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100]

十、bind方法

  fun.bind(thisArg[, arg1[, arg2[, …]]])
  bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
  bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

《bind方法详情参考》
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

---

call、apply、bind

// 显示绑定；call、apply、bind
var sayName = function(lang1, lang2) {
  console.log('My name is ' + this.name + ', and i know ' + lang1 + '、' + lang2);
};
var me = {
  name: 'Tyler',
  age: 25,
};
var languages = ['java', 'javascript'];
//call调用函数，需一个个传参
sayName.call(me, languages[0], languages[1]);
//apply调用函数，数组传参
sayName.apply(me, languages);
//bind后返回一个新函数
var newFn = sayName.bind(me, languages[0], languages[1]);
newFn();//执行bind返回的新函数

---

Javascript小技巧合集
  1、使用!!操作符转换布尔值。查验变量是否存在或者变量的值是否有一个有效值，只要变量的值为:0、null、” “、undefined或者NaN都将返回的是false，反之返回的是true。
  
  2、使用+将字符串转换成数字。只适合用于字符串数据，否则将返回NaN
  
  ~~ 相当于 parseInt
  

  3、并条件符
    如果你有一段这样的代码：

if (conected) {
    login();
}

    你也可以将变量简写，并且使用&&和函数连接在一起，比如上面的示例，可以简写成这样：

conected && login();

    如果一些属性或函数存在于一个对象中，你也可以这样做检测，如下面的代码所示：

user && user.login();

  4、使用 || 运算符。在ES6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性，可以使用 || 操作符，并且将将默认值当做第二个参数传入。如果第一个参数返回的值为false，那么第二个值将会认为是一个默认值。如下面这个示例：

function User(name, age) {
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27

var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

  5、检测对象中属性。当你需要检测一些属性是否存在，避免运行未定义的函数或属性时，例如：

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

  6、在循环中缓存array.length

   7、获取数组中最后一个元素 Array.prototype.slice(begin,end)
  8、数组截断。array.length = x; 来截断数组
  9、替换所有。使用正则表达多中的/g来模拟replaceAll()函数功能
  10、合并数组。Array.push().apply(arr1,arr2)
  11、将NodeList转换成数组。使用[ ].slice.call(elements)或者Array.from(elements);
  12、优化层叠的条件判断
if 、else if、…、else或如下switch

switch(color) {
  case 'black':
    printBlackBackground();
    break;
  case 'red':
    printRedBackground();
    break;
  case 'blue':
    printBlueBackground();
    break;
  case 'green':
    printGreenBackground();
    break;
  default:
    printYellowBackground();
}

可通过一个object优化如下:

var colorObj = {
  'black': printBlackBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};
if (color && colorObj.hasOwnProperty(color)) {
  colorObj[color]();
}

  13、检测一小段javascript的效率
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"); // Outputs: Array initialize: 0.711ms

---

参考链接:
《12个JavaScript技巧》

http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html