zoukankan      html  css  js  c++  java
  • Javascript基础知识整理(引用类型-Array)

    Array

    Array是一组数据的有序列表,在ECMAScript中,数组的每一项可以是不一样的数据类型。


    创建数组有两种方式

    (1)使用构造函数

    var colors = new Array();
    var persons = new Array(4) //创建length属性值为4的数组
    var cites = new Array("Beijing","Shanghai","Guangzhou");//创建包含3个字符串的数组

    在使用构造函数创建数组时,也可以省略new操作符

    var persons = Array(4);
    var cites = Array("Beijing","Shanghai","Guangzhou");

    (2)使用数组字面亮表示法

    var colors = [];//创建一个空数组
    var cites = ["Beijing","Shanghai","Guangzhou"];//创建包含3个字符串的数组
    var numbers = [1,2,,]//因为在不同浏览器中,会创建含有不同数据量的数组所以不推荐

    在使用和设置数组值时可以用方括号

    var cites = ["Beijing","Shanghai","Guangzhou"];
    alert(cites[0]);//"Beijing"
    cites[0] = "Tokyo";
    cites[3] = "NewYork";//数组会自动将长度增加

    可以通过length属性调整数组的长度

    var cites = ["Beijing","Shanghai","Guangzhou"];
    cites.length = 2;
    alert(cites[2]);//undefined

    利用length属性可以很方便的在数组的最后一项添加数据

    var cites = ["Beijing","Shanghai","Guangzhou"];
    cites[length] = "Tokyo";

    检测数组

    检测对象是否时数组时,我们可能首先会想到instanceof操作符,但instanceof只有一个全局执行环境,当存在多个全局执行环境时,在不同执行环境中数组的构造函数不一样,判断会出错

    所以ECMAScript5新增了Array.isArray()方法


     转换方法

    因为继承自Object,Array具有toLocaleString(),toString(),valueOf()方法,会返回一个数组中用逗号隔开的每个值的字符串形式拼接成的字符串

    var cites = ["Beijing","Shanghai","Guangzhou"];
    alert(cites.toString());//Beijing","Shanghai","Guangzhou
    alert(cites.valueOf());//Beijing","Shanghai","Guangzhou  valueOf()返回数组本身
    alert(cites);//Beijing","Shanghai","Guangzhou   因为alert要接收字符串参数所以在后台调用toString()

    使用toLocaleString(),toString(),valueOf()方法返回的是以逗号分隔的字符串,使用join()方法可以使用其他分隔符构建这个字符串

    var cites = ["Beijing","Shanghai","Guangzhou"];
    alert(cites.join(","));//Beijing","Shanghai","Guangzhou
    alert(cites.join("|"));//Beijing"|"Shanghai"|"Guangzhou

    栈方法

    我们可以用push(),pop()方法使数组完成类似栈的后进先出的操作

    push()方法可以在数组末尾增加任意数量数据,并让length相应增加,返回数组长度,pop()方法可以删除数组的最后一项,并让length相应减少,返回移出的项

    var cites = ["Beijing","Shanghai","Guangzhou"];
    var count = cites.push("Tokyo");
    alert(count);//4
    var item = cites.pop();
    alert(item);//Tokyo
    alert(cites.length)//3

    队列方法

    我们可以用shift(),push()方法使数组完成类似队列的先进先出的操作

    shift()方法可以移除数组的第一项并将其返回,并将length减1

    var cites = ["Beijing","Shanghai","Guangzhou"];
    var count = cites.push("Tokyo");//4  推入一项
    var item = cites.shift();//"Beijing"
    alert(cites.length);//3

     unshift()方法和shift()方法相反,可以在数组前端添加任意项并返回数组长度,使用unshift(),和pop()方法可以实现反向的队列操作

    var cites = ["Beijing","Shanghai","Guangzhou"];
    var count = cites.unshift("Tokyo");
    alert(count);//4
    var item = cites.pop();
    alert(item);//"Guangzhou"

     重排序方法

    数组中有两个重排序方法sort(),reverse()。

    reverse()方法可以反转数组项的顺序

    var numbers = [1,2,3,4,5];
    numbers.reverse();
    alert(numbers);//5,4,3,2,1

    另一个是sort()方法,可以让数据升序排列,但排序之前会将调用每一项的toString()方法,然后比较字符串的大小,所以如果数组的每一项都是数字,sort()方法会出现错误的排列。

    var numbers = [0,1,5,10,15];
    numbers.sort();
    alert(numbers);//0,1,10,15,5

    为了避免这种情况,我们需要向sort()方法传入一个比较函数作为参数,这样我们就可以指定数值的排列了。

    function compare(value1,value2){
         if(value1 < value2){
               return -1  //如果第一项应在第二项之前,返回-1   
          }else if(value1 > value2){
               return 1  //如果第一项应在第二项之后,返回1
          }else{
               return 0//如果两项相等,返回0
          }
    }        
    var numbers = [0,1,5,10,15];
    numbers.sort(compare);
    alert(numbers);//0,1,5,10,15

    操作方法

    concat()  

    concat()方法可以创建当前数组的一个副本,并且将参数增加在副本数组的末尾,然后返回这个副本数组。

    var cites1 = ["Beijing","Shanghai","Guangzhou"];
    var cites2 = cites1.concat("Tokyo",["NewYork","Hongkong"]);
    alert(cites1);//Beijing,Shanghai,Guangzhou
    alert(cites2);//Beijing,Shanghai,Guangzhou,Tokyo,NewYork,Hongkong

    slice()

    slice()方法可以以当前数组为基础创建新数组,根据传入的参数截取当前数组的部分称为新数组的数据项。

    如果传入的参数为负数,则返回结果与长度减去负数作为参数的结果一样。

    var cites1 = ["Beijing","Shanghai","Guangzhou"];
    var cites2 = cites.slice(1);
    var cites3 = cites.slice(1,2);
    alert(cites2);//Shanghai,Guangzhou   从下标为1的数据项截取到最后一项
    alert(cites3);//Shanghai  从下标为1的数据项截取但不包括下标为2的数据项

    splice()

    splice()方法可以修改数组的内容,包括删除,插入,修改。

    splice()方法会返回原数组被删除和被替换的部分。

    传入的第一个参数表示操作的起点,传入的第二个参数表示操作影响的长度,第三个以及后面所传入的参数表示插入或修改数组的内容,删除内容时只需传入两个参数。

    var cites = ["Beijing","Shanghai","Guangzhou"];
    var removed = cites.splice(0,1);//删除
    alert(cites);//Shanghai,Guangzhou
    alert(removed);//Beijing
    removed = cites.splice(0,0,"Tokyo");
    alert(cites);//Tokyo,Shanghai,Guangzhou//插入
    alert(removed);//空数组
    removed = cites.splice(0,1,"NewYork","Beijing");//替换
    alert(cites);//NewYork,Beijing,Shanghai,Guangzhou
    alert(removed);//Tokyo

    位置方法

    数组具有两个位置方法indexOf(),lastIndexOf(),都会返回位置下标,,lastIndexOf()会从最后一项开始查找。

    接收两个参数,第一个参数表示要查找的项,第二个参数表示查找的起点(选写)。

    var numbers = [1,2,3,4,5,4,3,2,1];
    alert(numbers.indexOf(4));//3
    alert(numbers.lastIndexOf(4));//5
    alert(numbers.indexOf(4,4));//5
    alert(numbers.lastIndexOf(4,4));//3

    迭代方法

    总共有5个迭代方法,every(),filter(),forEach(),map(),some(),每个方法都会接受两个参数,第一个参数是数组的每一项都运行的函数,第二个参数是运行该函数的作用域对象(选填)。

    这5个方法都会让数组的每一项都执行作为参数传入的函数,但每一个方法所做的操作有所区别。

    使用every()方法时如果数组的每一项执行参数函数都返回true,则返回true;使用filter()方法时返回执行参数函数后为true的数组项组成的数组;

    使用forEach()方法时则是单纯的让每一项都执行参数函数,没有返回值;使用map()方法时返回每一个数组项执行完参数函数后的值组成的数组;

    使用some()方法时如果有一个数组项执行完参数函数返回true,则返回true。

    参数函数会接收3个参数,分别是数组项的值,该数组项的位置和本数组对象。

    var numbers = [1,2,3,4,5,4,3,2,1];
    var result = numbers.every(function(item, index,array){
                return (item < 3);
    });
    alert(result);//false
    result = numbers.filter(function(item, index,array){
                return (item < 3);
    });
    alert(result);//[1,2,2,1]
    result = numbers.map(function(item, index,array){
               return item * 2;
    });    
    alert(result);//[2,4,6, 8,10,8,6,4,2]
    result = numbers.some(function(item, index,array){
              return (item < 3)
    })
    alert(result);//true

    归并方法

    数组有两个归并方法reduce()和reduceRight(),这两个方法会迭代数组的每一项,并且接收两个参数(在每一项上运行的函数,归并的基础值(选填))

    参数函数接收4个参数,第一个参数是上一次运行参数函数后的返回值(所以第一次迭代发生在第二项上),第二个参数是当前数组项的值,第三个参数是索引,第四个参数是本数组对象。

    这个方法用来求数组的总和很方便。

    var numbers = [1,2,3,4,5];
    var sum = numbers.reduce(function(prev,cur,index,array){
              return prev + cur;
    });
    alert(sum);//15
  • 相关阅读:
    js浅拷贝和深拷贝
    使用slice和concat对数组的深拷贝和浅拷贝
    JS数组常用方法---8、concat方法
    JS数组常用方法---7、join方法
    js中将类数组转换为数组的几种方法
    JS 使用const声明常量的本质(很多人都有误解)
    JS中对象数组按照对象的某个属性进行排序
    vue源码分析参考---2、数据代理
    vue源码分析参考---1、准备工作
    ES6课程---5、形参默认值
  • 原文地址:https://www.cnblogs.com/xianglan666/p/12939925.html
Copyright © 2011-2022 走看看