码迷,mamicode.com
首页 > 其他好文 > 详细

es6技巧写法

时间:2018-12-27 19:01:12      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:表达   扩展   bad   log   div   静态   param   静态化   渲染   

为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渲染

  • 一般

<li v-for="(item,index) in data" :key="index">
    {{item.uuid}} //输出uuid字段
</li>
  • 解构赋值

<li v-for="{uuid} in data" :key="uuid">
    {{uuid}} //直接解构赋值输出
</li>

CSS私有化

  • 一般
设置比较长的class类名区分,或者使用BEN等命名方法
  • css module

<style module>
    .h3 {}
</style>

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


//调用方式
<h3 :class="$style.h3"></h3>
//$style是计算属性,所以也可以这样 bool为Bool表达式
<h3 :class="{$style.h3: bool}"></h3>
缺点: 生成一个独一无二的class类名,只能使用类名class控制样式
  • scoped

<style scoped>
</style>
生成Hash属性标识.且根元素父组件的scoped影响

解决办法

使用>>>深度选择器

//寻找div下的样式,包括子组件样式
div >>> .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]

来源:https://segmentfault.com/a/1190000017524386

es6技巧写法

标签:表达   扩展   bad   log   div   静态   param   静态化   渲染   

原文地址:https://www.cnblogs.com/qixidi/p/10185520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!