首页 > 其他分享 >JS中数组的22种常用API

JS中数组的22种常用API

时间：2023-07-01 18:13:54浏览次数：34  
标签：arr const log 22 元素 JS API 数组 console

一、引言

前端开发中，数组是一种常见且重要的数据结构。数组提供了许多便捷方便的方法来操作和处理其中的数据。本文将简单介绍前端开发中数组的常用API。

二、22种常用方法

2.1、push() 和 pop()

  1. push()方法用于向数组末尾增加一个元素，并返回数组最新的长度。
const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4
  1. pop()方法用于从末尾移除最后一个元素。
const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

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

  1. shift()方法用于删除数组第一个元素，并返回删除的哪个元素。
const arr = ['张三', '李四', '王五'];
const firstArr = arr.shift();
console.log(arr);      //[ '李四', '王五' ]
console.log(firstArr );  //张三
  1. unshift()方法用于向数组开头增加一个或多个元素，并返回数组最新的长度。
const arr = ['张三', '李四'];
const newLength = arr .unshift('王五', '赵六');
console.log(arr );        //[ '王五', '赵六', '张三', '李四' ]
console.log(newLength); //4

2.3、slice()方法和splice()方法

  1. slice()方法用于从数组中截取指定位置中的元素，返回一个新数组。
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时就输出空数组
  1. splice()方法用于从数组中删除、替换或添加元素，并返回被删除的元素组成的数组，它会直接修改原数组。
//实现删除
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(arrsplice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了

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

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

2.4、join()方法和concat()方法

  1. join()方法用于将数组中的所有元素以指定的分隔符进行分隔并连接成一个字符串进行返回。
const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子
  1. concat()方法用于合并两个或多个数组，返回一个新数组。
const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruitsconcat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]

2.5、forEach()方法和map()方法

  1. forEach()方法用于遍历数组，对每一个元素执行一个回调函数。
const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});
  1. map()方法用于对数组进行遍历操作，对每一个元素执行一个回调函数，并返回一个新的数组，新数组中的元素为回调函数返回的值。
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

2.6、filter()方法和reduce()方法

  1. filter()方法用于筛选、过滤数组中符合条件的元素，并返回一个新数组。
const numbers = [1, 2, 3, 4, 5]; 
//筛选出偶数
const evenNumbers = numbers.filter(num => num % 2 === 0); 
console.log(evenNumbers); //[ 2, 4 ]
  1. reduce()方法用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。
//第一个参数是一个回调函数，第二个参数是一个初始值。
//回调函数中接收四个参数，分别是：
//1. accumulator：累加器，用于存储上一次回调函数的返回值或初始值。
//2. currentValue：当前元素的值。
//3. currentIndex：当前元素的索引。
//4. array：数组对象本身。
array.reduce(callback, initialValue)
//示例
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15

2.7、fill()方法

  1. fill()方法用于对一个数组按照指定值进行填充，它会直接修改原数组。
//语法：array.fill(value, start, end)
//其中value表示要填充的值，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 ]

2.8、includes()方法和indexOf()方法

  1. includes()方法用于检查数组中是否包含某个元素，如果包含则返回 true，否则返回 false。
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
  1. 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

2.9、lastIndexOf()方法和findIndex()方法

  1. lastIndexOf() 方法用于查找数组中某个元素最后一次出现的索引（位置），如果找到则返回该索引值，否则返回 -1。
const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1
  1. 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  不存在符合条件的元素

2.10、sort()方法和reverse()方法

  1. sort()方法用于对数组进行原地排序，会直接修改原始数组，而不会创建新的数组。可以传入自定义的比较函数来实现基于其他规则的排序。
//比较函数：比较函数接收两个参数，通常被称为 a 和 b，表示进行比较的两个元素。它应该返回一个负数、零或正数，表示 a 应该在 b 之前、与 b 相同位置还是在 b 之后。比较函数的返回值规则如下：

//如果返回值小于 0，则 a 排在 b 前面。
//如果返回值等于 0，则 a 和 b 的相对位置不变。
//如果返回值大于 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 ]
  1. reverse()方法用于反转数组中的元素顺序，即将数组元素进行逆序排列。
const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]

2.11、toString()方法和toLocaleString()方法

  1. 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(arrtoString());  //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arrtoString());  //a,null,b,c,undefined,d,e
  1. toLocaleString 方法将数组转换为一个由数组元素组成的字符串，元素之间同样用逗号分隔，但是它会根据当前环境的语言和地区设置来决定元素的格式。
