JS对象之数组(1)

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

创建数组

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

   小括号()说明：

   1. 预先知道数组要保存的项目数量
   2. 向Array构造函数中传递数组应包含的项

   //创建一个保存颜色的数组
   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. 使用数组字面量表示法
   由一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开。

   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开始的正整数。

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可以从数组的末尾移除项或向数组中添加新项。

  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。】

  //接上面代码，原本数组长度为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() 方法使用数组提供的先进后出栈的功能。

  //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的新长度.
• 注意，该方法不创建新的创建，而是直接修改原有的数组。

  //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。
• 该方法不产生新数组，直接改变原有数组。

  //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。

  //shift
  var m=colors.shift();
  console.log(m);//red
  console.log(colors);//["green", "blue", "yellow", "blank"]

---

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

• 语法:arrayObject.join(separator)
  • separator:分隔符，也可以为空。参数为空是默认使用逗号隔开，如果不想要逗号可以使用""作为参数。
• 功能:用于把数组中的所有元素放入一个字符串.
• 返回值：字符串

  //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()
• 功能:用于颠倒数组中元素的顺序.
• 返回值:颠倒顺序后的数组的引用.
• 该方法直接改变原来的数组，而不会创建新的数组。

  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 之后。
• 例子：

  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进行上述的做法。
• 关于返回值：

  const array1 = [1, 30, 4, 21, 100000];
  array2 = array1.sort();
  console.log(array2);
  // expected output: Array [1, 100000, 21, 30, 4]

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

• 参考文章

  当 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

  // 升序（展开写的例子）
  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)
• 功能:用于连接两个或多个数组.
• 返回值:数组.

  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则原数组会变成被删除以后的数组）

     //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处开始的零个或多个元素.
• 返回值:含有删除部分的元素的数组.
• 注意：原数组会变成被删除以后的数组。

  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就是起始位置。

  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个新元素】
  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

    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()一样。

  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

---