登录
当前位置： 首页 > 编程笔记 >

JavaScript内置对象之Array的使用小结

王飞虎
2023-03-14
本文向大家介绍JavaScript内置对象之Array的使用小结，包括了JavaScript内置对象之Array的使用小结的使用技巧和注意事项，需要的朋友参考一下

数组的创建方式：

1.字面量：

放置一个数值时，就是一个数据。

var arr = [6];

2.构造函数：

放置一个数据时，表示长度或数据的个数，空表示undefined。

var arr = new Array(6);

建议：Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

数组的操作：

1.push();

用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。

注意，该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.push("hello")); //4
  console.log(arr);        //[1,2,3,"hello"]---原数组改变
  console.log(arr.push("a","b")); //6
  console.log(arr);        //[1,2,3,"hello","a","b"]---原数组改变

2.pop();

用于删除数组的最后一个元素，并返回该元素。对空数组使用pop方法，不会报错，而是返回undefined。

注意，该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.pop());   //3
  console.log(arr);      //[1,2] →原数组改变

3.concat();

合并数组。

注意，该方法不会改变原数组

var arr1 = [1,2,3]
  var arr2 = arr1.concat();
  console.log(arr1);      //[1,2,3]→→原数组
  console.log(arr1 === arr2); //false
  console.log(arr2);      //[1,2,3]→→原数组的副本
  console.log(arr1.concat("hello","world"));
  //[1,2,3,"hello","world"]
  console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));  
  //[1,2,3,"a","b",[3,4],{"name":"admin"}]
  console.log(arr1);      //[1,2,3]→→原数组未改变

4.shift();

用于删除数组的第一个元素，并返回该元素。

注意，该方法会改变原数组

var arr = [1,2,3]
  console.log(arr.shift());    //1
  console.log(arr);        //[2,3]→→原数组改变

5.unshift();

用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。

注意，该方法会改变原数组

var arr = [1,2,3];
  console.log(arr.unshift("hello")); //4
  console.log(arr);          //["hello",1,2,3]→→原数组改变
  console.log(arr.unshift("a","b")); //6
  console.log(arr);          //["a","b","hello",1,2,3]→→原数组改变

6.slice();

用于复制目标数组的一部分，返回一个新数组。

注意，该方法不会改变原数组。

如果slice方法的参数是负数，则表示倒数计算的位置；如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。

var arr = ["a","b","c","d","e"];
  console.log(arr.slice(1,3));    //["b","c"]
  console.log(arr.slice(1));     //["b","c","d","e"]
  console.log(arr.slice(-4,-1));   //["b","c","d"]
  console.log(arr.slice(-2));     //["d","e"]
  console.log(arr.slice(1,-2));    //["b","c"]
  console.log(arr);          //["Tom","Jack","Lucy","Lily","May"]→→原数组未改变

7.splice();

用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。

注意，该方法会改变原数组。
起始位置如果是负数，则表示从倒数位置开始删除。

①不传参时：无操作;

var arr = ["a","b","c","d","e"];
  console.log(arr.splice()); //[]
  console.log(arr);      //["a","b","c","d","e"]→→无操作

②只传入start：表示从索引为start的数据开始删除，直到数组结束;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2));   //["c", "d", "e"]
  console.log(arr);        //["a", "b"]→→原数组改变

③传入start和num：表示从索引为start的数据开始删除，删除num个;

var arr = ["a","b","c","d","e"];   
  console.log(arr.splice(2,2));  //["c", "d"]
  console.log(arr);        //["a", "b", "e"]→→原数组改变

④传入更多：表示从索引为start的数据开始删除，删除num个，并将第三个参数及后面所有参数，插入到start的位置;

var arr = ["a","b","c","d","e"];  
  console.log(arr.splice(2,2,"f","g")); //["c", "d"]
  console.log(arr);           //["a", "c", "f", "g", "e"]---原数组改变

8.reverse();

用于颠倒排列数组元素，返回改变后的数组（还是原数组）。

注意，该方法将改变原数组

var arr = [a,b,c];
  console.log(arr.reverse());   //[c,b,a]
  console.log(arr);        //[c,b,a]→→原数组改变

