前端开发 js 数组常用方法总结

最新推荐文章于 2023-07-12 17:28:41 发布
置顶 最新推荐文章于 2023-07-12 17:28:41 发布
阅读量722 收藏 2
点赞数 2
分类专栏： JS 文章标签： javascript js数组 数组方法 Array
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyn15159/article/details/109462035
版权

js数组常用方法

findIndex获得指定数组元素下标

// 参数：函数（被传入的函数，回调函数）
//      格式要求：
//          item  回调函数，代表每一次遍历的数据
//          return 判断条件(自己写)
// 返回：满足条件的第一个元素的下标，若没有，返回-1；
var index = arr.findIndex(function(item) {
    return item === 20;
});
console.log(index);

// 根据 nowArticleID 把其在 articleList 数组中的下标给获得到
const index = this.articleList.findIndex(
    item => item.art_id === this.nowArticleID
)

find()从数组中找出符合条件的第一个元素

let result = [].find(function(item,index,self){ 
    // 如果满足查找的条件
    return true;
});

// 回调函数有三个参数，分别表示：数组元素的值、索引、整个数组
// 如果某次循环返回的是true，find方法的返回值就是满足这个条件的第一个元素。
// 如果没有找到会返回undefined。

// 用法：找数组中第一个小于0的数字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
    return item < 0;    //遍历过程中，根据这个条件去查找
});
let result =arr.find(item=>item<0)   //箭头函数简化代码
console.log(result);    // -4

push 数组后置追加元素

// var arr = [1, 2, 3, 4, 5, 6];
// 作用：把一个元素或多个元素，从数组后面添加到数组里面；
// 参数：添加的数据
// 返回：添加后的数组的长度；

var l = arr.push(8, "abc");
console.log(arr, l);

pop 数组后置删除元素

// 作用：从数组的后面删除一个元素
// 参数：无；
// 返回：被删除的元素；

var arr = [2,5,9,8,7,6]
var res = arr.pop();
console.log(arr, res);

unshift 数组前置追加元素

  // 作用：从数组前面添加数据（一个或者多个）
  // 参数：一个或者多个；
  // 返回：添加后的数组的长度

  var l = arr.unshift("a", "b");
  console.log(arr, l);

shift 数组前置删除元素

// 作用：从数组的前面删除一个元素
// 参数：无；
// 返回：被删除的元素；

var arr = [2,5,9,8,7,6]
var res = arr.shift();
console.log(arr, res);

map数组映射

map映射方法：对数组进行遍历，返回一个新数组，元素个数与被处理数组一致，但是元素的value值是map处理过的。

// 获取频道的全部id，以数组格式返回
const userChannelIds = this.channelList.map(item => {
    return item.id
})

var a = [1,2,3,4,5]
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

filter数组过滤

filter方法，对数组的元素进行过滤，把符合条件的元素重新组成数组返回。

// 作用：对当前数组一定的过滤；
// 参数：函数（函数）格式要求：
//      函数参数：item,index,arr
//      item：每个数据
//      index：下标；
//      arr：当前遍历的数组；
//      return 过滤条件; 返回是true，把当前满足条件的item 放入新的数组中
// 返回:返回过滤后的新数组;

var arr_1 = arr.filter(function(item, index, arr) {
    // 过滤条件; 返回是true，把当前满足条件的item 放入新的数组中
    return item == 10;
});
console.log(arr, arr_1);

const rest = this.channelAll.filter(item => {
    // Array.includes判断是否包含该元素
    return !userChannelIds.includes(item.id)
})

includes数组包含

includes方法，判断数组是否包含指定的元素。返回 true / false

数组.includes(参数1，参数2)

// 参数1，必须，表示查找的内容
// 参数2，可选，表示开始查找的位置，0表示从第一个元素开始找。默认值是0。

let arr = [1, 4, 3, 9];
console.log(arr.includes(4));    // true
console.log(arr.includes(4, 2)); // false， 从下标为2的位置开始查，所以没有找到4
console.log(arr.includes(5));    // false

concat 数组拼接

// 数组.concat();
// 传入：拼接的数据。
// 返回：新数组；

