JavaScript常用数组API

数组API

（Application Programming Interface，应用程序接口）

Array.prototype

数组原型

在数组原型中存储了数组公用的属性和方法

这些属性和方法在任意一个数组的实例中都可以被访问

push

描述: 方法push将在数组的尾部依次插入元素(一个或多个)

语法: arr.push(element);

参数：element(any) 任意类型，需要插入到数组尾部的内容

返回值：length(number) 插入数据后的数组新长度

注意点：直接修改源数组

var arr = [1, 2, 3];
var len = arr.push(4, 5, 6);
console.log(arr);//(4)[1,2,3,4]
console.log(len);//4(数组的长度)

pop

描述：方法pop将用于删除数组中的最后一个元素

语法：arr.pop( )；

返回值：被删除的元素(数组中没有元素则返回undefined)

注意点：直接修改源数组

var arr = [1, 2, 3];
var result = arr.pop();
console.log(result);//3(被删除的数)
console.log(arr);//(2)[1,2]

shift

描述：将数组第一个元素移出数组，将数组中后面所有的元素向前移动一位

​ 将数组的长度-1，如果没有可删除的元素则返回undefined

语法：arr.shift( );

返回值：firstElm 数组中的第一个元素

注意点：直接修改源数组

var arr = [1, 2, 3, 4, 5, 6, 7];
var result = arr.shift();
console.log(result);
console.log(arr);

unshift

描述：依次把value添加到数组的头部 并将数组原有元素向后移动

语法：arr.unshift(value);

参数：要添加到数组头部的值

返回值：length(number) 添加内容后的数组长度

注意点：直接修改源数组

var arr = [1, 2, 3, 4, 5];
var result = arr.unshift('ok');
console.log(arr);
console.log(result);

concat

描述：concat方法用于合并两个或多个数组

语法：arr.concat(value)；

参数：value(any) 数组或值，所有value会被依次添加到新数组中

返回值：array 新数组

注意点：此方法不改变现有数组，而返回一个新数组

var arr = [1, 2, 3];
var arr2 = arr.concat(4, 5);
console.log(arr);//(3)[1,2,3]
console.log(arr2);//(5)[1,2,3,4,5]


var arr3 = [1, 2, 3];
var arr4 = arr3.concat([4, 5, 6], [7, [8, 9]]); // concat会自动展开第一层数组
console.log(arr4);//(8)[1,2,3,4,5,6,7,[8,9]]  第二层数组不展开

arr3.push([4, [5, 6]]); // push不会展开数组
console.log(arr3);//(4)[1,2,3,[4,[5,6]]]

var arr5 = arr3.concat(); // 可以使用concat复制数组
console.log(arr5);
console.log(arr5 === arr3);//false concat会返回一个新数组

join

描述：join方法将数组中或一个类数组对象的所有元素连接成一个字符串

​ 如果该数组只有一个项目，将直接返回该项目，不使用分隔符

语法：arr.join( );

参数：separator(string) 分隔符 默认值(’,’)

返回值：string 一个新的字符串，使用分割符进行连接的字符串

注意点：join会将数组中所有的元素都进行 toString 操作，然后使用分割符连接它

​ null 和 undefined 没有toString方法

var arr = [1, 2, 3, true, 'abc', 'null', null, undefined];
var str = arr.join();
console.log(str)//1, 2, 3, true, abc , null，，

var str2 = arr.join('-');
console.log(str2);//1-2-3-true-abc-null--

reverse

描述：erverse会颠倒数组中所有元素的顺序

语法：arr.reverse( );

返回值：源数组

注意点：直接修改源数组

var arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr);

sort

描述：通过特定的规则对数组进行排序

语法：arr.sort.([compareFunction])

参数：compareFunction(function) 可选

​ 用来指定按某种顺序进行排列的函数，如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序

​ firstEl

​ 第一个用于比较的元素

​ secondEl

​ 第二个用于比较的元素

返回值：排序后的源数组

注意点：直接修改源数组

var arr = ['123', '111', '11', '53', '111', '23', '21', '221', '215'];
arr.sort();
console.log(arr);//按照每个数组元素的的一个数字的Unicode位点进行排序

var arr2 = ['ab', 'acc', 'abc', 'bc', 'cab', 'aa', 'ba'];
arr2.sort();
console.log(arr2);//按照每个数组元素的的一个字符的Unicode位点进行排序

var arr3 = [2, 3, 3, 22, 61, 11, 178, 25, 115, 31, 26];
arr3.sort();
console.log(arr3);//按照每个数组元素的的一个数字的Unicode位点进行排序


