数组常用方法 （ES4、ES5、ES6以及ES7）

最新推荐文章于 2023-08-21 08:00:00 发布
最新推荐文章于 2023-08-21 08:00:00 发布
阅读量896 收藏 2
点赞数
分类专栏： 数组 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50580285/article/details/117259540
版权

数组方法

目录

一、ES4的数组方法

join( )

是将数组内的所有元素转化为字符串并拼接在一起，最后返回生成的字符串。可以指定一个可选的字符串，来分隔数组得各个元素，默认使用 “,” 相隔

实例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>join()</h2>


<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

结果：

Banana * Orange * Apple * Mango

sort( )

  • 目的：将数组的元素按照一定规则排序.
  • 参数：传超过1个的函数，默认取第一个函数，没参数的时候数组元素默认按照字母表顺序排序.
  • 函数参数：

1.你必须给sort()方法传递一个比较函数，所以一般传递2个参，PS:第3个默认undefined.
2. 假设第一个参数应该在前，你应该返回一个小于0的数值，否则，你应该返回一个大于0的数值,
3.假设两个值相等，函数应该返回0.
4.数组元素是从前到后 俩俩比较.

  • 是否改变原数组: 改变原来的数组.

例子：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort()) 

</script>

结果：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

reverse( )

  • 目的：将数组中的元素颠倒顺序.
  • 参数：没有参数.
  • 是否改变原数组: 改变原来的数组.

例子：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

结果：

George,John,Thomas
Thomas,John,George

concat( )

  • 目的：像胶水一样，将参数粘合在数组后面
  • 参数：字符串或数组
  • 是否改变原数组:不改变原数组, 返回一个新的数组.

例子：

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));

</script>

结果：

1,2,3,4,5

slice( )

  • 目的：返回数组的一个片段或子数组.
  • 参数：一个或者两个参数
  • 是否改变原数组: 不改变原数组, 返回一个新的数组

例子：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>

结果：

George,John,Thomas
John,Thomas
George,John,Thomas

splice();

  • 目的：从数组中删除元素、插入元素、或者同时完成这俩种操作.
  • 参数：前俩个参数指定了删除，从第三个参数开始，指定拼接。
  • 是否改变原数组: 改变原来的数组.

例子：

结果：

push( )和pop( )

目的：向数组中插入或删除元素.
参数：push()方法不限制参数，不会扁平化数组。pop()方法不传参数.
行为：从尾部插入或删除值，push()方法返回数组长度，pop()方法返回被删除的值.
是否改变原数组: 改变原来的数组.
例子：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>

结果：

George,John,Thomas
4
George,John,Thomas,James

unshift( )和shift( )

  • 目的：向数组中插入或删除元素.
  • 参数：unshift()方法不限制参数，在数组的头部，而不是改变参数的顺序。shift()方法无视参数.
  • 行为：在数据的头部操作.
  • 是否改变原数组: 改变原来的数组.

例子：

<script type="text/javascript">

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>

结果：

George,John,Thomas
4
William,George,John,Thomas

toString( )和toLocaleString( )

  • 目的：将数组的每个方法转化为字符串，并且输出用逗号分隔的字符串列表.
  • 参数：俩个方法无视参数.
  • 是否改变原数组: 不改变原数组, 返回一个新的字符串.

两者区别

var a=1234
a.toString()  //"1234"
a.toLocaleString()  //"1,234"
//当数字为四位数时，toLocaleString()把数字按每3个用','分割。

ES5的数组方法

indexOf( )和lastIndexOf( )

  • 目的：搜索数组中具有给定值的元素。
  • 参数：第一个参数指的是需要搜索的值，返回则找到第一个元素的索引
  • lastIndexOf() 指从前往后查询. lastIndexOf() 指从后往前查询.

例子：

//indexOf()与lastIndexOf()的区别
	public static void main(String[] args) {
		String name = "123456789";
		String name1 = "888888888";
		String name0 = "123456778";
		
		System.out.println(name1.indexOf("8"));//0
		System.out.println(name1.lastIndexOf("8"));//8
		
	}

结果：
indexOf()是从左往右找，lastIndexOf()是从右往左找第一个。

map( )

  • 目的：将数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值．
  • 参数：一个带有return的函数（函数中的return的值将被传递给新数组）．
  • 是否改变原数组: 不改变原数组，返回一个新数组。

例子：

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

结果：

> Array [2,8,18,32]

filter( )

  • 目的：将数组的每个元素传递给指定的函数，并返回一个数组.
  • 参数：一个带有return的函数．
  • 是否改变原数组: 不改变原数组，返回一个新数组，新数组是原数组的子集

例子：

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

结果：

32,33,40

every( )和some( )

  • 目的：对数组元素应用指定的函数判定.
  • 参数：二者都需要一个函数.
  • 是否改变原数组: 不改变原数组，返回一个新数组。

