js基础进阶

首先声明本次随笔大部分来源于huizhi网，单纯用于自己记笔记

1 数据类型

数据类型分为：基础类型和对象类型。

基础类型：Number、String、Boolean、Null、Undefined

对象类型：object

JavaScript不支持创建任何自定义的类型，所有的值都是上述中六种数据类型之一

1.1 number 类型 包括浮点类型和NaN(Not a Number)

1.2 string 类型

1.3 转移字符

1.4 boolean 类型 返回只有true 和 false （注意 一定是小写）

1.5 Null 和 undefined

Null和Undefined类型都只有唯一的特殊值,即null和undefined。不过null是关键字而undefined不是。

你也可以认为undefined是表示系统级的、出乎意料的或类似错误的值的“空值”；而null表示程序级的、意料之中的值的“空值”。如果你想吧两者赋值给变量或者属性等，最好的选择是null

2 对象(类似于python的字典)

对象（object）是JavaScript的基本数据类型之一。对象是一种复合值：它把多个值（原始值或者其他对象）聚合在一起，可以通过名字访问这些值。对象也可看做是 属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象 看成是从字符串到值的映射。

2.1 创建对象

2.1.1 方式一 使用new操作符后跟object 构造函数

var obj = new Object(); 
obj.name = "MangGuo"; 
obj.age = 25;

2.2.2 方式二 使用对象字面量表示法

var obj = {
    name : "MangGuo", //name是属性名，"MangGuo"是值
    age : 25
}

在对象字面量中，使用逗号来分隔不同的属性，因此"mangGuo"后面是一个逗号。但是，在age属性的值25的后面不能添加逗号，因为age是这个对象的最后一个属性。

使用对象字面量创建对象需要注意：当属性名中含有空格、特殊字符或者是保留字的时候一定要加上引号,其他情况下可加可不加。如下

var obj = {
    "name" : "huizhi",<br>    "hui zhi" : "hubwiz", //属性名中有空格
    "hui-zhi" : "hubwiz", //属性名中有特殊字符
    "for" : "baoliuzi"     //属性名是保留字
}
document.write(obj.name);  //输出obj对象属性名为name的值

2.2 访问属性

访问对象的属性有两种方式：点或者中括号操作符。点操作符在我们上一页当中已经应用到了。

var cat = {
    "name": "tom",
    "sex": "man",
    "color": "yellow"
}
var name1 = cat.name; //通过点操作符来访问对象属性
var name2 = cat["name"]; //通过中括号操作符来访问对象属性

2.3 删除属性

语法：delete 对象名.属性名;

2.4 hasOwnProperty()函数

对象是属性的集合，我们经常会检测集合中成员的所属关系——判断某个属性是否属于某个对象。这个时候就用到了我们前文提到的：hasOwnProperty 函数。

语法：object.hasOwnProperty(proName);

2.5 原型

每一个对象都连接到一个原型对象，并且可以从中继承属性。所有通过字面量创建 的对象都具有同一个原型对象，并可以通过Object.prototype获取对原型 对象的引用。通过new关键字后跟构造函数创建的对象的原型，就是构造函数的prototype 属性的值。

比如通过new Object()创建的对象和字面量创建的对象一样也继承自 Object.prototype。

var sum = {
  name: "汇智网",
  type: "加法"
}
Object.prototype.add = function(){
  alert("原型对象的方法");
}
sum.add(); // =>原型对象的方法

2.6 遍历属性

我们除了检测属性的存在，我们还经常对属性进行遍历。通常我们会用：for/in

for / in 语句可用来遍历一个对象的所有属性名。它会将所有的属性（包括函数和原型中的属性）

var cat = {
    "name": "小白",
    "type": "汇智网",
    "eat": function(){
    alert("吃老鼠");
    }
}
Object.prototype.color = "白色";
var name;
for(name in cat){
    document.write(cat[name] + "
");
}

3 数组

3.1 创建数组

Array类型是Javascript中比较常用的类型，它和其他语言的数组有很大的区别，虽然它们数组的数据都是有序列表。但是JavaScript的数组可以保存任意类型的数据（包括它本身）。且大小是动态的，可以随着数据的添加而自动增长。

3.1.1 创建的第一种方式

var arr = new Array();
var arr = new Array("cat","dog","mouse");

3.1.2 创建的第二种方式

var arr = [];
var arr = ["cat", "dog", "mouse"];

3.2 数组长度 每个数组都有一个长度，要想获得这个长度，我们通过数组的length属性来获取。 length属性值代表数组中元素的个数

3.3 稀疏数组

稀疏函数就是从0开始的不连续索引的数组。

var arr = new Array(3);
arr.length; // 
arr[0] = 1;
arr[100] = 98;
arr.length; //length为101

3.4 遍历数组

数组就是对象，所以我们可以用 for/in 来遍历数组。可惜 for/in 不能保证属性的顺序，但是大多数情况下都希望按照 阿拉伯数组顺序来产生元素。

要想解决这个问题，我们可以用最常规的 for 来遍历数组。如下示例：

var arr = [1,22,3,333,322,444];
 
for(var i = 0;i < arr.length; i++){
    document.write("第" + i + "元素：" + arr[i] + "
");
}

4 函数

4.1 第一种创建方式 函数声明

alert(sum(3,11));  //弹出14
function sum(x, y) {
    return x + y;
}

4.2 第二种创建方式 函数表达式

alert(sum(3,11);   // unexpected identifier 意外标识符错误
var sum = function (x, y) {
    return x + y;
}

语法: var funcName = fucntion(参数){ 代码 }

两种方式都定义了一个函数，那它们两者的区别是什么？

上述中第二段代码运行会产生错误，因为在执行到函数所在的语句之前，变量sum 中不会保存有对函数的引用；而且由于第一行代码就会报错，也不会执行到下一行。

 4.3 函数的调用方式

4.3.1 方法调用模式 当一个函数被保存为对象的一个属性时，我们称它为一个方法， myObj.sum();

4.3.2 函数调用模式 函数调用模式即通常的函数调用，属于全局性调用， sum(x, y);

4.3.3 函数调用模式JavaScript中函数还可以是构造器. 将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字

var add = function() {
    this.name = "汇智网";
    this.sum = function (a, b){
        return a + b;
    }
}
// 构造器调用模式
var obj = new add(); //obj是一个对象
obj.sum(1,2);  //=>3

上述中的代码创建了一个构造函数add，然后使用构造函数创建对象obj。这里使用了new关键字。然后使用对象调用sum()方法。

4.3.4 JavaScript中函数也是对象，也可以拥有方法。其中call()和apply()用来间接的调用函数。称之为apply调用模式。

apply方法让我们构建一个参数数组传递给调用函数。它也允许我们选择this的值。 apply方法接收两个参数，第一个是要绑定给this的值，第二个就是一个参数数组。

语法：函数名.apply(对象, 参数数组);

var add = function (a, b) {
    return a + b;
}
 
add.apply(null,[1,2]);  //=>3

call方法与apply方法类似，区别在call第二参数不是一个数组而是需要列举出来。比如上述中的代码用call方法来实现，如下

var add = function (a, b) {
    return a + b;
}
add.call(null,1,2); //=>3