var arr4 = [5423, 61, 431, 33, 1, 786];

// 升序排列数组(从小到大)
function fn(a, b) {
		a - b;
	}
arr4.sort(fn);
console.log(arr4);

// 降序排列数组(从大到小)
function fn2(a, b) {
		return b - a;
	}
arr4.sort(fn2);
console.log(arr4);

arr4.sort(function(a, b) {
		console.log(a, b);
		return a - b;
	});
// 如果添加了 compareFunction 那么数组会按该函数的返回值结果进行排序

// 即 compareFunction(a,b) 表示 a,b的比较结果，规则如下：

// 如果 compareFunction(a, b) 小于 0 ， a 会被排列到 b 之前；

// 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变

// 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前

// 备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

// compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的


// 使用sort实现类似于reverse的效果

var arr4 = [5423, 61, 431, 33, 1, 786];
arr4.sort(function() {
		return -1;
	});
console.log(arr4);

// 对数组进行随机排序(对数组实现乱序)

var arr5 = [1, 2, 3, 4, 5, 6, 7];
arr5.sort(function() {
		return Math.random() - 0.5;
	});
console.log(arr5);

// 按照对象的某个特定属性的值进行升序或降序排列

var data = [
	   {
        name: 'zhangsan',
		age: 25
	}, {
		name: 'lisi',
		age: 15
	}, {
		name: 'wangwu',
		age: 13
	}, {
		name: 'zhaoliu',
		age: 27
	}, {
		name: 'fengqi',
		age: 11
	}];

function sortby(prop, desc = true) {

	// prop 需要排序的属性名
	// desc 降序排列
		return function(a, b) {
				var val1 = a[prop];
				var val2 = b[prop];
				return desc ? val2 - val1 : val1 - val2;
			}
		}
data.sort(sortby('age', false));
console.log(data);

slice

描述：中截取一个数组片段

​ 截取的内容从开始索引(start)参数至结束索引(end)参数

​ 截取的内容不包含结束索引(end)

​ 如果没有参数end slice将截取到数组的结尾

​ 如果没有start和end将从数组的开头截取到数组的结尾，获得一个数组的浅拷贝

语法：art.slice(start[,end]);

参数：start(number) 开始索引

​ end(number) 结束索引

返回值：array 一个包含从start开始到end结束的数组片段

注意点：方法不修改源数组,返回新数组

​ 参数允许是负数

​ 当参数为负数时表示，元素计算从后向前

​ -1 表示最后一个元素，-2表示倒数第二个元素，以此类推

var arr = [1, 2, 3, 4, [5, 6, 7], 8];
var arr2 = arr.slice(1, 3);
console.log(arr2);

var arr3 = arr.slice(1);
console.log(arr3);

var arr4 = arr.slice();
arr4[4][0] = 0;
console.log(arr4);//[1, 2, 3, 4, [0, 6, 7], 8]
console.log(arr);//[1, 2, 3, 4, [0, 6, 7], 8]
// 浅拷贝只拷贝第一层，如果第一层是引用，则拷贝引用


// 深拷贝数组

var arr5 = JSON.parse(JSON.stringify(arr));
arr5[4][0] = 0;
console.log(arr5);
console.log(arr);

// 如果是负值则从后往前数
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var arr2 = arr.slice(1, -2);
var arr3 = arr.slice(-5, -2);
console.log(arr2);
console.log(arr3);

toString

描述：将数组中所有的元素都toString，然后使用“，”连接

语法：arr.toString( );

返回值：字符串

不推荐使用 推荐使用join

var arr = [1, 23, 'abc', true, NaN, null, {}, undefined, 3];
var str = arr.toString();
var str2 = arr.join('-');
console.log(str);
console.log(str2);

splice

描述：1、在指定的索引位置删除元素

​ 2、 在指定的索引插入元素

​ 3、在指定索引位置替换元素

语法：arr.splice(start[,deleteCount[,value,…valueN]]);

参数：start(number) 开始索引

​ deleteCount(number) 删除个数

​ value(any) 插入的元素

返回值：array 包含所有被删除的元素 如果没有删除元素则返回 一个空数组

//删除元素
var arr = [1, 2, 3, 4, 5];
var result = arr.splice(2, 2);
console.log(result);
console.log(arr);
//插入元素
var arr2 = arr.splice(2, 0, 1, 5);
console.log(arr2);
console.log(arr);
//替换元素
var arr3 = arr.splice(2, 2, 3, 5);
console.log(arr);