`

JS数组及其方法(slice,contact...)

 
阅读更多

JS数组的创建:

    1,使用Array数组的方式:

  var arrayObj = new Array(); //创建一个数组

  var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

  var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值

   要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

2,采用字面量的方法

    var arr = [];//创建一个空数组

    var arr2 = [1,2,3];//创建一个有三个元素的数组

JS数组的主要方法:

1,数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

     arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana""Orange""Apple""Mango"];
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html

 测试结果:Banana,Orange,Apple,Mango,Kiwi

例子二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
  
<p id="demo">Click the button to add elements to the array.</p>
  
<button onclick="myFunction()">Try it</button>
  
<script>
function myFunction()
{
var fruits = ["Banana""Orange""Apple""Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
  
<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>
  
</body>
</html>

 测试结果:Lemon,Pineapple,Banana,Orange,Apple,Mango

例子三:在数组的第二个位置插入元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana""Orange""Apple""Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

 测试结果:Banana,Orange,Lemon,Kiwi,Apple,Mango

 

数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值(pop和push连在一起记忆,队列形式的操作)

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移(shift,unshift针对的都是数组最前面的元素,栈形式的数据操作)

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素

 

注意:splice方法既可以用于数组的删除也可以用于数组的插入

        splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组

  arrayObject.splice(index,howmany,item1,.....,itemX)
index:必填,数组删除或插入的位置。使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目
item1, ..., itemX:可选。向数组添加的新项目。
返回值:新数组,要是删除的话,也会包括被删除的元素

    要是删除的话,splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组

请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

splice例子:我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 />")
arr.splice(2,3,"William")
document.write(arr)
 
</script>

输出结果:

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

 

 

数组元素截取

1,slice方法:
  arrayObject.slice(start,end)可以从数组中返回start下标开始取值,直到end下标结束(不包括)。

    start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

    end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。若end为

 

   返回值

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

注意:请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

 

例子 1

在本例中,我们将创建一个新数组,然后显示从其中选取的元素:

1
2
3
4
5
6
7
8
9
10
11
12
<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

 

数组元素的合并

Contact是将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

如果没有参数,则表示对数组进行了一次深拷贝

contact例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
  
<p id="demo">Click the button to join three arrays.</p>
  
<button onclick="myFunction()">Try it</button>
  
<script>
function myFunction()
{
var hege = ["Cecilie""Lone"];
var stale = ["Emil""Tobias""Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
var x=document.getElementById("demo");
x.innerHTML=children;
}
</script>
  
</body>
</html>

 测试结:Cecilie,Lone,Emil,Tobias,Linus,Robin

参数也可以是string类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
  
<p id="demo">Click the button to join three arrays.</p>
  
<button onclick="myFunction()">Try it</button>
  
<script>
function myFunction()
{
var hege = ["Cecilie,Lone"];
var stale = "Emil,Bob"
var kai = "Robin";
var children = hege.concat(stale,kai);
var x=document.getElementById("demo");
x.innerHTML=children;
}
</script>
  
</body>
</html>

 结果:Cecilie,Lone,Emil,Bob,Robin

数组的拷贝

 

arrayObj.slice(0); //slice(start,end)start设置为0,省略end则表示从头截取到为,即对数据进行了一份拷贝。返回数组的拷贝数组,注意是一个新的数组,不是指向

 

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向

contact深拷贝的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<body>
  
<p id="demo">Click the button to join three arrays.</p>
  
<button onclick="myFunction()">Try it</button>
  
<script>
function myFunction()
{
var hege = ["Cecilie,Lone"];
var stale = "Emil,Bob"
var kai = "Robin";
var children = hege.concat();
var x=document.getElementById("demo");
x.innerHTML=children;
alert(children==hege)
}
</script>
  
</body>
</html>

 结果:

页面显示:Cecilie,Lone

控制台:false     

children==hege 为false原因是因为深拷贝,children和hege指向了不同的内存中的对象。

  

 

数组的排序

arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址

arrayObj.sort(); //对数组元素排序,返回数组地址

 

数组与字符串互换 

 数组的toString(),valueOf()方法可是使得数组以字符串的形式输出,但是是存在差别:

 

 toString一定将所有内容转为字符串

 

 valueOf取出对象内部的值,不进行类型转换

另外,Array还有join()方法,是以指定的分隔符,来构建字符串。

字符串转数组:使用split()方法

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
    var array=["How","are","you"];
    var text1=array.toString();
    console.log("toString方法生成text1:"+text1);
    console.log("toString()处理后的还是array吗?")
    console.log(text1 instanceof Array);
 
    var text2=array.valueOf();
    console.log("valueOf方法生成text2:"+text2)
    console.log("valueOf()处理后的还是数组吗?")
    console.log(text2 instanceof Array);
 
    var text3=array.join("");
    console.log("join方法生成text3:"+text3);
     console.log("join()处理后的还是array吗?")
    console.log(text3 instanceof Array);
 
    var str="My,name,is,Lucy";
    var temp=str.split(",");
    console.log("split方法生成的:"+temp)
    console.log(" split方法生成的变量是array吗?")
    console.log(temp instanceof Array);
</script>

  结果:

以下通过以上例子可以得出,

 valueOf取出对象内部的值,不进行类型转换。虽然以字符串的形式输出内容,但是还是数组格式。split()就是将字符串转为了数组。

 

各种类型中toString()方法和valueOf()方法返回的值:

toString()方法:返回对象的字符串表示。

  操作
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔,且连接起来。
Boolean 如果 Boolean 值是 true,则返回 “true”。否则,返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误消息的字符串。
Function 返回如下格式的字符串,其中 functionname 是被调用 toString 方法函数的名称:
function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认 返回 “[object objectname]”,其中 objectname 是对象类型的名称。

 

valueOf()方法:返回指定对象的原始值。

  返回值
Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。

原文链接:https://www.cnblogs.com/happyfish321/p/6724004.html

分享到:
评论

相关推荐

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    web前端常用单词.docx

    * Slice: 切片,用于截取数组或字符串的某一部分。 * Splice: 铰接,用于将多个数组或字符串连接成一个数组或字符串。 * CharAt: 获取某位置字符,用于获取字符串的某个位置的字符。 * IndexOf: 判断某字符的首次...

    aldly.github.io

    - **数组方法**:`push`、`pop`、`shift`、`unshift`、`slice`、`splice`、`map`、`filter`、`reduce`等。 - **对象**:创建对象(字面量语法和构造函数),以及属性访问和操作。 - **事件处理**:`addEventListener...

    脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印的图像篡改检测 ,脆弱水印; 图像篡改; 检测; 图像处理,基于脆弱水印的图像篡改检测技术

    脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印的图像篡改检测 ,脆弱水印; 图像篡改; 检测; 图像处理,基于脆弱水印的图像篡改检测技术

    高效Delta机械臂运动控制卡:前瞻轨迹规划,G代码编程,多维插补,激光切割与绘图,机器视觉集成,扩展坐标与旋转功能,一键脱机运行,大容量存储,基于前瞻运动轨迹规划的Delta机械臂运动控制卡:高效G

    高效Delta机械臂运动控制卡:前瞻轨迹规划,G代码编程,多维插补,激光切割与绘图,机器视觉集成,扩展坐标与旋转功能,一键脱机运行,大容量存储,基于前瞻运动轨迹规划的Delta机械臂运动控制卡:高效G代码编程,圆弧插补与激光切割功能,配合机器视觉实现精准操作。高效精准操作与管理工具的创新型机械运动控制解决方案。,delta机械臂,delta机器人,运动控制器,运动控制卡 本卡采用前瞻运动轨迹规划,运动采用G代码指令编程,具有G5三维空间的圆弧插补,空间直线插补功能,子程序编程功能,逻辑判断语句功能,示教编程功能(支持手柄),变量位置编程功能,动态PWM激光输出功能(兼容舵机控制信号),动态频率脉冲输出功能,通用输入输出功能。 可极简单的实现绘图雕刻,3维激光切割功能。 轨迹图形可xy平面整体旋转功能。 可利用变量位置,获取外部坐标要求,可轻松配合机器视觉。 支持探针功能,测平面,测外形等。 可设置4组平移工件坐标系,2组参考原点。 新增2组空间旋转工件坐标系,支持任意图形直接空间旋转。 卡上一键脱机RAM区运行功能。 2M程序容量。 断电后位置记忆,变量坐标位置记忆,计数器记忆。 伺服

    通用MySQL数据库备份系统.zip

    毕业设计

    大规模语言模型参数高效微调方法综述与分类:理论依据、实证对比和应用指南

    内容概要:随着模型参数量不断扩大,如从BERT到GPT-3,传统微调方法变得不可行。文章聚焦于参数高效微调(PEFT)策略,系统探讨了几十余种方法,包括加法型、选择型、重构型及其混合方法。文中详细介绍各类PEFT的具体操作(如引入额外参数、冻结部分权重等),并通过广泛实验验证其在大型预训练模型上的适用性和性能。特别指出,PEFT在保持高性能的同时极大减少了计算与内存成本,并针对十几亿乃至几十亿参数级别的模型展开测试与讨论。 适用人群:适用于从事大规模机器学习模型研究、开发的应用科学家和技术专家,尤其是那些希望通过减少资源消耗实现高效微调的技术团队成员。 使用场景及目标:该文章适用于希望在有限资源条件下优化大模型性能的人群。帮助研究人员理解不同类型PEFT的优点和局限,为实际项目中选择合适技术路线提供建议。其目的是为了指导开发者正确理解和应用先进的PEFT技术,从而提高系统的运行效率和服务质量。 其他说明:本文不仅提供了详尽的方法介绍和性能对比,而且为未来的研究指明方向,鼓励创新思维的发展,旨在推动参数有效调优领域的进步。同时提醒注意现有的挑战和未解决问题。

    磷酸铁锂体系电池COMSOL模型构建解析与实践指南,磷酸铁锂体系电池COMSOL建模分析与优化方案探讨,出一个磷酸铁锂体系电池comsol模型 ,建立磷酸铁锂体系电池; comsol模型; 电池模拟

    磷酸铁锂体系电池COMSOL模型构建解析与实践指南,磷酸铁锂体系电池COMSOL建模分析与优化方案探讨,出一个磷酸铁锂体系电池comsol模型 ,建立磷酸铁锂体系电池; comsol模型; 电池模拟; 模型构建; 锂离子电池。,构建磷酸铁锂体系电池Comsol模型,深入探索电池性能

    开关磁阻电机多维控制策略仿真研究(基于Matlab 2016b的精细化模型),开关磁阻电机多策略控制仿真模型(matlab 2016b版本,含传统与智能控制策略及离线迭代算法),开关磁阻电机控制仿真(

    开关磁阻电机多维控制策略仿真研究(基于Matlab 2016b的精细化模型),开关磁阻电机多策略控制仿真模型(matlab 2016b版本,含传统与智能控制策略及离线迭代算法),开关磁阻电机控制仿真(matlab 2016b版本仿真模型 自用) 模型包涵: 开关磁阻电机传统控制:电流斩波控制、电压PWM控制、角度位置控制。 智能控制:12 8三相开关磁阻电机有限元分析本体建模、转矩分配函数控制、模糊PID控制、模糊角度控制、神经网络在线自适应迭代控制。 部分离线迭代算法:遗传算法优化PID、粒子群算法优化PID。 biye研究生自用仿真模型 . ,核心关键词: 开关磁阻电机; 控制仿真; Matlab 2016b; 传统控制; 智能控制; 有限元分析; 转矩分配函数控制; 模糊PID控制; 神经网络在线自适应迭代控制; 遗传算法优化PID; 粒子群算法优化PID; 研究生自用仿真模型。,基于Matlab 2016b的开关磁阻电机控制模型研究与仿真优化研究生自用版

    McgsPro-IoT驱动-V3.1.1.8

    McgsPro_IoT驱动_V3.1.1.8

    数学建模相关主题资源2

    数学建模相关主题资源2

    基于改进粒子群算法的光伏储能选址定容模型分析-针对14节点配网系统的实践与出力情况探索,基于改进粒子群算法的光伏储能选址定容模型分析与出力预测研究(含配图材料参考),含光伏的储能选址定容模型 14节

    基于改进粒子群算法的光伏储能选址定容模型分析——针对14节点配网系统的实践与出力情况探索,基于改进粒子群算法的光伏储能选址定容模型分析与出力预测研究(含配图材料参考),含光伏的储能选址定容模型 14节点 程序采用改进粒子群算法,对分析14节点配网系统中的储能选址定容方案,并得到储能的出力情况,有相关参考资料 ,核心关键词:含光伏的储能选址定容模型;14节点;改进粒子群算法;配网系统;储能选址定容方案;出力情况;参考资料。,基于改进粒子群算法的14节点配网光伏储能选址定容模型及出力分析研究

    基于需求响应与阶梯式碳交易的综合能源系统优化调度模型研究(MATLAB仿真实现),基于需求响应与碳交易的综合能源系统优化调度策略:灵活调配冷热电负荷,实现低碳高效运行 ,考虑需求响应和碳交易的综合能源

    基于需求响应与阶梯式碳交易的综合能源系统优化调度模型研究(MATLAB仿真实现),基于需求响应与碳交易的综合能源系统优化调度策略:灵活调配冷热电负荷,实现低碳高效运行。,考虑需求响应和碳交易的综合能源系统日前优化调度模型 关键词:柔性负荷 需求响应 综合能源系统 参考:私我 仿真平台:MATLAB yalmip+cplex 主要内容:在冷热电综合能源系统的基础上,创新性的对用户侧资源进行了细致的划分和研究,首先按照能源类型将其分为热负荷需求响应和电负荷需求响应,在此基础上,进一步分为可削减负荷、可转移负荷以及可平移负荷三类,并将柔性负荷作为需求响应资源加入到综合能源的调度系统中,从而依据市场电价灵活调整各类负荷,实现削峰填谷,改善负荷曲线等优势,此外,为了丰富内容,还考虑了阶梯式碳交易,构建了考虑阶梯式碳交易以及综合需求响应的综合能源低碳经济调度模型,设置了多个对比场景,验证所提模型的有效性,从而体现工作量,是不可多得的代码 场景一: 这段程序主要是用来进行某微网的运行优化。它包含了多个功能和应用,涉及到了能源集线器、需求侧柔性负荷、光伏、风机、燃气轮机等内容。 首先,程序读取了

    678-74LS244 octal buffers and line drivers.ms14

    multisim

    实验程序与文档报告撰写指南:科研和工程项目的综合资源介绍及应用技巧

    内容概要:本文详细介绍了一系列用于科学研究、工程项目和技术开发中至关重要的实验程序编写与文档报告撰写的资源和工具。从代码托管平台(GitHub/GitLab/Kaggle/CodeOcean)到云端计算环境(Colab),以及多种类型的编辑器(LaTeX/Microsoft Word/Overleaf/Typora),还有涵盖整个研究周期的各种辅助工具:如可视化工具(Tableau)、数据分析平台(R/Pandas)、项目管理工具(Trello/Jira)、数据管理和伦理审核支持(Figshare/IRB等),最后提供了典型报告的具体结构指导及其范本实例链接(arXiv/PubMed)。这为实验流程中的各个环节提供了系统的解决方案,极大地提高了工作的效率。 适合人群:高校学生、科研工作者、工程技术人员以及从事学术写作的人员,无论是新手入门还是有一定经验的人士都能从中受益。 使用场景及目标:帮助读者高效地准备并开展实验研究活动;促进团队间协作交流;规范研究报告的形式;提高对所收集资料的安全性和隐私保护意识;确保遵循国际公认的伦理准则进行实验。

    基于OpenCV与深度学习的人脸表情识别系统:Python编程,实时检测与视频加载的PyQt界面应用,基于OpenCV与深度学习...

    基于OpenCV与深度学习的人脸表情识别系统:Python编程,实时检测与视频加载的PyQt界面应用,基于OpenCV与深度学习的人脸表情识别系统:Python编程,PyQt界面,实时视频与图片检测.exe可执行文件,基于OpenCV的人脸表情识别系统 相关技术:python,opencv,pyqt,深度学习 (请自行安装向日葵远程软件,以便提供远程帮助) 可编译为.exe文件。 软件说明:摄像头实时检测,加载照片,视频均可。 有基础的同学,可自行修改完善。 第一张和第二张为运行截图。 ,人脸表情识别; Op

    基于双端口直流微电网系统模型的改进下垂控制及稳定性分析(含电压鲁棒控制器与粒子群寻优权函数),基于双端口直流微电网系统模型的优化设计与分析:改进下垂控制、电压鲁棒控制器及仿真研究,直流微网,直流微电网

    基于双端口直流微电网系统模型的改进下垂控制及稳定性分析(含电压鲁棒控制器与粒子群寻优权函数),基于双端口直流微电网系统模型的优化设计与分析:改进下垂控制、电压鲁棒控制器及仿真研究,直流微网,直流微电网系统模型,有两个端口。 外环有改进下垂控制,内环双pi环,带恒功率负载。 暂态性能良好,可用于控制器设计,稳定性分析等。 另外还有电压鲁棒控制器,小信号模型,根轨迹分析,粒子群寻优权函数等内容。 仅为simulink ,直流微网; 直流微电网系统模型; 改进下垂控制; 双pi环; 恒功率负载; 暂态性能; 控制器设计; 稳定性分析; 电压鲁棒控制器; 小信号模型; 根轨迹分析; 粒子群寻优权函数,基于改进下垂控制的直流微网系统模型:双PI环与恒功率负载研究

    这是萨达萨达是发生发士大夫

    这是萨达萨达是发生发士大夫

Global site tag (gtag.js) - Google Analytics