一、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新特性总结的更多相关文章

  1. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  2. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  3. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  4. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  5. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  6. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  7. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

  8. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  9. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  10. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

随机推荐

  1. mysql连表操作是先连表还是先查询条件

    mysql连表操作是先连表还是先查询条件 一.总结 一句话总结: 连表操作时:先根据查询条件和查询字段确定驱动表,确定驱动表之后就可以开始连表操作了,然后再在缓存结果中根据查询条件找符合条件的数据 1 ...

  2. Redis | Redis基础都不会,好意思出去面试?

    Redis的数据结构 Redis支持多种不同的数据结构,包括5种基础数据结构和几种比较复杂的数据,这些数据结构可以满足不同的应用场景. 五种基础数据结构 String:字符串,是构建其他数据结构的基础 ...

  3. 使用注解实现Spring的声明式事务管理

    使用注解实现Spring的声明式事务管理,更加简单! 步骤: 1) 必须引入Aop相关的jar文件 2) bean.xml中指定注解方式实现声明式事务管理以及应用的事务管理器类 3)在需要添加事务控制 ...

  4. java+服务器上传和下载文件

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  5. Dozer映射

    1.为什么要映射 一个映射的框架在一个分层的体系架构中非常有用,特别是你在创建一个抽象的分层去包装一些特殊数据的变化 vs 这些数据传输到其它层(外部服务的数据对象.领域的数据对象.数据传输对象.内部 ...

  6. Apache 流框架Flink简介

    1.Flink架构及特性分析 Flink是个相当早的项目,开始于2008年,但只在最近才得到注意.Flink是原生的流处理系统,提供high level的API.Flink也提供 API来像Spark ...

  7. Docker的数据管理(volume/bind mount/tmpfs)

    Docker提供了三种不同的方式用于将宿主的数据挂载到容器中:volumes,bind mounts,tmpfs volumes.当你不知道该选择哪种方式时,记住,volumes总是正确的选择. vo ...

  8. 删除指定路径下固定格式,以.log结尾、三天前的文件,或删除空的日志文件

    师出‘百测’besttest 删除指定路径下固定格式,以.log结尾.三天前的文件,或删除空的日志文件. 日志文件格式:XXXX_2019-01-01.log. import os,datetime ...

  9. VS2019 安装并破解 DevExpress 19.2 插件

    0.写在最前 本人vs版本为:     1.下载DevExpress 最新版本插件程序 官网下载试用30天地址: https://www.devexpress.com/products/net/con ...

  10. java面试指导2019-9-10

    11. Java 面向对象编程三大特性: 封装 继承 多态 封装 封装把一个对象的属性私有化,同时提供一些可以被外界访问的属性的方法,如果属性不想被外界访问,我们大可不必提供方法给外界访问.但是如果一 ...