// 传入1个数据
var arr = [1, 2];
var Arr = arr.concat("abc");
console.log(arr, Arr);

// 传入多个数据
var Arr = arr.concat("a", "b", "c", "d", "e", "f");
console.log(arr, Arr);

// 传入1个数组
var Arr = arr.concat(["aa", "bb"]);
console.log(arr, Arr);

// 传入多个数组
var Arr = arr.concat(["aa", "bb"], [77, 88]);
console.log(arr, Arr);

splice 数组增删改

var arr = ['a', 'b', 'c', 'd', 'e'];
// 删除：
// 参数：第一个参数是开始的下标，第二个参数：要删除的个数；
// 返回：被删除元素的数组；
var res = arr.splice(3, 1);
console.log(arr);----->['a', 'b', 'c',  'e']     删除元素对原数组进行操作
console.log(res);----->['d']

// 添加：
// 参数：第一个参数：开始的下标；第二个参数：删除的个数；后面参数：要添加的数据，从开始的下标位置添加；
// 返回：没有删除，返回[]
var res = arr.splice(3, 0, "AA", 18);
console.log(arr); ---->["a", "b", "c", "AA", 18, "d", "e"]
console.log(res); ---->[]

// 修改：
// 参数：第一个参数：开始的下标；第二个参数：删除的个数；后面参数：要添加替换的数据，从开始的下标位置；
// 返回：被替换的数据的数组；
var res = arr.splice(3, 1, "HH");
console.log(arr); ----->["a", "b", "c", "HH", "e"]
console.log(res); ----->["d"]

数组与字符串互转split和join

var str = '刘备|关羽|张飞';
console.log(str);

// 字符串---->数组：
// 参数：分隔符
// 返回：数组；
var arr = str.split("|");
console.log(arr);

// 数组----->字符串
// 参数:分隔符；
// 返回：字符串；
var str_1 = arr.join("*_*");
console.log(str_1);

indexOf 数组中查找元素

// 参数：被查找的元素
// 返回：被查找的元素的下标索引（没有找到返回-1）

// 场景：查找数组中有没有我们需要的数据；
var arr = [1, 10, 20];
var index = arr.indexOf("a");
console.log(index);     ----->-1

forEach 遍历数组

var arr = [0, 10, 10, 10, 20];
// 作用：遍历数组
// 参数：函数（函数）格式要求：
//      函数参数：item,index,arr
//      item：每个数据
//      index：下标；
//      arr：当前遍历的数组；

var max = arr[1];
arr.forEach(function(item, index, arr) {
    console.log(item, index, arr);
    if (item > max) {
        max = item;
    }
});
console.log(max);

slice 截取数组

// 作用：截取数组
// 参数：
// 返回：被截取的新数组；
var arr = ['a', 'b', 'c', 'd', 'e'];

// 参数:2个参数。第一个参数从哪个下标开始（包括），截取到哪个下标结束(不包括),
var res = arr.slice(1, 4);
console.log(arr, res);

// 参数：1个参数，从哪个下标开始，一直到结尾都要截取
var arr_1 = arr.slice(1);
console.log(arr_1);

// 参数：没有参数，全部截取，复制数组；
var res = arr.slice();
// 数组：复杂数据类型；
console.log(res, arr);
console.log(res == arr);   ---->false

数组排序 sort()

// sort() 方法用于对数组的元素进行排序。

var arr = [11,52,74,85,96,15];
arr.sort(sortby)

// sortby	可选。规定排序顺序。必须是函数。
// 返回值:对数组的引用。

// 注意:数组在原数组上进行排序，不生成副本。

// 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

// 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

// 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
// 若 a 等于 b，则返回 0。
// 若 a 大于 b，则返回一个大于 0 的值。

数组倒序reverse()

// reverse() 方法用于颠倒数组中元素的顺序。

var arr = [11,52,74,85,96,15];
arr.reverse();

// 注意：该方法会改变原来的数组，而不会创建新的数组。

扩展运算符

把数组中的元素一项项地展开,把一个整体的数组拆开成单个的元素。

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

数组的去重操作

let arr1 = [1, 2, 3, 3, 4, 5];
let arr = [...new Set(this.arr1)]

