how2j.cn


工具版本兼容问题
javascript中的数组是动态的,即长度是可以发生变化的。

关键字 简介 示例代码
new Array
创建数组对象
示例代码
属性 length
数组长度
示例代码
for
for in
遍历一个数组
示例代码
方法 concat
连接数组
示例代码
方法 join
通过指定分隔符,返回一个数组的字符串表达
示例代码
方法 push pop
分别在最后的位置插入数据和获取数据(获取后删除)
示例代码
方法 unshift shift
分别在最开始的位置插入数据和获取数据(获取后删除)
示例代码
方法 sort
对数组的内容进行排序
示例代码
方法 sort(comparator)
自定义排序算法
示例代码
练习-排序
示例代码
答案-排序
示例代码
方法 reverse
对数组的内容进行反转
示例代码
方法 slice
获取子数组
示例代码
方法 splice
删除和插入元素
示例代码
练习
示例代码
答案
示例代码
示例 1 : 创建数组对象   
示例 2 : 数组长度   
示例 3 : 遍历一个数组   
示例 4 : 连接数组   
示例 5 : 通过指定分隔符,返回一个数组的字符串表达   
示例 6 : 分别在最后的位置插入数据和获取数据(获取后删除)   
示例 7 : 分别在最开始的位置插入数据和获取数据(获取后删除)   
示例 8 : 对数组的内容进行排序   
示例 9 : 自定义排序算法   
示例 10 : 练习-排序   
示例 11 : 答案-排序   
示例 12 : 对数组的内容进行反转   
示例 13 : 获取子数组   
示例 14 : 删除和插入元素   
示例 15 : 练习   
示例 16 : 答案   

示例 1 :

创建数组对象

创建一个数组对象
创建数组对象的3种方式:
1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,,但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组
运行效果
<script> function p(s,v){ document.write(s+' '+v); document.write("<br>"); } var x = new Array(); //创建长度是0的数组 p('通过 new Array()创建一个空数组:',x); x = new Array(5); //创建长度是5的数组,,但是其每一个元素都是undefine p('通过 new Array(5)创建一个长度是5的数组:',x); p('像new Array(5) 这样没有赋初值的方式创建的数组,每个元素的值都是:',x[0]); x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组 p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x); </script>
<script>
function p(s,v){
  document.write(s+' '+v);
  document.write("<br>");
}

var x = new Array(); //创建长度是0的数组
p('通过 new Array()创建一个空数组:',x);
x = new Array(5); //创建长度是5的数组,,但是其每一个元素都是undefine
p('通过 new Array(5)创建一个长度是5的数组:',x);
p('像new Array(5) 这样没有赋初值的方式创建的数组,每个元素的值都是:',x[0]);
x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

数组长度

属性length 获取一个数组的长度
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组 p('当前数组是:'+x); p('通过.length获取当前数组的长度:'+x.length); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('当前数组是:'+x);
p('通过.length获取当前数组的长度:'+x.length);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

遍历一个数组

遍历有两种方式
1.结合for循环,通过下标遍历
2.使用增强for in循环遍历
需要注意的是,在增强for in中,i是下标的意思。

for(i in x){ //for in 循环
p(x[i]);
}
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4); p('当前数组是:'+x); p("使用普通的for循环遍历数组"); for(i=0;i<x.length;i++){ //普通for循环 p(x[i]); } p("使用增强for循环遍历数组"); for(i in x){ //for in 循环 p(x[i]); } </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4); 
p('当前数组是:'+x);
p("使用普通的for循环遍历数组");
for(i=0;i<x.length;i++){  //普通for循环
  p(x[i]);
}
p("使用增强for循环遍历数组");
for(i in x){  //for in 循环
  p(x[i]);
}
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

连接数组

方法 concat 连接两个数组
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4); var y = new Array(1,5,9,2,6); p('数组x是:'+x); p('数组y是:'+y); var z = x.concat(y); p('使用concat连接数组x和y'); p('数组z是:'+z); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
var x = new Array(3,1,4); 
var y = new Array(1,5,9,2,6); 
p('数组x是:'+x);
p('数组y是:'+y);

var z = x.concat(y);
p('使用concat连接数组x和y');
p('数组z是:'+z);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

通过指定分隔符,返回一个数组的字符串表达

方法 join 通过指定分隔符,返回一个数组的字符串表达
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4); p('数组x是:'+x); var y = x.join(); p('y = x.join() 得到的是数组x的字符串表达,其值是'+y+" 其类型是 :" +(typeof y)); var z = x.join("@"); p('z = x.join("@");是x的字符串表达,不过分隔符不是默认的"," 而是"@" : '+z); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4); 
p('数组x是:'+x);
var y = x.join();
p('y = x.join() 得到的是数组x的字符串表达,其值是'+y+" 其类型是 :" +(typeof y));
var z = x.join("@");
p('z = x.join("@");是x的字符串表达,不过分隔符不是默认的"," 而是"@" : '+z);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

