7.ES6新增，剩余参数，数组，模板字符串，集合set

最新推荐文章于 2022-04-25 17:46:19 发布

无声有寒

最新推荐文章于 2022-04-25 17:46:19 发布

阅读量107

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/qq_33651064/article/details/105593729

版权

ES6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.剩余参数。实参大于形参，保存到剩余参数数组中。

三个点是标准...args

这里forEach的参数是数组中的每一个值，没调用一下就执行一次回调函数。

还可以与解构一起使用: ...s2就接受了剩余参数。

<script type="text/javascript">
		// const sum = (...args) => {
		// 	let total = 0;
		// 	args.forEach(item => total += item);  //箭头函数只有一个参数且函数体只有一句话，都简写
		// 	return total;
		// };

		// console.log(sum(10, 20));
		// console.log(sum(10, 20, 30));
		

		let ary1 = ['张三' , '李四', '王五'];
		let [s1, ...s2] = ary1;
		console.log(s1)
		console.log(s2)

	</script>

2.拓展运算符

以逗号拆分数。

合并数组

把伪数组转换成真正的数组，就可以使用数组的方法了。

<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</div>
	<div>5</div>
	<script type="text/javascript">
		// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		// let ary = ["a", "b", "c"];
		// ...ary // "a", "b", "c"
		// console.log(...ary)
		// console.log("a", "b", "c")
		
		// 扩展运算符应用于数组合并
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// // ...ary1 // 1, 2, 3
		// // ...ary1 // 4, 5, 6
		// let ary3 = [...ary1, ...ary2];
		// console.log(ary3)

		// 合并数组的第二种方法
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];

		// ary1.push(...ary2);
		// console.log(ary1)
		
		// 利用扩展运算符将伪数组转换为真正的数组
		var oDivs = document.getElementsByTagName('div');
		console.log(oDivs)
		var ary = [...oDivs];
		ary.push('a');
		console.log(ary);
	</script>
</body>

3.用array.from实现伪数组变真数组。返回值是一个数组。

第二个参数是个函数，对每个值进行操作，有点像forEach.

<script type="text/javascript">
		// var arrayLike = {
		// 	"0": "张三",
		// 	"1": "李四",
		// 	"2": "王五",
		// 	"length": 3
		// }

		// var ary = Array.from(arrayLike);
		// console.log(ary)
		
		var arrayLike = {
			"0": "1",
			"1": "2",
			"length": 2
		}

		var ary = Array.from(arrayLike, item => item * 2)
		console.log(ary)
	</script>

4.find方法查找满足条件的值，查到就返回。

回调函数第一个参数是值，第二个是索引。回调函数的返回值是查找的条件。

<script type="text/javascript">
		var ary = [{
			id: 1,
			name: '张三'
		}, {
			id: 2,
			name: '李四'
		}];
		let target = ary.find(item => item.id == 2);
		console.log(target)
	</script>

5.findIndex，返回第一个符合的索引。

回调函数的返回值依然是条件。

	<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex(item => item > 15);
		console.log(index)
	</script>

6.includes，判断元素在不在数组中。返回true or false。

<script type="text/javascript">
		let ary = ["a", "b", "c"];

		let result = ary.includes('a')
		console.log(result)
		result = ary.includes('e')
		console.log(result)
	</script>

7.模板字符串：

解析字符串中的变量。

可以换行。

可以调用函数。

<script type="text/javascript">
		// let name = `张三`;
		// let sayHello = `Hello, 我的名字叫${name}`;
		// console.log(sayHello);
		
		// let result = {
		// 	name: "zhangsan",
		// 	age: 20
		// };
		// let html = `
		// 	<div>
		// 		<span>${result.name}</span>
		// 		<span>${result.age}</span>
		// 	</div>
		// `;
		// console.log(html);
		
		const fn = () => {
			return '我是fn函数'
		}

		let html = `我是模板字符串 ${fn()}`;
		console.log(html)

	</script>

8.判断开头结尾。

返回布尔值。

9.重复字符串。

10.set数据结构.集合，无重复。

集合元素的个数是set.size哦。

可以和...s结合做数组去重。

11.set中的方法。

注意这个添加，它返回的是set本身，所以可以连续调用添加。

12.遍历

<script type="text/javascript">
		// const s1 = new Set();
		// console.log(s1.size)

		// const s2 = new Set(["a", "b"]);
		// console.log(s2.size)

		// const s3 = new Set(["a","a","b","b"]);
		// console.log(s3.size)
		// const ary = [...s3];
		// console.log(ary)
		
		// const s4 = new Set();
		// 向set结构中添加值 使用add方法
		// s4.add('a').add('b');
		// console.log(s4.size)

		// 从set结构中删除值 用到的方法是delete
		// const r1 = s4.delete('c');
		// console.log(s4.size)
		// console.log(r1);

		// 判断某一个值是否是set数据结构中的成员 使用has
		// const r2 = s4.has('d');
		// console.log(r2)

		// 清空set数据结构中的值 使用clear方法
		// s4.clear();
		// console.log(s4.size);
		
		// 遍历set数据结构 从中取值
		const s5 = new Set(['a', 'b', 'c']);
		s5.forEach(value => {
			console.log(value)
		})

	</script>

无声有寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.ES6新增，剩余参数，数组，模板字符串，集合set

1.剩余参数。实参大于形参，保存到剩余参数数组中。三个点是标准...args这里forEach的参数是数组中的每一个值，没调用一下就执行一次回调函数。还可以与解构一起使用: ...s2就接受了剩余参数。<script type="text/javascript"> // const sum = (...args) => { // let tot...
复制链接

扫一扫