ES6新特性总结
一、let const
var有缺陷:有块级作用域、能重复定义、无法限制修改。所以出来了let和const.
有块级作用域,不能重复定义
const不能修改,必须定义的时候赋值
二、解构赋值
1.左右两边结构必须一样
let [a,b]=[1,2]//对
let {c,d}=[1,2]//错
2.右边必须是个合法东西
let {a,b}={1,2}//错
3.声明和赋值不能分开
//错
let [a,b]
[a,b]=[1,2]
三、字符串扩展
1.字符串模板
let name='lizhao';
console.log(`我的名字是${name}`)//我的名字是lizhao
2.startsWith、end With
四、数组扩展
1.map 映射 一个对一个
let arr=[40,56,78,90,98];
let arr2=arr.map(item=>item<60?'不合格':'合格');
console.log(arr2);//["不合格", "不合格", "合格", "合格", "合格"]
2.reduce 汇总 一堆出来一个,index从1开始,最初始:temp=arr[0],item=arr[1],index=1。
let arr=[1,2,3,4,5,9];
let result=arr.reduce((tmp,item,index)=>{
if(index==arr.length-1){
return (tmp+item)/arr.length
}else{
return tmp+item
}
});
console.log(result);//4
3.filter 过滤器 只保留值为true的
let arr=[40,56,78,90,98];
let arr2=arr.filter(item=>item<60);
console.log(arr2);//[40, 56]
4.forEach 遍历
let arr=[40,56,78,90,98];
arr.forEach((item,index)=>{
console.log('第'+index+'个元素值为'+item)
});
//第0个元素值为40
//第1个元素值为56
//第2个元素值为78
//第3个元素值为90
//第4个元素值为98
五、函数扩展
1.默认参数
let fn=(name='lizhao')=>{
console.log(`我的名字是${name}`)//我的名字是lizhao
}
fn();
2.箭头函数
参数只有一个,()可以省
函数只有一个语句且是return ,{}可以省
保持this作用域
3.展开运算符
作用1:展开数组
let fn=(name1,name2)=>{
console.log(name1,name2)//lizhao shoushou
}
let arr=['lizhao','shoushou']
fn(...arr);
作用2:收集剩余参数(...必须是最后一个参数)
//收集剩余参数
let fn=(name1,name2,...arr)=>{
//展开数组
console.log(name1,name2,...arr)//lizhao shoushou zhangsan lisi
}
fn('lizhao','shoushou','zhangsan','lisi');
六、对象扩展
1.Object.keys()、Object.values()、Object.entries()
let obj={name:'lizhao',age:'11'}
console.log(Object.keys(obj))//["name", "age"]
console.log(Object.values(obj))//["lizhao", "11"]
console.log(Object.entries(obj))//[Array(2), Array(2)]
2.计算属性
let attr='name';
let obj={
[attr]:'lizhao'
}
console.log(obj)//{name: "lizhao"}
3.对象方法简写
key和value一样时,可以简写,方法可以简写
let obj={
name,
fn(){
...
}
}
七、类的语法糖
1.class关键字、构造器和类分开类
2.class里直接加方法
3.继承
//以前写类的方式不太好:User是构造器也是类;方法拆分到了外边
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.showName = function () {
console.log(this.name);
}
User.prototype.showAge = function () {
console.log(this.age);
}
var u1 = new User('李赵', 18)
u1.showName();
u1.showAge();
//ES6有了class关键字;使构造器和类分开类;方法不再写到类外边
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
showName() {
console.log(this.name)
}
showAge() {
console.log(this.age)
}
}
//以前继承,特别麻烦
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.showName = function () {
console.log(this.name);
}
User.prototype.showAge = function () {
console.log(this.age)
}
function VipUser(name, age, level) {
User.call(this, name, age);
this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function () {
console.log(this.level)
}
var v1 = new VipUser('李赵vip', 18, '2')
v1.showName();
v1.showLevel();
//继承可以用extends
class VipUser extends User {
constructor(name, age, level) {
super(name, age);
this.level = level;
}
showLevel() {
console.log(this.level)
}
}
var v1 = new VipUser('李赵vip', 18, '2')
v1.showName();
v1.showLevel();
八、模块化
import ,import{},export,export default
//全部暴露,as后是别名
import * as mod from '/module'
//结构赋值
import {val1,val1} as mod from '/module'
//暴露默认接口
import val3 from '/module'
promise 解决异步
//1.创建Promise对象
let p=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
});
//2.使用
//其实第一个参数就是resolve,第二个参数就是reject
p.then((res)=>{
console.log('成功了'+res)
},(err)=>{
console.log('失败了')
})
let p1=new Promise(function(resolve,reject){
$.ajax({
url:'data/1.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); let p2=new Promise(function(resolve,reject){
$.ajax({
url:'data/2.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); let p3=new Promise(function(resolve,reject){
$.ajax({
url:'data/3.txt',
dataType:'json',
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
}); Promise.all([p1,p2,p3]).then(arr=>{
let [r1,r2,r3]=arr;
console.log(r1);
console.log(r2);
console.log(r3);
},err(err)=>{
console.log('错了')
})
generator生成器
踹一脚走一下
function *show(){
alert('a')
yield;
alert('b')
}
let obj=show();
obj.next();//a
yield可以传参,也有返回值。
传参:
- 第一次next表示启动generator,不能传参,当希望给第一个next传参时候,可以通过给generator函数传参,从而让参数传进来;
- c的值并不是yield执行后的返回值,而是下次yield的的传参;
function *show(a,b){
console.log(a,b)//12,5
let c=yield;
console.log(c)//
}
let obj=show(12,5);
let res1=obj.next();
//参数写第二个next里
let res2=obj.next(888);
返回值
function *show(a,b){
alert('a')
yield 12;
alert('b')
return 5
}
let obj=show();
//第一阶段返回12
let res1=obj.next();//{value:12,down:false}
let res1=obj.next();//{value:5,down:true}如果后边没有yield,down的值就是ture
一般使用递归函数执行生成器里所有的步骤
function next() {
let { value, done } = gen.next();//启动
if (!done) //直到迭代完成
next()
}
next()
promise本质:等待异步操作结束
generator本质:无感的处理异步操作
async本质:官方runner
runner(function *(){
xxx
let 结果1=yield 异步操作;
xxx
let 结果2=yield 异步操作;
})
async (()=>{
alert('欢迎')
let arr=await $.ajax({url:'data/1.txt',datatype:'json'});
alert('接受到第一个数据');
let arr=await $.ajax({url:'data/1.txt',datatype:'json'});
alert('接受到第二个数据');
})();
ES6新特性总结的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- LeetCode 25. k个一组翻转链表(Reverse Nodes in k-Group)
题目描述 给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定 ...
- sentinel控制台监控数据持久化【MySQL】
根据官方wiki文档,sentinel控制台的实时监控数据,默认仅存储 5 分钟以内的数据.如需持久化,需要定制实现相关接口. https://github.com/alibaba/Sentinel/ ...
- android data binding jetpack VII @BindingAdapter
android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...
- LC 934. Shortest Bridge
In a given 2D binary array A, there are two islands. (An island is a 4-directionally connected grou ...
- jQuery常用Method-API
目的:对web页面(HTML/JSP/XML)中的任何标签,属性,内容进行增删改查 (1)DOM简述与分类 (A)DOM是一种W3C官方标准规则,可访问任何标签语言的页面(HTML/JSP/XML) ...
- .SpringIOC容器
创建对象 SpringIOC容器,是spring核心内容. 作用: 创建对象 & 处理对象的依赖关系 IOC容器创建对象: 创建对象, 有几种方式: 1) 调用无参数构造器 2) 带参数构造器 ...
- 利用Smarty实现文本隔行变色
行变色 php页面 <?phpinclude "libs/Smarty.class.php";$smarty = new Smarty(); $link = mysql_co ...
- Java网络编程简明教程
Java网络编程简明教程 网络编程 计算机网络相关概念 计算机网络是两台或更多的计算机组成的网络,同一网络内的任意两台计算机可以直接通信,所有计算机必须遵循同一种网络协议. 互联网 互联网是连接计算 ...
- BiLSTM-CRF模型理解
适用任务 中文分词.词性标注.命名实体识别是自然语言理解中,基础性的工作,同时也是非常重要的工作. 在很多NLP的项目中,工作开始之前都要经过这三者中的一到多项工作的处理. 在深度学习中,有一种模型可 ...
- vue项目自动构建工具1.0,支持多页面构建
该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...