JavaScript 数组Api总结

最新推荐文章于 2021-12-01 22:02:35 发布
最新推荐文章于 2021-12-01 22:02:35 发布
阅读量276 收藏 2
点赞数 1
分类专栏： web前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47259149/article/details/109843676
版权

JavaScript Array

一、基础Api

1.concat()
方法用于合并两个或多个数组
不会改变现有数组，返回新的数组

var  arr = [1, 2, 4]; 
var arr2 = [3, 5, 7];
var arr3 = arr.concat('10', arr2)
console.log(arr3) // [1, 2, 4, "10", 3, 5, 7]

2.slice()
返回一个从开始到结束（不包括结束下标）选择的数组
不会改变现有数组，返回新的数组

var colors = ['red','green','blue','black','white'];
var colors2 = colors.slice(1)   //green,blue,black,white
var colors3 = colors.slice(1,4) //green,blue,black

3.splice()
始终会返回一个数组，包含从原始数组中删除的项，如果未更改，则返回空数组
①、删除 ：需指定两个参数，要删除的第一项位置和要删除的项数
②、插入：需提供3个参数，起始位置，要删除的项数，要插入的项（多个项加，项，项，….）
③、替换：需提供3个参数，起始位置，要删除的项，要替换的项（删除项数==新增项数）
改变现有数组，返回新的数组

var colors = ['red','green','blue'];

var removed = colors.splice(0,1);
console.log(colors);      //["green", "blue"]
console.log(removed);     //["red"]

var removed = colors.splice(1,0,'black');
console.log(colors);     //["green", "black", "blue"]
console.log(removed);    // 返回空数组

var removed = colors.splice(0,2,'yellow','white');
console.log(colors);     //["yellow", "white", "blue"]
console.log(removed);    //["green", "black"]

4.join()
使用特定符号分割

var colors = ['red','green'];
var str = colors.join(.) // 'red.green'

5.push()
将传入值添加到数组的末尾，并返回长度
改变现有数组，返回新的数组长度

var arr = [1, 2, 4]; 
var key = arr.push(10)
console.log(arr) // [1, 2, 4, 10]
console.log(key) // 4

6.pop()
删除并返回原数组最后一项
改变现有数组，返回最后一项

var arr = [1, 2, 4]; 
var key = arr.pop()
console.log(arr) // [1, 2]
console.log(key) // 4

7.shift()
移除并返回原数组中第一项
改变现有数组，返回第一项

var arr = [1, 2, 4]; 
var key = arr.shift(10)
console.log(arr) // [2, 4]
console.log(key) // 1

8.unshift()
在原数组顶部添加项 并返回现数组长度
改变现有数组，返回现数组长度

var arr = [1, 2, 4]; 
var key = arr.unshift('xiaoming')
console.log(arr) // ["xiaoming", 1, 2, 4]
console.log(key) // 4

9.reverse()
反转原数组

var arr = [1, 2, 9, 4]; 
arr.reverse() // [4, 9, 2, 1]

10.toString()
将函数对象转换为字符串

var arr = [1, 2, 9, 4]; 
var str = arr.toString() // "1,2,9,4"

11.toLocaleString()
将函数对象转换为字符串

var person1 = {
    toString: function(){
        return 'pp';
    },
    toLocaleString:function(){
        return 'oo';
    }
}

var person2 = {
    toString: function(){
        return 'op';
    },
    toLocaleString:function(){
        return 'po';
    }
}
alert([person1,person2]);   //pp,op
alert([person1,person2].toString());    //pp,op
alert([person1,person2].toLocaleString());  //oo,po

12.sort(funciton)
将函数对象转换为字符串
funciton必须为一个函数
空||a-b升序 b-a降序

var arr = [1, 2, 9, 4]; 
var str = arr.sort() // 1,2,4,9

function order(a,b) {
	return b - a 
}
arr.sort(order)	 //9,4,2,1

二、查找Api

13.indexOf(item, start)
返回数组中某个指定的元素位置,没找到指定元素则返回 -1
item: 必须,查找的元素;
start: 可选,取值是 0 到 stringObject.length - 1

