Es6 复阅(10-3)(部分是非es6的) --数组的扩展 ( Array.of ,find , findIndex,includes)

Array of

Array.of 基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

不同参数个数 Arraynew Array 以及 Array.of 的表现:

	console.log('----Array----')
	console.log(Array(1)); //[ <1 empty item> ]
	console.log(Array(1, 2)); // [1,2]
	console.log(Array(1, 2, 3)); //[1,2,3]
	console.log('----new Array ----')
	console.log(new Array(1)); //[ <1 empty item> ]
	console.log(new Array(1, 2)) //[1,2]
	console.log(new Array(1, 2, 3)); //[1,2,3]
	console.log('----Array of ---- ')
	console.log(Array.of(1)); //[1]
	console.log(Array.of(1, 2)) // [1,2]
	console.log(Array.of(1, 2, 3)); // [1,2,3]

运行截图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200410172109416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkxMDQyNw==,size_16,color_FFFFFF,t_70

copyWithin

  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。

将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

	[1,2,3,4].copyWithin(0,3);//[ 4, 2, 3, 4 ]

但是不知道这个方法做什么用

find ((当前的值、当前的位置和原数组)=>{})

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

	let arr = [
	    { name: 'like' },
	    { name: 'hatw' }
	]
	let item = arr.find((item) => item.name == 'like');
	console.log(item); //{ name: 'like' }

findIndex

	let arr = [
	    { name: '111' },
	    { name: '222' },
	    { name: '333' },
	    { name: '444' },
	    { name: '555' },
	]
	let index = arr.findIndex((item) => {
	    return item.name == '111'
	});
	let index2 = arr.findIndex((item) => {
	    return item.name == '111'
	});
	console.log(index);// 0
	console.log(index2);// -1

find , findIndex 都可以接收第二个参数 :这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。 arr.find(fn,obj); 注意,这个fn 不能使用箭头函数

	let obj = {
	    name: '这是外部obj的name'
	}
	let arr = [
	    { name: '111' },
	    { name: '222' },
	    { name: '333' },
	    { name: '444' },
	    { name: '555' },
	]
	let item = arr.find(function() {
	    console.log(this);//{name: '这是外部obj的name'}
	    return this.name
	}, obj);
	console.log(item);//{ name: '111' }

由此,find 只会返回数组中的内容,如果没有找到,就返回第一条

==注:==这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足。

	//indexOf 
	console.log([NaN].indexOf(NaN));// -1
	// findIndex
	console.log([NaN].findIndex(y => Object.is(NaN, y)))
	// find
	console.log([NaN].find(y => Object.is(NaN, y)))

fill

fill方法使用给定值,填充一个数组

	new Array(10).fill(0);//[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

emmmmmmm ,暂时没有想出来这个干什么用的,慢着,这个函数还有其他参数。fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置 fill(content,start,end)

	new Array(10).fill(1, 3, 8);//[ <3 empty items>, 1, 1, 1, 1, 1, <2 empty items> ];
	[1,2,3,4,5,6,7,8,9].fill(999,0,1);// [ 999, 2, 3, 4, 5, 6, 7, 8, 9 ]

如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。

	let obj = { name: 'z' };
	let arr = [1, 1];
	arr.fill(obj);
	console.log(arr);//[ { name: 'z' }, { name: 'z' } ]
	obj.name = 345;
	console.log(arr);//[ { name: 345 }, { name: 345 } ]

新方法: entries(),keys() 和 values()

区别:keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

	let entries = Object.entries(testObj);
	console.log(entries); //[ [ 'name', 'z' ], [ 'age', '1' ], [ 'class', '2' ] ];
	// new Map() 需要的参数结构正是这样的
	let keys = Object.keys(testObj); // [ 'name', 'age', 'class' ]
	console.log(keys);
	let values = Object.values(testObj);
	console.log(values); //[ 'z', '1', '2' ]

includes

	//字符串的includes方法
	let str = 'hello';
	let res = str.includes('h');
	console.log(res);//true
	
	//数组的includes方法
	let arr = ['h', 'e', 'l', 'l', 'o'];
	let res2 = arr.includes('h');
	console.log(res2);//true

替代版本:

	const contains = (() =>
	  Array.prototype.includes
	    ? (arr, value) => arr.includes(value)
	    : (arr, value) => arr.some(el => el === value)
	)();
	contains(['foo', 'bar'], 'baz'); // => false

arr.some ?? 没什么映象了,后续了解一下

includes 的参数:(查找的内容,起始位置),还是上面的例子,加上第二个参数之后:

	let str = 'hello';
	let res = str.includes('h', 2);
	console.log(res); //false
	
	let arr = ['h', 'e', 'l', 'l', 'o'];
	let res2 = arr.includes('h', 2);
	console.log(res2); //false

番外,与Map,Set的对比:

Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
Set 结构的has方法,是用来查找值的,比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

例子:

	let newSet = new Set([1, 2, 3, 4, 5, 56]);
	console.log(newSet); //Set { 1, 2, 3, 4, 5, 56 }
	console.log(newSet.has(1)); //true  
	
	let newMap = new Map([
	    ['name', 'like'],
	    ['age', 11],
	    ['class', 22]
	]);
	console.log(newMap); //Map { 'name' => 'like', 'age' => 11, 'class' => 22 }
	console.log(newMap.has('name')); //true
	console.log(newMap.has('like')); //false
发布了50 篇原创文章 · 获赞 4 · 访问量 1257

猜你喜欢

转载自blog.csdn.net/weixin_43910427/article/details/105437741
今日推荐