例子：

  <script>
 	//--------some------------
        var arr = [1, 2, 3, 4, 5, 6];

        console.log(arr.some(function (item, index) {
            console.log('item=' + item + ',index=' + index);
            return item > 2;
        }));
        //some的结果
        //item=1,index=0
		//item=2,index=1
		//item=3,index=2
		//true
	//-------every--------
	var arr = [ 1, 2, 3, 4, 5, 6 ]; 

	console.log( arr.every( function( item, index){ 
    console.log( 'item=' + item + ',index='+index); 
    return item > 2; 
	}));
	//every结果
	//item=1,index=0
	//false
    </script>

结果：

ES6的数组方法

Array.from( )

  • 目的：将类数组对象和可遍历对象转化为数组．
  • 参数：第二个参数类似于数组中的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组.
  • 用法：const toArray = (() => Array.from ? Array.from : obj => [ ].slice.call(obj) )().

例子：

console.log(Array.from('foo'));
// Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// Array [2, 4, 6]

Array.of( )

  • 目的：将一组值转化为数组．
  • 参数：无或无限(无时返回一个空数组).

例子：

Array.of(element0[, element1[, ...[, elementN]]])

find( )和findIndex( )

  • 目的：在数组内部, 找到第一个符合条件的数组成员．
  • 参数：回调函数接受三个参数，表示当前值，当前位置，原数组.

例子：

 
var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]

<script>
	stu.find((element) => (element.name == '李四'));
		//返回的是{name: "李四", gender: "男", age: 20}这个元素
 
	stu.findIndex((element)=>(element.name =='李四')); 
		//返回的是索引下标：2
</script>

fill( )

  • 目的：如其意，填充一个数组．

  • 参数：

    1.第一个参数表示被填充的元素.
    2.第二个参数表示填充的起始位置.
    3.第三个参数表示填充的结束位置.

例子：

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

结果：

Runoob,Runoob,Runoob,Runoob

ES7的数组方法

includes( )

  • 目的：表示某个数组是否包含给定的值，与字符串的includes()方法类似.
  • 参数：第一个参数表示要查找的数，第二个参数表示搜索的起始位置，返回一个布尔值.

例子：

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

