详解JS数组方法

目录
  • 一、会修改原数组
    • 1.push():
    • 2.pop():
    • 3.shift():
    • 4.unshift():
    • 5.splice():
    • 6.sort():
    • 7.reverse():
  • 二、不修改原数组
    • 1.toString():
    • 2.join():
    • 3.concat():
    • 4.slice() :
    • 5.map():
    • 6.forEach():
    • 7.filter():
    • 8.every():
    • 9.some():
    • 10.reduce():
  • 总结

一、会修改原数组

1.push():

(在数组结尾处)向数组添加一个新的元素

push() 方法返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  

2.pop():

方法从数组中删除最后一个元素

可以接收pop()的返回值,是被弹出的值"Mango"

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  

3.shift():

删除首个数组元素

可以接收删除的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

4.unshift():

(在开头)向数组添加新元素

返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

5.splice():

用于向数组添加新项

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组

也可以通过设置参数来删除数组中元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//["Banana","Orange","Lemon","Kiwi","Apple","Mango"]
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
//["Orange", "Apple", "Mango"]

6.sort():

以字母顺序对数组进行排序

如果是对数字进行排序,则需要注意。 "25" 大于 "100",因为 "2" 大于 "1"。我们通过一个比值函数来修正此问题。

sort()也可以通过修改比较函数来排序对象数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
 var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});//升序
points.sort(function(a, b){return b - a});//降序
points.sort((a, b)=>{return b - a});//箭头函数
 var cars = [
    {type:"Volvo", year:2016},
    {type:"Saab", year:2001},
    {type:"BMW", year:2010}
]
cars.sort(function(a, b){return a.year - b.year});//比较年份(数字)
cars.sort(function(a, b){//比较类型(字符串)
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

7.reverse():

反转数组中的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  

二、不修改原数组

1.toString():

把数组转换为数组值(逗号分隔)的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.toString())
//Banana,Orange,Apple,Mango

2.join():

可将所有数组元素结合为一个字符串。

它的行为类似 toString(),但是还可以规定分隔符

var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango

3.concat():

通过合并(连接)现有数组来创建一个新数组。可以连接多个

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
 var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

4.slice() :

方法用数组的某个片段切出新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);//从第一个到最后
//["Orange", "Lemon", "Apple", "Mango"]
 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);//从第一个到第三个(不包括3)
//["Orange", "Lemon"]

5.map():

将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)//简写的箭头函数
//arr= [1, 2, 3, 4, 5]   原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组

6.forEach():

将数组中的每个元素执行提供的函数,没有返回值,注意和map方法区分

let arr = [1, 2, 3, 4, 5]
arr.forEach(x => {
    console.log(2*x)
    //return x*2 返回值没有用,此函数没有返回值
})

7.filter():

此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回。函数里面写的是条件!!!

let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(value => value >= 3 )
//或者
let newArr = arr.filter(function(value) {return value >= 3} )
console.log(newArr)
//[3,4,5]

8.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

9.some():

此方法是将所有元素进行判断返回一个布尔值,如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false

