Array数组之旅

要学习ES6中的数组扩展篇章，所以就先去预习了一波原本接触到的Array。所谓温故而知新嘛~~
首先我们先了解一下js中的对象：1.内部对象，内部对象包含下面三种：错误对象（标识错误），内置对象（不需要使用new操作符来进行初始化，Math与JSON两种），常用对象（8种，String、Number、Date、Function、Boolean、Array、Object、RegExp）；2.宿主对象，宿主对象主要有两个window与document。3.自定义对象，除了内部对象以及宿主对象之外，其它都为自定义对象，也就是开发者自己定义的对象。
说起Array，能想到的就是属性length，方法push，pop，reverse，shift，unshift，jion，slice，splice……等方法
推荐喜马拉雅上的「陪你读书（JavaScript WEB 编程）」的课程~~~

基础数据类型：Number、undefined、null、Boolean、String、symbol
复杂类型：Object
typeOf(null) === ‘Object’
js解释器，会将其进行解释，转化成二进制，默认前三位是0的就是Object类型。而null转化成二进制的时候，会变成所有位置上全是0。

Array数组

是一个有序的合集。对象是无序的合集，对于有序的对象称作为数组。数组里面可以包含任何数据类型，数组大小可以调整。

1. 创建数组

new关键字 new Array(参数),其中参数只是一个数字的话，则创建出来的是一个指定长度的数组，里面的每项都是undefined。不要使用多个逗号进行创建数组
字面量 [array1, array2]

2. 方法

2.1 读写

读取arr[index]；写arr[index] = 1；
删除delete arr[index],数组长度不会变化，但是在index位置上的数据就是undefined

2.2 判断是否是数组类型

instanceof arr instanceof Array
原型构造函数 arr. proto .constructor === Array
Object.prototype.toString.call(arr) == ‘[object Array]’
ES6中的isArray方法 Array.isArray(arr)

2.3 变异方法

变异方法，在Vue中包含，它们会触发视图更新
栈方法：push,pop在数组的末端进行添加或者删除，返回值push是数组的长度pop是弹出的那一项，对数组造成影响
队列方法：unshift,shift在数组的首端进行添加或者删除，返回值unshift是数组的长度shift是弹出的那一项，对数组造成影响
排序：sort 按照字符串的ASII码进行排序。（fn(a,b){}）按照fn方法排序，a-b从小到大，b-a从大到小
反转：reverse
删除，截取，替换：splice(index,num,item) index是添加/删除的位置，负数就是从后往前；num是删除的数量；item是在index位置上添加的新内容

2.4 非变异方法

对于非变异的，则不会触发视图更新，需要使用vm.$set或者Vue.set方法
截取：slice（start,end）返回的是从start开始，end结束的截取的子数组。start，end可以为负数，表示从数组末端到开始。start，end都没有，则截取整个数组；只有start，从start开始到结束截取；有start，end，截取start至end。
转为字符串：join(separator) 将数组转化为字符串，中间使用separator分隔开。
连接数组：concat(arr1,……,arrn) 连接两个或者多个数组，返回的是一个数组。

扩展：push与concat的区别，同样：都是连接作用。不同：push会影响数组，concat不影响；如果参数是一个数组，push只会增加一项，直接将数组作为它最新的一项，会变成一个二维数组，concat的话，直接将数组一个一个的添加到原来的数组上，还是一个一维数组。

2.5 ES5的indexOf与lastIndexOf

arr.indexOf(item) 返回item在arr数组中从左到右的index，有返回index，没有返回-1
arr.lastIndexOf(item) 返回item在arr数组中从右到左的index，有返回index，没有返回-1

2.6 其它一些不常用常见的方法

every
fill
filter
forEach
Map
reduce
reduceRight

3. ES6 数组扩展

3.1

4. 数组应用

4.1 数组去重

方法一：循环去重

1
2

方法二：ES6中的set数据类型
Set它类似于数组，但是成员的值都是唯一的，没有重复的值。

1 2	const set = new Set([1, 2, 3, 4, 4]); [...set]或者new Array(...set) // [1,2,3,4]

方法三：数组存放，indexOf判断
遍历新数组，不存在就push进新数组中，存在就跳过

Array.prototype.unique = function() {
    var n = []; // 存放已遍历的满足条件的元素
    for (var i = 0; i < this.length; i++) {
        // indexOf()判断当前元素是否已存在
        if (n.indexOf(this[i]) == -1) {
        	n.push(this[i]);
        }
    }
    return n;
}

方法四：对象存放，哈希算法(映射)判断
遍历新数组，不存在就push进新数组中，存在就跳过

Array.prototype.unique = function() {
    // n为hash表，r为临时数组
    var n = {}, r = [];
    for (var i = 0; i < this.length; i++) {
        // 如果hash表中没有当前项
        if (!n[this[i]]) {
            // 存入hash表
            n[this[i]] = true;
            // 把当前数组的当前项push到临时数组里面
            r.push(this[i]); 
        }
    }
    return r;
}

方法五：现排序，后比较

Array.prototype.unique = function() {
    this.sort();
    var re = [this[0]];
    for (var i = 1; i < this.length; i++) {
        if (this[i] !== re[re.length - 1]) {
            re.push(this[i]);
        }
    }
    return re;
}

4.2 数组拍平

方法一：只适合二维数组

1	Array.prototype.concat.apply([],arr)

方法二：ES6的Generator函数

var arr = [1, [[2, 3], 4], [5, 6]];
var arrCopy = [];

var flat = function* (a) {
  var length = a.length;
  for (var i = 0; i < length; i++) {
    var item = a[i];
    if (Object.prototype.toString.call(item) == '[object Array]') {
      yield* flat(item);
    } else {
      yield item;
    }
  }
};

for (var f of flat(arr)) {
  arrCopy.push(f);
}