保安日记：JavaScript学习第二十二篇之ES6的内置对象扩展

本文链接：https://blog.csdn.net/Zhuo_De/article/details/109433590

ES6的内置对象扩展

Array 的扩展方法

扩展运算符(展开语法) …

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

<body>
	<div>1</div>
	<div>4</div>
	<div>3</div>
	<div>6</div>
	<div>2</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];// ...ary1--- 1, 2, 3
		 let ary2 = [4, 5, 6];// ...ary2--- 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>

Array.from()----将伪数组或可遍历对象转换为真正的数组

参数为伪数组或可遍历对象

该方法还可以接受第二个参数，作用类似于数组的map方法，用来对，每个元素进行处理，将处理后的值放入返回的数组

<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) //[2,4]
	</script>

Array.find()----找出第一个符合条件的数组成员，如果没有找到返回undefined

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

Array.findIndex(item,index)----找出第一个符合条件的数组成员，如果没有找到返回-1

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

Array.includes()----表示某个数组是否包含给定的值，返回布尔值

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

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

String的扩展方法

模板字符串

模板字符串可以解析变量${}
模板字符串可以换行
模板字符串可以调用函数

<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>

实例方法：startWith() 和 endWith()

startWith()：表示参数字符串是否在原字符的头部，返回布尔值

endWith()：表示参数字符串是否在原字符的尾部，返回布尔值

let str = 'Hello ECMAScript 2015';
		let r1 = str.startsWith('Hello');
		console.log(r1);  //t

实例方法：repeat()

repeat():表示将原字符串重复n次，返回一个新字符串

<script type="text/javascript">
		console.log("y".repeat(5))
	</script>

Set 数据结构

----类似数组，但他的成员的值都是唯一的，没有重复的值

add(value) :添加某个值，返回set结构自身
delete(value) ：删除某个值，返回一个布尔值，表示删除成功
has(value) ：返回一个布尔值，表示改值是否为set的成员
clear() :清除所有成员，没有返回值

<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); //true

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

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

	</script>