JavaScript高级程序设计笔记记录（五）引用类型【上】

• Array类型

Array类型是其中一种引用类型。

这里要知道对于ECS数组中的每一项可以保存任何类型的数组，比如第一位可以保存字符串，第二位置保持数值，第三位置保存对象等等。

对于数组的创建方法有这几种：

var colors = new Array(); 
var colors = new Array(20); //创建长度为20的数组
var colors = new Arra("red" "blue" "reen") //创建包含3个字符串值的数组

省略new的写法
var colors = Array(3); // 创建一个包含 3 项的数组
var names = Array("Greg"); // 创建一个包含 1 项，即字符串"Greg"的数组

直接声明
var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组
var values = [1,2,]; // 不要这样！这样会创建一个包含 2 或 3 项的数组
var options = [,,,,,]; // 不要这样！这样会创建一个包含 5 或 6 项的数组

当直接给指定位置赋值时，如果没有指明。数组会自动插入undefined的值

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[99] = "black"; // （在位置 99）添加一种颜色
alert(colors.length); // 100 

如上所示：在99插入值以后，数组长度变为100,3到98之间访问会产生undefined。

关于数组的转换

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
alert(colors.toString()); // red,blue,green 
alert(colors.valueOf()); // red,blue,green 
alert(colors); // red,blue,green 

以上解释，作为数组对象，toString()方法会返回数组中的每个值的字符串形式拼接而成的以逗号分隔的字符串。而valueof()方法返回的还是数组，alert方法则因为要接收字符串参数，会需要调用一次toString()方法，因此返回的和toString()一样。

关于数组的栈操作

首先我们先了解到栈是一种（LIFO）后进先出的数据结构。推入和弹出的操作是ECMAScript中的push()和pop()方法。

ar colors = ["red", "blue"]; 
colors.push("brown"); // 添加另一项
colors[3] = "black"; // 添加一项
alert(colors.length); // 4 
var item = colors.pop(); // 取得最后一项
alert(item); //"black" 

关于数组的队列操作

了解到队列是一种（FIFO）先进先出的数据结构。

使用shift()可以达到从前移除方法。使用shift()前移和push()后进可以实现队列方法。

使用unshift()可以达到前推进方法。使用pop()后移出和unshift()可以实现队列的方法。如下

var colors = new Array(); //创建一个数组
var count = colors.push("red", "green"); //推入两项
alert(count); //2 
count = colors.push("black"); //推入另一项
alert(count); //3 
var item = colors.shift(); //取得第一项
alert(item); //"red" 
alert(colors.length); //2 

//unshift
var colors = new Array(); //创建一个数组
var count = colors.unshift("red", "green"); //推
count = colors.unshift("black"); //推入另一项
alert(count); //3 
var item = colors.pop(); //取得最后一项
alert(item); //"green" 
alert(colors.length); //2

重排序方法

使用reverse()方法会反转数组项的顺序。

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

sort()方法将数组项通过转型成字符串进行比较。

因为字符串直接的比较如：'5' > '10'返回的是true,因为先从第一位比较来看5比1大。

所以排序后的结果往往不是我们需要的。

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

现在就可以进行一次优化

function compare(value1, value2) { 
 if (value1 < value2) { 
     return -1; 
 } else if (value1 > value2) { 
     return 1; 
 } else { 
     return 0; 
 } 
} 

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

简化compare方法可以写成

function compare(value1, value2){ 
  return value2 - value1; 
} 

操作方法

关于concat()我们要知道，方法首先会创造一个数组副本，然后直接将数组追加到末尾。传递的数值不是数组的情况下，也会被简单地添加到数组的末尾。也是所谓的浅拷贝。也就是如果修改了原数组就会同步到新数组。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

ES6中也有合并的方式

let arr1 = ['a', 'b']
let arr2 = ['c', 'c']
let arr3 = ['d', 'e']
let arr4 = [...arr1, ...arr2, ...arr3]  // [ 'a', 'b', 'c', 'd', 'e' ]

关于slice()方法我们是用于对数组的剔除。如果是负数，最后的结果会返回负数加上数组长度的值

var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

slice(-2,-1)和slice(3,4)得到的结果相同

而splice()方法则更加强大

splice(0,2) 删除数组前两项

splice(2,0,"red","green") 起始位置 要删除的项 插入多个字段，当插入的字段等于删除的字段的时候达到替换的效果。这个函数的意思就是 从数组第二个开始删除第0个值后再插入两个值。

代码例子如下：

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 删除第一项
alert(colors); // green,blue
alert(removed); // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); // 从位置 1 开始插入两项
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); // 插入两项，删除一项
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow，返回的数组中只包含一项

关于indexof和lastIndexOf的区别就是，从前找和从后找。找不到返回-1。找到返回下标，从0开始

如果有第二个参数，就屏蔽参数下标之前的数字，往后找到第一个符合的数值返回该数值下标

迭代

在es5中有5中迭代方式 ，分别是every(),filter(),forEach(),map(),some()。

而这里不多说，我们来学习一下es6中的迭代器。迭代器就是一个带有特殊接口的对象。含有next()方法。

https://www.jianshu.com/p/3bb77516fa7e这里有大佬总结