• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端 js 数组的常用函数的方法,如( push、pop、unshift、shift、splice、concat、 join)等函数

武飞扬头像
Luke
帮助291

1、数组添加删除 头部或尾部( push()、pop()、unshift()、shift() )

例1:设置数组的length

html

<ul>
	<li>1、设置数组的length</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>默认length</button> &nbsp;<button>取前3个</button></li>
</ul>

js:

var btn = document.getElementsByTagName('button');
//原数组
btn[0].onclick = function(){
	var arr=[1,2,3,4,5];
	alert(arr) //1,2,3,4,5
}
//取前三个
btn[1].onclick = function(){
	var arr=[1,2,3,4,5];
	arr.length = 3;
	alert(arr) //1,2,3
}

*例2、

数组尾部添加 **push()*方法可向数组的末尾添加一个或多个元素,并返回新的长度 

语法:arrayObject.push(newelement1,newelement2,....,newelementX)

html:

<ul>
	<li>2、数组尾部添加 push</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>尾部添加</button> &nbsp;</li>
</ul>

js:

//尾部添加一个元素
btn[2].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.push(6)
	alert(arr) //1,2,3,4,5,6
}

*例3、

数组尾部删除 **pop()*方法用于删除并返回数组的最后一个元素 

语法:arrayObject.pop()

html:

<ul>
	<li>3、数组尾部删除 pop</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>尾部删除一个</button> &nbsp;</li>	
</ul>

js:

//尾部删除一个
btn[3].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.pop()
	alert(arr) //1,2,3,4
}

例4:

数组头部添加 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度 

语法:arrayObject.unshift(newelement1,newelement2,....,newelementX)

html:

<ul>
	<li>4、数组头部添加 unshift</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>头部添加一个</button> &nbsp;</li>	
</ul>

js:

//头部添加一个
btn[4].onclick= function(){
	var arr = [1,2,3,4,5]
	arr.unshift('w')
	alert(arr) //w,1,2,3,4,5
}

例5:

数组头部删除 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值 

语法:arrayObject.shift()

html:

<ul>
	<li>5、数组头部删除 shift</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>头部删除一个</button> &nbsp;</li>
</ul>

js:

//头部删除一个
btn[5].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.shift()
	alert(arr)//2,3,4,5
}

2、对数组删除\添加、替换的用法 splice()的用法 ** *例1、数组删除 splice() --可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除项的项数 * 语法: arr.splice(起点,长度) 【如 arr.splice(0,2) 会删除数组中的前两项。】

html:

<ul>
	<li>6、数组添加删除 任意操作 (删除 splice)</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>删除2-4</button> &nbsp;</li>
</ul>

js:

//删除2-4
btn[6].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.splice(1,3)//从第一个元素后面,删除三个元素
	alert(arr)//1,5
}

例2:数组添加 splice() --可以向指定位置插入任意数量的项,只需要提供3个参数:插入起始位置、0(要删除的项数)和要插入的项。 如果要插入多个项,可以再传入第四、第五,一直任意多个项。 语法:arr.splice(起点,长度为0,需要添加的元素) 【如 arr.splice(2,0,”a”,”b”)会从位置2开始插入字符串“a”和”b”】

html:

<ul>
	<li>6、数组添加删除 任意操作 (添加 splice)</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>在第二位添加abc</button> &nbsp;</li>	
</ul>	 

js:

btn[7].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.splice(1,0,'abc')//从第一个元素后面,添加abc元素
	alert(arr)//1,abc,2,3,4,5
}//添加abc

例3:数组的替换 splice()--即删除和插入数量相等项数的综合应用,可以指向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定3个指定参数:起始位置、要删除的项数和要插入的任意数量项。 插入的项数是不必与删除的项数相等。 语法:arr.splice(起点,长度为要替换的个数,替换后的元素) 【如splice(2,2,”a”,”b”) 会删除当前数组位置2的项,然后再从位置2开始插入字符串“a”和“b”。】

html:

<ul>
	<li>6、数组添加删除 任意操作 (替换 splice)</li>
</ul>
<ul>
	<li><span>var arr=[1,2,3,4,5] </span><button>在第二位删除2位又添加2位</button> &nbsp;        </li>
</ul>

js:

/在第二位后面删除2位又添加2位
btn[8].onclick = function(){
	var arr = [1,2,3,4,5]
	arr.splice(2,2,'a','b')//从第二个元素后面,添加a,b元素
	alert(arr) //1,2,a,b,5
}/

3、数组连接、分割(concat()、join()的用法)

例1、数组连接 concat() 方法用于连接两个或多个字符串。该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串 语法:string.concat(string1, string2, ..., stringX) html:

<ul>
		<li>数组连接 concat</li>
		<li><span>var a=[1,2,3]; var b=[4,5,6] </span><button>连接两个数组</button> &nbsp;</li>
</ul>

js:

btn[9].onclick = function(){
	var a = [1,2,3] 
	var b = [4,5,6]
	var arr = a.concat(b) //concat()方法用于连接两个或多个数组
	alert(arr) //1,2,3,4,5,6
}

*例2、数组分隔 **join()*方法用于把数组中的所有元素放入一个字符串。 语法:arrayObject.join(separator)

html:

<ul>
<li>例2、数组分隔 join</li>
		<li><span>var a=[1,2,3,4,5,6] </span><button>用-连接</button> &nbsp;</li>
</ul>

js:

btn[10].onclick = function(){
	var a = [1,2,3,4,5,6]
	a.join('-')//使用分隔符来分隔数组中的元素
	alert(a.join('-'))//1-2-3-4-5-6
}

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanegae
系列文章
更多 icon
同类精品
更多 icon
继续加载