前端知识巩固(数组篇)

Posted by Asser's Blog on April 24, 2018

前端知识巩固(数组篇)

属性

Array.length 不是只读属性 通过修改length属性，可以直接截短或延长数组(被undefined填充)

检测数组

if (value instanceof Array) {

}

if ( Array.isArray(value) ) {
	// 更推荐
}

转换方法

toLocaleString() // 对数组内的全部元素调用toLocaleString()，并返回一个由都好分隔开的字符串 toString() // 对数组内的全部元素调用toString()，并返回一个由逗号分隔开的字符串 valueOf() // 返回一个数组 join(param) // param: 分割符号 对数组内的全部元素调用toString()， 并返回一个由param分隔开的字符串。若param不传入或者传入undefined，则默认使用逗号分隔（IE7以前使用undefined分隔）

栈方法

栈特点（LIFO) 后进先出（类似于手枪弹夹） push(params) // params： 任意个参数，依次添加在数组尾部（栈头部） pop() // 从数组尾部（栈头部）弹出一个元素 return: 被弹出的元素

队列方法

队列特点（FIFO）先进先出（类似于乒乓球盒） shift() // 从数组头部（队列尾部）弹出一个元素 return:被弹出的元素 unshift(params) // 从数组头部(队列尾部)添加n元素 return: 数组长度

利用push()和shift() 可以实现一个队列

重新排序

reverse() // 将原本数组倒叙 return : 倒叙后的数组（原数组也会改变）

sort(fn) // 不传入排序函数时，默认以字符串形式升序排列。

fn排序函数接收两个参数，若第一个参数应该位于第二个参数之前，返回负数。若第一个参数应该位于第二个参数之后，返回正数

a = [1, 4, 2, 3];
a.sort(function(value1, value2){
	if (value1 < value2) {
		return -1;
	} else if (value1 > value2) {
		return 1
	} else {
		return 0
	}
}); // 升序排列,返回重新排序的数组，但是原数组也会发生改变

操作方法

concat(params) // 不传入参数的情况下直接深度复制一个数组并返回；传入参数后，将n个参数依次插入到原数组尾部，并返回新数组 slice(start, end) // 从start位置到end位置对数组进行切割（不包括end位置的值）,假如不传入end参数则一直取到数组底部；假如start或者end为负数，则当做start+array.length(end同理) 假如end < start 则返回空数组。该操作不影响原本的数组 splice(index, delete_num, add_params) // index为开始切割的位置，delete_num为需要删除的元素个数，add_params 为n个从切割位置开始需要添加的n个值.返回被切割出来的元素组成的数组。原数组被改变。 此方法可以实现

删除 ： 不传入add_params

插入 : delete_num 为0，可以从任意位置进行插入（假如插入位置>数组原本长度，则从数组尾部插入）

替换： 删除元素之后在原本位置添加新的元素，即实现替换

位置方法

indexOf(select_item, start_index) // 第一个参数为需要查找的项，第二个参数可选，为起始位置 , 从数组头部开始查找; 找到则返回所在位置，没有找到时返回-1; 查找中使用 === 来判断（即判定值与类型）与String.indexOf(param)不同，String的方法会将参数param转化为字符串( toString() )再进行查找 lastIndexOf(select_item, start_index) // 从数组尾部开始查找

迭代方法

xxx(fn, this) 均接收两个参数，fn:要在每个项上运行的函数; this:运行该函数的作用域对象(可选) 其中fn接受三个参数item, index, arr

every() // 对于数组的每一项都返回true,则返回true filter() // 返回fn执行结果为true的项目所组成的新数组 forEach() // 没有返回值，对每一项都执行fn map() // 对每一项都执行fn， 返回每一项执行fn的返回值组成一个新数组 注意 let a = new Array(10); a.map(function(item, i, arr){ return i; }); 此时返回值仍然为原数组，需要a.fill(‘‘)之后再进行map() some() // 对每一项都执行fn, 其中有一项返回true,则返回true

前端面试考题：

let a = ['1', '2', '3'];
let b = a.map(parseInt);
console.log(b); // [1, NaN, NaN];  注意parseInt(item, type) 接收两个参数，第二个参数type代表转化为多少进制；当type为0或者不填时，默认为10进制

归并方法

均会迭代数组的所有项 xxx(fn, base) 均接收两个参数，fn:在每一项调用的函数; base：(可选)作为归并基础的初始值 其中fn接收三个参数function(pre, current, index, arr) 前一个值，当前项，项的索引，数组对象 fn函数返回的任何值会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数为数组的第一项，第二个参数为数组的第二项 reduce()

利用reduce求数组的和

let values = [1, 2, 3, 4, 5],
	sum = values.reduce(function(pre, cur, index, arr){
		return pre + cur
	});

第一次执行fn，pre是1，cur是2; 第二次执行fn pre是（1 + 2），cur是3

reduceRight() 与reduce()的不同之处在于，reduce()是从左侧遍历数组；reduceRight()是从右侧遍历数组 IE9+ 才支持该方法

FEATURED TAGS