var arr = ["Banana", "Orange", "Apple", "Mango"]; 
var str = arr.indexOf("Apple"); // 2

14.lastIndexOf(item, start)
原理同indexOf，起始方向相反

15/16.find/findIndex((item, index,array), thisValue) es6
找到满足条件的第一个元素/元素下标返回，未找到则返回underfined/-1
item: 必须,当前元素;
index: 当前元素索引
array: 实参数组
thisValue: 可选， 传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

var ages = [3, 10, 18, 20];
var age = ages.find((item,index,arr) => {
return item >= 18  //18

return item >= 30  //undefined
})

var ageIdnex = ages.findIndex((item,index,arr) => {
return item >= 18  //2

return item >= 30  //-1
})

三、迭代Api （不会改变原数组）

17.every（function（(item,index,array), thisValue）{…}）
对数组中的每一项都运行给定的函数，每一项运行正确返回true，or >false
形参同上

var arr = [1,2,3,4,5]
var bool = new Boolean
bool = arr.every(function(item,index,array){
return item > 0  // true
})
bool = arr.every(function(item,index,array){
return item < 2  // false
})

18.filter（function（(item,index,array), thisValue）{…}）
给原数组运行特定的函数，返回 判定为true 的项组成的新的数组
形参同上

var numbers=[1,2,3,4,5,4,3,1];
var filterResult = numbers.filter(function (item, index, array) {
return (item > 2); 
})
console.log(filterResult); //[3,4,5,4,3]

19.forEach（function（(item,index,array), thisValue）{…}）
对数组中的每一项运行给定的函数。这个方法没有返回值
形参同上

var numbers=[1,2,3,4,5,4,3,1];
var sum = 0;
var forEachResult = numbers.forEach(function (item, index, array) {
array[index] == item; //true
sum += item;
})
console.log(sum)  //23

20.map（function（(item,index,array), thisValue）{…}）
对数组每一项运行给定的函数，返回执行后结果组成的数组
形参同上

var numbers=[1,2,3,4,5,4,3,1];
var mapResult = numbers.map(function (item, index, array) {
return item * 2;
})
console.log(mapResult); //[2,4,6,8,10,8,6,2]

21.some（function（(item,index,array), thisValue）{…}）
*对数组中的每一项运行给定的函数，如果该函数对任一项返回t则返回true
形参同上

var numbers=[1,2,3,4,5,4,3,1];
var someResult = numbers.some(function (item, index, array) {
return (item > 2);
})
console.log(someResult); //true

四、汇总Api

22/23.reduce/reduceRight（function（(total, item, index, array), initialValue）{…}）
对数组每一项运行给定的函数，返回执行后结果组成的数组
total: 必须。初始值，或计算后的返回值
initialValue: 可选。传递给函数的初始值
item、index、array 同上

var arr = [1, 2, 3, 4, 5];
var sumReduce = arr.reduce(function (prev, item, index, array) {
//prev 为截至到当前元素之前的临时汇总值
return prev + item
});
console.log(sumReduce) //15

reduceRight（） 累加方向相反

五、其他Api

24.keys（） es6
从数组 fruit 创建一个数组迭代对象， 该对象包含了数组的键
一个新的 Array 迭代器对象 下标

var arr = ['a', 'b', 'c'];
var arr1 = array1.keys();

for (var key of arr1) {
  console.log(key); // 0  1  2
}
||
arr1.next() //{value: 0, done: false}
arr1.next() //{value: 1, done: false}
arr1.next() //{value: 2, done: false}
arr1.next() //{value: underfined, done: true}

25.entries（） es6
返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
与keys()用法相似 返回值

var a = ['a', 'b', 'c'];
var iterator = a.entries();

console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c’]
for of 循环
var a = ['a', 'b', 'c'];
var iterator = a.entries();

