JS对象之数组(1)

Array 数组
1. 数组中每一项都可以存放不同类型的数据,比如:第一个数是字符串,第二个数是数字,第三个数是布尔型。
2. 数组大小可随着数据的添加自动增长。

创建数组

  1. 使用Array构造函数
    语法:
    new Array()

    小括号()说明:

    1. 预先知道数组要保存的项目数量
    2. 向Array构造函数中传递数组应包含的项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //创建一个保存颜色的数组
    var color = new Array();
    console.log(color);//[]

    // 往color数组中写入值
    color[0]="#f00";
    color[1]="#0f0";
    color[2]="#00f";
    console.log(color);//["#f00", "#0f0", "#00f"]

    //索引
    console.log(color[2]);//#00f

    var colors=new Array(3);
    console.log(colors);//(3) [empty × 3]
  2. 使用数组字面量表示法
    由一对包含数组项的方括号[]表示,多个数组项之间以逗号隔开。
    1
    2
    3
    4
    5
    6
    var nums=new Array(1,3,6,9);
    console.log(nums);//[1,3,6,9]
    var cols=["red","yellow","green"];
    console.log(cols);//["red","yellow","green"]
    var infos=[6,"marry",true];
    console.log(infos);//[6,"marry",true]

数组元素的读写

读取和设置值时,使用方括号并提供相应的索引。
说明:索引是从0开始的正整数。
1
2
3
4
5
6
7
var color = new Array();
// 往color数组中写入值
color[0]="#f00";
color[1]="#0f0";
color[2]="#00f";
//索引
console.log(color[2]);//#00f

数组长度

  • 语法:array.length
  • 功能:获取数组array的长度
  • 返回值:number
  • 说明:
    1、通过设置length可以从数组的末尾移除项或向数组中添加新项。
    1
    2
    3
    4
    5
    6
    var arr=["a","b","c","d"]
    console.log(arr.length);//4

    //通过设置length可以从数组的末尾移除项
    arr.length=2;
    console.log(arr);//["a", "b"]
    2、把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1。****【注意:4个数加一个最后数组长度并不是5,要看这一个数加到哪个位置,加到下标为99的位置则这个数组的数组长度改为100。】
    1
    2
    3
    //接上面代码,原本数组长度为4,但是加了一个数到下标为99的位置则这个数组的数组长度改为100
    arr[99]="z";
    console.log(arr.length);//100

数组的方法

方法 作用 是否直接修改原数组 返回值 备注
push() 数组尾部添加元素 数组的新长度
unshift() 数组开头添加元素 数组的新长度
pop() 删除最后一个元素 被删除的元素 1.如果数组已经为空,则返回 undefined
2.先进后出(栈)
shift() 删除第一个元素 被删除的元素 1.如果数组已经为空,则返回 undefined
2.先进先出(队列)
join() 数组转换为字符串 字符串
reverse() 颠倒顺序 颠倒顺序后的数组的引用
sort() 升序/降序排序 排序后的数组的引用
concat() 连接两个或多个数组 连接后的数组 需要提前新建连接后的数组
slice() 截取部分元素 截取元素组成的数组 想要修改原数组请使用splice
splice() 删除、插入、替换部分元素 被删除的元素组成的数组 插入元素时没有删除,则返回空数组

push():在尾部添加元素

  • 语法:arrayObject.push(newele1,newele2...…,neweX)
    • newelement1:必需。要添加到数组的第一个元素。
    • newelement2:可选。要添加到数组的第二个元素。
    • newelementX:可选。可添加多个元素。
  • 功能:把它的参数顺序添加到arrayObject的尾部.
  • 返回值:把指定的值添加到数组后的新长度.
  • 该方法直接修改 arrayObject,而不是创建一个新的数组。
  • push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
    1
    2
    3
    4
    5
    6
    //push 
    var colors=new Array("red","green");
    var len=colors.push("blue","yellow","blank");
    console.log(len);//5,要注意添加以后的返回值是长度,数组名的返回值才是所有的数组元素
    console.log(colors[4]);//blank
    console.log(colors);// ["red", "green", "blue", "yellow", "blank"]