//根据当前环境的语言和地区设置来决定元素的格式
const arr = [1234789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,4789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arrtoLocaleString();
console.log(str); //1,000,2,000,3,000

2.12、Array.from()方法

  1. Array.from()方法用于从类数组或可迭代对象创建新数组的静态方法。它接收一个可迭代对象或类数组的对象，并返回一个新的数组实例。
//Array.from(iterable, mapFn, thisArg)
//1. iterable: 必需，一个可迭代对象或类似数组的对象，用于创建新的数组。
//2. mapFn (可选): 一个映射函数，用于对每个元素进行处理后返回新数组中的元素。
//3. thisArg (可选): 可选参数，执行 mapFn 函数时的 this 值。

//使用类似数组的对象创建数组
const obj = {
0: "榴莲",
1: "牛油果",
2: "蓝莓",
length: 3
};
const arr = Array.from(obj);
console.log(arr);  //[ '榴莲', '牛油果', '蓝莓' ]

//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]

//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]

标签：arr,const,log,22,元素,JS,API,数组,console
From： https://www.cnblogs.com/spella/p/17519549.html

相关文章

  • js 使用get 接口如何传递 特殊字符给后端，类似 # 等特殊字符
    今天开发遇到个问题。用户输入了#怎么把文本完整的传递给后端如果直接传输就会出现#之后的东西全都没有，解决方法如下：1，使用其他特殊字符代替，使用replaceAll  //使用replaceAll替换所有#，然后后端再替换回来letnewStr=newQue.replaceAll('#','&')缺点，会......
  • JS传wav文件给后台
    <buttonid="recordButton">开始录制</button>letrecordButton=document.getElementById('recordButton');letmediaRecorder;//媒体实例letchunks=[];//语音文件letisRecording=false;//是正在录制还是停止录......
  • 【哈佛cs50 2022】lab3 & problemSet3【ing】
    （1）lab3如何测试每个代码运行所需要的时间？time./sort1sorted5000.txt sort1sort2sort3sorted5000.txt0.037s0.020s0.045ssorted10000.txt0.058s0.050s0.151ssorted50000.txt1.244s2.238s5.637sreversed5000.txt0.088s0.026s0.045srever......
  • js-遍历两个对象数组，属性值相等的一项合并属性并生成新数组
    operatData.value.seriesList=res.data.seriesList.reduce((accumulator,current)=>{constexisting=userOptionsColor.find(item=>item.name===current.name)if(existing){accumulator.push({...current,...existing})......
  • 使用uni.app 里面 uni.chooseLocation api 打开地图位置 踩坑 踩坑 地图搜索 和列
    用 Android基座可以正常使用真机调试也可以用就是打包的时候打包完毕弹出地图之后搜索一直转圈  地图列表没有东西也是一直转圈里面有好多踩坑点  太狗了  要打包的 包名  和 dcloud里面的包名 和如果用高德地图里面的  packagename三......
  • Nodejs开发web后台
    Nodejs开发web后台expressexpress介绍express是一个基于Node.js平台的极简、灵活的WEB应用开发框架，官方网址简单来说，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）express使用express本身是一个npm包，所以可以通过npm安装#初始化一个项目npmini......
  • 什么是 SAP UI5 的 cldr json 文件
    SAPUI5是一个基于HTML5的UI开发框架，它允许开发人员构建功能丰富、易于维护和满足企业需求的应用程序。它是一个集成了各种UI控件、工具和库的强大框架，旨在简化企业级应用程序的开发过程。SAPUI5的一个重要特性是对国际化和本地化的支持，这意味着开发人员可以构建能够适应......
  • SAP UI5 manifest.json 文件的 config 区域
    SAPUI5是一种用于构建企业级Web应用的HTML5用户界面技术。它提供了一套丰富的控件库，并支持MVC（模型-视图-控制器）架构、双向数据绑定等特性。manifest.json是SAPUI5应用的元数据文件，包含了应用的配置信息、依赖项、模型、路由等内容。在manifest.json文件中，config区......
  • Node.js 模块化机制原理探究
    前言Node应用是由模块组成的，Node遵循了CommonJS的模块规范，来隔离每个模块的作用域，使每个模块在它自身的命名空间中执行。CommonJS规范的主要内容：模块必须通过module.exports导出对外的变量或接口，通过require()来导入其他模块的输出到当前模块作用域中。CommonJS模块的特......
  • python -- json与dict
    一、python中的dict 与json1、dict 的表现形式    dict中的key和value，不论写的是 双引号 还是 单引号，最后 python的dict都会转成 单引号。2、jsonjson是一个字符串，是一种数据交换格式，不同于dict属于python的基础数据类型。js......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99