some() 方法

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。

注意：

  1. some() 不会对空数组进行检测。
  2. some() 不会改变原始数组。
// 检索数组中是否存在某个值

function some(item,index,arr){
	if(item == 10){
		console.log	(item+"存在于这个数组");
	}
		console.log	(item+"不存在于这个数组");
}
 
var a = [11,50,40,3,5,80,90,4];
a.some(some)
// 10不存在于这个数组
// false

Array.isArray()

判断一个对象是不是数组，返回的是布尔值

let arr = [1, 2, 3, 4, 5]; 
console.log(Array.isArray(arr))    // true

let str = "12345"
console.log(Array.isArray(str))    // false

Array.toString()

此方法将数组转化为字符串：

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

Array.every()

// 此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

let arr = [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4    
const isLessThan6 => value => value < 6   
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true
木蓝茶陌*_*
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中数组常用的方法总结
m0_62118859的博客
04-25 615
目录 1.push() 后增 2.unshift() 前增 3.pop() 后删 4.shift() 前删 5.splice() 修改删除 6.concat() 拼接 7.slice() 剪切 8.join() 9.sort() 排序 10.reverse() 颠倒顺序 11.indexOf()和lastIndexOf() 12.filter() 过滤 13.map() 格式化数组 14.every() 15.some() 16.forEach() 数组遍历 17.find
JS数组中常用的方法总结
没有感情的代码机器的博客
05-04 1146
我经常会混淆JS数组中常用的方法，然后每次做题每次错（泪的教训啊呜呜呜），终于我下定决心来好好整理一下！下面是JS数组中常用的方法： push()、unshift()、pop()、shift()、reverse()、slice(startIndex,endIndex)、splice(index,num,item1,item2,…)、concat()、join(str)、indexOf(item)、...
一文搞清 js 中 if ( in ) 用法
qq_34639706的博客
08-05 2439
let names = ['Lily', 'Barry', 'Dendi', 'Boogie', 'Lily']; let nameNum = names.reduce((pre, cur) => { if (cur in pre) { //pre 中是否有 cur 属性 pre[cur]++; } else { pre[cur] = 1; //为 pre 这个对象添加 cur 属性，并且赋值为 1 } return pre; }, {
JavaScript in 操作符
qq_36437172的博客
11-27 601
JavaScript的 in 操作符可以用来判断一个属性是否属于一个对象，也可以用来遍历一个对象的属性 1. 判断属性属于对象（ if in ） var person = {name: "小明", age: 18, year: 1998}; //注意，属性名必须是字符串形式，因为 age 不是一个变量 if ("age" in person){ console.log("man对象中含有...
JavaScript 的in 操作符
SalmonellaVaccine的专栏
08-22 967
http://www.linuxfly.org/post/524/    在编写JavaScript时，遇到一个常见的问题“如何判断某值是否数组中的元素”？这让我想起了PHP中的in_array()函数和Python中in 操作符。但JavaScript似乎没有内置类似的函数，而其in 操作符的作用也有点不同。通过查询相关的资料，我发现JavaScript的in 操作符还是挺有用的。
【JavaScript】 寻找元素在数组的下标
徐海东的博客
10-17 4350
如何写出判断数组下标的健壮性代码
前端开发中常见的20个数组方法，你真的掌握了吗？
m0_57524265的博客
07-12 7141
javascript内置有很多好用的数组方法，包括添加和删除元素、合并和拆分数组、以及对数组进行排序和搜索等，看看你掌握了几个，文末包含一道将平铺数组结构转换为tree型数组结构练习题！
谈谈JavaScript数组常用方法总结
10-20
本文将深入探讨JavaScript数组的一些常用方法，帮助开发者更好地理解和应用这些方法。 1. **增加数据** - `push()` 方法用于向数组末尾添加一个或多个元素，并返回新的数组长度。例如： ```javascript var arr =...
JavaScript 数组和数组常用的方法 示例代码
最新发布
06-12
JavaScript（简称JS）是一种轻量级、解释型、动态类型的脚本语言，主要用于网页前端开发，但也被广泛用于服务器端和移动应用开发。它最初由Netscape公司的Brendan Eich在1995年为Netscape Navigator浏览器设计，目的...
前端开发必备常用工具函数小结
09-22
在前端开发中，掌握一些常用工具函数能够极大地提高开发效率和代码质量。下面将详细介绍文章中提到的一些关键工具函数，并扩展相关知识。 1. **时间格式化：** 文章推荐使用`moment.js`库来处理时间格式化。`moment...
JavaScript常用的数组操作方法1.pdf
07-11
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，尤其在处理数据结构如数组时，其提供了多种方便高效的方法。本文主要介绍了JavaScript中常见的数组操作方法，包括添加、删除和排序，这对于理解和优化...
JavaScript数组前面插入元素的方法
10-24
`unshift`方法是JavaScript数组对象的一个内置方法，它的基本语法如下： ```javascript array.unshift(element1, element2, ..., elementN) ``` 这里的`element1`, `element2`, ..., `elementN`是要插入到数组开头...
JavaScript数组方法总结
小瑾沐晚风的博客
09-25 3万+
一.JavaScript中创建数组的方式 1.使用Array构造函数 var color=new Array();     注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。 2.使用数组字面量 var color=[]; 二. 数组的长度 三.数组的方法有数组原型方法，也有从object对象继承来的...
前端常用数组方法集合
沈行的博客
08-28 3834
前端JavaScript常用数组方法集合
判断数组是否存在某个值
Cxy_357的博客
09-26 3162
可以使用数组的indexOf()方法，如果返回值为-1则说明不存在，如果返回值为大于-1的整数，则说明存在。例如： var arr = [1,2,3]; arr.indexOf(1); // 返回0 arr.indexOf(5); // 返回-1 附：返回值为数组中的最靠前元素在数组的位置
js如何判断数组含有某值，in/includes/inArray/indexOf方案对比
qq_18246731的博客
09-18 2628
总结：判断数组或字典的key使用in。判断数组是否存在某个元素推荐使用includes，当判断的是一个对象时自己写一个函数使用如下第四个。 本文的测试数据是下面的两个值： let arr=[“a”,“b”,“c”]; let arr2={“a”:“aaa”,“b”:“bbb”,“c”:“ccc”}; 一、inin操作符针对的是key，而非value。而对于普通的一维数组来说，key是隐藏的。所...
JS判断元素是否在数组内
热门推荐
jumtre的专栏
12-12 24万+
一、JQuery 如果是用JQuery的话，可以用inArray()函数： jquery inarray()函数详解 jquery.inarray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 determine the index of the first parameter in the array (-1 if not found).
401状态码的含义和处理
jyn15159的博客
09-30 6万+
401状态码的处理 401状态码的含义： axios向服务器端发送请求时，有两种情况会出现401状态码(unauthorized未授权)： 服务端要求传递token信息，而实际发送请求时没有传递。 发送请求时有传递token到达服务器端，但由于时间比较久，这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。 总之，服务器端有些api接口要求传递token，token失效或没有传递，就会报401错误。 401状态码的处理： 在axios请求拦截器中做token传递操作。
前端开发js常用对象方法
01-31
在前端开发中，JavaScript提供了许多常用的对象方法，以下是一些常见的对象方法： 1. Object.keys(obj)：返回一个包含对象所有属性名的数组。 2. Object.values(obj)：返回一个包含对象所有属性值的数组。 3. Object.entries(obj)：返回一个包含对象所有属性名和属性值的二维数组。 4. Object.assign(target, source)：将一个或多个源对象的属性复制到目标对象中。 5. Object.hasOwnProperty(prop)：判断对象是否具有指定属性。 6. Object.freeze(obj)：冻结对象，使其属性不可修改。 7. Object.seal(obj)：封闭对象，使其属性不可添加或删除，但属性值可以修改。 8. Object.create(proto, [propertiesObject])：使用指定的原型对象和属性创建一个新对象。 9. Object.getPrototypeOf(obj)：返回指定对象的原型对象。 10. Object.defineProperty(obj, prop, descriptor)：定义或修改对象的属性。 这些方法可以帮助开发者在前端开发中更方便地操作对象。如果你有具体的问题或需要了解更多对象方法，请告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值