第10节 JavaScript数组的一些常用方法

序

ECMAScript数组的每一项可以保存任何类型的数据，且数组的大小是可以动态调整的，可以随着数据的添加自动增长以容纳新增数据。

 创建数组的方式有2种方法:
  使用Array构造函数创建一个数组

var arr1 = new Array(1,3,5,7,9);

  使用数组字面量表示法创建一个数组

var arr2 = [1,3,5,7,9];

  在读取设置数组的值时，要使用方括号并提供相应值得基于0的数字索引

//输出数组的第1项
console.log(arr2[0]);   //输出 1

  数组的项数保存在其length属性中，利用length属性可以方便地在数组某位添加新项

//输出数组的长度
console.log(arr2.length);   //输出 5

//使用length为数组末尾添加1个新的项
arr2[arr2.length] = 11;
console.log(arr2);  //输出 [1,3,5,7,9,11]

---

1、检测数组
  ECMAScript5新增了Array.isArray()方法，这个的目的最终确定某个值到底是不是数组。

//检测数组
var colors = ['red','green','orange'];
console.log(Array.isArray(colors)); //输出 true

---

2、转换方法
  join()，接受一个参数用作分隔符，将数组每一项分隔组成新的字符串。

//join():使用一个分隔符将数组分隔开来组成新的字符串返回出来
var colors = ['red','green','orange'];
var str = colors.join("|");
console.log(str);   //输出 red|green|orange

---

3、栈方法
  栈是一种LIFO(后进先出)的数据结构，最新添加的项最早被移除，而栈中项的插入和移除，只发生在一个位置——栈的顶部。
  push()：可以接受任意个参数，逐个添加到数组的末尾，并返回修改后数组的长度。
  pop():从数组的末尾移除最后一项，返回移除的一项。

//栈方法
var arr = [1,3,5,7,9];

//push():末尾添加项，返回修改后数组的长度
console.log(arr.push(11,13,15,17,19,20));//输出 11
console.log(arr);   //输出 [1,3,5,7,9,11,13,15,17,19,20]

//pop():移除末尾的最后一项，并返回移除的项
console.log(arr.pop()); //输出 20
console.log(arr);   //输出 [1,3,5,7,9,11,13,15,17,19]

---

4、队列方法
  队列数据结构的访问规则是FIFO(先进先出)，在末尾添加项，从列表首移除项。
  shift()：移除数据的第一项，并返回移除的这个结果。
  unshift():在数组头部新添加元素，返回修改后数组的长度。

    //队列方法
    var arr = [1,2,3,4,5];

    //shift():移除数组首部的一项,并返回移除的项
    console.log(arr.shift());   //输出 1
    console.log(arr);   //输出 [2,3,4,5]

    //unshift():在数组首部添加元素，返回修改后数组的长度
    console.log(arr.unshift(0,1));  //输出 6
    console.log(arr);   //输出 [0,1,2,3,4,5]

---

5、重排序方法
  reverse():反转数组的顺序。
  sort():方法会调用每个数组项的toString()方法，然后比较得到的字符串，因此sort()可以接收一个比较函数。
  传入的比较函数接受两个参数，如果第一个参数应该位于第二个之前则返回一个附属，如果两个参数相等返回0。
  reverse()和sort()方法的返回值是经过排序之后的数组,会改变原来数组。

//reverse():
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);//输出 [5,4,3,2,1]

//sort():
var arr = [1,2,3,4,5,10,15];

//会调用每一项的toString()，所以会按照字符串的比较方法
arr.sort();
console.log(arr);//输出 [1,10,15,2,3,4,5]

//如果单纯比较数字，可以传入一个简单函数
//升序
arr.sort(function(a,b){return a-b});
console.log(arr);//输出 [1,2,3,4,5,10,15]

//降序
arr.sort(function(a,b){return b-a});
console.log(arr);//输出 [15,10,5,4,3,2,1]

---

6、操作方法
  concat():连接数组，创建一个新的数组。

//concat()
var colors1 = ['red','green','yellow'];
var colors2 =colors1.concat('blue','orange');
console.log(colors2);//输出 [red,green,yellow,blue,orange]

  slice():截取数组的一部分，返回一个子串不会影响原始数组。接收一个或两个参数，项的起始位置和结束位置不包括结束位置的项。

//slice()
var arr = [1,2,3,4,5,10,15];
console.log(arr.slice(0,5));    //输出 [1,2,3,4,5]

  splice():最强大的数组方法，多种用法。
  参数说明：参数1起始位置，参数2删除项的数量，参数3增加的项

用法	功能	参数数量	参数说明
删除	可以删除任意的项	2个参数	删除的第一项的位置，和要删除的项数
插入	可以向指定位置插入任意数量的项	3个参数	起始位置，0，插入的项
替换	可以向指定位置插入任意数量的项，且同时删除任意数量的项	3个参数	起始位置，要删除的项数和要插入的任意数量的项

//splice()
var arr = [1,2,3,4,5,10,15];

//删除中间3个元素
console.log(arr.splice(2,3));   //输出[3,4,5]
console.log(arr);               //输出[1,2,10,15]

//插入3项新的元素
console.log(arr.splice(2,0,6,6,6)); //输出 []
console.log(arr);               //输出 [1, 2, 6, 6, 6, 10, 15]

//替换中间3个元素
console.log(arr.splice(2,3,7,7,7)); //输出 [6,6,6]
console.log(arr);               //输出 [1, 2, 7, 7, 7, 10, 15]

---

7、位置方法
  indexOf():接收两个参数，查找的项，查找的起点位置的索引。
  lastindeOf():从数组的末尾开始向前找。

//indexOf()
var arr = [1,3,4,5,6,7,9,3,6];

//从0开始找3的索引位置
console.log(arr.indexOf(3));    //输出 1

//从索引5的位置开始找3的索引位置
console.log(arr.indexOf(3,5));  //输出 7

---

学习总结

  这一节的学习内容有点多，只能慢慢消化，不能急于求成。相信掌握了数组的这些函数，面对数组的操作也可以从容一战啦。其实回顾其他语言，很多数组的函数都大同小异。所以要理解这些函数的本质，在学习更多的知识变通起来也不会困难。知识只会积累的越来越多，方法和思想才是重要的。
  这周的学习有点懈怠，给自己加油，勿忘初心！

---