分别在最后的位置插入数据和获取数据(获取后删除)

方法 push pop,分别在最后的位置插入数据和获取数据(获取后删除)
就像先入后出的栈一样
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4); p('数组x是:'+x); x.push(5); p('向x中push 5,得到 ' + x); var e = x.pop(); p('从x中pop一个值出来,其值是 ' + e); p('pop之后,x数组的值是:'+x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4); 
p('数组x是:'+x);

x.push(5);
p('向x中push 5,得到 ' + x);
var e = x.pop();
p('从x中pop一个值出来,其值是 ' + e);

p('pop之后,x数组的值是:'+x);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

分别在最开始的位置插入数据和获取数据(获取后删除)

方法 unshift shift ,分别在最开始的位置插入数据和获取数据(获取后删除)
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4); p('数组x是:'+x); x.unshift (5); p('对数组 unshift 值5(在最前面加),数组变为:' + x); var e = x.shift (); p('从数组中 shift 一个数(从最前面取),其值是:' + e); p('shift之后,数组变为:' + x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4); 
p('数组x是:'+x);
x.unshift (5);
p('对数组 unshift 值5(在最前面加),数组变为:' + x);
var e = x.shift ();
p('从数组中 shift 一个数(从最前面取),其值是:' + e);
p('shift之后,数组变为:' + x);
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

对数组的内容进行排序

方法 sort对数组的内容进行排序
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4,1,5,9,2,6); p('数组x是:'+x); x.sort(); p('使用sort排序后的数组x是:'+x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new Array(3,1,4,1,5,9,2,6); 
p('数组x是:'+x);
x.sort();
p('使用sort排序后的数组x是:'+x);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

自定义排序算法

sort()默认采用正排序,即小的数排在前面。 如果需要采用自定义排序的算法,就把比较器函数作为参数传递给sort()。
比较器函数:

function comparator(v1,v2){
return v2-v1; //v2-v1表示大的放前面,小的放后面
}

调用sort函数的时候,把这个比较器函数comparator作为参数传递进去即可

x.sort(comparator);
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } function comparator(v1,v2){ return v2-v1; } var x = new Array(3,1,4,1,5,9,2,6); p('数组x是:'+x); x.sort(comparator); p('使用sort 进行自定义倒排序后的数组x是:'+x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

function comparator(v1,v2){
   return v2-v1;
}

var x = new Array(3,1,4,1,5,9,2,6); 
p('数组x是:'+x);
x.sort(comparator);
p('使用sort 进行自定义倒排序后的数组x是:'+x);

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

练习-排序

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
自定义一个函数,对数组进行排序,要求排序后数组中无重复数据
练习-排序
示例 11 :

答案-排序

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
自定义一个函数,对数组进行排序,要求排序后数组中无重复数据
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } function check(value,a){ for(i in a){ if(value==a[i]) return true; } return false; } function removeDuplicate(a){ var result =new Array(); while(a.length!=0){ var v = a.pop(); console.log(v); if( !check(v,a) ){ result.push(v); } } return result; } var x = new Array(1,3,4,5,7,7,4,5,6,7,7); p('数组x是:'+x); x = removeDuplicate(x); x.sort(); p('使用sort排序后的无重复数据的数组x是:'+x); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

对数组的内容进行反转

方法 reverse,对数组的内容进行反转
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4,1,5,9,2,6); p('数组x是:'+x); x.reverse(); p('使用reverse()函数进行反转后的值是:'+x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new Array(3,1,4,1,5,9,2,6); 
p('数组x是:'+x);
x.reverse();
p('使用reverse()函数进行反转后的值是:'+x); 

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

获取子数组

方法 slice 获取子数组
注意: 第二个参数取不到
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4,1,5,9,2,6); p('数组x是:'+x); var y = x.slice(1); p('x.slice(1)获取的子数组是:'+y); var z = x.slice(1,3); p('x.slice(1,3)获取的子数组是:'+z); p('第二个参数取不到'); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var x = new Array(3,1,4,1,5,9,2,6); 
p('数组x是:'+x);
var y = x.slice(1);
p('x.slice(1)获取的子数组是:'+y);
var z = x.slice(1,3);
p('x.slice(1,3)获取的子数组是:'+z);
p('第二个参数取不到');
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 14 :

删除和插入元素

方法 splice (不是 slice) 用于删除数组中的元素
奇葩的是 ,它还能用于向数组中插入元素
运行效果
<script> function p(s){ document.write(s); document.write("<br>"); } var x = new Array(3,1,4,1,5,9,2,6); p('数组x是:'+x); x.splice (3,2);//从位置3开始 ,删除2个元素 p('x.splice (3,2) 表示从位置3开始 ,删除2个元素:'+x); x.splice(3,0,1,5); p('x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:'+x); </script>
<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var x = new Array(3,1,4,1,5,9,2,6); 
p('数组x是:'+x);
x.splice (3,2);//从位置3开始 ,删除2个元素
p('x.splice (3,2) 表示从位置3开始 ,删除2个元素:'+x);
x.splice(3,0,1,5);
p('x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:'+x);
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 15 :

