资讯专栏INFORMATION COLUMN

es6特性介绍(上)

DevWiki / 1458人阅读

这是一篇专门介绍es6特性的文章,文章写的非常棒,全文通过代码示例像我们展示了es6的特性,虽然全英文但是用的都是很基础的单词,即使因为不怎么好的同学依然能看懂,我这里将其翻译过来有2个目的,1是加深自己的记忆,2是做个备份。我这里翻译是按照我理解的进行翻译,并非"直译"。如有不当之处欢迎指正。

箭头函数
实践中使用
    // jquery中
    $(".class").bind("click",e=>{
        console.log(e);
    })
    $.ajax({
        url:"/api/**/*",
        type:"POST",
        data:{
        },
        success:(data, textStatus,jqXHR)=>{
            // response data
        },
        error:err=>{
            // http error
        },
        comp
    })
    // 在react中
    export default ()=>(
这是一个最简单的组件
); export default ()=>{ return
hello
}
箭头函数不绑定this
    const persion = {
        name:"小明",
        arrowGetName:()=>this.name,
        regularGetName:function(){
            return this.name
        },
        arrowThis:()=>this,
        regularThis:function(){
            return this;
        }
    }
    // 执行结果,
    persion.name;                    // 输出:"小明"
    persion.arrowGetName();          // 抛出异常,"Cannot read property "name" of undefined"
    persion.regularGetName();        // 输出:"小明"
    persion.arrowThis();             // 输出:undefined
    persion.regularThis();           // 输出:persion对象
    // 说明:如果基于执行上下文是window,那么输出结果会有不同
箭头函数不绑定this,但是可以直接使用上下文的this,更加方便
const getName = function(){
    let name = "getName func";
    setTimeout(()=>{
        console.log(this.name);
    },1000)
}
// 执行结果
getName();
//1s delay "getName func"
classess

在其他语言中class的概念非常明确,特别是那些面向对象的编程语言中,例如:java;在javascriptclass只是基于原型集成的一个高级语法糖,也就是说语法经过编译之后,是通过prototype实现的。

实践使用
class Persion {
  static version=13
  static getVersion(){
    return this.version;
  }
  constructor(name,age){
    this.name = name;
    this.age = age;
    this.level = 0;
  }
  updateLevel(newLevel){
    this.level = newLevel;
  }
}
class Student extends Persion {
  constructor(name,age){
    super(name,age);
  }
  get levelT(){
    return `${this.level}:from XiaoMing`
  }
  set levelUpdate(level){
    this.level =level;
  }
  updateLevel(newLevel){
    super.updateLevel(newLevel);
  }
}

const tom = new Student("hello");

console.log(tom.level); // 0
console.log(tom.levelT); // 0:from XiaoMing
tom.levelUpdate = 2; 
console.log(tom.levelT); // 2:from XiaoMing
tom.updateLevel(3);
console.log(tom.levelT);  // 3:from XiaoMing
增强的对象字面量
const customProtoObj = {
  toString:function(){
    return "the customProtoObj To string"
  }
}
const handler = ()=>"handler";
const obj = {
  // 直接指定重定义原型链
  __proto__:customProtoObj,
  // 属性赋值的简约写法
  handler,
  // 重定义 对象的toString 方法
  toString(){
    return `d:${super.toString()}`;
  },
  // 动态属性名称,这是最大的特性了
  ["prop_"+(()=>42)()]:42,
}

console.log(obj.handler)
console.log(obj.handler())
console.log(obj.toString())
console.log(obj.prop_42)

这个特性非常给力,特别是动态属性,在实践开发中真的是屡试不爽

字符串插值表达式,或者叫做字符串模版
    // 以前的字符串拼接只能通过加号 完成
    let str = "hello";
    let str1 = "world"
    let strEnd = "end"+str+str1;
    // 使用该特性进行重构
    let strEndEs6 = `end${str}${str1}`;
    // 函数调用
    const getStr = ()=>`from getStr func:${str}`;
    let strEndFun = `from func ${getStr()}`
数据解构

这是一个超强的特性,让我们前端处理后端接口数据的时候游刃有余(特别是遇到,那种后端 <..>)

    // 1.数组解构
    let [a,,b] = [1,2,3];
    console.log(a,b);// 1,3
    // 2. 对象解构
    const data = ()={name:"tom",age:18};
    let {name:a,age} = data();
    console.log(a,age);// "tom",18
    // 这种对象的解构,如果你用过当前流行的几个框架:react、vue、ng2,这种解构随处可见
    import {render} from "react-dom"; // 这里的render就是解构出来的
    // 3. 在形参中使用
    function update({name:x}){
        console.log(x);
    }
    function update2({name}){
        console.log(name)
    }
    update({name:"tom"}); // "tom’
    update2({name:"tom2"}); // "tom2"
设置默认值
    // 1.形参默认值
    function f(x, y=12) {
      return x + y;
    }
    console.log(f(3))
    // 2.对象默认值
    const p = {name:"123",age:18};
    let {name,age,level=123} = p;
    console.log(level); // 123
... 语法糖(可以翻译为数据传播)
    // 1. 形参中使用
    function f(x,y,z){
        return x+y+z;
    }
    let params = [1,2,3];
    f(...params); //他还把数组的每个元素作为参数传递过去
    // 上面的通过es5的方式编写如下
    f.apply(undefined, [1, 2, 3, 4]);
    // 2. 数组中使用
    const arr1 = [1,2,"h"];
    const arr2 = [2,3,...arr1,4,5];
    // 上面通过es5的方式
    arr2 = [2,3].concat(arr1,[4,5]);
    // 3. 在对象字面量中使用
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(x); // 1
    console.log(y); // 2
    console.log(z); // { a: 3, b: 4 }
    
    // Spread properties
    let n = { x, y, ...z };
    console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
    console.log(obj)
    
Rest形参

这个特性让我们可以不去现在形参的个数,使我们在编写功能的时候更加灵活,代码的扩展性也增强很多

function demo(part1, ...part2) {
    return {part1, part2}
}
console.log(demo(1,2,3,4,5,6))

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

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

相关文章

  • ES6 走马观花(ECMAScript2015 新特性

    摘要:字面上是生成器的意思,在里是迭代器生成器,用于生成一个迭代器对象。当执行的时候,并不执行函数体,而是返回一个迭代器。迭代器具有方法,每次调用方法,函数就执行到语句的地方。也有观点极力反对,认为隐藏了本身原型链的语言特性,使其更难理解。 本文为 ES6 系列的第一篇。旨在给新同学一些指引,带大家走近 ES6 新特性。简要介绍: 什么是 ES6 它有哪些明星特性 它可以运行在哪些环境 ...

    wangzy2019 评论0 收藏0
  • 【Web全栈课程二】ES6特性介绍

    摘要:原因中,定义的变量没有块级作用域,在第一个中循环后已经是,里面的执行的时候弹出的就是。 ES6特性介绍(上) ECMAScript(简称ECMA、ES),ES6也被称为ECMAScript 2015JavaScript是ECMAScript的一种,但是目前实现ECMAScript标准的仅JavaScript ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符...

    kevin 评论0 收藏0
  • 【Web全栈课程三】ES6特性介绍(下)

    摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...

    wangshijun 评论0 收藏0
  • 你需要了解的ES6的新特性(前沿技术)

    摘要:年月,的创造者公司,决定将提交给国际标准化组织,希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多,想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性 最近在项目中遇到了很多ES6的语法,遇到了不少坑坑洼洼,因此,在这里就简单介绍一下ES6中的一些新特性 如果想真正的了解ES6和ES5有什么不同,这里推荐看一下...

    Nino 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<