unshift():在开头添加元素

  • 语法:arrayObject.unshift(newele1,newele 2...…,neweX)
    • newelement1:必需。向数组添加的第一个元素。
    • newelement2:可选。向数组添加的第二个元素。
    • newelementX:可选。可添加若干个元素。
  • 功能:把它的参数顺序添加到arrayObject的 开头 .
  • 返回值:arrayObject的新长度.
  • 注意,该方法不创建新的创建,而是直接修改原有的数组
    1
    2
    3
    4
    5
    //unshift 
    var nums=[2,7,8,6];
    var size=nums.unshift(99,66);
    console.log(size);//6
    console.log(nums);//[99, 66, 2, 7, 8, 6]

pop():删除最后一个元素

  • 语法:arrayObject.pop()
  • 功能:删除arrayObject的最后一个元素
  • 返回值:被删除的那个元素
  • 如果数组已经为空,则 pop() 不改变数组,并返回 undefined
  • 该方法不产生新数组,直接改变原有数组
    1
    2
    3
    4
    //pop
    var n =nums.pop();
    console.log(n);//6,是我们被删除的那个元素
    console.log(nums);//[99, 66, 2, 7, 8],删完以后的nums数组所有元素

shift():删除第一个元素

  • 语法:arrayObject.shift()
  • 功能:删除 arrayObject中的第一个元素
  • 返回值:被删除的那个元素
  • 如果是空数组的,那么 shift() 方法将不进行任何操作,返回 undefined
  • 注意,该方法不创建新数组,而是直接修改原有的 arrayObject
    1
    2
    3
    4
    //shift
    var m=colors.shift();
    console.log(m);//red
    console.log(colors);//["green", "blue", "yellow", "blank"]

转换方法:join()数组转换为字符串

  • 语法:arrayObject.join(separator)
    • separator:分隔符,也可以为空。参数为空是默认使用逗号隔开,如果不想要逗号可以使用""作为参数。
  • 功能:用于把数组中的所有元素放入一个字符串.
  • 返回值:字符串
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //join 
    var nums=[2,4,5];
    var str=nums. join();//2,4,5
    var words=["border","left","color"];

    var wordstr=words. join("-");
    console.log(wordstr);//border-left-color

    var wordstr=words. join("");
    console.log(wordstr);//borderleftcolor

重排序方法

reverse()颠倒顺序

  • 语法:arrayObject.reverse()
  • 功能:用于颠倒数组中元素的顺序.
  • 返回值:颠倒顺序后的数组的引用.
  • 该方法直接改变原来的数组,而不会创建新的数组。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const array1 = ['one', 'two', 'three'];
    console.log('array1:', array1);
    // expected output: "array1:" Array ["one", "two", "three"]

    const reversed = array1.reverse();
    console.log('reversed:', reversed);
    // expected output: "reversed:" Array ["three", "two", "one"]

    // Careful: reverse is destructive -- it changes the original array.
    console.log('array1:', array1);
    // expected output: "array1:" Array ["three", "two", "one"]

sort()升序/降序排序

  • 参考MDN
  • 语法:arrayObject.sort(sortby)
    • sortby:可选。规定排序顺序。必须是函数。
      • sortby如果为空则按照字符串的大小来排序(也就是每个元素都先比较第一位的大小来排,再比较第二位),哪怕是数字也是如此。
      • 所以要放置一个函数作为参数((a,b)=> { return xxx })才能用于数字的升降序排序。a与b为数组中任意两个数组项
  • 功能:用于对数组的元素进行排序(升序/降序),比较函数的返回值决定排序的顺序规定的排序规则如下:
    • 返回值<0则排序结果a,b
    • 返回值>0则排序结果b,a
  • 记住简写:返回值a-b永远升序返回值b-a永远降序。和数组的元素组成/顺序没有关系!原因见下“为何返回a-b永远是升序”
  • 返回值:对数组的引用。
  • 注意:数组在原数组上进行排序,不生成副本。
  • 原理
    • 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序
    • 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。
      • 比较函数应具有两个参数 a 和 b,根据返回值大小可判断ab的排序位置
      1. 返回值小于 0,则排序后的数组中 a 在 b 之前
      2. 返回 0。
      3. 返回值大于 0,则排序后的数组中 a 在 b 之后
  • 例子
    1
    2
    3
    4
    5
    6
    7
    var arr=[9,23,15,-99,88,12,-2];
    // b-a降序
    arr.sort(function(a,b){return b-a});
    console.log(arr);//[88, 23, 15, 12, 9, -2, -99]
    // a-b升序
    arr.sort(function(a,b){return a-b});
    console.log(arr);//[-99, -2, 9, 12, 15, 23, 88]
  • 例子原理
    • 排序思想应该是类似于冒泡排序思想的,通过前后相邻的两个数进行比较。
    • 例如9与23,这时将9作为方法函数function(a,b)参数列表中的a,23作为b,通过语句return b - a;返回一个数值,23-9=24,若返回值>0,则表示 a在排序后的序列中出现在 b 之后,所以9会在排序后出现在23之后。也就是说数组将被由大到小排序。
    • 此时,新的数据序列为23,9,15,-99,88,12,-2,再将9作为a,15作为b进行上述的做法。
  • 关于返回值:
    1
    2
    3
    4
    const array1 = [1, 30, 4, 21, 100000];
    array2 = array1.sort();
    console.log(array2);
    // expected output: Array [1, 100000, 21, 30, 4]

