1.join

作用:数组通过指定字符拼接成字符串
语法: string arr.join([separator = ',']);
参数: separator可选,如果省略的话,默认为一个逗号。如果 seprator 是一个空字符串,那么数组中的所有元素将被直接连接
返回值: 拼接后的字符串。

  1. <script>
  2. var arr=[2,3,4,5];
  3. console.log(arr.join());//"2,3,4,5"
  4. console.log(arr.join(""));//"2345"
  5. console.log(arr.join("+"));//"2+3+4+5"
  6. console.log(arr);//[2,3,4,5]
  7. </script>

2.push

作用:往数组的末尾添加一个或者多个元素。
语法:number arr.push(element1, ..., elementN);
参数:elementN,一个或多个元素。
返回值:新数组的length。
注意:会修改原数组。

  1. <script>
  2. var att=[1,2,3,4];
  3. console.log(att.push("a","b"));//6
  4. console.log(att);//[1,2,3,4,"a","b"];
  5. </script>

3.unshift

作用:往数组的头部添加一个或者多个元素。
语法:number arr.push(element1, ..., elementN);
参数:elementN,一个或多个元素。
返回值:新数组的length。
注意:会修改原数组。

  1. <script>
  2. var att=[1,2,3,4];
  3. console.log(att.unshift("a","b"));//6
  4. console.log(att);//["a","b",1,2,3,4];
  5. </script>

4.pop

作用: 删除数组最后 一个 元素
语法: mixed arr.pop();
返回值: 被删除的那一个元素。
注意:会修改原数组。

  1. <script>
  2. var arr=[1,2,3,4];
  3. console.log(arr.pop());//4
  4. console.log(arr);//[1,2,3]
  5. </script>

5.shift

作用: 删除数组 第一个 元素
语法: mixed arr.pop();
返回值: 被删除的那一个元素。
注意:会修改原数组。

  1. <script>
  2. var arr=[1,2,3,4];
  3. console.log(arr.shift());//1
  4. console.log(arr);//[2,3,4]
  5. </script>

6.concat

作用: 将传入的数组或非数组值原数组合并,组成一个新的数组并返回.
语法: array array.concat(value1, value2, ..., valueN);
参数: valueN是指需要与原数组合并的数组或非数组值.
返回值: 合并后的数组
注意: 不会修改原数组的内容。

  1. <script>
  2. var att=[1,2,3];
  3. var attO=["a","b"];
  4. var attT=[5,true];
  5. console.log(att.concat(10,attO,attT));//[1,2,3,10,"a","b",5,tru]
  6. console.log(att);//[1,2,3]
  7. </script>

7.reverse

作用:颠倒数组中元素的位置.
语法: array arr.reverse()
返回值: 颠倒顺序后的数组
注意: 改变原数组.

  1. <script>
  2. var arr = [1,2,3,6,5,4];
  3. var res = arr.reverse();
  4. res.push( "a" );
  5. console.log( res );//[4,5,6,3,2,1,"a"]
  6. console.log( arr );//[4,5,6,3,2,1,"a"]
  7. </script>

8.slice

作用:截取**数组中一部分,并返回这个新的数组.
语法: array arr.slice([begin[,end]]);
返回值: 截取后的新的数组
注意: 包含起始位置,不包含结束位置,不会改变原数组.
什么都不传入,则是原数组。

  1. <script>
  2. var arr = ["a","b","c","d"];
  3. // var res = arr.slice( 1,3 );//["b","c"]
  4. // var res = arr.slice( 3,1 );//[]
  5. var res = arr.slice( -3,-1 );//["b","c"]
  6. var res = arr.slice();//["a","b","c","d"]
  7. console.log( res );
  8. console.log( arr );//["a","b","c","d"]
  9. </script>

9.splice

作用:用新元素替换旧元素,以此修改数组的内容
语法:array array.splice(start, deleteCount[, item1[, item2[, ...]]])
参数:

  1. - start 起始位置
  2. - deleteCount 删除长度
  3. - item 添加的内容

返回值: 由被删除的元素组成的一个数组
注意修改了原数组的内容。

  1. <script>
  2. var att="Liangzhifang".split("");
  3. console.log(att.splice(2,4,["a"]));//["a","n","g","z"]
  4. console.log(att);//["L","i",["a"],"h","i","f","a","n","g"]
  5. </script>

10.sort

