<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
基本类型值和引用类型值
JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值。基本类型值源于以下5种基本类型：Undefined、Null、Boolean、Number和String。
$:引用类型包括：
*Object类型 *Array类型 *Date类型 *RegExp类型 *Function类型
*基本包装类型：Boolean类型、Number类型和String类型
*单体内置对象：Global对象、Math对象。
$:基本类型值和引用类型值有以下特点：
#基本类型值在内存中占用固定大小的空间，因此被保存在栈内存中；从一个变量向另一个变量复制基本类型的值，会创建这个值的副本。
#引用类型的值是对象，保存在堆内存中。包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。
#确定一个值是哪种基本类型可以用typeof操作符，而确定一个值是哪种引用类型可以用instanceof操作符。
例：
typeof:
var s = "Nicholas";
var b = true;
var i = 22;
var u;
var n = null;
var o = new Object();
var fn = new Function();
console.log(typeof s);
console.log(typeof b);
console.log(typeof i);
console.log(typeof u);
console.log(typeof n);
console.log(typeof o);
console.log(typeof fn);
instanceof:
console.log(o instanceof Object);
console.log(o instanceof Array);
说明：所有引用类型的值都是Object的实例。因此在检测一个引用类型值和Object构造函数时，instanceof操作符始终返回true。如果使用instanceof操作符检测基本类型的值时返回的都是false，因为基本类型不是对象。
$:数组Array
数组也是对象的一种，ES数组的每一项可以保存任何类型的数据。
1、数组的创建方式(两种)
* 使用new关键字+Array构造函数创建数组(new操作符可以省略)。
例：
var colors = new Array();
var colors = Array();
如果预先知道数组的项目数量，也可以给构造函数传递该数量，而该数量会自动成为length属性的值。
例：
var colors = new Array(20);
console.log(colors.length);
也可以向Array构造函数传递数组中应该包含的项。
例：
var colors = new Array("red","blue","green");
console.log(colors.length);
对比分析：
var colors = new Array(20); console.log(colors.length);
var colors = new Array("20"); console.log(colors.length);
* 数组字面量表示法创建数组
数组字面量由一对包含数组项的方括号表示("[]"),多个数组项之间以逗号隔开。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
console.log(colors.length); //3
var colors = []; //创建一个空数组
console.log(colors.length); //0
在读取和设置数组的值时，要使用方括号并提供相应的基于0的数字索引(位置)。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
console.log(colors[0]); //显示第一项 "red"
colors[2] = "black"; //修改第三项
colors[3] = "brown"; //新增第四项
* 数组的length属性
数组的length属性的特点：不是只读的。也就是说通过设置这个属性，可以从数组的末尾移除或向数组中添加新项。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
colors.length = 2; //设置数组长度为2
console.log(colors[2]); //undefined
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
colors.length = 4; //设置数组长度为4
console.log(colors[3]); //undefined
利用length属性也可以方便地在数组末尾添加新项。
数组最后一项的索引始终是 length-1 ,所以下一个新项对应的位置就是 length。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
colors[colors.length] = "black"; //(在位置3)添加一种颜色
colors[colors.length] = "brown"; //(在位置4)添加一种颜色
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
colors[99] = "black"; //(在位置99)添加一种颜色
console.log(colors.length); //100
2、数组的方法(重点)
* 检测数组(使用instanceof操作符)
if(value instanceof Array){
//对数组执行某些操作
}
了解：ES5新增 Array.isArray()方法 用于最终确定某个值到底是不是数组。
if(Array.isArray(value)){
//对数组执行某些操作
}
* 转换方法
$:所有对象都具有toLocaleString()、toString和valueof()方法。
toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串;
valueOf()返回的还是数组;
toLocaleString()方法也经常返回与toString和valueof()方法相同的值,但也不总是这样;具体查看 P89
$: join()方法 数组转字符串
join()方法使用不同的分隔符来构建字符串。只接受一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
console.log(colors.join()) //不加参数默认以","分隔 == colors.join(",")
console.log(colors.join("")) //redbluegreen
console.log(colors.join("||")) //red||blue||green
注意：如果数组中的某一项的值是null或者undefined,那么该值在join()、toLocaleString()、toString和valueof()方法返回的结果中以空字符串表示。
例：
var colors = ["red","blue","green"]; //定义了一个长度为3的字符串数组
colors[99] = "black"; //(在位置99)添加一种颜色
console.log(colors.join()); //red,blue,green,,,,.....,,,black 中间以空字符串表示
* 栈方法
栈是一种LIFO(后进先出)的数据结构，也就是最新添加的项最早被移出。
类似栈行为的ES法方：
$:push()方法:接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
$:pop()方法:从数组的末尾移除最后一项，减少数组的length值，然后返回被移除的项。
例：
var colors = new Array(); //创建一个数组
var count = colors.push("red","green"); //推入两项
console.log(count); //返回修改后数组的长度是2
count = colors.push("black"); //推入另一项
console.log(count); //返回修改后数组的长度是3
var item = colors.pop(); //从数组的末尾移除最后一项,返回被移除的项。
console.log(item); //"black"
console.log(colors.length); //2
* 队列方法
队列数据结构的访问规则是FIFO(先进先出)。
ES模拟队列：
$:unshift()方法:在数组的前端添加任意个项并返回新数组的长度。
$:shift()方法:从数组的前端移除第一项(也就是位置索引值为0)，减少数组的length值，然后返回被移除的项。
例：
var colors = new Array(); //创建一个数组
var count = colors.unshift("red","green"); //推入两项
console.log(count); //返回修改后数组的长度是2
count = colors.unshift("black"); //推入另一项 "black","red","green"
console.log(count); //返回修改后数组的长度是3
var item = colors.shift(); //从数组的前端移除第一项(也就是位置索引值为0)
console.log(item); //"black"
console.log(colors.length); //2
* 重排序方法
$:reverse()方法:反转数组项的顺序。
例：
var values = [1,2,3,4,5];
values.reverse();
console.log(values); //5,4,3,2,1
$:sort()方法:排序
sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，来确定顺序。
例：
var values = [0,1,5,10,15];
values.sort();
console.log(values); //0,1,10,15,5
解决方法：sort()方法可以接收一个比较函数最为参数，以便指定哪个值位于前面。
例：
var values = [0,1,5,10,15];
values.sort(function(a,b){
return a-b; //升序
return b-a; //降序
});
console.log(values);
注意：reverse()和sort()方法的返回值都是经过排序后的数组(改变原数组)。
* 操作方法
ECMAScript为操作已经包含在数组中的元素提供了很多方法：
concat()方法可以基于当前数组创建一个新数组。
slice()方法可以基于当前数组获取指定区域元素并创建一个新数组。
splice()主要用途是向数组的中部插入元素，使用方式有3种。
方法详解：
** concat()
方法用于连接两个或多个数组。
var arr1 = [1,2];
var arr2 = [3,4];
var arr3 = arr1.concat(arr2);
连接多个：
var arr4 = [5,6];
<!-- var arr3 = arr1.concat(arr2,arr4); -->
console.log(arr3);
** slice()
方法可提取字符串或者数组的某个部分，并以新的字符串或数组返回被提取的部分。
*.slice(start,end)
说明：
var arr = [2,3,5,9,6];
var ele1 = arr.slice(1,4);
console.log(ele1);
** splice()
splice(index,howmany,ele1,ele2,......) 方法用于插入、删除或替换数组的元素
splice中的删除功能：返回被删除数组元素
var arr = ['zl', 23, '盐城']; //当前数组
var arr1 = arr.splice(0,2); //截取前两个元素
console.log(arr1); //返回截取的元素
console.log(arr); //
splice中的插入功能：返回空数组
var arr = ['zl', 23, '盐城']; //当前数组
var arr1 = arr.splice(1,0,'WEB','哈尔滨'); //没有截取，但插入了两条
console.log(arr1); //在第2个位置插入两条
console.log(arr); //输出
splice中的替换功能：返回被替换数组元素
var arr = ['zl', 23, '盐城']; //当前数组
var arr1 = arr.splice(1,1,100); //截取了第2条，替换成100
console.log(arr1); //输出截取的23
console.log(arr); //输出数组
* 位置方法
首次出现位置
indexOf():返回某个指定的字符串值或者某个数组元素值在字符串或者数组中首次出现的位置
*.indexOf(searchvalue,fromindex)
(2，4)
[1,2,3,4,4,2,3,4]
说明：
*可以是数组，也可以是字符串
searchvalue 搜索值
fromindex 从某个位置开始搜索
最后出现位置
lastIndexOf():返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
*.lastIndexOf(searchvalue,fromindex)
说明：
同上
* 迭代方法
ES5为数组定义了5个迭代的方法。每个方法都接收两个参数：1)要在每一项上运行的函数 2)运行该函数的作用域对象--影响this的值(可选)。
运行的函数会接受三个参数：1)数组项的值 2)该项在数组中的位置 3)数组对象本身。
$:every()
对数组的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
例：
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
return (item > 2);
})
console.log(everyResult); //false
$:some()
对数组的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
例：
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
return (item > 2);
})
console.log(someResult); //true
$:filter()
对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组。
例：
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
return (item > 2);
})
console.log(filterResult); //[3,4,5,4,3]
$:map()
对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。
例：
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
return item*2;
})
console.log(mapResult); //[2,4,6,8,10,8,6,4,2]
$:forEach()
对数组的每一项运行给定函数。该方法没有返回值。
例：
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,array){
console.log(item); //代码块
})
* 归并方法
$:reduce() 是从数组的第一项开始，逐个遍历到最后。
$:reduceRight() 是从数组的最后一项开始，逐个遍历到最前。
这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。
这两个方法都接收两个参数：1)要在每一项上运行的函数 2)作为归并基础的初始值(可选)。
传给这两个方法的函数接收4个参数：1)前一个值 2)当前值 3)项的索引 4)数组对象
例：
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
return prev + cur; //1 + 2 = 3 + 3 = 6 + 4 =10 + 5 = 15
});
console.log(sum); //15
</script>
</body>
</html>