今天就接着昨天接着说了。上来老师就介绍了函数内this丢失如何解决的办法，我说起来可能不是那么直观，直接上代码了。

函数方法

const lufthansa = {
    airline: 'Lufthansa',
    iataCode: 'LH',
    bookings: [],
    book(flightNum, name) {
        console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    }
}

const book = lufthansa.book
book(222, 'abcd')

输出结果

这里就是this出了问题，当把book函数赋值给另一个函数时，this会出现找不到的情况。解决办法就会引出我们第一个函数方法。

call()

const lufthansa = {
    airline: 'Lufthansa',
    iataCode: 'LH',
    bookings: [],
    book(flightNum, name) {
        console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    }
}
const abcdef = {
    airline: 'abcdef',
    iataCode: 'AC',
    bookings: [],
}
const book = lufthansa.book
book.call(lufthansa, 222, 'abcd')
book.call(abcdef, 333, 'qwer')

输出结果

用call()第一个参数标注好了this需要指向的对象，问题就迎任而解了，深知它还可以指向不同对象，只要对象有对应的key值。

apply()

const lufthansa = {
    airline: 'Lufthansa',
    iataCode: 'LH',
    bookings: [],
    book(flightNum, name) {
        console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    }
}
const book = lufthansa.book
const lufthansaArr = [222, 'abcd']
book.apply(lufthansa, lufthansaArr)

返回的结果和call()返回的一样，不同点在于apply()第二个参数一定要是数组，老师极力推荐使用call()方法，此方法只是了解即可。

bind()

const lufthansa = {
    airline: 'Lufthansa',
    iataCode: 'LH',
    bookings: [],
    book(flightNum, name) {
        console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode} ${flightNum}`);
    }
}
const book = lufthansa.book
const bookTTT = book.bind(lufthansa)
bookTTT(222, 'abcd')

返回结果也与call()相同，只不过此方法是先约定好this所指向的对象，如果遇到调用次数多的情况，此方法更加合适且清晰，如果只是少此调用，call()是不错的选择。

数组方法进阶

在之前我们说过一部分数组的方法，在这里再补充一点，并且再深入一点。

slice() && splice()

let arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr.slice(2));
console.log(arr);
console.log(arr.splice(2));
console.log(arr);

输出结果

根据输出结果能够很容易看出来两者的区别和联系，他们两个都可以截取数组，用法相同。不同点在于slice()截取时并不会影响原数组，而splice()会影响原数组。

let arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr.slice(2, 3));
console.log(arr);
console.log(arr.splice(2, 1));
console.log(arr);

输出结果

这里可能大家就有点疑惑了。其实也很好理解。slice()里面带的两个参数，前面是决定元素起始索引，后面是结束索引，但是后面的索引对应的元素不会被截取。而splice()里面带的两个参数，前面是决定元素起始索引，后面是从起始索引开始往后要截取几位。还是比较好理解的。

reverse()

let arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr.reverse());
console.log(arr);

输出结果

我们能很清楚的知道reverse()是反转数组，并且他会影响到原来的数组

concat()

let arr = ['a', 'b', 'c', 'd', 'e']
let arr2 = ['f', 'j', 'h', 'i', 'j']
console.log(arr.concat(arr2));
console.log([...arr, ...arr2]);

输出结果

concat()就是合并数组，用扩展运算符也可以达到相同的结果，看个人喜好和需求决定去使用哪种方法。

at() 这是ES2022新添加的方法

let arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr[0]);
console.log(arr.at(0));
console.log(arr[arr.length - 1]);
console.log(arr.at(-1));

输出结果

和原来的数组索引取对象很相似，只不过去最后一位时，at()方法看起来更加简洁，而且at()会和很多方法结合起来使用更加便利。

forEach 这是目前js中遍历数组最常用的方法

let arr = ['a', 'b', 'c', 'd', 'e']
arr.forEach((mov, index, arr) => {
  console.log(mov, index, arr);
})

输出结果

遍历数组过后，forEach会给我们三个参数，第一个是每一项的value，第二个是每一项的索引，第三个是整个数组。

总结

今天函数方法和数组方法，并且做了一些相应的练习，数组还有三个重要方法map(),filter(),reduce()会在明天进行详述，今天也就到这了。虽然看我们现在的一切都像徒劳，但终究会在未来某个时间给予我们回报的。努力的人，运气都会好的。

第十六天前端浅记录

函数方法

数组方法进阶

总结