Javascript 中的 Array 操作

khs1994 发布于2019-08-21 10:43 / 448人阅读

摘要：语法函数的几个参数含义上一次执行函数后返回的值当前数组元素值当前数组元素索引遍历的数组对象第一次调用函数时，如果有值，则为，为数组第一个元素。

Javascript 中的 Array 操作

在各种语言中，数组总是一个比较重要的数据结构，Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地让我们操作 Array 中的元素，下面我们就来看看这些操作方法。

Array 之基本操作

在基本操作部分，我们约定，加粗的方法可以改变数组本身，其余方法不改变。

1、 Array 创建

利用字面量创建 Array （推荐）： var arr = [];

利用 Array 对象创建 Array： var arr = new Array([length]);//可以指定数组长度，注意不是数组上限；

利用 Array 对象创建 Array： var arr = new Array(value1, value2, value3, …);
注意：Javascript 中 Array 中的元素不要求类型一致；

2、 Array 访问元素

var value = arr[index];

Array.slice(start[, end]);//从 start 位置开始截取原数组至 end （不包括 end 位置），返回截取的数组。若省略 end ，则截取 start 位置后所有元素；

3、 Array 添加与删除元素 在数组末尾添加或删除元素：

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

Array.pop();//移除数组最后一个值，并返回该元素值；

在数组开始添加或删除元素：

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

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

在任意位置添加或删除元素：

Array.splice(pos, 0, value1, value2, value3, ...);//从数组 pos 位置开始删除 0 个元素，并在删除的位置插入value1, vlaue2, vlaue3…，并返回一个空数组；

Array.splice(pos, count);//从数组 pos 位置开始删除 count 个元素，

4、 Array 合并

Array.concat(para);// para 可以为数组或元素值，也可以为两者组合，将所有元素连接成一个数组，返回连接好的数组；

5、 Array 字符串化

Array.join(sperator);//返回由数组元素组成并由 seperator 分隔的字符串。若 seperator 为空，则默认以 “,” 连接；

Array.toString()和Array.toLocaleString();//返回由数组元素组成并由“,”分隔的字符串（不常用）；两种方法的区别在于 toLocaleString() 会转变为本地环境字符串（如Date.toLocalString() 会转化为当地时间格式的字符串），toString() 则转为传统字符串； Array 的这两种方法用法无区别；

6、 Array 排序

Array.reverse();//颠倒数组中的元素；

Array.sort();//按字符编码进行排序，支持自定义排序函数;

7、 Array 查找

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

lastIndexOf()//返回在数组中搜索到的与给定参数相等的元素的最后（最大）索引。

8、其他函数

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

云服务器服务器托管 javascript中的 webrtc中的优化操作 js中的异步操作 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86057.html

JS淬炼: Array进阶

摘要：的这种实现方式导致了一些尴尬问题，比如删除元素元素遍历。后面的参数被忽略掉了，表示并没有要插入的元素。其实，的本质是跟踪中的，并始终保持值是。这时候，虽然不大可能，可能会在中间某个中被用户重新定义。但是在上进行这种操作是很糟糕的。在Javascript中，array是一个类数组的object。顾名思义，它能够在一个变量上存储多个值。数组是值的有序集合。每个值叫做一个元素，而每个元素...

jimhs 2019-08-22 10:45 评论0 收藏0
JavaScript 在 V8 中的元素种类及性能优化

摘要：常规元素，不能表示为或双精度的值。元素种类可从过渡转变为。这是一个简化的可视化，仅显示最常见的元素种类只能通过格子向下过渡。目前有种不同的元素种类，每种元素都有自己的一组可能的优化。再次重申更具体的元素种类可以进行更细粒度的优化。原文：Elements kinds in V8 JavaScript 对象可以具有与它们相关联的任意属性。对象属性的名称可以包含任何字符。JavaScrip...

UsherChen 2019-08-21 16:40 评论0 收藏0
学习笔记: JS数组

摘要：数组元素甚至可以是对象或其它数组。它执行的是浅拷贝，这意味着如果数组元素是对象，两个数组都指向相同的对象，对新数组中的对象修改，会在旧的数组的相同对象中反应出来。 JS中的数组是弱类型的，数组中可以含有不同类型的元素。数组元素甚至可以是对象或其它数组。JS引擎一般会优化数组，按索引访问数组常常比访问一般对象属性明显迅速。数组长度范围 from 0 to 4,294,967,295(2^...

archieyang 2019-08-20 16:32 评论0 收藏0
JavaScript面向对象编程——Array类型

摘要：中并没有明确的数组数据类型。返回数组对象的原始值。专门用于筛选出数组中符合函数判断条件的元素组成的心数组。专门用于对原数组中每个元素执行相同的函数对象规定的操作。概述一维数组数组是一个有序的数据集合，可以通过数组名称和索引进行访问。JavaScript中并没有明确的数组数据类型。二维数组数组是可以嵌套的，这就意味着一个数组可以作为一个袁旭被包含在另一个数组里面。利用JavaS...

DirtyMind 2019-08-26 12:16 评论0 收藏0
array数组类型

摘要：中并没有明确的数组数据类型。创建一维数组具有以下几种方式二维数组数组是可以嵌套，这就意味着一个数组可以作为一个数组被包含在另外一个数组里面。利用这个特点，创建二维数组，即数组的数组。删除数组的最后一个元素并返回删除的元素。 Array 概述一维数组数组是一个有序的数据集合，可以通过数组名称和索引进行访问。JavaScript中并没有明确的数组数据类型。创建一维数组具有以下几种方式：...

lemanli 2019-08-26 12:16 评论0 收藏0