欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

es6技巧写法(持续更新中~~~)

程序员文章站 2022-07-02 19:01:07
为class绑定多个值 普通写法 :class="{a: true, b: true}" 其他 :class="['btn', 'btn...

为class绑定多个值

普通写法
:class="{a: true, b: true}"
其他
:class="['btn', 'btn2', {a: true, b: false}]"

一个值判断a或者判断b

普通写法
if(flg === a || flg === b)
其他
['a','b'].indexof(flg) > -1

引用一个

普通写法
import a from './a.vue'
componets: {
    a
}
node写法
components: {
    a: require('./a.vue')
}

v-for渲染

一般

  • {{item.uuid}} //输出uuid字段
  • 解构赋值
    
    
    • {{uuid}} //直接解构赋值输出

    css私有化

    一般
    设置比较长的class类名区分,或者使用ben等命名方法
    css module
    .h3 {}

    style样式会存在$style计算属性中

    //调用方式
    

     

    //$style是计算属性,所以也可以这样 bool为bool表达式

     

    缺点: 生成一个独一无二的class类名,只能使用类名class控制样式
    scoped
    
    
    生成hash属性标识.且根元素受父组件的scoped影响

    解决办法

    使用>>>深度选择器
    //寻找p下的样式,包括子组件样式
    p >>> .h3 { }

    对象操作

    对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用object.assign方法。
    // bad
    const a = {};
    a.x = 3;
    
    // if reshape unavoidable
    const a = {};
    object.assign(a, { x: 3 });
    
    // good
    const a = { x: null };
    a.x = 3;
    如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。
    // bad
    const obj = {
      id: 5,
      name: 'san francisco',
    };
    obj[getkey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'san francisco',
      [getkey('enabled')]: true,  //属性表达式 6
    };

    数组、对象参数使用扩展运算符(spread)

    连接多个数组

    一般
    let arr1 = [1,2,3]
    let arr2 = [4,6,7]
    arr2 =  arr2.concat(arr1)
    spread 运算符
    let arr1 = [1,2,3]
    let arr2 = [...arr1,4,6,7]

    连接多个json对象

    一般
    var a = { key1: 1, key2: 2 }
    var b = object.assign({}, a, { key3: 3 })
    // 最后结果
    {key1: 1, key2: 2,key3: 3 }
    spread 运算符
    var a = { key1: 1, key2: 2 }
    var b = {...a, key3: 3}

    es6剩余参数(rest paramete)

    使用reset paramete是纯粹的array实例
    一般
    function a() {
        console.log(arguments)
    }
    a(1,2,3)
    es6
    function a(...args) {
        console.log(args)
    }
    a(1,2,3)

    判断数组是否包含指定值

    ie 任何系列都不支持
    一般

    需要自己写工具函数

    es6
    var arr = [1,2,3]
    console.log(arr.includes(1)); // true
    console.log(arr.includes(4)); // false

    顺序遍历对象key值

    ie 任何系列都不支持
    es6
    var obj = { key1: 1, key2: 2, key3: 3 }
    object.keys(obj); // ["key1", "key2", "key3"]

    顺序遍历对象value值

    ie 任何系列都不支持
    es6
    var obj = { key1: 1, key2: 2, key3: 3 }
    object.values(obj); // [1,2,3]