JS学习快速笔记(三)

120 阅读3分钟

这是我参与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

filtermap雷士,也是接受一个函数为参数。

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也是一个高阶函数,可以接受函数为参数。

Arraysort()方法默认把所有元素先转换为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()方法用于查找符合条件的第一个元素,如果找到了,返回这个元素,否则,返回undefined
  • findIndex()find()类似,也是查找符合条件的第一个元素,不同之处在于findIndex()会返回这个元素的索引,如果没有找到,返回-1
  • forEach()map()类似,它也把每个元素依次作用于传入的函数,但不会返回新的数组。forEach()常用于遍历数组,因此,传入的函数不需要返回值

声明

文章为本人学习JS笔记,用于快速查找知识点以及总结

文章引用:www.liaoxuefeng.com/wiki/102291…