为何返回a-b永远是升序

  • 参考文章
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    当 a>b 时,可从数学角度得出a - b > 0以及b - a < 0
    因为a - b > 0 ,所以排序结果 ===> b,a (升序)
    因为b - a < 0 ,所以排序结果 ===> a,b (降序)

    当 b>a 时,可从数学角度得出a - b < 0以及b - a > 0
    因为a - b < 0 ,所以排序结果 ===> a,b (升序)
    因为b - a > 0 ,所以排序结果 ===> b,a (降序)

    a = b 时,可从数学角度得出a - b = b - a = 0
    因为a - b = b - a = 0 , 所以排序结果 ===> 保持不变
  • 由此看出,无论a>b还是b>a,return a-b 总能得到升序的结果,而 return b-a 总能得到降序的结果。
  • 还是不能理解返回a-b是升序的话,完全可以像下面这样展开写MDN中的“比较函数格式”其实就是return a-b/return b-a
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 升序(展开写的例子)
    let arr = [1, 22, 15, 32, 4, 5]
    // 下面的写法完全等价于arr.sort((a, b) => a-b);
    arr.sort((a, b) => {
    if (a > b) return 1; // 返回值1>0,排序结果b,a,又因为a>b,所以是升序排列的
    if (a < b) return -1; // 返回值-1<0,排序结果a,b,又因为a<b,所以是升序排列的
    return 0; // a=b的情况
    });
    console.log(arr); // [1, 4, 5, 15, 22, 32]
  • 降序b-a展开写则是返回1和-1的情况颠倒即可。

操作方法

concat()连接两个或多个数组

  • 语法:arrayObject.concat(arrayX,arrayX....…arrayX)
  • 功能:用于连接两个或多个数组.
  • 返回值:数组.
    1
    2
    3
    4
    5
    6
    var arrl=["a","b","c"], 
    arr2=["d","e",1,3],
    arr3;
    //concat
    arr3=arrl.concat(arr2,["m",99,8]);
    console.log(arr3);// ["a", "b", "c", "d", "e", 1, 3, "m", 99, 8]
    注意:要事先定义一个新的数组用于存放合并以后形成的数组。

slice()截取部分元素

