前端——语言——Core JS——《The good part》读书笔记—

本章介绍数组的内容，Java中的数组在创建时，会分配同等大小的内存空间，一旦创建数组的大小无法改变，如果数据超过数组大小，会进行扩容操作。并且数组的元素类型在创建时必须是已知的，而且只能存放相同数据类型的元素。

JS的数组，它与硬件的概念不沾边，在创建时等同于创建了一个对象，只不过对象的属性必须是数字，而且由编译器自动管理。数组的大小概念是对象拥有多少个属性，数组的元素可以是任何值，没有数据类型的约束。

与Java数组对比，JS的数组更偏向于对象的概念，与数组的数据结构也没有任何关系，不具有快速的查询速度，在中间插入数据，删除数据缓慢的特点。

本章的内容不在依照书籍的原始结构目录结构，而是将分为两类知识点，数组（容器）本身和元素（元素）。

数组（容器）：

操作：创建，合集，过滤，测试，聚合，排序，类型判断，清空，转换为字符串。
概念：sparse数组，多维数组，”array-like”对象。

元素：

操作：添加，修改，删除，查询，遍历。

以下是书籍的元素结构

第一小节介绍数组的字面量
第二小节介绍数组的length属性
第三小节介绍数组的删除
第四小节介绍数组的遍历
第五小节介绍类型判断
第六小节介绍数组的方法
第七小节介绍多维数组

1.1 数组字面量

通过字面量创建数组非常方便，它的格式为var arr = []。

基于JS数组的理解，当给数组中添加元素时，会自动添加数字的属性，例如arr.push(“val 1”)，此时自动给数组对象添加属性”0”。程序员也可以指定属性的名称，arr[1000] = “val 1000”，此时数组称为sparse数组，因为的数字属性不是连续的，中间存在间隔。

1.2 length属性

数组的length属性表示数组的长度。

当数组不是sparse数组时，数组的长度与数组的大小含义是相同的，都表示数组元素的个数。

当数组是sparse数组时，数组的长度为数组的最大索引值加1。

数组的length属性随着元素的添加和删除在动态改变，当使用push，unshift等方式添加元素时，length值加1，当使用splice，pop，shift方式删除元素时，length值减1。注意在使用delete删除元素时，length的值并不改变，这是因为delete元素本质是将元素的值修改为undefined。

数组的length属性可以修改，大于length的索引值对应的元素会被删除，可以通过设置length为0，清空当前数组。

1.3 删除

删除数组的方式有以下几种
delete方式，它将元素设置为undefined，length值不改变
splice方式，它将数组的元素用新元素替换，会导致数组的整体移动。
pop方式，删除最后一个元素并返回该元素，删除元素的位置固定。
shift方式，删除第一个元素并返回该元素，会导致数组整体向前移动，删除位置较为固定
修改length属性的值，但是一般不这样做，除非某些特殊情况，例如清空数组时修改length值为0很方便。

1.4 遍历

遍历数组使用for循环，使用for-in时，循环数组的所有属性值，包括那些继承的属性。

1.5 判断

　　判断对象为数组的方式有

使用isArray方法。
使用constructor属性值，缺点在于多窗口时，无法判断
使用constructor的name属性，获取构造器名称的方法需要自己编写。
使用class属性值，截取后面八位的值。

1.6 元素方法

1.6.1 添加

添加元素有两种方式：字面量赋值，通过方法

字面量：array[index] = value；
方法：通过push，unshift，splice。

方法3- 16 push方法

名称	push
描述	往数组末尾添加元素，可以一次添加多个元素
参数	参数：elem1,elem2,elemN 说明：数组末尾添加的元素。类型：任何数据类型是否必填：是，至少存在一个。
示例	var array = [3,2,1]; array.push(“a”,”b”) // 返回3,2,1,a,b。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

方法3- 17 unshift方法

名称	unshift
描述	与push方法基本相同，区别在于往数组开头添加元素，所有的元素都往后移。

方法3- 18 splice方法

名称	splice
描述	添加或删除数组元素，本质上是使用参数中的元素替换数组中的元素。若参数元素个数大于需要替换的元素，则为添加元素，小于时，则为删除元素，相等时，为替换元素。
参数	参数：start 说明：开始的索引位置，如果是负数，表示从末尾开始计算位置。类型：-length – length-1之间的值是否必填：是。
参数	参数：num 说明：需要被替换元素的个数。类型：0-length-1。是否必填：否，默认为length-start。
	参数：elem1，elem2，elemN等说明：参数中的元素，如果参数元素大于num，则为添加元素，相等为替换元素，小于为删除元素。类型：任意的JS数据类型。是否必填：否。
示例	var array = [3,2,1]; array.splice(1) // 返回2,1；array为[3] array.splice(1,1) // 返回2；array为[3,1]； array.splice(1,1,”a”,”b”,”c”)，返回2；array为[3,”a”,”b”,”c”,1]；注：这里假设每次splice操作之前array的值都为[1,2,3]
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

1.6.2 删除

