读书笔记：ES5-Array

Posted on

突如其来的读书笔记

原本计划要系统的学习ES6的，但是中途很容易出现提到一些技术点对比时忘记了原有的技术情况，虽说ES5基本都是会的，但是很多东西不常用就会忘记，最近脑子不好用，经常想用什么的时候想不起来了，还要去查一下来确认，就想再过一遍基础知识了，看了几天又想统一做下笔记，方便自己之后查看～

目前在过引用类型-数组，暂且先写数组吧

所有方法

  • Array.isArray()
  • toString()
  • valueOf()
  • toLocaleString()
  • join()
  • push()
  • pop()
  • shift()
  • unshift()
  • reverse()
  • sort()
  • concat()
  • slice()
  • splice()
  • indexOf()
  • lastIndexOf()
  • every()
  • some()
  • filter()
  • map()
  • forEach()
  • reduce()
  • reduceRight()

会改变原数组的方法

push,pop,unshift,shift,reverse,sort,splice

啰嗦

ECMAScript数组每一项可以保存任何类型的数据！！！

创建数组

两种方式：Array构造函数 & 数组字面量表示法

方式一： Array构造函数

1
var array = new Array();

可以传入指定数组项数量或者具体的数组项

1
2
3
4
5
//创建length为3的数组
var array = new Array(3);

//创建项依次是1，2，3数值的数组
var array = new Array(1,2,3);

注意：当传入的是单独一个数值会被识别成数组项数量（length）而不是具体的数组项

1
2
3
4
5
//创建了包含一个数组项是字符串'item1'的数组
var array = new Array('item1');

//下面代表创建的是length为3的数组，而不是包含一个数组项是数值3的数组
var array = new Array(3);

此方法还可以省略new操作符

1
var array = Array();

方式二： 数组字面量表示法

此方法不会调用Array构造函数

1
2
var array1 = [];
var array2 = [1,2,3];

数组最后一项不要写逗号，IE8以及以前会多识别出一个undefined选项，虽然目前基本很少兼容到那么早版本，但是还是规范代码，说不定遇到什么编译器过不去，我之前写注释的时候不规范就吃亏过，导致label编译不过去，还不显示任何问题让你排错，直接崩掉

Length

length即数组的长度，最后一项的索引加1，但是length不是只读的，可以改变length值

缩短数组长度，不存在的数组项为undefined

1
2
3
var array = [1,2,3];
array.length = 2;
alert(array[2]);//undefined

加长数组长度，没有赋值的项为undefined

1
2
3
4
5
6
7
var array = [1,2,3];
array.length = 4;
alert(array[3]);//undefiend

//一下方式也可以更改length，但是中间咩有赋值的（索引4-98）为undefined
array[99] = 100;
alert(array.length);//100

length是动态变化的

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

数组检测

方式： instantsof & Array.isArray()

方式一： instantsof

1
2
3
if(array instantsof Array){
	...
}

这种方式可以在同一个全局环境下判断出是不是数组，非同一个全局环境下，比如网页中包含多个框架，一个数组从一个框架传递到另一个框架，由于两个框架存在不同的Array构造函数，所以不能准确判断

方式二： Array.isArray()

1
2
3
if(Array.isArray(array)){
	...
}

ES5推出Array.isArray()只是判断值是不是数组，不关心值是在哪个全局环境创建的

转换方法

toString() & valueOf() & toLocaleString() & join()

toString()，每一项调用toString()方法，返回数组值以逗号分隔的字符串
valueOf()，返回数组
toLocaleString()，每一项调用toLocaleString()方法，返回数组值以逗号分隔的字符串
以上不影响原数组

由于alert()要接收字符串，所以alert(array)会在后台调用toString()方法，与显示调用toString()效果一样

以上返回的是以逗号分隔的字符串，join()可以自定义分隔符，不传递参数或者传undefined则都默认为逗号分隔，注意传递null会以null分隔，传递NaN会以NaN分隔,不影响原数组

