JavaScript基础篇(一)— — 基础

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

慕课网《深入浅出JS》：http://www.imooc.com/learn/277

JavaScript 标准参考教程（阮一峰）http://javascript.ruanyifeng.com/

廖雪锋：http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

《Javascript权威指南》

一、 == 与 ===的区别

  1、==可以允许进行类型转换后进行比较

  2、===只用于浅拷贝的对象进行比较，引用地址不一致则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

六、判断数据类型的方法

  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

七、arguments是什么数据类型

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

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

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

九、apply方法

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

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

如果把最后一行代码修改为

o.m.apply(o); //运行结果就变成了1，证明了这时this代表的是对象o。

十、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.pus().apply(arr1,arr2)

  11、将NodeList转换成数组。使用[ ].slice.call(elements)或者Array.from(elements);

参考:《12个JavaScript技巧》http://www.w3cplus.com/javascript/12-extremely-useful-hacks-for-javascript.html