JS 中常用的数组方法和实现

已于 2022-10-18 14:16:14 修改
阅读量168 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript 前端 开发语言
于 2022-10-17 18:50:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49188643/article/details/127319489
版权

在处理数据的过程中，经常会涉及到数组的变换和处理，掌握常用的数组方法，对于我们平时写代码和面试都十分有用；

以下整理出几个使用率较高的几个方法以及实现方式：

目录

关于数组的判断  Array.isArray()

类数组对象转成数组 Array.from()

关于多个数组的连接 & 数组转换成字符串

关于查找符合条件的数组

关于符合条件数组的 index 查找

关于数组的遍历

关于数组的增删改

1、删除元素

2、添加元素

3、修改数组

关于数组的排序

关于数组的判断  Array.isArray()

// 用来判断一个对象是否为数组
var arr = [1,2,3];

console.log(Array.isArray(arr)); // true

该方法的实现：

Array.myIsArray = function(o){
    return Object.prototype.toString.call(Object(o) === '[Object Array]');
};

类数组对象转成数组 Array.from()

用于通过拥有length属性的对象或可迭代的对象来返回一个数组

// 返回新的数组实例，对于原始结构不影响
let arr1 = Array.from("foo");
console.log(arr1); // ["f","o","o"];

// 该方法有三个参数：
// 1. 接受一个类数组或可迭代对象
// 2. 新数组中每个元素都会执行的回调函数
// 3. 指定第二个参数的this对象
var arr = Array.from([1,2,3],x=>x*10);
// arr[0] = 10;
// arr[1] = 20;
// arr[2] = 30;

关于多个数组的连接 & 数组转换成字符串

Array.prototype.concat() 用于连接两个或多个数组，且不会改变现有数组

var arr1 = ["苹果","香蕉","橘子"];
var arr2 = ["梨","西瓜","火龙果"]；
var arr = arr1.concat(arr2)
console.log(arr); // ["苹果","香蕉","橘子","梨","西瓜","火龙果"]

Array.prototype.join() 把数组的所有元素转换成一个字符串

var fruits = ["西瓜","哈密瓜","榴莲"];
 console.log(fruits.join()); // 西瓜,哈密瓜,榴莲

关于查找符合条件的数组

Array.prototype.every() 用于检测数值元素的所有元素是否都符合条件

语法：

array.every(function(currentValue,index,arr), thisValue)

  • 如果数组中检测到一个元素不满足条件，则整个返回 false，剩余元素就不会再进行检测
  • 不会对空数组进行检测，也不会改变原始数组

var ages = [33,56,16,28];
function checkAdult(ages){
    
    return ages >=18;
}
ages.every(checkAdult); // false

Array.prototype.some() 检测数组元素中是否有元素符合指定条件

语法：

array.some(function(currentValue,index,arr), thisValue)

  • 如果数组中检测到一个元素满足条件，则整个返回 true，剩余元素就不会再进行检测
  • 不会对空数组进行检测，也不会改变原始数组
var ages = [33,20,16,50];
function checkAdult(age){
	return age >= 18;
}
ages.some(checkAdult); // true

Array.prototype.filter() 用于检测数值元素，并返回符合条件的所有元素的数组

语法：

array.filter(function(currentValue,index,arr), thisValue)

  • 返回值是一个新数组
  • 不会对空数组进行检测，也不会改变原始数组
var ages = [33,20,16,50];
function checkAdult(age){
	return age >= 18;
}
ages.filter(checkAdult); // [33,20,50]

该方法的实现：

var ages = [33,20,16,50];

Array.prototype.myFilter = function(fn){
    var arr = [];

    for(var i=0;i<this.length;i++){
        
        if(fn(this[i],i)){
            arr.push(this[i])
        }
    }
    return arr;
}

var newArr = ages.myFilter(function(ele,index){

    if(ele >= 18){
        return true
    }else{
        return false
    }

})

console.log(newArr); // [33,20,50]

Array.prototype.find() 返回符合条件的第一个元素的值，剩余的就不会再检测

语法：

array.find(function(currentValue,index,arr), thisValue)

  • 不会对空数组进行检测，也不会改变原始数组
  • 没有符合条件的值就返回 undefined

Array.prototype.includes() 判断一个数组是否包含一个指定值，有就返回true，否则返回 false

语法：

array.includes(searchElement,fromIndex)

关于符合条件数组的 index 查找

Array.prototype.indexOf() 搜素数组中的元素，返回它所在的位置

  • 从头开始检索，找到 item 第一次出现的位置，返回它的索引值
  • 没有就返回-1
var fruits = ["西瓜","哈密瓜","哈密瓜","榴莲"];
console.log(fruits.indexOf("哈密瓜"));//1

Array.prototype.lastIndexOf() 返回指定内容最后出现的位置

  • 从后向前进行检索，找到 item 第一次出现的位置，返回它的索引值
  • 没有就返回-1
var fruits = ["西瓜","哈密瓜","哈密瓜","榴莲"];
console.log(fruits.lastIndexOf("哈密瓜")); //2

关于数组的遍历

