ES6新语法(二)

haobowd 发布于2019-08-23 14:12 / 760人阅读

摘要：昨天向大家介绍了的一部分新语法，今天我将把剩下我所知道的新语法都写到这里插值表达式之前多行字符串我是写多行字符串会语法报错我是正确，并能按格式输出这个书写方式很像的三引号，不知道小伙伴们想起来了没。

昨天向大家介绍了ES6的一部分新语法，今天我将把剩下我所知道的新语法都写到这里

插值表达式

//之前
var name="jim"
var age=23

var say="name:"+name+"age:"+age

//es6
var say="name:${name}age:${age}"

多行字符串

let str="

      我是jim

"        //写多行字符串会语法报错

//es6
let str=`

      我是jim

`    //正确，并能按格式输出

这个书写方式很像python的三引号，不知道小伙伴们想起来了没。

this

//普通函数
document.onclick=function fn(){
    console.log(this)
}    //点击页面出现:#document    this指向调用者    

//对象
var obj={
    x:1,
    y:2,
    sum(){
        console.log(this)    //{x: 1, y: 2, sum: ƒ}
        return this.x+this.y    //不加this会找不到x,y，可见this和上面作用相同
    }
}
console.log(obj.sum())

//箭头函数
document.onclick=()=>console.log(this)  //Window

为普通函数固定this,如第一个例子
let obj={
    name:"jim"
}
fn=fn.bind(obj)
fn()    //{name: "jim"}    this指向了obj

this的指向对于普通函数指向了调用它的对象，对于箭头函数指向了所处大环境，对于对象指向其本身

Promise:同步操作解决异步之痛

#对于以前我们一个页面要处理好几个ajax请求可能需要按照步骤一步步来操作，而现在，我们有了Promise,看看具体怎么操作吧
let p=new Promise({
    (resolve,reject)=>{
      $.ajax({
        url:request url,
        success(data){
          resolve(data)
        },
        error(err){
          reject(err)
        }
      })
    }
  })
  p.then((data)=>{},(err)=>{})    //then用来最后处理数据

Promise.all([
    $.ajax(),
    $.ajax(),
    $.ajax(),
]).then(data=>{},err=>{})    //批次处理，其data是一个数据数组，有需求可以通过解构然后处理

async/await

async function fn(){
    console.log("1")
    let v=await 2    //后面跟同步操作是不等待的
    console.log(v)
}
fn()    //1
2

async function fn(){
    console.log("1")
    let v=await $.ajax("a.txt")    //$.ajax就是一个Promise
    console.log(v)    //输出ajax获取数据
}
fn()

我们可以通过async/await+Promise做异步处理,减少传统的开发难度。

GPU云服务器云服务器 es6新特性 es6的新特性新语法 let新语法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100259.html

[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》本篇文章是对之前文章...

hidogs 2019-08-23 14:07 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
JavaScript数组去重—ES6的两种方式

摘要：数组的方法方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。可选，执行函数时的值。删除所有的键值对，没有返回值。返回一个布尔值，表示某个键是否在当前对象之中。说明 JavaScript数组去重这个问题，经常出现在面试题中，以前也写过一篇数组去重的文章，（JavaScript 数组去重的多种方法原理详解）但感觉代码还是有点不够简单，今天和大家再说两种方法，代码...

FrancisSoung 2019-08-21 17:26 评论0 收藏0
JavaScript数组去重—ES6的两种方式

摘要：数组的方法方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。可选，执行函数时的值。删除所有的键值对，没有返回值。返回一个布尔值，表示某个键是否在当前对象之中。说明 JavaScript数组去重这个问题，经常出现在面试题中，以前也写过一篇数组去重的文章，（JavaScript 数组去重的多种方法原理详解）但感觉代码还是有点不够简单，今天和大家再说两种方法，代码...

lijinke666 2019-08-01 17:57 评论0 收藏0