这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战
this关键字
this是一个特殊的变量,它始终指向当前对象,和Java中的this略有不同,Java中的this是对类的当前实例引用,用于区分重复变量名。
this的指向需要视情况而定,如果已对象的方式调用,这个函数的this指向被调用的对象。
如果是单独调用函数,该函数的this会指向JS中的全局对象即window。在strict模式下,他会指向undefined。
要保证
this指向正确,必须用obj.xxx()的形式调用
在函数内部定义的函数,this指向的是undefined。
为了能够使用this,我们通常在这个函数内捕获当前的this
'use strict';
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
};
xiaoming.age(); // 31
改变this指向
我们可以通过apply改变this的指向,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};
xiaoming.age(); // 31
getAge();//NaN
getAge.apply(xiaoming, []); // 31, this指向xiaoming, 参数为空
或者与apply类似的是call,他们的区别:
apply()把参数打包成数组传入call()把参数按顺序传入
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5
我们还可以通过apply改变函数的行为
var count = 0;
var oldParseInt = parseInt; // 保存原函数
window.parseInt = function () {
count += 1;
return oldParseInt.apply(null, arguments); // 调用原函数
};
这样通过count变量,我们就可以记录调用了多少次parseInt函数
Map Reduce
一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。
map和reduce函数接受的就是一个函数,他们被定义在Array中。
通俗的讲
-
map相当于把数组中的每一个值,一个一次的传递给接收参数中的函数执行,得到的值放入新的函数中,最终返回一个新的函数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] -
reduce相当于传递参数函数得到的结果以及下一个数组元素。[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x + y; }); // 25
filter
filter和map雷士,也是接受一个函数为参数。
和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
filter中接收的函数可以有多个参数
var arr = ['A', 'B', 'C']; var r = arr.filter(function (element, index, self) { console.log(element); // 依次打印'A', 'B', 'C' console.log(index); // 依次打印0, 1, 2 console.log(self); // self就是变量arr return true; });
sort
sort函数是定义在Array里的函数。sort有一个默认的排序方法并且sort也是一个高阶函数,可以接受函数为参数。
Array的sort()方法默认把所有元素先转换为String再排序,会导致'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
arr.sort(function (x, y) { // 通过传入函数,进行想要的正确排序
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
console.log(arr); // [1, 2, 10, 20]
升序 : x > y 返回 1,x < y 返回 -1,等于返回 0
其他Array的高阶函数
every()方法可以判断数组的所有元素是否满足测试条件find()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefinedfindIndex()和find()类似,也是查找符合条件的第一个元素,不同之处在于findIndex()会返回这个元素的索引,如果没有找到,返回-1forEach()和map()类似,它也把每个元素依次作用于传入的函数,但不会返回新的数组。forEach()常用于遍历数组,因此,传入的函数不需要返回值
声明
文章为本人学习JS笔记,用于快速查找知识点以及总结