ES6-ES11(未完待续)

发布时间 2023-03-23 14:25:07作者: 文采呱呱

块级作用域:let

声明常量:const

变量解构赋值:

模板字符串:

var str = `模板字符串`;
console.log(str);//模板字符串
// 可以直接出现换行符
var str2 = `<ul><li>地獄</li><li>回调</li></ul>`
console.log(str2);//<ul><li>地獄</li><li>回调</li></ul>
// 变量拼接
var str3 = '电影'
var str4 = `我想看${str3}`
console.log(str4);//我想看电影

对象简洁化:

es6允许在大括号内直接写入变量和函数,做为对象的属性和方法

let name = '张三'
let age = 11;
let demo = ()=>{
console.log('这是一个方法');
}
const school = {
name,
age,
demo
}
console.log(school);

  

 

 

 

 箭头函数:

箭头函数不能做为构造函数实例化对象
只有一个形参时省略小括号

		// let fn =function(a,b){
		// 	return a+b;
		// }
		let fn = (a,b)=>{
			return a+b;
		}
		let res=fn(11,20);
		console.log(res);t
                window.name = "张三";
		const fn = {
			name:"123"
		}
		let getName = ()=>{
			console.log(this.name);
		}
		function Name(){
			console.log(this.name);
		}
		getName()
		Name()    
		// 只有一个形参时省略小括号
		let add = n =>{
			return n+n;
		}
		console.log(add(9));//18
		// 只有一条语句时,可以缩写
		let pow = n =>n+n;
		console.log(pow(9));//18
		// 只有一条语句时,可以缩写

  函数参数的默认值:

可以与解构赋值结合

                let add = (a,b,c=10)=>{
			return a+b+c;//11
		}
		console.log(add(1,9,1));   

  rest参数:

 

 

 

 

 

 

                let add = (...age)=>{
			return age;// [1, 9, 1]
		}
		console.log(add(1,9,1));
		// 必须放到最后
		let add2 = (a,b,...age)=>{
			console.log(a);//1
			console.log(b);//2
			console.log(age);//[6, 6, 3]
		}
		add2(1,2,6,6,3)

  扩展运算符:

可以合并数组,克隆数组,将伪数组转为数组

                let arr = [1,2,3,4,5,6];
		function add(){
			console.log(arguments);
		}
		add(...arr)
		// 数组的合并
		let arr = [1,2,3,4,5,6];
		let arr2 = [2,3,4,5,6,7];
		let arr3 = [...arr,...arr2];
		console.log(arr3);//[1, 2, 3, 4, 5, 6, 2, 3, 4, 5, 6, 7]
		// 数组的克隆
		let arr = [1,2,3,4,5,6];
		let arr2 = [...arr];
		console.log(arr2);//[1, 2, 3, 4, 5, 6]
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
	<script>
		// 将伪数组转为数组
		const divs = document.querySelectorAll('div')
		const divs2=[...divs]
		console.log(divs2); //[div, div, div]
	</script>
Symbol:
Symbol的值是唯一的,且不能做运算,包括加减乘除
		// Symbol的值是唯一的,且不能做运算,包括加减乘除
		let s = Symbol();
		let s2 = Symbol('测试');
		let s3 = Symbol('测试');
		console.log(s);
		console.log(s2==s3);

  迭代器:

for ...of 遍历
在对象中,需要自己自定义,较为麻烦
		let arr = ['张三','张三2','张三3','张三4','张三5','张三6'];
		// 正常遍历
		for (let i = 0; i < arr.length; i++) {
			arr[i]
			console.log(arr[i]);
		}
		// es6遍历    for ...of 遍历
		for(let v of arr){
			console.log(v);
		}
		
		console.log(arr);//只要该对象有Symbol.iterator

  生成器:

		function *demo(){
			console.log(111);
			console.log(222);
			console.log(333);
		}
		let v = demo();
		console.log(v.next());

  promise:

主要解决回调地獄,还可以反转ajax请求

// 创建对象
		const xhr = new XMLHttpRequest();
		// 初始化接口
		xhr.open("GET","接口");
		// 发送接口
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.readyState===4){
				if(xhr.status>=200&&xhr.status<300){
					console.log(xhr.response);
				}else{
					console.log(xhr.status);
				}
			}
		}