for (let e of iterator) {
  console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

26.values（） es6
返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
与keys()用法相似 返回值

var a = ['a', 'b', 'c'];
var iterator = a.values();

console.log(iterator.next()); // {value: "a", done: false}
console.log(iterator.next()); // {value: "b", done: false}
console.log(iterator.next()); // {value: "c", done: false}
for of 循环
var a = ['a', 'b', 'c'];
var iterator = a.values();

for (let e of iterator) {
  console.log(e);
}
// a
// b
// c

27.copyWithin(target, start, end) es6
方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
target:必填， 复制到指定的目标索引位置
start: 复制到指定的目标索引位置（不包含所指）
target: 复制到指定的目标索引位置（不包含所指）

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]//

28.fill(value, start, end) es6
方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
target: 必填，填充值
start:可选， 填充起始位置
end: 填充结束位置 默认最后，实际end-1


var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr1.fill(7)
// 7,7,7,7,7,7,7,7,7,7,7

var arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr4.fill(7, 2)
// 1,2,7,7,7,7,7,7,7,7,7

var arr6 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr6.fill(7, 2, 5)
//1, 2, 7, 7, 7, 6, 7, 8, 9, 10, 11

29/30.flat(deep)/flatMap( ) es6
方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
deep: ··concat 操作次数


var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

31.flatMap( deep)
它与 map 和 深度值1的 flat 几乎相同，效率高一点

var arr1 = [1, 2, 3, 4];
 
arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]
 
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
 
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

六、静态Api

32.Array.from()
将一个类数组对象或者可遍历对象转换成一个真正的数组
最基本的要求就是具有length属性的对象
依据实参length、相应下标返回新的数组
可进行类map操作

//字符串转数组
Array.from('abc') //['a','b','c']

//类数组转数组
//实例1
var arrLike = {
	0: 'Gry',
	1: '88',
	3: 'Apple'
	length: 3
}
var arr = Array.from(arrLike) // ["Gry", "88", "undefined"]
//实例2
var arrLike = {
	0: 'Gry',
	1: '88',
	2: 'Apple'
}
var arr = Array.from(arrLike) // []
//实例3
var arrLike = {
	name: 'Gry',
	age: '88',
	favoriteFood: 'Apple',
	length: 3
}
var arr = Array.from(arrLike) // [undefined, undefined, undefined]

//类map操作
var arr = [1,2,3,4,5]
var fromArr = Array.from(arr, item =>  item * 2)
console.log(fromArr) // [2, 4, 6, 8, 10]

var likeArr = {
 1: 10,
 2: 20,
 0: 30,
 3: 40,
 'length': '3'
}
var fromArr = Array.from(likeArr, item =>  item * 2)
console.log(fromArr) // [60, 20, 40]

33.Array.isArray(item)
用于确定传递的值是否是一个数组
item： 需判断的值

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

32.Array.of()
将传入的参数转换为数组
任意个参数，将按顺序成为返回数组中的元素

