【JS】了解一下ES6新特性

本文谈谈关于ES6的新特性,主要从1.变量、2.函数、3.数组、4.字符串、5.面向对象、6.Promise、7.generator、8.JSON等几个方面叙述。
1、变量
var 可以重复声明,无法限制修改,函数级作用域
let 不能重复声明,变量-可以修改,块级作用域
const 不能重复声明,常量-不能修改,块级作用域

2、函数

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

1.参数唯一可省略()
2.return唯一可省略{}

//函数的参数
1.参数的扩展、数组展开
1.1收集参数
function show(a,b,...args){}
*Rest Parameter必须为最后一个形参
1.2展开数组
...arr => a,b,c
*展开后的效果跟直接展示数组的内容一致

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

3.解构赋值
1.左右两边结构必须一致
2.右边必须是合法的值
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、数组
1.map 映射-一对一

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

2.reduce 汇总-多对一

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

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、字符串
1.新方法
startsWith 匹配字符串开头
endsWith 匹配字符串结尾
2.字符串模板
``
*使用${}放变量

5、面向对象
1.class关键字、构造器和类分离
2.class内部添加方法

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
1.JSON对象
JSON.stringify
JSON.parse
2.简写
key和value相同时可只写key
方法: show:function(){...}
改写成show(){...}
3.JSON的标准写法
*只可使用双引号
*所有的key需要添加引号

9、ES预览
1.数组
includes
检查数组是否包含某个元素

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

keys 取出key
values 取出value
entries 取出key-value(*entry实体)

2.幂
a**b(a的b次方)

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

4.语法容忍度提高
元素、参数后多余逗号不报错

5.generator yield
generator yield 转变成:async await

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

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

【JS】了解一下ES6新特性

上一篇:linux__mariadb主从复制(centos)


下一篇:Jmeter中响应数据中文乱码问题