若数组某一项是undefined或者null，该值在toString()，toLocaleString()，join()返回结果中显示空字符，valueOf()还是原值，之前的知识点中String(undefined)和String(null)分别是'undefined'和'null'的，两者不存在toString()方法会报错的

栈&队列方法

push() & pop() & unshift() & shift()

push(),尾部插入，可以传递多个参数，每个参数做为数组项插入，返回数组长度
pop(),尾部删除一项，返回删除项
unshift(),头部插入，可以传递多个参数，每个参数做为数组项插入，返回数组长度
shift(),头部删除一项，返回删除项
以上影响的就是原数组

栈方法： Last-In-First-Out => push()和pop()组合

队列方法： First-In-First-Out => push()和shift()组合

反向队列方法： unshift()和pop()组合

重排序方法

reverse() & sort()

reverse() => 反转数组项，返回重排序后的数组，虽然返回的是重排序的数组但是影响原数组

sort() => 从小到大排序，内部每一项调用toString()转换成字符串进行比较，返回重排序的数组，虽然返回的是重排序的数组但是影响原数组

由于比较的是字符串，所以不够灵活，会出现20排在了3之前，所以sort()可以接受一个函数，返回值1表示value1排在value2后面，返回值-1表示value1排在value2前面，返回值0表示不动，所以完全可以自定义是从小到大排序还是从大到小排序

1
2
3
4
5
6
7
8
9
10
function compare(value1,value2){
	if(value1>value2){
		return 1;
	}else if(value1<value2){
		return -1;
	}
	return 0;
}

[1,20,3].sort(compare);

对于数值类型或者valueOf()返回数值的对象，完全可以利用减法返回值

1
2
3
4
5
function compare(value1,value2){
	return value1 - value2;
}
var obj = {valueOf: function(){return 4}};
[1,5,obj].sort(compare);

操作方法

concat() & slice() & splice()

concat() => 基于当前数组生成副本，并在副本末尾追加数组项，参数可以是多项，非数组参数直接做为数组项追加，数组参数则里面每一项都做为数组项追加，参数为空则是原数组副本，不影响原数组

slice() => 基于当前数组截取数组项，生成新的数组，一个参数则从此参数做为起始索引至原数组末尾，两个参数则从第一个参数做为索引起始至第二个参数做为索引的前一项，参数为空则返回原数组副本，若第一个参数大于第二个参数则返回空数组，不影响原数组

特殊参数为负数情况：若参数为负数，则按照此负数加上数组长度的值为准，同时遵循若第一个参数大于第二个参数则返回空数组的规则

splice() => 从指定索引开始删除某些项再插入某些项(参数直接做为数组的项，即便参数是数组，也不会像concat那样数组项要分解追加进去)，参数为空原数组不变，插入项可以是多项，返回被删除项组成的数组，没删除返回空数组，影响的就是原数组


位置方法

indexOf() & lastIndexOf()

比较时使用全等操作符

indexOf() => 从前到后搜索第一个出现的查询项，参数一是要查询的项，参数二（可选）是查询的起始索引，查询到返回索引，没查到返回-1

lastIndexOf() => 反向搜索

迭代方法

every() & some() & filter() & map() & forEach()

以上都是传入两个参数，一个参数是给数组每项执行的给定函数(函数参数包括item数组项，index索引，array原数组)，第二个参数是执行该函数的作用域对象-this，都不影响原数组

every() => 数组每项执行函数都返回true，返回true，否则false
some() => 只要有一个数组项执行函数返回true，就返回true，否则false
filter() => 数组每项执行给定函数，返回true的数组项组成新的数组返回
map() => 数组每项执行给定函数，函数返回值组成新的数组返回
forEach() => 数组每项执行给定函数，没有返回值，本质与使用for循环迭代一样

归并方法

reduce() & reduceRight()

两种方法不同于遍历方向，一个正向，一个反向，都传入两个参数，参数一是每项执行函数（函数参数包括prev前一项，cur当前项，index索引，array原数组），参数二（可选）是做为归并基础的初始值

代码纯手打，可能存在错误