ES6新增方法

最新推荐文章于 2022-10-19 10:18:16 发布

☀️오동동

最新推荐文章于 2022-10-19 10:18:16 发布

阅读量154

点赞数

本文链接：https://blog.csdn.net/TongWu1/article/details/103044336

版权

let关键字

let关键字就是用来声明变量的

let a = 10;
console.log(a);

let关键字声明的变量特点
使用let关键字声明的变量具有块级作用域，防止循环变量变成全局变量。

		if (true) {
			let b = 20;
			console.log(b)          //20
			if (true) {
				let c = 30;
			}
			console.log(c);         //报错，c is not defined
		}
		console.log(b)              //报错，b is not defined

使用let关键字声明的变量没有变量提升
先声明再赋值

		console.log(a);       //报错，a is not defined
		let a = 100;

使用let关键字声明的变量具有暂时性死区特性

		var num = 10
		if (true) {
			console.log(num);          //报错，num is not defined
			let num = 20;
		}

经典面试题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>经典面试题</title>
</head>
<body>
	<script type="text/javascript">
		let arr = [];

		for (let i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}

		arr[0]();       //0
		arr[1]();      //1
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>经典面试题</title>
</head>
<body>
	<script type="text/javascript">
		let arr = [];

		for (var i = 0; i < 2; i++) {
			arr[i] = function () {
				console.log(i);
			}
		}

		arr[0]();       //2
		arr[1]();      //2
	</script>
</body>
</html>

const关键字

使用const关键字声明的常量具有块级作用域，必须赋初值，否则会报错。而且常量声明后值不能更改。

	<script type="text/javascript">
		// 使用const关键字声明的常量具有块级作用域
		if (true) {
		const a = 10;
		if (true) {
				const a = 20;
		 		console.log(a);             //20
			}
			console.log(a);                //10
		 }
		 console.log(a);         //报错，a is not defined
		
		// 使用const关键字声明的常量必须赋初始值
		 const PI; 
		PI= 3.14;       //报错，Missing initializer in const declaration
		// 常量声明后值不可更改 
		const ary = [100, 200];
		ary[0] = 123;
		ary = [1, 2]
		console.log(ary);       //报错，Assignment to constant variable.
	</script>

数组解构

	<script type="text/javascript">
		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		let ary = [1,2,3];
		let [a, b, c, d, e] = ary;
		console.log(a)        	 //1
		console.log(b)			//2
		console.log(c)			//3
		console.log(d)			//undefined
		console.log(e)			//undefined
	</script>

	<script type="text/javascript">
		let ary = [1,2,3];
		let [a, b] = ary;
		console.log(a)        	 //1
		console.log(b)			//2
	</script>

对象解构

对象解构允许我们使用对象的属性名作为变量名，将对象属性的值赋值给变量

<script type="text/javascript">
		// 对象解构允许我们使用对象的属性名作为变量名，将对象属性的值赋值给变量
		//注意变量名必须与属性名一致，否则会打印undefined
		//方法一         
		let person = {name: 'lisi', age: 30, sex: '男'};
		let { name, age, sex } = person;
		console.log(name)          //lisi
		console.log(age)				//30
		console.log(sex)              //男
		//方法二
		let person = {name: 'lisi', age: 30, sex: '男'};
		let {name: myName} = person;
		console.log(myName)              //lisi
		//错误示范         
		let person = {name: 'lisi', age: 30, sex: '男'};
		let { name1, age1, sex1 } = person;
		console.log(name1)          //undefined
		console.log(age1)				//undefined
		console.log(sex1)              //undefined

箭头函数

箭头函数是用来简化函数定义语法的

		const fn = () => {
			console.log(123)
		}
		fn();

在箭头函数中如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体大括号可以省略。

		const sum = (n1, n2) => n1 + n2;	 
		const result = sum(10, 20);
		console.log(result)

在箭头函数中如果形参只有一个形参外侧的小括号也是可以省略的。

		const fn = v => {
			alert(v);
		}
		fn(20)

箭头函数不绑定this 箭头函数没有自己的this关键字如果在箭头函数中使用this，this关键字将指向箭头函数定义位置中的this

function fn () {
			console.log(this);
			return () => {
				console.log(this)
			}
		}

		const obj = {name: 'zhangsan'};

		const resFn = fn.call(obj);

		resFn();          //输出{name: "zhangsan"}和{name: "zhangsan"}

箭头函数面试题

	<script type="text/javascript">
	
		var age = 100;

		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}

		obj.say();       //打印100，对象不能产生作用域
	</script>

剩余参数

与解构一起配合使用

<script type="text/javascript">
		const sum = (...args) => {
			let total = 0;
			args.forEach(item => total += item);
			return total;   
		};

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

		// let ary1 = ['张三' , '李四', '王五'];
		// let [s1, ...s2] = ary1;
		// console.log(s1)        //张三
		// console.log(护额s2)        //[ '李四', '王五']
	</script>

数组Array的扩展方法

扩展运算符

// 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		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);

from（）
把伪数组转换为数组，第二个参数为函数，可对伪数组中的值进行操作

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

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)             //{id: 2, name: "李四"}
	</script>

findindex（）

	<script type="text/javascript">
		let ary = [10, 20, 50];
		let index = ary.findIndex(item => item > 15);
		console.log(index)          //  1 返回符合条件的索引，若都不满足返回-1
	</script>

include（）

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

		let result = ary.includes('a')
		console.log(result)             // true 
		result = ary.includes('e')
		console.log(result)             // false
	</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>

startsWith（）和endsWith（）
返回bool值

<script type="text/javascript">
		let str = 'Hello ECMAScript 2015';
		let r1 = str.startsWith('Hello');
		console.log(r1);       //true
		let r2 = str.endsWith('2016');
		console.log(r2)        //false
</script>

repeat（）
返回新字符串

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

Set数据结构

创建set，new关键字
Set的方法，遍历Set

<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)         //2
		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>