删除元素有三种方式：字面量，delete操作符，方法。

字面量：array[index] = undefined
delete：delete array[index]
方法：pop，shift，splice。

方法3- 19 pop方法

名称	pop
描述	从末尾中取出元素，并删除该元素。返回值为取出的元素
示例	var array = [3,2,1]; array.pop() // 返回3,2。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

方法3- 20 unshift方法

名称	unshift
描述	与pop方法基本相同，区别在于取出数组开头的元素，并删除，所有的元素都往前移动。效率很低。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

1.6.3 查找

查找的方法indexOf，lastIndexOf。

方法3- 21 indexOf方法

名称	IndexOf
描述	在数组从start位置开始查找(从左--->右)元素x，如果都不指定时，默认为整个数组。找到元素，返回元素的索引值，失败返回-1。
参数	参数：x 说明：被查找的数组元素x 类型：任意数据类型，数组的元素是否必填：是。
参数	参数：start 说明：数组结束的索引值位置类型：索引值，是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.indexOf(1) // 返回1 tempArray.indexOf(1,3) // 返回-1，在[4,5]中不存在1。

方法3- 22 lastIndexOf

名称	LastIndexOf
描述	与indexOf作用相同，唯一区别在与lastIndexOf从右--->左进行搜索。
参数	参数：x 说明：被查找的数组元素x 类型：任意数据类型，数组的元素是否必填：是。
参数	参数：start 说明：数组结束的索引值位置类型：索引值，是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.indexOf(1) // 返回1 tempArray.indexOf(1,3) // 返回-1，在[4,5]中不存在1。

1.6.4 遍历

遍历数组的方法有三种：foreach方法，for循环，jQuery的each方法。

方法3- 23 foreach方法

名称	forEach
描述	遍历数组中的所有元素，break关键字无法结束forEach的循环，使用return可以。
参数	参数：function(value,index,array) 说明：函数，第一个参数为当前数组的值，第二个参数为当前数组的索引，第三个参数为数组本身。类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.forEach(function(value){ console.log(value)； })

1.7 容器方法

1.7.1 创建

创建数组可以通过三种方式，字面量，构造器，方法。

字面量：var tempArray = [elem1，elem2，elem3，，elem4]；数组中可以出现连续的逗号，此时该元素为undefined，在计算数组的length时需计算该元素。
构造器：构造器存在三种形式
1. 第一种形式，无任何参数 tempArray = new Array()；
2. 第二种形式，只有一个参数，此时参数的含义指定数组的大小，new Array(10)；
3. 第三种形式，拥有多个参数，这些参数为数组的元素。new Array(1,2,3)
方法：

表格2- 24 concat方法

名称	concat
描述	对数组元素进行拼接，返回新的数组。若参数为普通数据类型，为当前元素与参数元素的并集，若参数为数组，为当前元素与数组的并集，若没有参数，返回当前数组的拷贝。若参数中存在嵌套数组时，不会循环提取嵌套中的数组，而是将其作为一个数组元素进行处理。
示例	Var array = [3,2,1]; array.concat (4) // 返回[3,2,1,4]
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

表格2- 25 map方法

名称	Map
描述	遍历数组的元素，根据function(value)当前的返回值构建新的数组。
参数	参数：function(value,index,array) 说明：函数，第一个参数为当前数组的值，第二个参数为当前数组的索引，第三个参数为数组本身，函数需要有返回值。类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.map(function(value){ return value 2; }) // 此时构建的数组为原来元素 2。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

1.7.2 过滤

过滤的方法有filter。

方法3- 24 filter方法

名称	filter
描述	遍历数组中的所有元素，若function(value)返回true，把当前元素放入到新数组中，返回false，则什么都不做。对于null与undefined元素会自动忽略。
参数	参数：function(value,index,array) 说明：函数，第一个参数为当前数组的值，第二个参数为当前数组的索引，第三个参数为数组本身，函数需要返回true或者false。类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.filter(function(value){ return value >=2； }); // 返回[2,3,4,5]
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

1.7.3 排序

排序的方法有sort，reverse

方法3- 25 sort方法

名称	sort
描述	对数组元素进行排序，当不传入任何排序算法时，按自然排序方式正序排序。传入排序算法时，按照排序算法排序
参数	参数：function(a,b) l 说明：排序算法，a表示当前元素，b表示后一个元素，若函数返回值小于0，则a < b，排在b之前；若大于0，则a >b，排在b之后。 l 类型：排序算法。 l 是否必填：否，默认值为自然排序。
示例	var array = [3,2,1]; array.sort() // 返回1,2,3
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

方法3- 26 reverse方法

名称	reverse
描述	对数组元素进行逆序，即array.length -1的元素与0元素互换位置，length-2的元素与1元素互换位置，以此类推。
示例	var array = [3,2,1]; array.reverse() // 返回1,2,3
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

1.7.4 测试

测试的方法有every，some

方法3- 27 every方法

