ES6（1）

最新推荐文章于 2022-04-07 19:59:58 发布

瑶麦_

最新推荐文章于 2022-04-07 19:59:58 发布

阅读量128

点赞数

分类专栏： Javascript ES5_6_7 文章标签： Javascript ES5_6_7

本文链接：https://blog.csdn.net/wendy0927/article/details/100053164

版权

Javascript ES5_6_7 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.let关键字

作用:与var类似, 用于声明一个变量
特点: 在块作用域内有效；不能重复声明；不会预处理, 不存在提升
应用:循环遍历加监听；使用let取代var是趋势

let btns=document.getElementsByTagName("button");
	for(let i=0;i<btns.length;i++){
		let btn=btns[i];
		btn.onclick=function(){
			alert(i);
		}
	}

2.const关键字

作用: 定义一个常量
特点:不能修改；其它特点同let
应用:保存不用改变的数据

<script type="text/javascript">
	const KEY='cyy';
	//KEY='123';会报错
	console.log(KEY);

3.变量的解构赋值

理解:从对象或数组中提取数据, 并赋值给变量(多个)
对象的解构赋值，解构的对象名和原对象名要相同
let {n, a} = {n:‘tom’, a:12}
数组的解构赋值
let [a,b] = [1, ‘atguigu’];
用途：给多个形参赋值

<script type="text/javascript">
	let obj={username:'yaoyao',age:19};
	let username=obj.username;
	let age=obj.age;
	console.log(username+' '+age);
	//解构赋值
	let obj2={username2:'yaoyao',age2:19};
	let {username2,age2}=obj2;
	console.log(username2+' '+age2);
	
	let arr=[1,3,5,'abc',true];
	let [,,a,b]=arr;
	console.log(a+' '+b);
	
	function foo({username,age}){		//{username,age}=obj
		console.log(username+' '+age);
	}
	foo(obj);
</script>

4.模板字符串

模板字符串 : 简化字符串的拼接

模板字符串必须用 `` 包含
变化的部分使用${xxx}定义

<script type="text/javascript">
	let obj={username:'yaoyao',age:19};
	let str='My name:'+obj.username+',My age:'+obj.age;
	console.log(str);
	
	str=`我的名字叫${obj.username},我的年龄是${obj.age}`;
	console.log(str);
</script>

5.简化的对象写法

简化的对象写法：省略同名的属性值；省略方法的function

例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};

<script type="text/javascript">
	let username='yaoyao';
	let age=19;
	let obj={
		username:username,
		age:age,
		getName:function(){
			return this.username;
		}
	}
	console.log(obj);
	console.log(obj.getName());
	
	let obj2={
		username,	//同名属性可以省略不写
		age,
		getName(){	//可以省略函数的function
			return this.username;
		}
	}
	console.log(obj2);
	console.log(obj2.getName());
</script>

6.箭头函数

作用: 定义匿名函数
基本语法:
- 没有参数: () => console.log(‘xxxx’)
- 一个参数: i => i+2
- 大于一个参数: (i,j) => i+j
- 函数体不用大括号: 默认返回结果
- 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
使用场景: 多用来定义回调函数
箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3、扩展理解：箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。

<script type="text/javascript">

/*
	let fun=function(){
		console.log('我是箭头函数');
	}
	*/
	//无形参
	let fun1=()=>console.log('我是箭头函数');
	fun1();
	
	//一个形参，可省略小括号
	let fun2=a=>console.log(a);
	fun2('aaa');
	
	//多个形参
	let fun3=(a,b)=>console.log(a+' '+b);
	fun3(1,2);
	
	//函数体情况
	//1.函数体只有一条语句或者是表达式的时候{}可以省略--->会自动返回语句执行的结果或表达式执行的结果
	
	let fun4=(x,y)=>x+y;
	console.log(fun4(2,3));
	//2.函数体不止一条语句或者是表达式的情况{}不可以省略,不自动返回值
	let fun5=(x,y)=>{return x+y};
	console.log(fun4(2,3));
	
	//测试箭头的this
	let btn1=document.getElementById('btn1');
	let btn2=document.getElementById('btn2');
	btn1.onclick=function(){
		console.log(this);
	}
	/*
		btn2.onclick=()=>{
		console.log(this);
	}*/
	let obj={
		name:'箭头函数',
		getName:function(){
			btn2.onclick=()=>{
				console.log(this);
			}
		}
	}
	obj.getName();
</script>

7.三点运算符

用途：

rest(可变)参数
- 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
  function fun(…values) {
  console.log(arguments);
  arguments.forEach(function (item, index) {
  console.log(item, index);
  });
  console.log(values);
  values.forEach(function (item, index) {
  console.log(item, index);
  })
  }
  fun(1,2,3);
扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,…arr1,6];
arr2.push(…arr1);

