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
原文地址:https://www.cnblogs.com/loveer/p/11339164.html