一、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. LeetCode 25. k个一组翻转链表(Reverse Nodes in k-Group)

    题目描述 给出一个链表,每 k 个节点一组进行翻转,并返回翻转后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么将最后剩余节点保持原有顺序. 示例 : 给定 ...

  2. sentinel控制台监控数据持久化【MySQL】

    根据官方wiki文档,sentinel控制台的实时监控数据,默认仅存储 5 分钟以内的数据.如需持久化,需要定制实现相关接口. https://github.com/alibaba/Sentinel/ ...

  3. android data binding jetpack VII @BindingAdapter

    android data binding jetpack VIII BindingConversion android data binding jetpack VII @BindingAdapter ...

  4. LC 934. Shortest Bridge

    In a given 2D binary array A, there are two islands.  (An island is a 4-directionally connected grou ...

  5. jQuery常用Method-API

    目的:对web页面(HTML/JSP/XML)中的任何标签,属性,内容进行增删改查 (1)DOM简述与分类 (A)DOM是一种W3C官方标准规则,可访问任何标签语言的页面(HTML/JSP/XML) ...

  6. .SpringIOC容器

    创建对象 SpringIOC容器,是spring核心内容. 作用: 创建对象 & 处理对象的依赖关系 IOC容器创建对象: 创建对象, 有几种方式: 1) 调用无参数构造器 2) 带参数构造器 ...

  7. 利用Smarty实现文本隔行变色

    行变色 php页面 <?phpinclude "libs/Smarty.class.php";$smarty = new Smarty(); $link = mysql_co ...

  8. Java网络编程简明教程

    Java网络编程简明教程 网络编程  计算机网络相关概念 计算机网络是两台或更多的计算机组成的网络,同一网络内的任意两台计算机可以直接通信,所有计算机必须遵循同一种网络协议. 互联网 互联网是连接计算 ...

  9. BiLSTM-CRF模型理解

    适用任务 中文分词.词性标注.命名实体识别是自然语言理解中,基础性的工作,同时也是非常重要的工作. 在很多NLP的项目中,工作开始之前都要经过这三者中的一到多项工作的处理. 在深度学习中,有一种模型可 ...

  10. vue项目自动构建工具1.0,支持多页面构建

    该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...