Javascript 中的 Array 操纵

Javascript 中的 Array 操纵

在种种语言中,数组老是一个比较主要的数据结构,Javascript 中的 Array 也不破例。Javascript 中的 Array 供应了一系列要领能够更好地让我们操纵 Array 中的元素,下面我们就来看看这些操纵要领。

Array 之基础操纵

在基础操纵部份,我们商定,加粗的要领能够转变数组自身,其他要领不转变。

1、 Array 建立

  1. 应用字面量建立 Array (引荐): var arr = [];

  2. 应用 Array 对象建立 Array: var arr = new Array([length]);//能够指定数组长度,注重不是数组上限;

  3. 应用 Array 对象建立 Array: var arr = new Array(value1, value2, value3, …);
    注重:Javascript 中 Array 中的元素不请求范例一致;

2、 Array 接见元素

  1. var value = arr[index];

  2. Array.slice(start[, end]);//从 start 位置最先截取原数组至 end (不包括 end 位置),返回截取的数组。若省略 end ,则截取 start 位置后一切元素;

3、 Array 增加与删除元素

在数组末端增加或删除元素:

  1. Array.push(value1, value2, vlaue3, …);//将一个或多个元素附加在数组末端,并返回新数组长度;

  2. Array.pop();//移除数组末了一个值,并返回该元素值;

在数组最先增加或删除元素:

  1. Array.unshif(value1, value2, value3, …);//将一个或多个元素附加在数组开首,原数组元素顺次后移,并返回新数组长度;

  2. Array.shift();//移除数组第一个值,并返回该元素值;

在恣意位置增加或删除元素:

  1. Array.splice(pos, 0, value1, value2, value3, ...);//从数组 pos 位置最先删除 0 个元素,并在删除的位置插进去value1, vlaue2, vlaue3…,并返回一个空数组;

  2. Array.splice(pos, count);//从数组 pos 位置最先删除 count 个元素,

4、 Array 兼并

  1. Array.concat(para);// para 能够为数组或元素值,也能够为二者组合,将一切元素衔接成一个数组,返回衔接好的数组;

5、 Array 字符串化

  1. Array.join(sperator);//返回由数组元素构成并由 seperator 分开的字符串。若 seperator 为空,则默许以 “,” 衔接;

  2. Array.toString()Array.toLocaleString();//返回由数组元素构成并由“,”分开的字符串(不经常运用);两种要领的区分在于 toLocaleString() 会转变为当地环境字符串(如Date.toLocalString() 会转化为当地时间花样的字符串),toString() 则转为传统字符串; Array 的这两种要领用法无区分;

6、 Array 排序

  1. Array.reverse();//倒置数组中的元素;

  2. Array.sort();//按字符编码举行排序,支撑自定义排序函数;

7、 Array 查找

  1. indexOf()//返回第一个与给定参数相称的数组元素的索引,没有找到则返回-1。

  2. lastIndexOf()//返回在数组中搜刮到的与给定参数相称的元素的末了(最大)索引。

8、 其他函数

  1. Array.isArray();//推断某个值是不是为数组;

Array 之高等操纵

起首引见 Array 的 5 种迭代函数。这 5 种函数的特点是都有一个 callback 函数,函数会为每一个数组元素挪用一次 callback 函数。可选参数是 thisArg, 作为 callback被挪用时的 this 值,假如没有传入 thisArg 值,则在非严厉形式下将会是全局对象,严厉形式下是 undefined。个中,callback 函数中包括三个参数,分别是当前元素的值、当前元素索引和被遍历的数组。这 5 种函数遍历的元素个数在第一次挪用 callback 函数时就已肯定,即今后纵然增加元素也不会转变遍历次数,未接见到且被删除的值不会被 callback 接见到,未接见到且被修正的元素被修正后,传递给 callback 的值是被修正后的值。

1、 Array.forEach()

遍历并为每一项元素实行一遍 callback 函数。是 5 个函数中唯一一个没有返回值的函数。

var arr = [1, 2, 3];
arr.forEach(function(ele) {
    console.log(ele);
});

运转效果:

1
2
3

2、 Array.map()

遍历并处置惩罚一切元素,返回由每一个 callback 函数返回值构成的新数组。

var arr = [1, 2, 3];
var newArr = arr.map(function(ele) {
    return "element" + ele;
});
console.log(newArr);
console.log(arr);

运转效果:

["element1", "element2", "element3"]
[1, 2, 3]

3、 Array.filter()

遍历一切元素,过滤掉不符合前提(纵然得 callback 返回 false)的元素。

var arr = [1, 2, 3, 11, 12, 13];
var newArr = arr.filter(function(ele) {
    return ele > 10;
});
console.log(newArr);
console.log(arr);

运转效果:


[11, 12, 13]
[1, 2, 3, 11, 12, 13]

4、 Array.every()

遍历一切元素,当一切元素使得 callback 返回 true,则返回 true,不然返回 false。

var arr1 = [9, 12, 13];
var result1 = arr1.every(function(ele) {
    return ele > 10;
});

var arr2 = [11, 12, 13];
var result2 = arr2.every(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运转效果:

[9, 12, 13]
result1:false
[11, 12, 13]
result2:true

5、 Array.some()

遍历一切元素,只需找到一个元素使得 callback 返回 true,则返回 true,不然返回 false。

var arr1 = [1,3,5,7,9];
var result1 = arr1.some(function(ele) {
    return ele > 10;
});

var arr2 = [1,2,3,11];
var result2 = arr2.some(function(ele) {
    return ele > 10;
});

console.log(arr1);
console.log("result1:" + result1);
console.log(arr2);
console.log("result2:" + result2);

运转效果:

[1, 3, 5, 7, 9]
result1:false
[1, 2, 3, 11]
result2:true

6、 Array.reduce()

将数组中的元素从左到右举行缩减,终究缩减为一个值。

Array.reduce()语法:

Array.reduce(function(previousValue, currentValue, index, array){

}, [initialValue]);

callback 函数的几个参数寄义:

  • previousValue:上一次实行 callback 函数后返回的值

  • currentValue:当前数组元素值

  • index:当前数组元素索引

  • array:遍历的数组对象

第一次挪用 callback 函数时,假如 initialValue 有值,则 previousValue 为 initialValue,
currentValue 为数组第一个元素。不然 previousValue 为数组第一个元素,currentValue 为数组第二个元素。

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
});

运转效果:

1
2

再看另一个有 initialValue 的例子:

var arr = ["a", "b", "c"];
arr.reduce(function(pre, cur, ind, array) {
    console.log(ind);
}, "z");

运转效果是:

0
1
2

跟着 ES6 的降生,Array 涌现了更多的要领。考虑到浏览器的兼容性,在运用下面的要领时须要注重所运用的浏览器是不是支撑。

7、Array.from()

将一个类数组对象或可迭代对象转换成实在的数组。

  • 类数组对象: 具有一个 length 属性和多少索引属性的恣意对象

  • 可迭代对象: 你能够从它身上迭代出多少个元素的对象,比方有 Map 和 Set 等(Map 与 Set 均为 ES6 中新的对象)

var arr = Array.from("Hello");
console.log(arr);

运转效果:

[ "H", "e", "l", "l", "o" ]

8、Array.values()

将一个数组转换成一个可迭代的对象,该对象包括数组每一个索引的值。

var arr = ['a', 'b', 'c'];
var obj = arr.values();
for (let letter of obj) {
    console.log(letter);
}

运转效果:

a
b
c
    原文作者:CompileYouth
    原文地址: https://segmentfault.com/a/1190000003832912
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