• es6 --- 功能


    标记的模板文字

    1.模板文字!确实很棒。我们不再会这样做….

    const concatenatedString = "I am the " + number + "person to recommend this article."
    

    然而,当我们使用下面这种方式做的话:

    const concatenatedString = `I am the ${number} person to recommend this article.`
    

    2.标记的模板文字允许我们向前迈出一步 - 并使用字符串调用函数

    const consoleLogAstring = (string) => {
        console.log(string)
    }
    consoleLogAstring`I am the string to be logged!`
    // I am the string to be logged!
    

      标记模板文字还有一个额外的好处;向目标函数传递一个从字符串生成的参数数组。这些参数的排列方式如下:首先,一个字符串数组包围内插值,然后是每个内插值。

      我们来看一个例子:

    function logOutValues(strings, value1, value2) {
      console.log(strings, value1, value2)
    }
    logOutValues`Here is one value: ${1} and two: ${2}. Wow!`
    // ["Here is one value: ", " and two: ", ". Wow!"] 1 2
    

      

      您可以根据需要为尽可能多的内插值执行此操作,甚至可以像这样操作字符串⬇:

    const person = {
        name: "Scott",
        age: 25
    }
    function experience(strings, name, age) {
      const str0 = strings[0]; // "that "
      const str1 = strings[1]; // " is a "
      let ageStr = 'youngster'; 
      if (age > 99){
        ageStr = 'centenarian';
      }
      return str0 + name + str1 + ageStr;
    }
    const output = experience`that ${ person.name } is a ${ person.age }`;
    console.log(output);
    // that Scott is a youngster
    

    隐式的return语句

    1.你写了多少次返回值的函数?

    const addOne = (num) => {
      return num + 1
    }
    console.log(addOne(1))
    // 2
    

    答:几乎每一次的编写都是这样操作,浪费了那么多时间.

    2.将那些大括号替换为普通的小括号,并利用隐式返回:

    const addOne = (num) => (
        num + 1
    )
    console.log(addOne(1)) 
    // 2
    

    3.接下来, 我们进一步进行操作!

    const addOne = num => num + 1
    console.log(addOne(1)) 
    // 2
    

    对默认参数进行参数解构

    const person = { name: 'Scott', attractiveness: 8.5 }
    const consoleLogAttributes = ({ name, attractiveness }) => {
      console.log(name, attractiveness)
    }
    consoleLogAttributes(person)
    // 'Scott', 8.5
    

    1 是不是太有用了,但是如果我们在没有参数的情况下调用上面的函数呢?

    consoleLogAttributes()
    // TypeError: Cannot match against 'undefined' or 'null'.
    

    2 让我们通过设置空对象的默认参数来保存此错误:

    const consoleLogAttributes = ({ name, attractiveness } = {}) => {
      console.log(name, attractiveness)
    }
    

    3 现在我们再来执行一下上面的程序:

    consoleLogAttributes()
    // undefined undefined
    

    4 如果不使用任何参数调用consoleLogAttributes,就不会再出现错误!我们何不更进一步进行操作呢,看下面这段代码:

    const consoleLogAttributes = ({ 
      name = 'Default name', 
      attractiveness = '10' 
    } = {}) => {
      console.log(name, attractiveness)
    }
    

    5 到处都是默认值, 这意味着以下两种方法将产生相同的结果:

    consoleLogAttributes()
    // 'Default name', 10
    consoleLogAttributes({})
    // 'Default name', 10
    

    您的函数将更具弹性,因为它们可以适应未被定义的参数传递。

    属性值简写(包括函数)

    1 让我们回到上面那个person对象。这是一个常见模式: 您有一个变量(例如,name),并且您希望将名为namekey设置为name的值。

    const name = "Scott"
    const person = { name: name }
    // { name: "Scott" }
    

    2.感谢ES6,您可以这样做:

    const name = "Scott"
    const person = { name }
    // { name: "Scott" } 
    

    3 当使用多个值执行操作时⬇:

    const name = "Scott"
    const programmingAbility = "poor"
    const person = { name, programmingAbility }
    // { name: "Scott", programmingAbility: "poor" }
    

    4.甚至可以用函数操作⬇:

    const name = "Scott"
    const sayName = function() { console.log(this.name) }
    const person = { name, sayName }
    // { name: “Scott”, sayName: function() { console.log(this.name) }  
    

    5.并且在对象声明中执行函数声明:

    const name = "Scott"
    const person = { name, sayName() { console.log(this.name) } }
    // { name: “Scott”, sayName: function() { console.log(this.name) }  }

     请各路 大牛,指教。

  • 相关阅读:
    常见 PL.SQL 数据库操作
    PL/SQL常见设置--Kevin的专栏
    pl/sql编程
    添加List集合覆盖问题
    程序猿感情生活的那些事
    表达式树-理解与进阶
    白话神经网络
    EF Core 数据验证
    c#8内插逐字字符串增强功能
    我的新博客
  • 原文地址:https://www.cnblogs.com/yuerdong/p/10307612.html
Copyright © 2020-2023  润新知