编程 Javascript

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

Posted in Javascript onMay 12, 2020

数组的创建方式：

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的使用小结

- Author -

huangfuyk

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

2010年最佳jQuery插件整理

Dec 06 Javascript

js判断背景图片是否加载成功使用img的width实现

May 29 Javascript

处理及遍历XML文档DOM元素属性及方法整理

Aug 23 Javascript

JS实现来回出现文字的状态栏特效代码

Oct 31 Javascript

js实现上传图片及时预览

May 07 Javascript

JS获取随机数和时间转换的简单实例

Jul 10 Javascript

JavaScript中关于iframe滚动条的去除和保留

Nov 17 Javascript

js中json对象和字符串的理解及相互转化操作实现方法

Sep 22 Javascript

基于es6三点运算符的使用方法(实例讲解)

Oct 12 Javascript

Webpack实战加载SVG的方法

Dec 26 Javascript

jQuery选择器选中最后一个元素，倒数第二个元素操作示例

Dec 10 jQuery

JS字符串与二进制的相互转化实例代码详解

Jun 28 Javascript

详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()

May 12 #Javascript

Vue 中如何将函数作为 props 传递给组件的实现代码

May 12 #Javascript

详解ES6数组方法find()、findIndex()的总结

May 12 #Javascript

JQuery表单元素取值赋值方法总结

May 12 #jQuery

JavaScript或jQuery 获取option value值方法解析

May 12 #jQuery

Node.js API详解之 console模块用法详解

May 12 #Javascript

基于JS实现视频上传显示进度条

May 12 #Javascript