JavaScript 对象与函数
欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
- 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
