首页 > 其他分享 >JS中数组22种常用API总结，slice、splice、map、reduce、shift、filter、indexOf......

JS中数组22种常用API总结，slice、splice、map、reduce、shift、filter、indexOf......

时间：2023-06-28 10:46:46浏览次数：40  
标签：map arr slice console log 元素 数组 splice const

一、引言

在前端开发中，数组是一种常见且重要的数据结构。数组提供了许多便捷的方法来操作和处理其中的数据。本文将简单介绍前端中数组常用的API，包括添加、删除、截取、合并、转换等操作。

二、push() 方法和 pop() 方法

push()方法用于向数组末尾添加一个或多个元素，并返回修改后的数组的新长度。

const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

pop() 方法用于删除并返回数组的最后一个元素。

const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

三、shift() 方法和 unshift() 方法

shift() 方法用于删除并返回数组的第一个元素。

const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //苹果

unshift() 方法用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4

四、slice() 方法

slice() 方法用于从数组中截取指定位置的元素，返回一个新的数组。

语法是：array.slice(start, end)，其中，start和end都是可选参数，表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组，包含从start到end（不包括end）的元素。

const names = ['张三', '李四', '王五', '赵六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);

//slice不改变原数组
console.log(names);          //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames);  //[ '李四', '王五' ]
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames3); //[ '王五', '赵六' ]
console.log(slicedNames4); //[ '赵六' ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组

五、splice() 方法

splice() 方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组，它会直接修改原数组。

语法：array.splice(start, deleteCount, item1, item2, ...)

其中，start表示要修改的起始位置，deleteCount表示要删除的元素个数，item1、item2等表示要添加的元素。如果deleteCount为0，则表示只添加元素，不删除元素。

//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被删除的元素
console.log(arr);  //[ 3, 4, 5 ]   该方法会改变原数组

//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了

// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ]  返回被删除的一个元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串

let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被删除的四个元素
console.log(arr4);  //[ 1, 666 ]

六、join() 方法

join() 方法用于将数组中的所有元素以指定的分隔符连接成一个字符串。

const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子

七、concat() 方法

concat() 方法用于合并两个或多个数组，返回一个新的数组。

const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]

八、forEach() 方法

forEach() 方法用于对数组中的每个元素执行一个回调函数。

const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
  console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});

九、map() 方法

map() 方法用于对数组中的每个元素执行一个回调函数，并返回一个新的数组，新数组中的元素为回调函数的返回值。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

十、filter() 方法

filter() 方法用于筛选、过滤数组中符合条件的元素，并返回一个新的数组。

//筛选出偶数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]

十一、reduce() 方法

reduce() 方法是数组对象的一个方法，用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。

语法：array.reduce(callback, initialValue)

该方法接收两个参数，第一个参数是一个回调函数，第二个参数是一个初始值。回调函数中可以接收四个参数，分别是：

  1. accumulator：累加器，用于存储上一次回调函数的返回值或初始值。
  2. currentValue：当前元素的值。
  3. currentIndex：当前元素的索引。
  4. array：数组对象本身。

initialValue是初始值，可选参数。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
  return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15

十二、fill() 方法

JS中的fill方法可以填充一个数组中的所有元素，它会直接修改原数组。

语法：array.fill(value, start, end)

其中，value表示要填充的值，start和end表示要填充的起始位置和结束位置。如果不传入start和end，则默认填充整个数组。该方法返回的是被修改后的原数组。

let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr);  //[ 0, 0, 6, 6, 0 ]

十三、数组查找API

1.includes()方法

includes方法用于检查数组中是否包含某个元素，如果包含则返回 true，否则返回 false。

与 indexOf() 方法不同，includes() 方法不支持指定起始位置，它从数组的开头开始搜索。

const fruits = ['苹果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3));      //true
console.log(fruits.includes(4));      //false

2.indexOf()方法

需要注意的是，indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素，该方法只会返回第一个元素的位置。

此外，indexOf方法还可以接受一个可选的第二个参数，用于指定从哪个位置开始查找。

const fruits = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1));  //2  返回元素下标
console.log(fruits.indexOf('橘子', 3));  //-1  没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //9

3.lastIndexOf()()方法

lastIndexOf() 方法用于查找数组中某个元素最后一次出现的索引（位置），如果找到则返回该索引值，否则返回 -1。

const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1

4.findIndex()方法

findIndex() 方法用于查找数组中满足条件的元素的索引，如果找到则返回该索引值，否则返回 -1。

const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index);   //3  返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1  不存在符合条件的元素

十四、sort() 方法

sort() 方法用于对数组进行原地排序，会直接修改原始数组，而不会创建新的数组。默认情况下，它将数组元素视为字符串，并按照 Unicode 码点进行排序。但是，可以传入自定义的比较函数来实现基于其他规则的排序。

比较函数：比较函数接收两个参数，通常被称为 a 和 b，表示进行比较的两个元素。它应该返回一个负数、零或正数，表示 a 应该在 b 之前、与 b 相同位置还是在 b 之后。比较函数的返回值规则如下：

  1. 如果返回值小于 0，则 a 排在 b 前面。
  2. 如果返回值等于 0，则 a 和 b 的相对位置不变。
  3. 如果返回值大于 0，则 a 排在 b 后面。
const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr);  //[1, 2, 3, 4, 5]

//默认排序（按照 Unicode 码点排序）
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr);  //[ 'a', 'b', 'c', 'f', 'k' ]