slice:截取

  • 语法:arrayObject.slice(start,end)
    • start **(可省去)**,规定从何处开始选取。
      • 如果是负数,那么它规定从数组尾部开始算起的位置。
      • 如果省略则 slice 从索引 0 开始。
      • 如果start大于原数组的长度,则会返回空数组。
    • end (可省去),规定从何处结束选取.该参数是数组片断结束处的数组下标.(不包含该元素)
      • 也就是说,arr.slice(1,2);中只arr[1],没有arr[2]
  • 返回值:截取部分的元素组成的数组
  • 功能:从已有的数组中返回选定的元素.
  • 注意:
    1. 如果没有指定end,那么切分的数组包含从start到数组结束的所有元素.
    2. 如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定开始的位置. 【两个参数都适用】 (即:数组长度+负数=参数数值
    3. 截取从start到 end-1的元素。
    4. 该方法并不会修改原数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()(使用splice则原数组会变成被删除以后的数组)
      1
      2
      3
      4
      5
      6
      7
      8
      //slice(start,end)
      var colors=["red","green","blue","yellow","orange"];
      var newColors=colors.slice(1,3);
      console.log(newColors);// ["green", "blue"]
      var newColors2=colors.slice(-2,4);//5-2=3,也就是从3开始到4结束(不包括4)
      console.log(newColors2);//["yellow"]
      // 5-4=1,5-2=3,相當於colors.slice(1,3)
      console.log(colors.slice(-4,-2));//["green", "blue"]

splice()删除、插入、替换

注意
不管是删除还是插入还是替换,返回值都是从原数组中删除的元素组成的数组。
插入的时候不需要删除,所以返回值是空数组

删除

  • 语法:arrayObject.splice(index,count)
    • index:开始删除的数组下标
    • count:要删除的项目数量
      • 如果设置为0,则不会删除项目.
      • 如果不设置,则删除从index开始的所有值.
  • 功能:删除从index处开始的零个或多个元素.
  • 返回值:含有删除部分的元素的数组.
  • 注意:原数组会变成被删除以后的数组
    1
    2
    3
    4
    5
    6
    7
    8
    var arr = ["a", "b", "c", "d", "e", "f"];
    //删除
    var delArr = arr.splice(5);//从数组下标为5的元素开始,包括5【注意是数组下标】
    console.log(arr);// ["a", "b", "c", "d", "e"]
    console.log(delArr);//["f"]
    var delArr = arr.splice(2, 2);
    console.log(arr);// ["a", "b", "e"]
    console.log(delArr);//["c", "d"]

插入

  • 语法:arrayObject.splice(index,0,item.1...….itemX)
    • Index:起始位置
    • 0:要删除的项数
    • item1…itemX:要插入的项
  • 功能:在指定位置插入值
  • 返回值:插入的时候不需要删除,所以返回值是空数组
  • 注意“起始位置” 指想要放进去的位置,比如想要在第3个和第4个元素中插入元素,即在[2]和[3]中间要插入元素,则应该在[3]的位置放置新元素,3就是起始位置。
    1
    2
    3
    4
    5
    var arr = ["a", "b", "c", "d", "e", "f"];
    // 插入
    var insertArr=arr.splice(3,0,"m","n");
    console.log(arr);// ["a", "b", "c", "m", "n", "d", "e", "f"]
    console.log(insertArr);//[],插入的时候不需要删除,所以返回值是空数组。

替换

  • 语法:arrayObject.splice(index,count,item 1...……itemX)
    • Index:起始位置
    • count:要删除的项数
    • item1…itemX:要插入的项
  • 功能:在指定位置插入值,且同时删除任意数量的项
  • 返回值:从原始数组中删除的项组成的数组(如果没有删除任何项,则返回空数组)
    1
    2
    3
    4
    //替换【从下标为1的元素开始删除2个元素并插入3个新元素】
    var relaceArr=arr.splice(1,2,"x","y","z");
    console.log(arr);//["a", "x", "y", "z", "d", "e", "f"]
    console.log(relaceArr);//["b", "c"]

位置查找方法

注意

  1. 需要严格相等(===)才能查找位置。
  2. 这两个方法都只能用于IE9以上的浏览器,以下的则需要我们封装一个方法来使用。(将其补充在下一篇笔记的题目中)

indexOf()从头开始找

  • 语法:arrayObject.indexOf(searchvalue,startindex)
    • searchvalue:必需,要查找的项;
    • startlndex:可选,起点位置的索引.
  • 功能:从数组的开头(位置0)开始向后查找.
  • 返回值:number,查找的项在数组中的位置。
    • 如果有多个就返回第一个的位置
    • 没有找到的情况下返回-1
      1
      2
      3
      4
      var nums=[1,7,5,7,8,1,6,9];
      var pos=nums. indexOf(7,2);//3
      var pos2 = nums.indexOf(7);//1
      console.log(pos,pos2);//3 1

lastIndexOf()从尾开始找

  • 从数组的末尾开始向前查找。
  • 其余与indexOf()一样。
    1
    2
    3
    4
    var nums=[1,7,5,7,8,1,6,9];
    var pos3 = nums.lastIndexOf(1);//5
    var pos4 = nums.lastIndexOf(1,3);//0
    console.log(pos3,pos4);//5 0