9.sort();

对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变；

注意：sort方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，例如：121排在13的前面；如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。

[10111,1101,111].sort(function(a,b){
return a - b;   // 升序
// return b - a; // 降序
})  // [111,1101,10111]

10.join();

以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔；

注意， 该方法不会改变原数组；
如果数组成员是undefined或null或空位，会被转成空字符串。

 var arr = [a,b,c];
  console.log(arr.join());     // a,b,c
  console.log(arr.join("*"));   // a*b*c
  console.log(arr);        //[1,2,3]→→原数组未改变

11.for- in();

遍历语句，类似于循环，但for-in可以遍历没有索引的集合，也被成为枚举。

  • for(var i in arr) i是下标;
  • for(var i in obj) i是属性名.

补充：
push和pop结合使用，就构成了“后进先出”的栈结构（stack）;
push和shift结合使用，就构成了“先进先出”的队列结构（queue）。

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
    /*
     *
     * Array.isArray(对象)---->判断这个对象是不是数组
     * instanceof关键字
     * .concat(数组,数组,数组,...) 组合一个新的数组
     * .every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)
     * 如果这个数组中的每个元素的值都符合条件,最后才返回的是true
     *
     * .filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组
     *
     * .push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
     * .pop();--->删除数组中最后一个元素,返回值就是删除的这个值
     * .shift();--->删除数组中第一个元素,返回值就是删除的这个值
     * .unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
     * .forEach(函数)方法---遍历数组用---相当于for循环
     * .indexOf(元素值);返回的是索引,没有则是-1
     * .join("字符串");----返回的是一个字符串
     * .map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
     * .reverse();----->反转数组
     * .sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
     * .arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
     * .splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素
     *
     *
     * */
    //构造函数
    //  var arr1=new Array();
    //  //字面量的方式
    //  var arr2=[];


    //对象是不是数组类型:两种
    //1  instanceof
    //  var obj=[];
    //  console.log(obj instanceof Array);//false
    //
    //  //2 使用数组的
    //  console.log(Array.isArray(obj));//


    //  var arr=["a","b","c"];
    //  var newArr=Array.from(arr);
    //  console.log(newArr);

    //  var arr1=[10,20,30];
    //  var arr2=[40,50,60];
    //  console.log(arr1.concat(arr2));

    //  var arr=[1000,2000,3000];
    //  //a----: 元素的值
    //  //b----: 索引的值
    //  //c----:谁调用了这个方法,那么c就是谁---->arr
    //  var flag= arr.every(function (a,b) {
    //   //console.log(a+"==="+b+"===="+c);
    //   return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
    //  });


    //  var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
    //  var flag=arr.every(function (ele,index) {
    //   //数组中的每个元素的长度是不是大于4
    //   return ele.length>4;
    //  });


    //console.log(flag);


    //  var arr=[10,20,30,40,50,60,70,80];
    //  var newArr=arr.filter(function (ele) {//ele---每个元素
    //   return ele>40;
    //  });
    //  console.log(newArr);

    //  var arr=[10,0,20,0,40,0,60,100];
    //  var newArr=arr.filter(function (ele) {
    //   return ele!=0;
    //  });
    //  console.log(newArr);

    //  var arr=[10,20,30,40,50];
    //  var result=arr.unshift(100);
    //  console.log(result);
    //  console.log(arr);
    //
    //  var arr = [10, 20, 30, 40];
    //  arr.forEach(function (ele,index) {
    //   console.log(ele+'======'+index);
    //  });

    //  var arr=[10,20,30,40];
    //  var index=arr.indexOf(300);
    //  console.log(index);


    //  var arr=["小白","小黑","小红","小芳","小绿","小苏"];
    //  var str=arr.join("|");
    //  console.log(str);


    //  var numbers = [1, 4, 9];
    //  var roots = numbers.map(Math.sqrt);
    //  console.log(roots);


    //  var arr=[10,20,30,40,50];
    //  arr.reverse();//反转
    //  console.log(arr);


    //  var arr=[1,40,20,10,100];
    //  //a---arr[j]
    //  //b---arr[j+1]
    //  arr.sort(function (a,b) {
    //   if(a>b){
    //    return 1;
    //   }else if(a==b){
    //    return 0;
    //   }else{
    //    return -1;
    //   }
    //  });
    //  console.log(arr);


    //
    //  var arr=[10,20,30,40,50,60,70,80,90,100];
    //  var newArr= arr.slice(3,7);
    //  console.log(newArr);


    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

    // myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'

    // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

    myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）

    console.log(myFish);
    // myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

  </script>