<script type="text/javascript">
	function foo(...value){
		console.log(arguments);
		//arguments.callee();  指向函数本身
		console.log(value);		//输出数组
		/*
		 * arguments.forEach(function(item,index){
			console.log(item,index);
		})
		 */
		value.forEach(function(item,index){
			console.log(item,index);
		})
		
	}
	foo(2,65);

	let arr1 = [1,3,5];
  	let arr2 = [2,...arr1,6];
  	arr2.push(...arr1);
  	console.log(arr2);
  	console.log(...arr2);
</script>

8.形参默认值

形参的默认值----当不传入参数的时候默认使用形参里的默认值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}

9.Promise对象

理解:

Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)
ES6的Promise是一个构造函数, 用来生成promise实例

使用promise基本步骤(2步):

创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))

promise对象的3个状态

pending: 初始化状态
fullfilled: 成功状态
rejected: 失败状态

应用:

使用promise实现超时处理
使用promise封装处理ajax请求
1.创建xmlHttp实例对象
let request = new XMLHttpRequest();
2.绑定监听 readyState

 request.onreadystatechange = function () {
    	if(xmlHttp.readyState===4){
    		if(xmlHttp.status==200){ //请求成功
    			console.log(xmlHttp.responseText);
    			//修改状态
    			resolve();//修改promise状态
    		}else{	//请求失败
    			reject();
    		}
    	}
    };
    //open设置请求的方式以及url
    request.responseType = 'json';
    request.open("GET", url);
    //发送
    request.send();

在这里插入图片描述

10.Symbol

前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
Symbol：
概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
特点：
1、Symbol属性对应的值是唯一的，解决命名冲突问题
2、Symbol值不能与其他数据进行计算，包括同字符串拼串
3、for in, for of遍历时不会遍历symbol属性。
使用：
1、调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = ‘hello’;
2、传参标识
let symbol = Symbol(‘one’);
let symbol2 = Symbol(‘two’);
console.log(symbol);// Symbol(‘one’)
console.log(symbol2);// Symbol(‘two’)
3、内置Symbol值
* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
- Symbol.iterator
* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)

<script type="text/javascript">
	//创建symbol属性值
	let symbol=Symbol();
	console.log(symbol);
	let obj={username:'yaoyao',age:19};
	obj[symbol]='hello';
	console.log(obj);
	
	for(let i in obj){
		console.log(i);
	}
	
	let symbol1=Symbol('one');
	let symbol2=Symbol('two');
	console.log(symbol1==symbol2);	//false
	
	//可以去定义常量
	const Person_key=Symbol('person_key');
	console.log(Person_key);
</script>

11.Iterator遍历器

概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1、为各种数据结构，提供一个统一的、简便的访问接口；
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。
工作原理：
- 创建一个指针对象(遍历器对象)，指向数据结构的起始位置。
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
* 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String
。。。

<script type="text/javascript">
	//模拟指针对象（遍历器对象）
	function myIterator(arr){	//iterator接口
		let nextIndex=0;	//记录指针位置
		return{	//遍历器对象
			next:function(){
				return nextIndex<arr.length? {value:arr[nextIndex++],done:false}:{value:undefined,done:true}
			}
		}
	}
	//准备一个数据
	let arr=[1,4,65,'abc'];
	let iteratorObj=myIterator(arr);
	console.log(iteratorObj.next());
	console.log(iteratorObj.next());
	console.log(iteratorObj.next());
	console.log(iteratorObj.next());
	console.log(iteratorObj.next());
	console.log(iteratorObj.next());
	
	//将iterator接口部署到指定的数据类型上，可以使用for of去循环遍历
	//数组
	for(let i of arr){
		console.log(i);
	}
	//字符串
	let str='abcdefg';
	for(let i of str){
		console.log(i);
	}
	//arguments
	function fun(){
		for (let i of arguments) {
			console.log(i);
		}
	}
	fun(1,4,5,'abc');
	//set容器
	//map容器
	
	//遍历变量obj,不可！
	/*
		let obj={username:'yaoyao',age:19};
		for(let i of obj){
		console.log(i);
		}
	 */
	
	let targetData={
		[Symbol.iterator]:function(){
			let nextIndex=0;	//记录指针的位置
			return{	//遍历器对象
				next:function(){
					return nextIndex<this.length?{value:this[nextIndex++],done:false}:{value:undefined,done:true};
				}
			}
		}
	}
	
	//使用三点运算符，解构赋值，默认去调用iterator接口
	let arr2=[1,6];
	let arr3=[2,3,4,5];
	arr2=[1,...arr3,6];
	console.log(arr2);
	let [a,b]=arr2;
	console.log(a,b);
  </script>

瑶麦_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6（1）

1.let关键字作用:与var类似, 用于声明一个变量特点: 在块作用域内有效；不能重复声明；不会预处理, 不存在提升应用:循环遍历加监听；使用let取代var是趋势let btns=document.getElementsByTagName("button"); for(let i=0;i<btns.length;i++){ let btn=btns[i]; btn....
复制链接

扫一扫

专栏目录