练习

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
实现字符串替换功能
提示: 为了完成这个练习,需要用到字符串所学的知识
<table> <tr> <td>随机输入英文字符串:</td> <td><textarea id="src">what a great day</textarea></td> </tr> <tr> <td>正排序结果:</td> <td><textarea id="result"></textarea></td> </tr> <tr> <tr> <td>倒排序结果:</td> <td><textarea id="result"></textarea></td> </tr> <tr> <td colspan="2" align="center"><button onclick="replace()">按照字母排序</button></td> </tr> <tr> <td colspan="2" align="center"><button onclick="replace()">按照单词排序</button></td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 16 :

答案

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<script> function getValue(id){ return document.getElementById(id).value; } function setValue(id,value){ document.getElementById(id).value=value; } function sortByWord(){ var src = getValue("src"); var a = src.split(" "); a.sort(); var result1 = a.join(" "); setValue("result1",result1); a.reverse(); var result2 = a.join(" "); setValue("result2",result2); } function sortByAlpha(){ var src = getValue("src"); var a = new Array(); for(var i=0; i<src.length;i++){ var c = src.charAt(i); a.push(c); } a.sort(); var result1 = a.join(""); setValue("result1",result1); a.reverse(); var result2 = a.join(""); setValue("result2",result2); } </script> <table> <tr> <td>随机输入英文字符串:</td> <td><textarea id="src">what a great day</textarea></td> </tr> <tr> <td>正排序结果:</td> <td><textarea id="result1"></textarea></td> </tr> <tr> <tr> <td>倒排序结果:</td> <td><textarea id="result2"></textarea></td> </tr> <tr> <td></td> <td colspan="" align="left"><button onclick="sortByAlpha()">按照字母排序</button> <br> <br> <button onclick="sortByWord()">按照单词排序</button> </td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-10-14 实例10作业
图腾不息



使用splice函数进行 执行如下: 1,2,3,3,5,5,6,7,7,8,8,9,9 1,2,3,5,6,7,8,9
<script type="text/javascript">
		var k=new Array(3,5,6,2,1,5,3,9,7,9,8,8,7);
		k.sort();
		document.write(k);
		document.write('<br>');
		for(i=0;i<k.length;i++){
			//使用splice函数对数组进行从小到大排列,同时删除重复数组元素
				if(k[i]==k[i+1]){
					k.splice(i+1,1);//从i+1位置开始,删除1个元素,如不设定删除元素个数,默认为后面所有.
				}
			
		}
		document.write(k);

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-14 实例10答案
图腾不息



使用splice函数 1,2,3,3,5,5,6,7,7,8,8,9,9 1,2,3,5,6,7,8,9
<script type="text/javascript">
		var k=new Array(3,5,6,2,1,5,3,9,7,9,8,8,7);
		k.sort();
		document.write(k);
		document.write('<br>');
		for(i=0;i<k.length;i++){
			//使用splice函数对数组进行从小到大排列,同时删除重复数组元素
				if(k[i]==k[i+1]){
					k.splice(i+1,1);//从i+1位置开始,删除1个元素,如不设定删除元素个数,默认为后面所有.
				}
			
		}
		document.write(k);

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-05 练习一可以用一行代码完成
2018-10-04 几点疑问
2018-08-16 用jquery写的例15
2018-07-29 例15练习
2018-05-31 示例10答案:我的代码能正常用,但是感觉怪怪的
2018-05-15 示例15:完美的答案
2018-03-20 作业
2018-01-09 如果我想不在这里给定,而是从html里面获取,应该怎么做呢?
2017-12-11 <textarea>标签在我这里似乎并不能通过getElementById().value的形式取到值
2017-12-11 <textarea>标签在我这里似乎并不能通过getElementById().value的形式取到值
2017-11-27 请问示例10的console.log(v);有什么用
2017-10-25 为什么按单词排序就是出不来
2017-10-19 sort() 好像不能排序10以上的数字,包括10
2017-09-24 无重复排序
2017-09-10 为什么我这样就只能得到这种结果呢?
2017-08-17 示例15的练习我把数组转换成String类型的然后调用String类型的方法replace方法替换掉所有的逗号,这种做法也可以实现.请问群主这种做法有什么弊端吗.
2017-08-16 关于sort排序
2017-07-18 在按字母排序时,原句中几个空格也被编入数组
2017-06-17 排序练习为什么我写的不对,找不出原因
2017-04-29 slice splice 功能
2017-02-27 请问,split('')和split(“ ”)
2017-02-08 站长,有没有类似Java API的手册,提供JavaScript的方法和属性?
2016-11-24 排序问题




提问之前请登陆
关于 前端部分-JavaScript-数组 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图