Array API

作者: 嘤嘤嘤998 | 来源:发表于2019-02-15 14:42 被阅读0次

    map

    map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
    map() 方法按照原始数组元素顺序依次处理元素。
    注意: map() 不会对空数组进行检测。
    注意: map() 不会改变原始数组。

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下:


    image.png
    'use strict';
    
    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]
    console.log(results);
    

    上面代码的JS实现:

    var f = function (x) {
        return x * x;
    };
    
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var result = [];
    for (var i=0; i<arr.length; i++) {
        result.push(f(arr[i]));
    }
    

    求平方根:

    var numbers = [4, 9, 16, 25];
    
    function myFunction() {
        x = document.getElementById("demo")
        x.innerHTML = numbers.map(Math.sqrt);
    }
    输出结果为:2,3,4,5
    

    我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如,把Array的所有数字转为字符串:

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
    

    reduce

    Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:

    [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
    

    比方说对一个Array求和,就可以用reduce实现:

    var arr = [1, 3, 5, 7, 9];
    arr.reduce(function (x, y) {
        return x + y;
    }); // 25
    

    利用reduce()求积:

    'use strict';
    function product(arr) {
        return arr.reduce(function(x , y){   
            return x * y;
        });
    }
    

    把[1, 3, 5, 7, 9]变换成整数13579,reduce()也能派上用场:

    var arr = [1, 3, 5, 7, 9];
    arr.reduce(function (x, y) {
        return x * 10 + y;
    }); // 13579
    

    filter()

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    注意: filter() 不会对空数组进行检测。
    注意: filter() 不会改变原始数组。
    返回数组 ages 中所有元素都大于 18 的元素:

    var ages = [32, 33, 16, 40];
    function checkAdult(age) {
        return age >= 18;
    }
    function myFunction() {
        document.getElementById("demo").innerHTML = ages.filter(checkAdult);
    }
    输出结果为:32,33,40
    

    forEach()

    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
    列出数组的每个元素:

    <button onclick="numbers.forEach(myFunction)">点我</button>
    <p id="demo"></p>
     <script>
    demoP = document.getElementById("demo");
    var numbers = [4, 9, 16, 25];
    function myFunction(item, index) {
        demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
    }
    </script>
    

    计算数组所有元素相加的总和:

    <button onclick="numbers.forEach(myFunction)">点我</button> 
    <p>数组元素总和:<span id="demo"></span></p>
    <script>
    var sum = 0;
    var numbers = [65, 44, 12, 4];
    function myFunction(item) {
        sum += item;
        demo.innerHTML = sum;
    }
    </script>
    

    concat()

    concat() 方法用于连接两个或多个数组。
    array1.concat(array2,array3,...,arrayX)
    该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

    var hege = ["Cecilie", "Lone"];
    var stale = ["Emil", "Tobias", "Linus"];
    var kai = ["Robin"];
    var children = hege.concat(stale,kai);
    //children 输出结果:Cecilie,Lone,Emil,Tobias,Linus,Robin
    

    join()

    join() 方法用于把数组中的所有元素转换一个字符串。
    array.join(separator)

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    
    var energy = fruits.join();
    //energy输出结果:Banana,Orange,Apple,Mango
    
    var energy = fruits.join(" and ");
    //energy 结果输出:Banana and Orange and Apple and Mango
    

    sort()

    sort() 方法用于对数组的元素进行排序。
    array.sort(sortfunction)
    排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。
    注意: 这种方法会改变原始数组!

    var points = [40,100,1,5,25,10];
    points.sort();
    //points输出结果:1,10,100,25,40,5
    
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();
    //fruits 输出结果:Apple,Banana,Mango,Orange
    
    var points = [40,100,1,5,25,10];
    points.sort(function(a,b){return a-b});
    //points输出结果:1,5,10,25,40,100
    

    reverse()

    reverse() 方法用于颠倒数组中元素的顺序。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.reverse();
    //fruits 结果输出:Mango,Apple,Orange,Banana
    

    slice()

    slice() 方法可从已有的数组中返回选定的元素。
    array.slice(start, end) (包括start,不包括end)
    注意: slice() 方法不会改变原始数组。

    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    
    var citrus = fruits.slice(1,3);
    //citrus 结果输出:Orange,Lemon
    
    var fruitsa = fruits.slice(3);
    //fruitsa 结果输出:Apple,Mango
    
    var myBest = fruits.slice(-3,-1);
    //myBest 结果输出:Lemon,Apple
    

    splice()

    splice() 方法用于添加或删除数组中的元素。
    array.splice(index,howmany,item1,.....,itemX)
    注意:这种方法会改变原始数组。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    
    fruits.splice(2,1,"Lemon","Kiwi");
    //fruits 输出结果:Banana,Orange,Lemon,Kiwi,Mango
    
    fruits.splice(2,0,"Lemon","Kiwi");
    //fruits 输出结果:Banana,Orange,Lemon,Kiwi,Apple,Mango
    

    fill()

    fill() 方法用于将一个固定值替换数组的元素。
    array.fill(value, start, end)(包括start,不包括end)

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    
    fruits.fill("Runoob");
    //fruits 输出结果:Runoob,Runoob,Runoob,Runoob
    
    fruits.fill("Runoob", 2, 4);
    //输出结果:Banana,Orange,Runoob,Runoob
    

    toString()

    toString() 方法可把数组转换为字符串,并返回结果。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.toString();
    //fruits将输出:Banana,Orange,Apple,Mango
    

    pop()

    删除数组的最后一个元素并返回删除的元素。

    push()

    向数组的末尾添加一个或更多元素,并返回新的长度。

    shift()

    删除并返回数组的第一个元素。

    unshift()

    向数组的开头添加一个或更多元素,并返回新的长度。

    相关文章

      网友评论

          本文标题:Array API

          本文链接:https://www.haomeiwen.com/subject/hxnpeqtx.html