名称	every
描述	遍历数组中的所有元素，若function(value)返回false，停止循环，并且every返回false。表示的含义是数组中所有元素必须都满足function的条件。
参数	参数：function(value,index,array) 说明：函数，第一个参数为当前数组的值，第二个参数为当前数组的索引，第三个参数为数组本身，函数需要返回true或者类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.every(function(value){ return value >=1； }); // 返回true。若 value <=3，则返回false，因为4,5不满足。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

方法3- 28 some方法

名称	some
描述	与every相反，若数组中存在任意一个满足条件的元素，则中断循环，并且返回true。
参数	参数：function(value,index,array) 说明：函数，第一个参数为当前数组的值，第二个参数为当前数组的索引，第三个参数为数组本身，函数需要返回true或者false。类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.some(function(value){ return value >=1； }); // 返回true。若 value <=3，则返回true，因为1,2，3满足条件。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

1.7.5 聚合

聚合的方法有reduce，reduceRight。

方法3- 29 reduce方法

名称	reduce
描述	若数组中没有元素，抛出异常，存在一个元素，返回当前元素，存在两个或两个以上的元素，则将两个元素的运算结果返回，并将结果作为参数与第三个元素进行运算，以此类推，直到数组中所有的元素都参与过运算。
参数	参数：function(a，b) 说明：第一次，第一个参数为第一个元素的值，第二个参数为第二个元素的值。第二次，第一个参数为第一个元素与第二个元素运算的值，第二个参数为第三个元素，以此类推，直到所有数组的元素都参与过运算类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.reduce(function(a,b){ return a+b； }); // 返回15.
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

方法3- 30 reduceRight方法

名称	reduceRight
描述	与reduce相同，只不过运算的执行顺序为右--->左。对于对象执行顺序比较敏感的运算会与reduce存在差别，例如减号。不敏感的则完全相同
参数	参数：function(a，b) 说明：第一次，第一个参数为第一个元素的值，第二个参数为第二个元素的值。第二次，第一个参数为第一个元素与第二个元素运算的值，第二个参数为第三个元素，以此类推，直到所有数组的元素都参与过运算类型：函数是否必填：是。
示例	var tempArray = [1,2,3,4,5]; tempArray.reduceRight(function(a,b){ return a-b； }); // 返回-5。5-4-3-2-1。
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight

1.7.6 转换字符串

转换字符串的方法有toString，toLocalString，join。

方法3- 31 join方法

名称	join
描述	将数组元素使用分隔符拼接为字符串
参数	参数：separator 说明：分隔符，任意的字符。类型：数字。是否必填：否，默认值为逗号。
示例	Var array = [1,2,3]; array.join(“,”) // 返回1,2,3
链接	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

1.7.6 自定义

　　如果数组中现有方法无法满足你的需求，可以通过修改Array.prototype的方式添加自定义方法。代码如下

$(function(){

    // 添加数组元素

    appendArrayMethod();

    // 测试size方法

    testSize();

    // 测试intersect方法

    // testIntersect();

    // 测试差集的方法

    testDiffer();

});

// 给数组添加三个方法，数组的大小，交集，差集

function appendArrayMethod(){

    $.extend(Array.prototype,(function(){

        /**

         * 返回数组的大小

         * @returns {number}

         */

        function size(){

            var size = 0;

            this.filter(function(){

                size ++;

            });

            return size;

        }

        /**

         * 计算两个数组的交集

         * @param array

         * @returns {*}

         */

        function intersect(array){

            if(!array) throw {name:"非法参数",message:"交集运算，参数必须存在"};

            if(!Array.isArray(array)) throw {name:"非法参数",message:"交集运算，参数必需是数组"};

            return this.filter(function(value){

               return array.indexOf(value) !== -1

            });

        }

        /**

         * 计算两个数组的差集

         * @param array

         */

        function differ(array)

        {

            if(!array) throw {name:"非法参数",message:"差集运算，参数必须存在"};

            if(!Array.isArray(array)) throw {name:"非法参数",message:"差集运算，参数必需是数组"};

            return this.filter(function(value){

                return array.indexOf(value) === -1;

            })

        }

        return {

            size:size,

            intersect:intersect,

            differ:differ

        }

    })())

}

/**

 * 测试size方法

 */

function testSize()

{

    var arr1 = ["a","b","c"];

    console.log(arr1.size()); // 返回3

    arr1[1000]="d";

    console.log(arr1.size());  // 返回4

}

/**

 * 测试交集的方法

 */

function testIntersect()

{

    var arr1 = ["a","b","c"];

    var arr2 = ["c","d","e"];

    console.log(arr1.intersect(arr2));

    console.log(arr1.intersect(null));

}

/**

 * 测试差集的方法

 */

function testDiffer()

{

    var arr1 = ["a","b","c"];

    var arr2 = ["c","d","e"];

    console.log(arr1.differ(arr2));

    console.log(arr1.differ(null));

}

1.8 多维数组

JS中多维数组的概念含义是数组的元素为数组元素，可以理解为数组的相互嵌套。

至此本篇内容结束，该书的第八章节介绍数组的方法将不再重复介绍。