Array.of(3);       // [3]
Array.of(1, 4, 3)  // [1, 4, 3]
小张撸代码
关注
专栏目录
数组（array）
weixin_58343052的博客
12-07 639
数组
Array-----[ ? ]
weixin_44954172的博客
11-08 255
描述 JavaScript Array类是一个全局对象，用于构造数组。是高级的，类似列表的对象 数组是类列表对象，其原型具有执行遍历和变异操作的方法。JavaScript数组的长度及其元素的类型均未固定。由于数组的长度可以随时更改，并且数据可以存储在数组中的非连续位置，因此不能保证JavaScript数组密集。这取决于程序员如何选择使用它们。通常，这些是方便的特性；但是，如果这些功能对于您的特定...
Array [] 数组
ZJLOVE的博客
08-12 2万+
※ Array 数组 数组是指一组数据的集合，（容器）数组中的每个数据称为元素。在Java中，数组也是Java对象。数组中的元素可以是任意类型(包括基本类型和引 用类),但同一个数组里只能存放类型相同的元素。长度不可变，构建时会有默认值（JVM)创建数组大致包括如下步骤： . 声明一个数组类型的引用变量，简称为数组变量； . 用new语句构造数组的实例。new语句为数组分配内存，并且为数组...
Array
sleepwalker_1992的专栏
06-20 183
检测是否是个数组IE8不支持HTML5，IE9支持部分
Javascript之高级数组API的使用实例
10-17
filter()方法是JavaScript数组的另一个重要API，它允许我们创建一个新的数组，该数组只包含满足特定条件的原数组元素。在处理工资数组时，filter()方法可以用来过滤掉超过2000的工资条目。这样，我们可以轻松地创建...
JavaScript 数组api
github_37519401的博客
06-01 282
JavaScript 数组api
javascript常用的数组API
bdh123b的博客
12-01 391
数组是我们在编程中，使用最为广泛的数据结构，在很多编程语言里面都内置许多对数组进行操作的API，极高的提高编程效率。在这里主要介绍一下JavaScript数组里面常用的API。 1.push() 压入元素，直接改变原数组，返回值为改变后的数组。 var arr = [1,2]; arr.push(3); arr.push(4); console.log(arr); //输出:[1,2,3,4] 2.pop() 从末尾弹出元素，直接改变原数组，返回的值是弹出的元素。 var arr = [1,2,3]; v
JavaScript 数组API与对象方法实战解析
本文主要探讨了JavaScript中的对象方法，特别是数组API，同时也涵盖了DOM操作、日期函数、字符串函数、数学函数和浏览器特性函数等多个方面。以下是对这些知识点的详细说明： 1. **数组API** - `push`: 向数组末尾...
数组（Array）
晚风
06-30 318
数组也是一个对象，它和我们普通对象功能相似，也是用来存储一些值的，不同的是普通对象是使用字符串作为属性名的，而数组是使用数字作为索引操作元素 索引：从0开始的整数就是索引 数组的存储性能要比普通对象好，在开发过程中我们经常使用数组来存储一些数据 使用typeof检查一个数组时，会返回object 使用构造函数创建数组对象 var arr = new Array(); 使用构造函数创建数组时，...
数组
xingweiyang的博客
08-31 153
**数组** 特点： 1、数组是存储在连续内存块中的元素集合 2、一个数组中只能放相同的数据类型 3、第一个元素的索引为0 数组的创建： 在Java中，创建数组有两个步骤： 声明一个对数组的引用； 使用new关键字初始化数组，并指定数组的大小。 声明时： 数据类型+[ ]+名字（一维） 数据类型+[ ...
Array 数组
Matrix
01-03 363
Array 数组 数组（Array）是一种线性表数据结构.它用一组连续的内存空间,来存储一组具有相同类型的数据. 线性表数据结构:素之间是简单的线性关系, 每个元素至多有一个前继元素, 至多有一个后继元素(首位和末位只是单向的).像线段一样, 可以从入口或出口无限增减元素的数据结构. 包括: 数组,链表、队列、栈等 连续的内存空间, 保证数组的数据都连续的分布在物理介质上 存储的数据具有相同类型...
数组是什么？
NEXTLJP的博客
10-29 7440
最近在学习数据结构中的矩阵压缩存储的时候涉及到了许多有关数组的操作。在使用数组的时候更是对数组这个东西不知所云，以下是我对其的一下理解。 首先第一个问题：数组是一种类型吗？       想来回答这个问题就必须来从编译原理的角度来说类型是什么，类型是
数组（Array)——数组介绍
热门推荐
Sun.ME的博客
02-12 12万+
Arrays(数组) 数组是一个固定长度的存储相同数据类型的数据结构，数组中的元素被存储在一段连续的内存空间中。它是最简单的数据结构之一，大多数现代编程语言都内置数组支持。 为何使用数组存储一堆变量 与单独为每一个元素声明一个变量名相比，我们可以使用数组的索引值访问数组中的每一个元素。 例如：我们需要实现一个系统来存储办公室所有员工的年龄，传统的存储方式如下： 我们为办公室的每一个员工创建一...
JavaScript数组API详解与常用操作
本文档主要介绍了JavaScript中常用的数组API，这些API提供了对数组进行增删改查以及操作的重要工具，有助于开发者更高效地处理数据。 首先，我们来看如何定义和操作数组。在JavaScript中，可以使用`new Array()`来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值