js中数组的方法,32种方法
数组的32中方法=>{
1.push(): 在数组末尾添加一个或多个元素,并返回修改后的数组。
let fruits = ['apple', 'banana', 'orange'];
fruits.push('mango');
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'mango']
2.pop(): 移除数组的最后一个元素,并返回被移除的元素。
let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.pop();
console.log(removedFruit); // 输出: 'orange'
console.log(fruits); // 输出: ['apple', 'banana']
3.shift(): 移除数组的第一个元素,并返回被移除的元素。
let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.shift();
console.log(removedFruit); // 输出: 'apple'
console.log(fruits); // 输出: ['banana', 'orange']
4.unshift(): 在数组的开头添加一个或多个元素,并返回修改后的数组。
let fruits = ['apple', 'banana', 'orange'];
fruits.unshift('mango', 'grape');
console.log(fruits); // 输出: ['mango', 'grape', 'apple', 'banana', 'orange']
5.concat(): 合并两个或多个数组,并返回新的合并后的数组,原始数组不受影响。
let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'mango'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // 输出: ['apple', 'banana', 'orange', 'mango']
console.log(fruits); // 输出: ['apple', 'banana']
6.slice(): 返回一个新数组,包含从开始索引到结束索引(不包括结束索引)的元素。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
let fruits = ['apple', 'banana', 'orange', 'mango'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 输出: ['banana', 'orange']
const arr = [1,3,5,7,9,11];
const arrCopy = arr.slice(1);
const arrCopy2 = arr.slice(1,4);
const arrCopy3 = arr.slice(1,-2);//相当于arr.slice(1,4)
const arrCopy4 = arr.slice(-4,-1);//相当于arr.slice(2,5)
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]
7.splice(): 从数组中添加、删除或替换元素,并返回被删除的元素组成的数组。
array.splice(index,howmany,item1,.....,itemX)
index: 必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany: 可选。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1: 可选。要添加到数组的新元素
let fruits = ['apple', 'banana', 'orange', 'mango'];
let removedFruits = fruits.splice(1, 2, 'grape', 'cherry');
console.log(removedFruits); // 输出: ['banana', 'orange']
console.log(fruits); // 输出: ['apple', 'grape', 'cherry', 'mango']
let fruits1 = ['apple', 'banana', 'orange', 'mango'];
let removed1 = fruits1.splice(1);
console.log(removed1); // 输出: ['banana', 'orange', 'mango']
console.log(fruits1); // 输出: ['apple']
8.forEach(): 对数组中的每个元素执行指定的操作。
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// 输出:
// 'apple'
// 'banana'
// 'orange'
9.map(): 对数组中的每个元素执行指定的操作,并返回一个新数组,新数组的元素是原始数组经过操作后的结果。
let numbers = [1, 2, 3, 4, 5];
let multipliedNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(multipliedNumbers); // 输出: [2, 4, 6, 8, 10]
10.indexOf(): 返回指定元素在数组中首次出现的索引,如果不存在则返回-1。
let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index); // 输出: 1
let fa = fruits.indexOf('banana') !== -1;
console.log(fa) // true
11.lastIndexOf(): 返回指定元素在数组中最后一次出现的索引,如果不存在则返回-1。
let fruits = ['apple', 'banana', 'orange', 'banana'];
let lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex); // 输出: 3
12.includes(): 检查数组是否包含指定元素,返回布尔值。
let fruits = ['apple', 'banana', 'orange'];
let includesOrange = fruits.includes('orange');
console.log(includesOrange); // 输出: true
13.join(): 将数组中的所有元素连接成一个字符串。
let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.join(', ');
console.log(fruitsString); // 输出: 'apple, banana, orange'
14.reverse(): 反转数组中元素的顺序,原始数组会被修改。
let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // 输出: ['orange', 'banana', 'apple']
15.sort(): 对数组元素进行排序,默认按照字母顺序排序,原始数组会被修改。
let fruits = ['apple', 'banana', 'orange'];
fruits.sort();
console.log(fruits); // 输出: ['apple', 'banana', 'orange']
16.filter(): 根据指定条件筛选数组中的元素,返回一个新数组。
//需求找到数组内偶数
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter((item, i, arr) => {
return item % 2 == 0
})
console.log(evenNumbers); // 输出: [2, 4, 6, 8, 10]
// -------------------------------------------------------------------------
let arrObj = [
{name: 'aa', age: 13 },
{ name: 'bb', age: 23 },
{ name: 'cc', age: 18 },
{ name: 'dd', age: 11 },
{name: 'ee', age: 28 }
]
let ap = arrObj.filter(ele => ele.age > 18)
console.log(ap) // [{ "name": "bb", "age": 23 }, { "name": "ee", "age": 28 }]
let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
return ele.name
})
console.log(arrObjFilter) // ['bb', 'ee']
// -------------------------------------------------------------------------
// 可以去重
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {
return arr.indexOf(ele) === index
})
console.log(arrFilter) // [1, 2, 3, 4];
17.reduce(): 对数组中的元素执行一个累加器函数,返回一个累计值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, number) =>{
return acc + number;
}, 0);
console.log(sum); // 输出: 15
// 取最大 最小值
let arr = [1, 2, 3, 4, 5];
let max = arr.reduce((pre,cur,index,arr) => {
return pre > cur ? pre : cur
});
let min = arr.reduce((pre,cur,index,arr) => {
return pre < cur ? pre : cur
});
console.log(max) // 得到 5
console.log(min) // 得到 1
// -----------------------------------------------
// 数组去重
let arr = [1, 2, 3, 4, 4, 1]
let newArr = arr.reduce((pre,cur) => {
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
18.reduceRight(): 从数组的末尾开始,对数组中的元素执行一个累加器函数,返回一个累计值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduceRight(function(acc, number) {
return acc + number;
}, 0);
console.log(sum); // 输出: 15
19.every(): 检查数组中的所有元素是否满足指定条件,如果所有元素都满足条件则返回true,否则返回false。
let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(number) {
return number % 2 === 0;
});
console.log(allEven); // 输出: true
20.some(): 检查数组中的任意元素是否满足指定条件,如果至少有一个元素满足条件则返回true,否则返回false。
let numbers = [2, 4, 6, 8, 9];
let hasOdd = numbers.some(function(number) {
return number % 2 !== 0;
});
console.log(hasOdd); // 输出: true
21.find(): 返回数组中满足指定条件的第一个元素,如果找不到则返回undefined。
let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(function(number) {
return number % 2 === 0;
});
console.log(evenNumber); // 输出: 2
let arrObj = [
{name: 'aa', age: 13 },
{ name: 'bb', age: 23 },
{ name: 'cc', age: 18 },
{ name: 'dd', age: 11 },
{name: 'ee', age: 28 }
]
let ap = arrObj.find(ele => ele.age === 18)
console.log(ap); // {name: 'cc', age: 18}
22.findIndex(): 返回数组中满足指定条件的第一个元素的索引,如果找不到则返回-1。
let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.findIndex(function(number) {
return number === 2;
});
console.log(evenNumber); // 输出: 1
let arrObj = [
{name: 'aa', age: 13 },
{ name: 'bb', age: 23 },
{ name: 'cc', age: 18 },
{ name: 'dd', age: 11 },
{name: 'ee', age: 28 }
]
let ap = arrObj.findIndex(ele => ele.age === 18)
console.log(ap); // 2
23.fill(): 将数组的所有元素替换为静态值,可以指定起始索引和结束索引。
value: 必需。填充的值。
start: 可选。开始填充位置。
end: 可选。停止填充位置 (默认为 array.length)。
let numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);
console.log(numbers); // 输出: [1, 2, 0, 0, 5]
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
console.log(fruits) // ['Banana', 'Orange', 'Runoob', 'Runoob']
24.flat(depth ): 将多维数组转换为一维数组,可以指定转换的层数。depth :指定要提取嵌套数组的结构深度,默认值为 1。
let nestedArray = [1, [2, [3, 4]]];
let flattenedArray = nestedArray.flat(2);
console.log(flattenedArray); // 输出: [1, 2, 3, 4]
25.flatMap(): 对数组中的每个元素执行指定的操作,并将结果展开到一个新数组中。
let numbers = [1, 2, 3, 4, 5];
let multipliedAndFlattened = numbers.flatMap(function(number) {
return [number * 2, number * 3];
});
console.log(multipliedAndFlattened); // 输出: [2, 3, 4, 6, 6, 9, 8, 12, 10, 15]
const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log('--------',flattened); // [1, 2, 3, 4, 5, 6]
let arr = [1, 2, 3, 4];
const ad = arr.flatMap(x => [x, x * 2]);
const ap = arr.reduce((acc, x) => acc.concat([x, x * 2]), [])
console.log('--------',ad); // [1, 2, 2, 4, 3, 6, 4, 8]
console.log('--------',ap); // [1, 2, 2, 4, 3, 6, 4, 8]
26.toString(): 将数组转换为逗号分隔的字符串。
let fruits = ['apple', 'banana', 'orange'];
let fruitsString = fruits.toString();
console.log(fruitsString); // 输出: 'apple,banana,orange'
27.isArray(): 检查一个值是否为数组,返回布尔值。
let fruits = ['apple', 'banana', 'orange'];
let isFruitsArray = Array.isArray(fruits);
console.log(isFruitsArray); // 输出: true
28.keys(): 返回一个包含数组索引的可迭代对象。
let fruits = ['apple', 'banana', 'orange'];
let keys = fruits.keys();
for (let key of keys) {
console.log(key); // 输出: 0, 1, 2
}
29.values(): 返回一个包含数组值的可迭代对象。
let fruits = ["apple", "banana", "orange"];
let values = fruits.values();
console.log("--------", values); // Array Iterator {}
for (let value of values) {
console.log(value); // 输出: 'apple', 'banana', 'orange'
}
30.entries(): 返回一个包含数组键值对的可迭代对象。
let fruits = ['apple', 'banana', 'orange'];
let entries = fruits.entries();
for (let [index, value] of entries) {
console.log(index, value); // 输出: 0 'apple', 1 'banana', 2 'orange'
}
31.from(): 将一个类似数组或可迭代对象转换为真正的数组。
let string = 'hello';
let stringArray = Array.from(string);
console.log(stringArray); // 输出: ['h', 'e', 'l', 'l', 'o']
var arr = Array.from([1, 2, 3], x => x * 10);
console.log('--------',arr); // [10, 20, 30]
32.copyWithin(): 在数组内部将指定范围的元素复制到其他位置。
array.copyWithin(target, start, end)
| 参数 | 描述 |
|---|---|
| target | 必需。复制到指定目标索引位置。 |
| start | 可选。元素复制的起始位置。 |
| end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。 |
let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(1, 3);
console.log(numbers); // 输出: [1, 4, 5, 4, 5]
//---------------------------------------------------------------------
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2);
console.log('--------',fruits); // [Banana,Orange,Banana,Orange,Kiwi,Papaya]
//---------------------------------------------------------------------
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 3);
console.log('--------',fruits); // ['Banana', 'Orange', 'Banana', 'Orange', 'Apple', 'Papaya']
js中数组的方法,32种方法的更多相关文章
- js中数组去重的几种方法
js中数组去重的几种方法 1.遍历数组,一一比较,比较到相同的就删除后面的 function unique(arr){ ...
- js中数组遍历的几种方法及其区别
参考网站: http://www.cnblogs.com/lvmh/p/6104397.html 第一种最常用的:for循环 for(j = 0; j < arr.length; j++) { ...
- JavaScript中数组去重的几种方法
JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- javascript中数组去重的4种方法
面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...
- JS中检测数据类型的四种方法
1.typeof 用来检测数据类型的运算符->typeof value->返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."st ...
- Js中数据类型判断的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- 转:判断js中的数据类型的几种方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- js笔记(3)--js实现数组转置(两种方法)
js实现数组转置 第一种方法: <script> window.onload=function(){ var array1=[[11,22,33,333],[4 ...
随机推荐
- Terraform 系列-Terraform 简介
系列文章 Terraform 系列文章 前言 最近在使用 Terraform 来置备 OCI 的 Always Free Tier, 发现它非常好用.总结学习下:Terraform 的基础知识. 什么 ...
- 自学C#,要懂得善用MSDN
很多初学者学习编程,都会通过看别人写的教程.或者录制的视频,来学习. 这是一个非常好的途径,因为这个是非常高效的. 但是这样,存在两个问题: 1.教程不够全面:任何再好的教程,都无法囊括所有的知识点, ...
- VueUse 是怎么封装Vue3 Provide/Inject 的?
Provide/Inject Provide 和 Inject 可以解决 Prop 逐级透传问题.注入值类型不会使注入保持响应性,但注入一个响应式对象,仍然有响应式的效果. Provide 的问题是无 ...
- 京东APP百亿级商品与车关系数据检索实践
导读 本文主要讲解了京东百亿级商品车型适配数据存储结构设计以及怎样实现适配接口的高性能查询.通过京东百亿级数据缓存架构设计实践案例,简单剖析了jimdb的位图(bitmap)函数和lua脚本应用在高性 ...
- pikachu靶场学习
pikachu靶场通关 搭建靶场 1.官网下载https://github.com/zhuifengshaonianhanlu/pikachu 2.把pikachu文件夹放到phpstudy的web服 ...
- selenium配置远程测试环境
开头 因为测试的时候需要不断打开浏览器,这样效率感觉不高,于是想着能不能开启一个浏览器,然后通过代码直接链接来调试就好了. 前提 要先安装好selenium 和 会查看配置自己的google版本和路径 ...
- 2021-03-11:go中,协程内部再启用协程,它们是没关系,对吧?外部协程奔溃,内部协程还会执行吗?外部协程执行结束的时候,如何让内部协程也停止运行?golang原生提供的包里,让内部协程停止运行,如何实现?
2021-03-11:go中,协程内部再启用协程,它们是没关系,对吧?外部协程奔溃,内部协程还会执行吗?外部协程执行结束的时候,如何让内部协程也停止运行?golang原生提供的包里,让内部协程停止运行 ...
- WPF入门教程系列二十四——DataGrid使用示例(1)
WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门教程系列五--Window 介 ...
- C# 中的“智能枚举”:如何在枚举中增加行为
目录 枚举的基本用法回顾 枚举常见的设计模式运用 介绍 智能枚举 代码示例 业务应用 小结 枚举的基本用法回顾 以下是一个常见的 C# 枚举(enum)的示例: enum Weekday { Mond ...
- 500行代码手写docker-以新命名空间运行程序
(2)500行代码手写docker-以新命名空间运行程序 本系列教程主要是为了弄清楚容器化的原理,纸上得来终觉浅,绝知此事要躬行,理论始终不及动手实践来的深刻,所以这个系列会用go语言实现一个类似do ...