Array.prototype.forEach() 遍历方法，对数组中的每个元素都执行一次回调函数，返回值是undefined

语法：

array.forEach(function(item,index,arr),thisArg)

  • 不会对空数组执行回调函数
  • 第二个参数，用来绑定 this
var arr = [4,9,16,25];
arr.forEach(function(item,index){
	console.log(item)
}); 


// forEach方法中的回调函数中的this就指向reporter
var reporter = {
    report: function(key, value) {
        console.log("Key: %s, Value: %s", key, value); 
    }
};
arr.forEach(function(value, key, map) { 
    this.report(key, value);
}, reporter);
// Key: 0, Value: 4
// Key: 1, Value: 9
// Key: 2, Value: 16
// Key: 3, Value: 25

该方法的实现：

Array.prototype.myForEach = function(fn){

    for(var i=0; i<this.length; i++){
        fn(this[i],i)
    }

}

arr.myForEach(function(item,index){

    console.log(item,index)

})

关于数组的增删改

1、删除元素

Array.prototype.pop() 删除数组的最后一个元素，并返回删除的元素

Array.prototype.shift() 删除数组的第一个元素，并返回删除的元素

// Array.prototype.pop()

var arr1 = [10,20,30,40];
var arr2 = arr1.pop();
console.log(arr1); // [10,20,30]
console.log(arr2); // 40


// Array.prototype.shift()
var arr1 = [10,20,30,40];
var arr2 = arr1.shift();
console.log(arr1); // [20,30,40]
console.log(arr2); // 10

2、添加元素

Array.prototype.push() 向数组末尾添加一个或多个元素，并返回新的长度

Array.prototype.unshift() 向数组开头添加一个或多个元素，并返回新的长度

// Array.prototype.push()
var arr1 = [10,20,30,40];
var arr2 = arr1.push(50);
console.log(arr1); // [10,20,30,40,50]
console.log(arr2); // 5



// Array.prototype.unshift()
var arr1 = [10,20,30,40];
var arr2 = arr1.unshift(50);
console.log(arr1); // [50,10,20,30,40]
console.log(arr2); // 5

3、修改数组

Array.prototype.reverse() 反转数组的元素顺序

Array.prototype.slice(start,end) 选取数组的一部分，并返回一个新数组

语法：

arr.slice(start,end) 

  • end ---不包含这个值
  • 不会改变原始数组

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var re = fruits.slice(1,3);
console.log(re); // ["Orange","Lemon"]

Array.prototype.splice(index，num，item) 从数组中添加或删除元素

语法：

arr.splice(index,num,item) 

  • 会改变原始数组
  • 该方法返回的是被删除元素组成的数组
  • item---要添加的新元素
var sites = ["Runoob","Google","Taobao"];
// 该方法返回的是被删除元素组成的数组
var re = sites.splice(2,1,"GGGGG");
console.log(sites); //["Runoob","Google","GGGGG"]
console.log(re); // ["Taobao"]



var sites = ["Runoob","Google","Taobao"];
// 该方法返回的是被删除元素组成的数组
var re = sites.splice(2,0,"GGGGG");
console.log(sites); //["Runoob","Google","GGGGG"，"Taobao"]
console.log(re); // []

关于数组的排序

Array.prototype.sort() 对数组的元素进行排序

// 该方法将改变原始数组
var points = [40,100,1,5,25,10];
points.sort(function(a,b){
	return a-b;
}); // 1，5，10，25，40，100 （升序排列）

// 也可以给字母排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // ["Apple","Banana","Mango","Orange"];

Array.prototype.reduce() 将数组元素计算为一个值

语法：

arr.reduce(function(pre,cur,index,arr),initialValue)

// 对于空数组不会执行回调函数的
// 接收一个函数作为累加器，对数组中的每个值进行累加计算
var num = [10,20,30,40,50];
var result = num.reduce(function(pre,cur){
	return pre + cur;
})
console.log(result); // 150

这个方法的实现：

Array.prototype.myReduce = function(callback, initialValue) {
  let accumulator = initialValue ? initialValue : this[0];
  for (let i = initialValue ? 0 : 1; i < this.length; i++) {
    let _this = this;
    accumulator = callback(accumulator, this[i], i, _this);
  }
  return accumulator;
};

Array.prototype.map(callback,[thisObject]) 通过指定函数处理数组的每个元素，并返回处理后的数组

// 返回一个新数组，新数组中的元素都是原始数组处理后的值
// 不会对空数组进行检测，也不会改变原始数组
var numbers = [4,9,16,25,36];
var newNum = numbers.map(Math.sqrt);
console.log(newNum); // [2,3,4,5,6]

var arr1 = [1,4,9,16];
const map1 = arr1.map(x=>{
// 只有当x=4时，才进行操作
	if(x == 4){
		return x*2;
	}
// 其他值时，就直接返回
	return x;
})
console.log(map1); // [1,8,9,16]

这个方法的实现：

Array.prototype.myMap = function(callback, thisArg) {
  let arr = [];
  for (let i = 0; i < this.length; i++) {
    arr.push(callback.call(thisArg, this[i], i, this));
  }
  return arr;
};

