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 :

创建数组对象

edit
创建一个数组对象
创建数组对象的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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性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 :

遍历一个数组

edit
遍历有两种方式
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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
方法 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 :

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

edit
方法 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 :

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

edit
方法 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 :

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

edit
方法 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 :

对数组的内容进行排序

edit
方法 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 :

自定义排序算法

edit
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 :

练习-排序

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
自定义一个函数,对数组进行排序,要求排序后数组中无重复数据
练习-排序
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
自定义一个函数,对数组进行排序,要求排序后数组中无重复数据
运行效果
<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 :

对数组的内容进行反转

edit
方法 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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
方法 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 :

删除和插入元素

edit
方法 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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
实现字符串替换功能
提示: 为了完成这个练习,需要用到字符串所学的知识
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2024-07-26 使用 Array 对象 和 String 对象结合的方法实现 字符串按单词、首字母 排序的功能
虚心求学




主要用到 1.Array 对象的方法: sort 、 reverse 、 join 对于 join 可以之间传递一个空参数, 即可直接将数组拼接为字符串(无分隔符) 2.String 对象的方法: split。 对于字符串转数组可以直接使用: str.split(''); 传递一个空参数即可将字符串转为字符串数组。 对于正排序 直接使用 sort 即可。 对于倒排序可以使用 自定义 comparator 还可以 直接对 sort 结果进行 reverse 操作。
加载中
<script>
function get(id){
    var element = document.getElementById(id);
    return element ;
}
 
function set(id,value){
    get(id).value=value;
}  
function str2array(str){
  var str = new String(str);
  var res = new Array();
  for(let i = 0;i<str.length ; i++){
    res.push(str.charAt(i));
  }
  return res;
}
function sortByLetter(){
	var src = str2array(get('src').value);
    src.sort();
    set('res1',src.join(''));
    set('res2',src.reverse().join(''));
}
function sortByWord(){
	var str = get('src').value;
  	var src = str.split(' ');
    src.sort();
    set('res1',src.join(' '));
    set('res2',src.reverse().join(' '));
}
</script>
 
<table>
<tr>
<td>源字符串:</td>
<td><input id="src"></td>
</tr>
  <tr>
<td>正排序:</td>
<td><input id="res1"></td>
</tr>
  <tr>
<td>倒排序:</td>
<td><input id="res2"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"><button onclick="sortByLetter()">字母排序</button></td>
</tr>
  <tr>
<td colspan="2" style="text-align:center"><button onclick="sortByWord()">单词排序</button></td>
</tr>
</table>

							


1 个答案

虚心求学
答案时间:2024-07-26
更简洁的写法



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2023-05-23 欢迎指正!
ustc_jayson




欢迎大家指出问题~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    table{border-collapse: separate;}
    td{padding: 5px 2px;}
    button{padding: 10px;width: 150px;}
</style>

<table>
    <tr>
        <td>随机输入英文字符串:</td>
        <td><textarea id="input" cols="30" rows="2"></textarea></td>
    </tr>
    <tr>
        <td>正排序结果:</td>
        <td><textarea id="output1" cols="30" rows="2"></textarea></td>
    </tr>
    <tr>
        <td>倒排序结果:</td>
        <td><textarea id="output2" cols="30" rows="2"></textarea></td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <button onclick="alphabetSort()" type="submit"> 按照字母排序</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <button onclick="wordSort()" type="submit"> 按照单词排序</button>
        </td>
    </tr>

</table>
<script src="../JavaScript/js_01.js"></script>
</body>
</html>

function getId(){
    return document.getElementById("input").value;
}
//按照字母排序按钮
function alphabetSort() {
    let x = new String(getId());
    let y = new Array();
    PositiveAlphabetSort(x,y);
    NegativeAlphabetSort(y);
}
//按照正顺序字母排序
function PositiveAlphabetSort(x,y){
    for (let i = 0; i < x.length; i++) {
        if (x[i]===" "){
            continue;
        }
        y.push(x[i]);
    }
    y.sort();
    document.getElementById("output1").value= y.join("");
}
//按照倒顺序字母排序
function NegativeAlphabetSort(y){
    y.reverse();
    document.getElementById("output2").value= y.join("");
}


//按照单词排序按钮
function wordSort() {
    let x = new String(getId());
    let y = x.split(" ")
    document.getElementById("output1").value= y.sort(positiveWordComparator).join(" ")
    document.getElementById("output2").value= y.sort(negativeWordComparator).join(" ")
}
//单词正排序比较器
function positiveWordComparator(v1,v2){
    return v1.charCodeAt(0)-v2.charCodeAt(0);
}
//单词倒排序比较器
function negativeWordComparator(v1,v2){
    return v2.charCodeAt(0)-v1.charCodeAt(0);
}

							


1 个答案

Leslie_sakura
答案时间:2024-04-14
去重复答案



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-04-10 15-exercise
2022-04-10 10-exercise
2021-11-14 第一题,以现在的知识只会写双重for


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 76 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JavaScript-数组 的提问

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

上传截图