zoukankan      html  css  js  c++  java
  • es6小技巧

    let myKey = 'variableKey';
    let obj = {
        key1: 'One',
        key2: 'Two',
        [myKey]: 'Three' /* 棒呆! */
    };

    给变量键加上一层 [],程序员们就可以在一条对象字面量声明里完成全部事情。


    let ages = [12, 19, 6, 4];
    
    let firstAdult = ages.find(age => age >= 18); // 19
    let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

    find 和 findIndex 允许基于计算值查找,这种方式还防止了一些不必要的副作用和循环产生的不确定值。


    // 传参给需要多个独立参数的函数 arguments
    // 很像 Function.prototype.apply()
    let numbers = [9, 4, 7, 1];
    Math.min(...numbers); // 1
    
    // 将节点列表转换成数组
    let divsArray = [...document.querySelectorAll('div')];
    
    // 将参数转换成数组
    let argsArray = [...arguments];

    这个神奇的运算符还有附加的好处:它能把可迭代对象(NodeListarguments 等等)转化为真正的数组,而之前我们只能用 Array.from 或其它的 hack 方法。


    
    
    // 多行字符串
    let myString = `Hello
    
    I'm a new line`; // 这么写完全没问题!
    
    // 基础的插值操作
    let obj = { x: 1, y: 2 };
    console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

    当然,除了多行字符串,模板字符串还有其它的能力,比如说简单或者高级的插值。不过,仅仅是优雅的写多行字符串这件事情,已经让我十分欣慰了。


    
    
    // 基础用法
    function greet(name = 'Anon') {
      console.log(`Hello ${name}!`);
    }
    greet(); // Hello Anon!
    
    // 还可以是函数!
    function greet(name = 'Anon', callback = function(){}) {
      console.log(`Hello ${name}!`);
    
      // 不再需要“callback && callback()”啦 (不需要条件判断)
      callback();
    }
    
    // 只给其中一个参数默认值
    function greet(name, callback = function(){}) {}

    如果在调用的时候不传无默认值的参数,其它的语言可能会发出警告,但是 JavaScript 会默认将它们设为 undefined

    ES6的一些基本用法

  • 相关阅读:
    城市漫游-牛客
    同步和阻塞理解
    避免用户多次点击,造成重复提交
    页面不可编辑
    正则表达式-简单实例
    从字符串提取一个列表
    JS对象、基本类型和字面量的区别
    本地数据访问时出现跨域问题Cross origin requests are only supported for protocol schemes: ……
    checkbox操作判断 Jquery选择器
    HTML5经典实例——1基础语法和语义
  • 原文地址:https://www.cnblogs.com/linux-centos/p/6113245.html
Copyright © 2011-2022 走看看