</head>
<body>

</body>
</html>

到此这篇关于JavaScript内置对象之Array的使用小结的文章就介绍到这了,更多相关JavaScript内置对象Array内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！

 类似资料：
  • JavaScript Array对象

    主要内容：Array 对象中的属性,Array 对象中的方法数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。 创建 Array 对象的语法格式如下： var arr = new Array(values); var arr = Array(values); 其中

  • javascript之Array 数组对象详解

    本文向大家介绍javascript之Array 数组对象详解，包括了javascript之Array 数组对象详解的使用技巧和注意事项，需要的朋友参考一下 1、创建Array对象方法： --->var arr = [element0, element1, ..., elementn];//简单的定义方法 此时可以知道 --->new Array(); --->new Array(size);//定

  • JavaScript中的Array 对象（数组对象）

    本文向大家介绍JavaScript中的Array 对象（数组对象），包括了JavaScript中的Array 对象（数组对象）的使用技巧和注意事项，需要的朋友参考一下  1、创建Array对象方法： --->var arr = [1,2,3];//简单的定义方法 此时可以知道 此时可以知道： 2、Array对象属性 Array常见的属性有三个：constructor、length和prototyp

  • JavaScript Array对象详解

    本文向大家介绍JavaScript Array对象详解，包括了JavaScript Array对象详解的使用技巧和注意事项，需要的朋友参考一下 本文介绍了Js的Array 数组对象，具体内容如下 目录 1. 介绍：介绍 Array 数组对象的说明、定义方式以及属性。 2. 实例方法：介绍 Array 对象的实例方法：concat、every、filter、forEach、indexOf、join、

  • JavaScript之数组方法（Array对象属性）

    栈方法 JavaScript数组也提供了一种 让 数组的行为 像其它数据结构的方法，数组也可以像栈一样，栈是一种 限制插入和删除的数据结构， 栈是一种后进先出的数据结构，最新添加的内容最早移除。 栈中的操作分别是插入和移除，只发生在栈的顶部，push()方法（插入）和pop()方法（移除）。 push()方法可以接收任意多的参数，从末尾插入数据，把它们逐个添加个数组的末尾，并返回修改后数组的 长度

  • JavaScript中Array对象用法实例总结

    本文向大家介绍JavaScript中Array对象用法实例总结，包括了JavaScript中Array对象用法实例总结的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript中Array对象用法。分享给大家供大家参考，具体如下： Array数组对象有很多常用的方法和属性，现总结如下： 1. length属性，获取数组中元素的个数。 2. concat()方法，连接两个数组。将两

相关阅读

JavaScript常用内置对象用法分析JavaScript中textRange对象使用方法小结不可或缺的ASP.NET内置对象小结javascript内置对象操作详解JavaScript常用本地对象小结

相关文章

JavaScript之Location对象（BOM）JavaScript之History对象（BOM）JavaScript之Screen对象（BOM）JavaScript之Navigator对象（BOM）JavaScript之Array类型（引用类型）

相关问答

使用链内原始对象引用的Java stream api使用JNI从Java调用之间在内存中保留本机对象Javascript中对象和映射对象之间的区别是什么？[副本]Apache Camel：在使用Spring操作之前设置对象依赖项使用反射设置对象属性

相关工具

jQuery DOM Array ShuffleSPT 对象数据库挂机放置类小游戏应用之间调用UIWebView中调用Javascript

相关文档

小米对象存储服务 FDS 用户文档Python 面向对象Microsoft Office 对象参考GitBook 安装配置使用XmlHttp 对象参考手册
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.