不可不知的 JavaScript 数组方法(2)

62 阅读2分钟

1.every()

every()方法会遍历数组的每一项,如果有有一项不满足条件,则表达式返回false,剩余的项将不会再执行检测;如果遍历完数组后,每一项都符合条,则返回true。

<script>
    const isBelowThreshold = (currentValue) => currentValue < 40;
    const array1 = [1, 30, 39, 29, 10, 13];
    console.log(array1.every(isBelowThreshold));
    // 1.html:16 true
</script>

2.filter()

filter() 方法用于过滤数组中的元素,并返回一个新数组。

<script>
    const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);
    // 1.html:16 (3) ['exuberant', 'destruction', 'present']
</script>

3.indexof()

数组调用 indexOf() 方法可返回数组中某个指定的元素位置。 该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。 如果在数组中没找到指定元素则返回 -1。

<script>
    const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
    console.log(beasts.indexOf('bison'));
    // 1.html:15 1
    console.log(beasts.indexOf('bison', 2));
    // 1.html:17 4
    console.log(beasts.indexOf('giraffe'));
    // 1.html:19 -1
</script>

4.reduce()

会遍历数组的每一项,他接收两个参数:第一个参数:每次遍历都会调用的函数,而这个函数有接收四个参数,分别是:前一个值、当前项、项目的索引和数组对象,而这个函数的返回值,回传给下一次遍历时,执行的这个方法的第一个参数。第二个参数:归并基础的初始值。

<script>
    const array1 = [1, 2, 3, 4];
    const initialValue = 0;
    const sumWithInitial = array1.reduce(
        (previousValue, currentValue) => previousValue + currentValue,
        initialValue    ); 
   console.log(sumWithInitial) 
   // 1.html:20 10
</script>

5.reverse()

将一个当前数组对象中的元素按所在位置进行反转。在执行过程中,此函数并不创建新的Array对象,直接在当前对象上进行反转。返回的数组对象就是经过顺序反转后的当前对象。

<script>
    const array1 = ['one', 'two', 'three'];
    console.log('array1:', array1);
    // 1.html:15 array1: (3) ['one', 'two', 'three']
    const reversed = array1.reverse();
    console.log('reversed:', reversed);
    // 1.html: 18 reversed: (3)['three', 'two', 'one']
    console.log('array1:', array1);
    // 1.html: 20 array1: (3)['three', 'two', 'one']
</script>

6.sort()

将根据元素值进行逐位比较,而不是根据字符串的个数进行排序。

<script>
    const months = ['March', 'Jan', 'Feb', 'Dec'];
    months.sort();
    console.log(months);
    // 1.html:16 Array(4)0: "Dec"1: "Feb"2: "Jan"3: "March"length: 4[[Prototype]]: Array(0)
    const array1 = [1, 30, 4, 21, 100000];
    array1.sort();
    console.log(array1);
    // 1.html: 19 Array(5)0: 11: 1000002: 213: 304: 4length: 5[[Prototype]]: Array(0)
</script>

7.toString()

每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖,toString() 返回 “[object type]”,其中 type 是对象的类型。

<script>
    function Dog(name) {
        this.name = name;
    } 
    const dog1 = new Dog('Gabby');
    Dog.prototype.toString = function dogToString() { 
        return `${this.name}`; 
   };
    console.log(dog1.toString());
    // 1.html:21 Gabby
</script>

8.at()

at函数的基本用法 at函数是ES2019中新增的函数,其基本用法如下: array.at(index) 其中,array表示要获取元素的数组,index表示要获取的元素的下标。需要注意的是,inde x可以是负数,表示从数组的末尾开始计算下标。

<script>
    const array1 = [5, 12, 8, 130, 44];
    let index = 2;
    console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
    // 1.html:16 Using an index of 2 the item returned is 8
    index = -2;
    console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
    // 1.html:19 Using an index of -2 item returned is 130
</script>

9.find()

find()方法用于获取数组中符合指定条件的第一个元素,该方法会为数组中的每个元素都调用一次回调函数,通过回调函数来查找符合指定条件的第一个元素。

<script>
    const array1 = [5, 12, 8, 130, 44];
    const found = array1.find(element => element > 10);
    console.log(found);
    // 1.html:16 12
</script>

10.some()

some函数是JS中Array对象的一个方法,其作用是使用指定的函数测试数组中的一些元素,如果有至少一个元素满足测试函数,则返回true;否则返回false。

<script>
    const array = [1, 2, 3, 4, 5];
    const even = (element) => element % 2 === 0;
    console.log(array.some(even));
    // 1.html:16 true
</script>