作用: 对数组的元素进行排序。
语法: array arr.sort([compareFunction]);
参数: compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
返回值: 排序后的数组.

  1. <script>
  2. //当什么都不传入的时候,sort()默认由小到大排列。
  3. var attr=[9,5,4,3,2];
  4. console.log(attr.sort());//[2, 3, 4, 5, 9]
  5. //传入function的时候,sort()内的function返回值大于0,由小到大排列。
  6. var attrO=[9,5,4,3,2];
  7. console.log(attrO.sort(function () {
  8. return 1;
  9. }));//[2, 3, 4, 5, 9]
  10. //传入function的时候,sort()内的function返回值小于或者等于0,数组序列不变。
  11. var attrT=[9,5,4,3,2];
  12. console.log(attrT.sort(function () {
  13. return -1;
  14. }));// [9, 5, 4, 3, 2]
  15. //由于sort内部是随机抽取两个值,我们在利用function函数的返回值,大于0的时候,交换位置。小于或者等于0的时候不变,来排序。
  16. //以下是由小到大排序
  17. var attrTh=[9,5,4,3,2];
  18. console.log(attrTh.sort(function (a,b) {
  19. return a-b;
  20. }));// [2, 3, 4, 5, 9]
  21. //以下是由大到小排序
  22. var attrF=[9,5,4,3,2];
  23. console.log(attrF.sort(function (a,b) {
  24. return b-a;// [9, 5, 4, 3, 2]
  25. }));
  26. </script>

JS基础入门篇(十)— 数组方法的更多相关文章

  1. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. JS基础入门篇(二十七)—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  3. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  4. JS基础入门篇(十二)—JSON和Math

    1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...

  5. JS基础入门篇(三十四)— 面向对象(一)

    1.对象 对象的定义 : 对象 是 由 键值对 组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...

  6. JS基础入门篇(二十四)—DOM(下)

    1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...

  7. JS基础入门篇(三十六)—面向对象( 三 )

    1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...

  8. JS基础入门篇(二十)—事件对象以及案例(二)

    案例一.点击按钮,选中input中的全部内容 select()方法:选中全部. 点击按钮选中输入框中的内容!!!! <!DOCTYPE html> <html lang=" ...

  9. JS基础入门篇(二十四)—DOM(上)

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

随机推荐

  1. Vulnhub DC-6靶机渗透

    信息搜集 nmap -sP 192.168.146.0/24 #找靶机ip nmap -sS -Pn -A 192.168.146.143 #扫描靶机信息 22和80端口,老朋友了. 先直接访问htt ...

  2. linux中操作k8s的基本命令-更新中

    linux中操作k8s的基本命令 最近工作中使用到了k8s,那么就来总结下平时使用到的基本的命令 获取某个namespace下的pod 获取某个namespace下的pod,展示出ip和pod信息 查 ...

  3. Netperf网络性能测试工具详解教程

    本文下载链接: [学习笔记]Netperf网络性能测试工具.pdf 一.Netperf工具简介 1.什么是Netperf ? (1)Netperf是由惠普公司开发的一种网络性能测量工具,主要针对基于T ...

  4. 数组的连接和截取(contact和slice和splice)

    <script> var arr1 = ["a","b","c"]; var arr2 = [1,2,3]; //concat把 ...

  5. ASP.NET Core中配置监听URLs的五种方式

    原文: 5 ways to set the URLs for an ASP.NET Core app 作者: Andrew Lock 译者: Lamond Lu 默认情况下,ASP. NET Core ...

  6. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  7. Spring Data REST不完全指南(一)

    简介 Spring Data REST是Spring Data项目的一部分,可轻松在Spring Data存储库上构建超媒体驱动的REST Web服务. Spring Data REST 构建在 Sp ...

  8. 计算机视觉中的对象检测,Python用几段代码就能实现

    目前计算机视觉(CV)与自然语言处理(NLP)及语音识别并列为人工智能三大热点方向,而计算机视觉中的对象检测(objectdetection)应用非常广泛,比如自动驾驶.视频监控.工业质检.医疗诊断等 ...

  9. CKEditor与定制

    一 开始使用 官网 基本示例: 搭建服务器(这里使用apache) 下载standard的ckeditor解压放在apache的htdocs的目录下 在htdoc下面新建index.html,写入代码 ...

  10. Go gRPC进阶-proto数据验证(九)

    前言 上篇介绍了go-grpc-middleware的grpc_zap.grpc_auth和grpc_recovery使用,本篇将介绍grpc_validator,它可以对gRPC数据的输入和输出进行 ...