Array API

2019-02-15  本文已影响0人  嘤嘤嘤998

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()

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

上一篇下一篇

猜你喜欢

热点阅读