JavaScript 对象与函数

Array
Boolean
Date
Math
Number
String
RegExp
Global

前言

在js中什么都是对象（包括函数）。

函数是用来实现具体功能的代码，用一种方式把他们组织起来，就是函数。

对象是有属性和方法的一个东西，在对象中的函数就变成了方法。

this

在方法中，this 指的是所有者对象
单独的情况下，this 指的是全局对象：在浏览器窗口中，全局对象是 [object Window]
在函数中，this 指的是全局对象：function myFunction() {return this;}
在函数中，严格模式下，this 是 undefined
在事件中，this 指的是接收事件的元素：<button onclick="this.style.display='none'">点击来删除我！</button>

全局作用域

不在任何函数内定义的变量就具有全局作用域。

实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上会被绑定到window的一个属性

局部作用域

由于JavaScript的局部变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：

function foo() {

    for (var i=0; i<100; i++) {

        ···

    }

    i += 100;     // 仍然可以引用变量i

}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

function foo() {

    var sum = 0;

    for (let i=0; i<100; i++) {

        sum += i;

    }

    i += 1;    //错误，无法引用

}

解构赋值，直接对多个变量同时赋值

如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：

    let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];

    x; // 'hello'

    y; // 'JavaScript'

    z; // 'ES6'

var person = {

    name: '小明',

    age: 20,

    gender: 'male',

    passport: 'G-12345678',

    school: 'No.4 middle school',

    address: {

        city: 'Beijing',

        street: 'No.1 Road',

        zipcode: '100001'

    }

};

var {name, address: {city, zip}} = person;

对象定义

var person = {

  firstName: "Bill",

  lastName : "Gates",

  id       : 648,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

对象属性

objectName.property           // person.age

objectName["property"]       // person["age"]

objectName[expression]       // x = "age"; person[x]

对象 for...in 循环

for...in语句遍历对象的属性。

for (variable in object) {

    要执行的代码

}

对象方法

请使用如下语法创建对象方法：

methodName : function() { 代码行 }
请通过如下语法来访问对象方法：

objectName.methodName()
如果您访问 fullName 属性时没有使用 ()，则将返回函数定义：

name = person.fullName;

原始数据类型

请使用对象字面量 {} 代替 new Object()。
请使用字符串字面量 "" 代替 new String()。
请使用数值字面量代替 Number()。
请使用布尔字面量代替 new Boolean()。
请使用数组字面量 [] 代替 new Array()。
请使用模式字面量代替 new RexExp()。
请使用函数表达式 () {} 代替 new Function()。

函数定义

function functionName(parameters) {

   要执行的代码

}

函数表达式，在变量中保存函数表达式之后，此变量可用作函数：

var x = function (a, b) {return a * b};

匿名的自调用函数

( function () { document.getElementById("demo").innerHTML = "Hello! I called myself"; } ) ();

箭头函数

不需要 function 关键字、return 关键字和花括号:

// ES5

var x = function(x, y) {

  return x * y;

}

// ES6

var x = (x, y) => x * y;

document.getElementById("demo").innerHTML = x(5, 5);

// 可变参数:

(x, y, ...rest) => {

    var i, sum = x + y;

    for (i=0; i<rest.length; i++) {

        sum += rest[i];

    }

    return sum;

}

map

map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：

function pow(x) {

    return x * x;

}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var results = arr.map(pow);     // [1, 4, 9, 16, 25, 36, 49, 64, 81]

filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

var arr = ['A', '', 'B', null, undefined, 'C', '  '];

var r = arr.filter(function (s) {

    return s && s.trim();     // 注意：IE9以下的版本没有trim()方法

});    // ['A', 'B', 'C']

利用filter，可以巧妙地去除Array的重复元素：

var r = arr.filter(function (element, index, self) {

    return self.indexOf(element) === index;

});

去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。

arguments 对象：arguments 对象包含函数调用时使用的参数数组

函数不会对参数值进行任何检查

如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {

    var i;

    var max = -Infinity;

    for (i = 0; i < arguments.length; i++) {

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}

函数 Call

通过 call()，您能够使用属于另一个对象的方法，调用 person 的 fullName 方法，并用于 person2：

var person = {

  fullName: function(city, country) {

    return this.firstName + " " + this.lastName + "," + city + "," + country;

  }

}

var person1 = {

  firstName:"Bill",

  lastName: "Gates"

}

person.fullName.call(person1, "Seattle", "USA");

apply()方法与call()方法非常相似

Math.max.apply(null, [1,2,3]);     //也会返回 3

不同之处是：

    apply()把参数打包成Array再传入；

    call()把参数按顺序传入。

    Math.max.apply(null, [3, 5, 4]);     // 5

    Math.max.call(null, 3, 5, 4);     // 5

巴特西