//使用比较函数进行自定义排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr);  //[ 1, 2, 10, 13, 26, 66 ]

const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr);  //[ 66, 26, 13, 10, 2, 1 ]

十五、reverse() 方法

reverse() 方法用于反转数组中的元素顺序，即将数组元素进行逆序排列。

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]

十六、toString()和toLocaleString()方法

toString方法将数组转换为一个由数组元素组成的字符串，元素之间用逗号分隔。

const arr = [1, 2, 3, 4, 5];
console.log(arr.toString());  //1,2,3,4,5
const arr2 = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString());  //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arr3.toString());  //a,null,b,c,undefined,d,e

toLocaleString方法将数组转换为一个由数组元素组成的字符串，元素之间同样用逗号分隔，但是它会根据当前环境的语言和地区设置来决定元素的格式。

//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19

const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000

十七、Array.from() 方法

Array.from() 是 JavaScript 中一个用于从类数组或可迭代对象创建新数组的静态方法。它接收一个可迭代对象或类数组的对象，并返回一个新的数组实例。

Array.from(iterable, mapFn, thisArg)

  1. iterable: 必需，一个可迭代对象或类似数组的对象，用于创建新的数组。
  2. mapFn (可选): 一个映射函数，用于对每个元素进行处理后返回新数组中的元素。
  3. thisArg (可选): 可选参数，执行 mapFn 函数时的 this 值。
//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]
//使用类似数组的对象创建数组
const obj = {
  0: "榴莲",
  1: "牛油果",
  2: "蓝莓",
  length: 3
};
const arr = Array.from(obj);
console.log(arr);  //[ '榴莲', '牛油果', '蓝莓' ]
//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]

标签：map,arr,slice,console,log,元素,数组,splice,const
From： https://www.cnblogs.com/caihongmin/p/17510761.html

相关文章

  • C++面试八股文：用过std::set/std::map吗？
    某日二师兄参加XXX科技公司的C++工程师开发岗位第27面：面试官：用过std::set/std::map吗？二师兄：用过。面试官：能介绍一下二者吗？二师兄：std::set是一个有序的集合，其中的元素是唯一的，即每个元素只能出现一次。一般用于去重和自动排序。二师兄：std::map同样是有序组合，只不过它不止有ke......
  • C++面试八股文：用过std::set/std::map吗？
    某日二师兄参加XXX科技公司的C++工程师开发岗位第27面：面试官：用过std::set/std::map吗？二师兄：用过。面试官：能介绍一下二者吗？二师兄：std::set是一个有序的集合，其中的元素是唯一的，即每个元素只能出现一次。一般用于去重和自动排序。二师兄：std::map同样是有序组合，只不过它不止有key......
  • 【Java】讲讲StreamAPI
     预设场景：从Mybatis调用Mapper得到的用户集合List<UserDTO>userList=newArrayList<>(); 常用的几种API用法示例：Map方法，转换为某一个字段的集合：List<Integer>userIdList=userList.stream()/*map转换成某个类型来处理，比如这个场景是为了快速......
  • ConcurrentHashMap并不是绝对线程安全的
    ConcurrentHashMap是线程安全的概念已经深入人心，让我们在使用的时候有些大意了，我也懒得动脑子，直接使用，结果碰到钉子了. 这个问题让我很郁闷，程序逻辑全是对的，但是问题却明明摆在那边，最后怀疑是HashMap的问题。 1.package2.3.import4.import5.import6.7.impor......
  • mapper.xml
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.framework.twm.mapper.St......
  • 基于vue+elementUI使用vue-amap高德地图
    首先，需要去高德地图进行注册一个https://lbs.amap.com/?ref=https://console.amap.com/dev/index，得到一个key然后安装依赖npminstallvue-amap—save在main.js中加入importVueAMapfrom'vue-amap’;Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:'YOUR_KEY’......
  • go：数组和切片、可变长参数、maps、字符串、指针、结构体、方法、接口
    目录数组和切片数组切片可变长参数maps字符串指针结构体方法接口数组和切片数组#1定义，初始化，使用#2数组是值类型数字，字符串，布尔，数组，都是值类型，真正直接存数据切片，map，指针引用类型，是个地址，指向了具体的值#3数组长度#4循环打印数组#5多纬数组#......
  • 【Node】node 报错：tagOffsetsMap[tag] ??= []；...SyntaxError: Unexpected token ，‘??=
    安装的node版本不支持空值赋值运算符(??=)更换合适的node版本就行更多支持请在node.green上查看各种语法支持的版本参考文章NodeJS中的空合并赋值运算符(??=)......
  • Spring Boot 形参Map并没有添加到类似于ModelAndView中，但是却可以页面取到相应的值？
    需求缘起：      有网友留言：感谢讲解，思路很清晰，不过有点疑惑，为什么最后结尾的时候，那个形参Map并没有添加到类似于ModelAndView中，但是页面却可以取到相应的值？ 本节大纲：（1）留言代码翻译（2）问题分析（3）SpringMVC数据模型（4）写法延伸       接下来看下具体的内容：留言代码翻译：我......
  • Mybatis通用Mapper接口扩展
    这里的扩展指的是通用Mapper没有提供的功能，如批量update。例子:类似于生成下面这样的SQL语句：UPDATEtabple_empSETemp_name=?,emp_age=?,emp_salary=?whereemp_id=?;UPDATEtabple_empSETemp_name=?,emp_age=?,emp_salary=?whereemp_id=?;UPDATEtabple_empSETem......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99