关于 ES6 新特性

最新推荐文章于 2025-05-27 08:11:14 发布

小葱伴逗虎

最新推荐文章于 2025-05-27 08:11:14 发布

阅读量137

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： es6

本文链接：https://blog.csdn.net/qq_24264965/article/details/109008935

前端专栏收录该内容

12 篇文章

订阅专栏

本文谈谈关于ES6的新特性，主要从

变量
函数
数组
字符串
面向对象
Promise
generator
JSON

等几个方面叙述。

1、变量

定义方式	特点
var	可以重复声明，无法限制修改，函数级作用域
let	不能重复声明，变量可以修改，块级作用域
const	不能重复声明，常量-不能修改，块级作用域

2、函数

/*原始函数*/
function(){
	//内容
}
/*箭头函数*/
()=>{
	//内容
}

/*
注：	1.参数唯一可省略()
	2.返回值 return 唯一可省略{}
*/

2.1函数的参数

2.1.1参数的扩展、数组展开

A.收集参数

function show(a,b,...args){}

/*
	Rest Parameter必须为最后一个形参
*/

B.展开数组

...arr => a,b,c

/*
	展开后的效果跟直接展示数组的内容一致
*/

2.1.2默认参数

为定义好的可选参数赋值即为默认参数
传值覆盖，空值默认

2.1.3解构赋值

左右两边结构必须一致
右边必须是合法的值
声明和赋值不可分离（在一个语句内完成）

let [a,b,c]=[1,2,3];
let {a,b,c}={a:1,b:2,c:3};
let [json,arr,num,str]=[{a:1,b:2},[1,2],1,'xcbdh'];

3、数组

3.1 map()：映射（一对一）

arr.map(item=>item>=60?'及格':'不及格');

3.2 reduce()：汇总（多对一）

arr.reduce(function(tmp,item,index){
	return tmp+item
});

3.3 filter()：过滤器（筛选）

arr.filter(item=>{
	if(item%3==0){
		return true
	}else{
		return false
	}
});

/*进阶一下*/
arr.filter(item=>item%3==0);

4.forEach 迭代-循环遍历

arr.forEach((item,index)=>{
	//内容
})

4、字符串

4.1新方法

startsWith()	//匹配字符串开头
endsWith()	//匹配字符串结尾

4.2字符串模板

``
//使用${}放变量

5、面向对象

5.1class关键字、构造器和类分离

5.2class内部添加方法

class User{
	constructor(name,pwd){
		this.name=name;
		this.pwd=pwd;
	}
	showName(){
		alert(this.name);
	}
	showPwd(){
		alert(this.pwd);
	}
}
/*继承：*/
class VipUser extends User{
	constructor(name,pwd,level){
		super(name,pwd);
		this.level=level;
	}
	showLevel(){
		alert(this.level);
	}
}

/*面向对象应用-React*/
class Item extends React.Component{
	constructor(...args){
		super(...args);
	}
	
	render(){
		return <li>{this.props.str}</li>
	}
}

class List extends React.Component{
	constructor(...args){
		super(...args);
	}
	
	render(){
		return <ul>
			{this.props.arr.map(a=><Item str={a}></Item>)}
		</ul>;
	}
}

window.onload=function(){
	let oDiv=document.getElementById('div1');
	
	ReactDOM.render(
		<List arr={['aaa','bbb','ccc']}></List>,
		oDiv
	)
}

6、Promise

异步：操作之间无关，可同时进行多个操作，代码更复杂
同步：同时只能做一个操作，代码简单

/*Promise用同步的方式书写异步方法*/

Promise.all([$.ajax(),$.ajax()]).then(results=>{
	//正确
},err=>{
	//错误
});

//Promise.race()

7、generator

function *show(){
	yield
}

/*举个例子*/
const koa=require('koa');
const mysql=require('koa-mysql');
let db=mysql.createPool({host:'localhost',user:'root',password:'123456',database:'20201004'})
let server=new koa();
server.use(function *(){
	let data=yield db.query(`SELECT * FORM user_table`);
	this.body=data;
});
server.listen(2048);

8、JSON

8.1JSON对象

JSON.stringify
JSON.parse

8.2简写

key和value相同时可只写key
方法： show:function(){…}
改写成show(){…}

8.3JSON的标准写法

只可使用双引号，所有的key需要添加引号

9、ES预览

9.1数组

includes
检查数组是否包含某个元素

arr.keys()
arr.values()
arr.entries()
for…in 循环key
for…of 循环value（不可用于json）

keys 取出key
values 取出value
entries 取出key-value（*entry实体）

9.2幂

a**b（a的b次方）

9.3字符串

新方法：
padStart
padEnd
例子：str.padStart(10,‘0’)//字符串取10位，开头补0

9.4语法容忍度提高

元素、参数后多余逗号不报错

9.5generator yield

generator yield 转变成：async await

async function show(){
	alert('a');
	await;
	alert('b');
}

不再依赖外部runner，可以使用箭头函数