javaScript实用方法第三篇（.fill .filter .find）

---

一、.fill()方法

1.简介

.fill() 方法用于将一个固定的值赋值给数组中从起始索引到终止索引内的所有元素。如果终止索引被省略，则填充到数组的末尾。

2.语法

    <script>
        arr.fill(value, [start], [end])
    </script>

参数
value：要填充的固定值。
start（可选）：起始索引，默认值为0。
end（可选）：终止索引（不包括），默认值为数组的长度。
返回值
.fill() 方法会修改原数组，并且返回该数组。

3.示例

1.填充整个数组

    <script>
        let arr = [1, 2, 3, 4, 5];
        arr.fill(0);
        console.log(arr); // 输出: [0, 0, 0, 0, 0]
    </script>

2.填充部分数组：

    <script>
        let arr = [1, 2, 3, 4, 5];
        arr.fill(0, 1, 4);
        console.log(arr); // 输出: [1, 0, 0, 0, 5]
    </script>

3.使用非数字值：

    <script>
        let arr = [1, 2, 3, 4, 5];
        arr.fill('x');
        console.log(arr); // 输出: ['x', 'x', 'x', 'x', 'x']
    </script>

4.使用对象：

    <script>
        let arr = [1, 2, 3, 4, 5];
        arr.fill({ value: 0 });
        console.log(arr); // 输出: [{value: 0}, {value: 0}, {value: 0}, {value: 0}, {value: 0}]
    </script>

4.使用场景

这个方法在需要初始化数组或重置数组元素时非常有用。

5.使用注意

如果start或end索引超出数组的边界，它们会被自动调整到数组的有效范围内。
.fill() 方法会直接修改原数组，而不是创建一个新的数组。

二、.filter()方法

1.简介

.filter() 方法用于创建一个新数组，其包含通过所提供函数实现的测试的所有元素。这个方法不会改变原数组。

2.语法

    <script>
        arr.filter(callback(element[, index[, array]], thisArg))
    </script>

参数
callback：用于测试每个元素的函数。它会被调用，传入以下参数：
element：数组中正在处理的当前元素。
index（可选）：当前元素的索引。
array（可选）：调用 .filter() 的数组本身。
thisArg（可选）：执行回调时使用的 this 值。

返回值
返回一个新的数组，包含通过测试的所有元素。

3.示例

1.基本使用：

    <script>
        let numbers = [1, 2, 3, 4, 5];
        let evenNumbers = numbers.filter(function (number) {
            return number % 2 === 0;
        });
        console.log(evenNumbers); // 输出: [2, 4]
    </script>

2.使用箭头函数：

    <script>
        let numbers = [1, 2, 3, 4, 5];
        let evenNumbers = numbers.filter(number => number % 2 === 0);
        console.log(evenNumbers); // 输出: [2, 4]
    </script>

3.使用 this 参数：

    <script>
        let isEven = {
            isMultipleOf: function (divisor) {
                return this % divisor === 0;
            }
        };
        let numbers = [1, 2, 3, 4, 5];
        let evenNumbers = numbers.filter(function (number) {
            return this.isMultipleOf(number, 2);
        }, isEven);
        console.log(evenNumbers); // 输出: [2, 4]
    </script>

4.过滤空字符串：

    <script>
        let strings = ['apple', '', 'banana', 'carrot', '', 'date'];
        let nonEmpty = strings.filter(Boolean);
        console.log(nonEmpty); // 输出: ['apple', 'banana', 'carrot', 'date']
    </script>

5.过滤对象数组：

    <script>
        let people = [
            { name: 'Alice', age: 21 },
            { name: 'Bob', age: 25 },
            { name: 'Charlie', age: 18 }
        ];
        let adults = people.filter(person => person.age >= 21);
        console.log(adults);
        // 输出: [{ name: 'Alice', age: 21 }, { name: 'Bob', age: 25 }]
    </script>

4.使用场景

.filter() 方法是处理数组和数据筛选的强大工具，它在处理集合数据时非常有用。

5.使用注意

.filter() 方法不会修改原数组，它返回一个新数组。
回调函数中的 this 值默认为 undefined，除非你通过 thisArg 参数指定了另一个值。
如果回调函数不返回任何值，或者返回 undefined、null、false、0、NaN 或者 ‘’（空字符串），那么当前元素将不会被包含在新数组中。

三、.find()方法

1.简介

.find() 方法用于在数组中查找符合测试函数的第一个元素。这个方法会返回数组中符合条件的第一个元素的值，如果没有找到符合条件的元素，则返回undefined。

2.语法

    <script>
        arr.find(callback(element[, index[, array]])[, thisArg])
    </script>

参数
callback：用于测试每个元素的函数。它会被调用，传入以下参数：
element：数组中正在处理的当前元素。
index（可选）：当前元素的索引。
array（可选）：调用 .find() 的数组本身。
thisArg（可选）：执行回调时使用的 this 值。
返回值
返回数组中满足提供的测试函数的第一个元素的值。如果没有符合条件的元素则返回undefined。

3.示例

1.基本使用

    <script>
        let numbers = [1, 2, 3, 4, 5];
        let found = numbers.find(function (number) {
            return number > 3;
        });
        console.log(found); // 输出: 4
    </script>

2.使用箭头函数：

    <script>
        let numbers = [1, 2, 3, 4, 5];
        let found = numbers.find(number => number > 3);
        console.log(found); // 输出: 4
    </script>

3.使用 this 参数：

    <script>
        let isDivisibleBy = {
            divisor: 2,
            isDivisible: function (value) {
                return value % this.divisor === 0;
            }
        };
        let numbers = [1, 2, 3, 4, 5];
        let found = numbers.find(function (number) {
            return this.isDivisible(number);
        }, isDivisibleBy);
        console.log(found); // 输出: 2
    </script>

4.在对象数组中查找：

    <script>
        let people = [
            { name: 'Alice', age: 21 },
            { name: 'Bob', age: 25 },
            { name: 'Charlie', age: 18 }
        ];
        let found = people.find(person => person.age === 25);
        console.log(found);
        // 输出: { name: 'Bob', age: 25 }
    </script>

5.找不到元素：

    <script>
        let numbers = [1, 2, 3, 4, 5];
        let found = numbers.find(number => number > 5);
        console.log(found); // 输出: undefined
    </script>

4.使用场景

.find() 方法是处理数组和数据检索的强大工具，它在需要检索单个符合条件的元素时非常有用。

5.使用注意

.find() 方法不会修改原数组。
回调函数中的 this 值默认为 undefined，除非你通过 thisArg 参数指定了另一个值。
如果数组为空，或者没有任何元素满足测试函数，.find() 返回 undefined。