let arr= [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 = value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false

10.reduce():

此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
 console.log(sum) //sum = 15  相当于累加的效果
//与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作的

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-17

浅谈JS数组内置遍历方法有哪些和区别

目录 forEach()(ES6)方法 map()(ES6) 方法 flatMap()方法 for...in... for...of... filter(ES6)遍历数组 every()函数(ES6) find()函数(ES6) findIndex()函数 (ES6) forEach()(ES6)方法 forEach()(ES6)方法对数组的每个元素执行一次给定的函数. 1. 数组里的元素个数有几个,该方法里的回调就会执行几次     2. 第一个参数是数组里的元素,第二个参数为数组里元素的索引

JavaScript数组Array的一些常用方法总结

目录 一.JavaScript中创建数组的方式 二.数组方法概括 三.方法详解 1.join() 2.pop() 3.shift() 4.push() 5.unshift() 6.concat() 7.slice() 8.sort() 9.reverse() 10.toString() 11.splice() 12.valueOf() 13.indexOf() 14.lastIndexOf() 15.forEach() 16.map() 17.filter() 18.every() 19.som

JavaScript面试之如何实现数组拍平(扁平化)方法

目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

js数组的 entries() 获取迭代方法

目录 1.entires() 方法语法详解 2.entires() 方法常见使用及注意 2.1 返回迭代器对象 2.2 for...of...的使用 2.3 二维数组行排序 1.entires() 方法语法详解 entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value) . 迭代对象中数组的索引值作为 key, 数组元素作为 value.它的原型(__proto__:Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的[key,v

详解JavaScript数组的常用方法

目录 数组的常用方法 pop() unshift() shift() slice() splice() 数组元素去重 concat() join() reverse() sort() 总结 数组的常用方法 push() 改方法可以向数组末尾添加一个或多个元素,并返回数组的新长度 可以将添加的元素作为方法的参数传递,这些元素会自动添加加到数组的末尾 改方法会将数组新的长度作为返回值返回 var arr = ["小和尚","小猴","小猪",&quo

JavaScript数组 几个常用方法总结

目录 1.前言 2.filter() 3.map() 4.sort() 5.reduce() 6.forEach() 7.方法列表 8.本文参考 1.前言 数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习. 后续会慢慢的将其他数组方法添加进来. 善用数组方法可以使数据处理变的优雅且简单. 那下面让我们开始吧: 2.filter() 描述: filter() 方法创建一个新数组,并将符合条件的所有元素添加到创建的新数组中. 语法: Array.filter(callback

javascript数组去重常用方法实例分析

本文实例讲述了javascript数组去重常用方法.分享给大家供大家参考,具体如下: 数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍. 首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下: // 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组 //第一种方法,遍历,将没有的插入临时数组 function uniqArray1(arr) { var n=[]

javascript数组常用方法汇总

本文为大家总结了javascript数组常用方法,具体内容如下 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使用逗号.案例如下: var a=[1,2,3]; a.join();//=> "1,2,3" 因为没有指定分隔符,默认为逗号. a.join("+");//=> "1+2+3"

Javascript中String的常用方法实例分析

本文实例讲述了Javascript中String的常用方法.分享给大家供大家参考.具体如下: // length属性:获取字符串的字符个数. var s='爱像一阵风'; alert(s.length); // charAt(index)方法:获取指定索引位置的字符,索引从0开始 var s1='我不要再想你'; alert(s1.charAt(4));//想 // indexOf('e',startIndex)方法:获取指定字符串第一次出现的位置.startIndex表示从第几个开始搜索. v

JS数组求和的常用方法总结【5种方法】

本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, 2, 3, 4 ]) 输出例子: 10 方法1. 不考虑算法复杂度,用递归做: function sum(arr) { var len = arr.length; if(len == 0){ return 0; } else if (len == 1){ return arr[0]; } else

JavaScript数组、json对象、eval()函数用法实例分析

本文实例讲述了JavaScript数组.json对象.eval()函数用法.分享给大家供大家参考,具体如下: 一.JavaScript中的数组 数组使用[].new Array()或new Array(count)进行创建 创建数组之后我们可以对其静态初始化,也可以对其动态赋值 数组的常用属性:length 数组的常用方法:toString().join().reverse().push().pop() <script type="text/javascript"> //静

JS数组求和的常用方法实例小结

本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: js数组求和的方法 var array = [1, 2, 3, 4, 5]; var sum = 0; 1.for循环 for (let i = 0; i < array.length; i++) { sum += array[i]; } console.log(sum) 运行结果sum为 15,如下图所示: 2.forEach array.forEach(ele => { sum += ele; }); 运行结果同样su

JavaScript交换变量的常用方法小结【4种方法】

本文实例讲述了JavaScript交换变量的常用方法.分享给大家供大家参考,具体如下: 许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1. 解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a;

JavaScript数组迭代器实例分析

本文实例讲述了JavaScript数组迭代器用法.分享给大家供大家参考.具体如下: 这里注意:如果数组中有0.false."".null.NaN迭代器将会停止 function createIterator(x) { var i = 0; return function(){ return x[i++]; }; } var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current

JavaScript 数组的深度复制解析

对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat.slice在内的函数,都是浅层复制.也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变. 于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制. 一般情况下,使用 "=" 可以实现赋值.但对于数组.对象.函数等这些引用类型的数据,这个符号就不好使了. 1. 数组的简单复制 1.1 简单遍历 最简单也最基础的方式,自然

javascript数组操作(创建、元素删除、数组的拷贝)

1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以