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计算属性中
//调用方式
缺点: 生成一个独一无二的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)
es6function a(...args) { console.log(args) } a(1,2,3)
判断数组是否包含指定值
ie 任何系列都不支持
一般需要自己写工具函数
es6var arr = [1,2,3] console.log(arr.includes(1)); // true console.log(arr.includes(4)); // false
顺序遍历对象key值
ie 任何系列都不支持
es6var obj = { key1: 1, key2: 2, key3: 3 } object.keys(obj); // ["key1", "key2", "key3"]
顺序遍历对象value值
ie 任何系列都不支持
es6var obj = { key1: 1, key2: 2, key3: 3 } object.values(obj); // [1,2,3]