数组

最新推荐文章于 2023-03-21 15:12:06 发布

qq1205263469

最新推荐文章于 2023-03-21 15:12:06 发布

阅读量292

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/qq1205263469/article/details/103457826

版权

JavaScript中的数组是动态的，即长度是可以发生变化的

1.创建数组对象 new Array()
创建一个数组对象
创建数组对象的3种方式：
（1）new Array() 创建长度是0的数组
（2）new Array(5); 创建长度是5的数组，但是其每一个元素都是undefined
（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的数组，但是每个元素都是undefined
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>

2.数组长度 a.length
属性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>

3.遍历一个数组 for(i in x){//内容}
遍历有两种方式
1.结合for循环，通过下标遍历
2.使用增强for in 循环遍历
需要注意的是，在增强for in中，i是下标的意思
for(i in x){ //for in循环
p(x[i]);
}

例：

<script>
function p(){
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 in 循环遍历数组");
for(i in x){
    p(x[i]);
}
</script>

4.连接数组 x.concat(y);
方法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>

5.通过指定分隔符，返回一个数组的字符串表达 x.join(“指定分隔符”);
方法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=join()得到的是数组x的字符串表达，其值是"+y+"其类型是："+(typeof y));
var z = x.join("@");
p('z = x.join("@");是x的字符串表达，不过分隔符不是默认的"," 而是"@" : '+z);
 
</script>

6.分别在最后的位置插入数据和获取数据（获取后删除） push(值) pop()
方法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>

**7.分别在最开始的位置插入数据和获取数据（获取后删除）**x.unshift(4) x.shift()
方法unshift shift ，分别在最开始的位置插入数据和获取数据（获取后删除）

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

8.对数组的内容进行排序 x.sort();
方法sort对数组的内容进行排序
sort默认采用正排序，即小的数在前面
例：

<script>
function p(s){
document.write(s);
document.write("<br/>");
}
var x = new Array(3,1,4,5,9,2,6);
p("数组x是："+x);
x.sort();
p("使用sort排序后的数组x是:"+x);
</script>

9.自定义排序算法 x.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>

10.练习自定义一个函数，对数组进行排序，要求排序后数组中无重复数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组排序</title>
</head>
<body>
<script>
var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
function paixu(X){
 
document.write("原数组："+x);
x.sort();
for(var i=0;i<x.length;i++){
 if(x[i]==x[i+1]){
    x.splice(i,1);
    i--;
 }
     
}
 
document.write("排序后数组："+x);
}
paixu(x);
</script>
</body>
</html>

11.对数组内容进行反转 x.reverse()

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

12.获取子数组 x.slice(,) 左闭右开
方法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>

13.删除和插入元素 x.splice()
方法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);
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>

14.练习；实现字符串替换功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现字符串替换</title>
<style>
table{
border:1px solid red;
}
table tr td{
border:1px solid aqua;
}
</style>
</head>
<body>
<script>
function getValue(s){
 var result = document.getElementById(s).value;
 return result;
}
function setValue(id,value){
document.getElementById(id).value = value;
 
}
 
function zimu(){
var source = getValue("source");   //获取值
 
//定义一个空的数组
var a = new Array();
// for循环，将每一个字符放入一个新的变量里，再把新变量里的值push到数组里
for(var i=0;i<source.length;i++){
var c = source.charAt(i);
a.push(c);
}
//数组排序
a.sort();
//把a转成字符串，放入值
var result1 = a.join("");
setValue("result1",result1);
a.reverse();//反转
var result2 = a.join("");
setValue("result2",result2);
}
function word(){
var source = getValue("source");
var a = source.split(" ");//用空格作为分隔符把字符串source转成数组
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="source" rows="" cols=""></textarea>
</td>
</tr>
<tr>
<td>
正排序结果：
</td>
<td>
<textarea id="result1" disabled="disabled"  rows="" cols=""></textarea>
</td>
</tr>
<tr>
<td>
倒排序结果：
</td>
<td>
<textarea id="result2" disabled="disabled"  rows="" cols=""></textarea>
</td>
</tr>
<tr><td align="center" colspan="2"><input type="button" value="按照字母排序" onclick="zimu()"></td></tr>
<tr><td align="center" colspan="2"><input type="button" value="按照单词排序" onclick="word()"></td></tr>
</table>
</body>
</html>

运行效果
在这里插入图片描述

qq1205263469

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数组

JavaScript中的数组是动态的，即长度是可以发生变化的1.创建数组对象 new Array()创建一个数组对象创建数组对象的3种方式：（1）new Array() 创建长度是0的数组（2）new Array(5); 创建长度是5的数组，但是其每一个元素都是undefined（3）new Array(3,1,4,1,5,9,2,6); 根据参数创建数组例：<script...
复制链接

扫一扫