定义和用法：

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
哪吒U
关注
专栏目录
ES5、6、7最常用的知识点概括总结
qq_42496307的博客
05-15 542
ECMAScript 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范 JavaScript 是ECMA的实现 JS 包含三个部分 ECMAScript（核心） 扩展==》浏览器端 BOM （浏览器对象模型） DOM（文档对象模型） 3.扩展==》服务器端 Node ES的几个重要版本 ES5：09年发布 ES6（ES2015）：15年发布，也称为ECM...
工作中常用es6+特性
jiang_hyhappy的博客
07-13 302
结合工作中使用情况，简单对es6进行一些复习总结，包括常用的语法，api等，以及短时间内要上手需要重点学习的知识点（不同工作环境可能有一些差别），主要参考链接是阮一峰的博客以及外文博客（阮老师大部分文章是直接翻译的这个博客） http://2ality.com/p/about.html 1.简介 先说一下ECMAScript，ECMA是一个标准化组织，他们制定了JavaScript的语言标准，所...
es 数组操作方法
xinhongjun12的博客
12-25 3157
1、forEach （不变）遍历数组, 没有返回值, 不允许在循环体内写return 2、map（不变） 遍历，返回新数组 3、filter （不变） 过滤，返回新数组 3、reduce（不变） 累加，返回新数组 4、every（不变） 判断所有成员都.. 5、some（不变） 判断有成员.. 6、concat (变) 修改原数组 拼接 7、sort (变) 排序 默认是a-b <0 升序 8、copyWithin (变）拷贝数组的一个部分，替换到数组的指定位置 ...
数组方法（es4、es5、es6）
kamianlaidaa的博客
05-26 643
数组方法（es4、es5、es6） 目录 数组方法（es4、es5、es6） js中数组常用的方法： es4中常用方法 es5中常用方法 es6中常用方法 js中数组常用的方法： es4中常用方法 1，sort()数组排序可以没有参数使用：将数组中所有的元素都看作字符型数据来进行排序。 var num=[10,5,4,0,29,91,52,73,1]; console.log(num); num.sort(function(a,b){ return a-b; }) //将num..
es - 数组方法大全
weixin_42631976的博客
12-23 1742
es3数组常用方法 es5数组常用方法 es6数组常用方法 es7数组常用方法 push()：添加 - 数组末尾 let a = [1,2,3]; a.push(4); console.log(a); [1,2,3,4] pop()：删除 - 数组末尾 let a = [1,2,3]; a.pop(); console.log(a);[1, 2] 3.unshift：添加 - 数组开头 let a = [1,2,3]; a.unshift(4); console.log(a);// [4, 1
数组常用方法 （es4,es5,es6）
weixin_57983561的博客
05-25 271
数组 1 什么是数组 存储一组关联数据 2 数组定义方式 数组直接量（常用） var arr = [] ; var arr2 = [10,20,30]; 2 . 通过 new 创建 var arr3 = new Array()； var arr4 = new Array(10,20,30) console.log(arr4) // [ 10, 20, 30 ] 3 数组访问 数组名[下标] 下标0 1 2 3 … 数组长度可以通过数组名.length访问 4 数组元素的遍...
es6 简介
xiawenyi1234的博客
06-23 466
ES6 ECMAScript 6 简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系 一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？ 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netsc
Day5：ES6学习——传智播客学习笔记【微服务电商】
weixin_43895667的博客
02-20 322
1.ES6语法指南 后端项目搭建完毕，接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。 什么是ES6？就是ECMAScript第6版标准。 4.1.什么是ECMAScript？ 来看下前端的发展历程： web1.0时代： 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 web2....
（一）ES6 教程
weixin_46227563的博客
04-04 688
文章目录一、初识ES61. ES6就是ECMAScript 62. ECMAScript3. ES与JS的关系4. ES6的兼容性二、块级绑定1. let和const2. let、const与var的区别(1) 重复声明(2) 变量提升(3) 暂时性死区(4) window对象的属性和方法(5) 块级作用域三、扩展 一、初识ES6 1. ES6就是ECMAScript 6 ECMAScript 是语言的标准；6 是版本号 ES6 = ECMAScript 这门语言的第 6 代标准 2. ECMAScri
深入理解ES6：JavaScript的新飞跃
"该资源主要介绍了ECMAScript（ES）6的新特性，包括语言的定义、历史背景以及ES6的主要特点和新增功能。" ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，于2015年6月正式发布。它致力于使...
ES5、ES6、ES7、ES8特性
xuxuan1997的博客
08-29 5901
1.JavaScript ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型） JavaScript语言的执行环境是“单线程” 2.ES5 strict模式 不允许使用未声明的变量 不允许删除变量或对象、函数 不允许变量重名 不允许使用八进制 不允许使用转义字符 不允许对只读属性赋值 不允许对一个使用getter方法读取的属性进行赋值 不允许删...
ES数组方法
weixin_44500533的博客
12-27 1024
forEach 参数默认是function [].forEach(function(value, index, array) { // … }); 在es6中加入箭头函数： [].forEach( item => { // … }); 兼容ie6-ie8 // 对于古董浏览器，如IE6-IE8 if (typeof Array.prototype.forEach != "function"...
es中数组的方法
ZLZ's blog
03-12 5336
数组的方法分为两类1）改变原数组push,pop,shift,unshift,sort,reverse,splice2）不改变原数组concat,join--&gt;split，toStringpush：从数组最后一位开始加数据pop:把数组最后一位剪切shift:在数组最前一位剪切unshift:在数组最前一位加数据reverse:把原数组逆转splice:arr.splice(从第几位开始，截...
ES5-ES6-ES7_Promise对象详解
03-26 186
Promise对象概述（什么是Promise） Promise 是异步编程的一种解决方案，比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方...
Vue进阶（八十）：ES 数组操作常用方法
IT全栈 华强工作室
10-10 4881
1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素 let arr = [1,2,3,4,5] console.log(arr.p...
ES5，6，7浅析
机智的皮卡丘的博客
01-22 3424
ECMAScript ES是EXMAScript的简称，是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。 历史1998年6
ES6 数组常用方法 ...、find、findIndex、includs、for...of、forEach、for...in、map、filter、some、every、reduce、new Set
最新发布
m0_48968874的博客
08-21 428
ES6：全称为ECMAScript 6，是ECMAScript的第6版本，是 JavaScript 语言的下一代标准，2015 年 6 月正式发布。ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）在标准ECMA-262中定义的脚本语言规范。
常用数组方法汇总（ES3、ES5、ES6、ES7、ES10）
Jeasu_0908的博客
04-09 1145
数组的方法-es3、es5、es6、es7
ES5、ES6、ES7、ES8
qq_35385241的博客
06-05 378
ES5、ES6、ES7、ES8 ES5 Strict Mode 在JS文件或是函数的顶部添加"use strict"即可启用严格模式。 "use strict"; function strict() { "use strict"; } 在严格模式下运行脚本，不少导致提醒或bug行为的事情会抛出错误，例如： （1）变量声明必须用var 在常规模式下，如果我们声明一个变量时省略了var关键字，解析引擎会自动将其声明为全局变量，但在严格模式下，会直接抛出异常，不会为我们转为全局变量 function s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值