weixin_49188643
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中使用数组方法汇总
11-26
本文将汇总JavaScript中常用的数组方法，以及一些关于数组创建、访问、修改和遍历的知识点。 首先，创建数组有多种方式。一种是通过`new Array()`构造函数，例如： ```javascript var arr = new Array(); var ...
JavaScript基础进阶之数组方法总结(推荐)
10-19
由于篇幅限制，这里仅对es3中常用的数组方法进行了总结，es5中还新增了包括但不限于filter(), map(), reduce(), every(), some()等方法，这些也都是在日常开发中经常用到的方法，对于数组的处理提供了更加强大的功能...
JS中常用的数组方法和循环
q_qwp_p的博客
07-26 365
JS中常用的数组方法和循环
JavaScript中常用的数组和字符串方法总结
2301_76702774的博客
02-27 852
js数组和字符串结构+功能+用法
JavaScript中常用的数组过滤方法
weixin_53156345的博客
09-20 5360
在 JavaScript 编程中，经常会遇到需要对数组进行筛选和过滤的情况。本文将介绍几种常用的数组过滤方法，帮助你在处理数组数据时更加灵活高效。
JavaScript中常用的数组方法
qq_60856466的博客
04-14 214
JavaScript中有许多操作数组的方法，利用这些方法可以实现对数组的复制等操作，使数组更好的为我们服务。
总结JS中常用的数组的方法大全
weixin_51749544的博客
05-24 4165
总结JS中常用的数组方法 JS中常用的数组方法总结 数组(Array)是一种复杂的数据类型，它属于Object(对象)类型，用来将一组数组合在一起，通过一个变量就可以访问一组数据。在使用数组时，经常会搭配循环语句使用，从而很方便地对一组数据进行处理。 文章目录总结JS中常用的数组方法一，JS中创建数组的方式：二，数组的长度三，数组的方法有数组原型方法，也有从Object对象继承来的方法，这里我们只介绍数组的原型方法，数组原型方法主要有：1.join（）2.push（）和pop（）3.shift（）和un
JavaScript第6篇，JavaScript常用数组方法，详细1（js中常用的数组方法）
weixin_65793170的博客
11-20 419
.reduce()、.map().、slice().、splice(注意和split()的区分)、.filter()、.includes()、 .forEach()、.indexOf()、.find()、.flat()
js中常用的数组方法总结
热门推荐
object not found的博客
08-17 1万+
js中的数组常用方法，保姆级教学！纯干货建议收藏！！！ 需要使用三个参数，第一个参数为下标，表示插入到这个下标的前面，第二个参数为固定的0，后面的参数为要插入的值。map的返回值是一个和原数组长度一致的数组，通过改变map内部的函数的返回值，可以得到不同的数组。想要把两个数组拼接成一个数组时，可以使用concat,它的返回值是拼接后的数组，原数组不变。会改变原数组，将原数组中的值进行修改，有三个功能：插入，删除，修改......
js中常用的数组方法
你吃不饱就好的博客
04-28 146
方法名 对应版本 功能 原数组是否改变 concat() ES5- 合并数组，并返回合并之后的数据 n join() ES5- 使用分隔符，将数组转为字符串并返回 n pop() ES5- 删除最后一位，并返回删除的数据 y shift() ES5- 删除第一位，并返回删除的数据 y unshift() ES5- 在第一位新增一或多个数据，返回长度 y push...
JS中常用的数组方法
weixin_57037336的博客
09-30 229
JS中常用的数组方法 1.push()方法 形式： push(元素1，…,元素n) 含义：将指定元素增加到原数组后面，会影响（增加）原数组（长度） 首先，定义一个数组并赋值 var colors=['red','yellow','blue']; 接着使用push()方法，并使它在控制台输出 colors.push('green','pink'); console.log(colors); 可以看到，在原数组上增加了两个元素，数组长度也从三增加到五。 2. unshift()方法 形式
PHP中常用的数组操作方法笔记整理
10-22
首先，PHP5.4版本开始支持了短数组定义语法，即使用方括号[]直接定义数组，这与JavaScript的数组定义方式相似。这样的语法使得代码更加简洁易读。例如： ```php $array = ["foo" => "bar", "bar" => "foo"]; ``` ...
javascript实现数组内值索引随机化及创建随机数组的方法
10-23
数组是JavaScript中常用的数据结构，它是一种特殊的对象，用于按顺序存储一系列的值。在不同的应用场景中，可能需要对数组中的元素进行随机排序，这在游戏开发、随机抽奖、随机数据生成等场景中尤为常见。为了实现...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 398
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 466
【代码】springboot网上商品订单转手系统bootpf
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1073
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 114
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 148
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
javascript中数组方法
10-11
JavaScript中常用的数组方法有： 1. push()：向数组末尾添加一个或多个元素，并返回新的长度。 2. pop()：删除数组末尾的元素，并返回该元素的值。 3. shift()：删除数组第一个元素，并返回该元素的值。 4. unshift...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值