日常的积累

突然看到es6中的set对象去重，想要记录下来分享给大家，就有了这篇文章。将来可能会补充更多有趣实用的代码。

Es6中的set对象

Set 对象存储的值总是唯一的

• 对象之间引用不同不恒等 （特殊）
• NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个。

let mySet = new Set();
mySet.add(5); 
mySet.add(5); 
mySet.add("some text"); 
var o = {a: 1, b: 2}; 
mySet.add(o); 
mySet.add({a: 1, b: 2}); // Set(4) {5, "some text", {…}, {…}} 
// 体现了对象之间引用不同不恒等，即使值相同，Set 也能存储

因此可以使用set的唯一性进行数组的去重

var mySet = new Set([1, 2, 3, 4, 4]);
console.log([...mySet])   //通过[...] 将对象转数组 [1,2,3,4]

或者进行交并补

var a = new Set([1, 2, 3]); 
var b = new Set([4, 3, 2]); 
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

Es6中的模板字符串

var str1 = '天才在左'
var str2 = '疯子在右'
var str = str1 + ',' + str2  // Es5 写法
let str = `${str1},${str2}`  // Es6 写法 这里用的是反引号   看着没什么两样，就方便了一点
console.log(str)

真正的大招 我们项目中可能会用到的
let str = `
  <div>
    <p>天才在左，</p>
    <p>疯子在右</p>
  </div>
`
document.write(str)
console.log(str) // 使用起来非常方便

个人vue经历
const renderTooltip = (axisValueLabel: string, params: Array<any>) => {
  let showCard = ''
  for (let i = 0; i < params.length; i++) {
    showCard += `
        <div>
        <p style="margin: 0;">
          <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${
            params[i].color
          };"></span>
          ${params[i].seriesName}：
          <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">
           ${params[i].value === 0.1 ? 0 : params[i].value}
          </span>
        </p>
        </div>
    `
  }
  return `<p style="margin: 0;margin-bottom: 4px">${axisValueLabel}：</p>` + showCard
}

v-model的使用

2021-12-8 又到了补充的时候了，一直知道 v-model 是 v-bind 和 v-on 的结合，但是由于一直直接使用v-model 真正的应用还真没使用过，今天终于碰到了。

先复习一下v-model
<input v-model="inputValue"> 
相当于 
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

我自己封装的一个搜索组件（父组件）
<search-box class="search-box" v-model.trim="keyword"></search-box>
自己写的一个搜索框（子组件）
<input
    type="text"
    class="search_input"
    autofocus
    :value="value"                                   // 接收 props传递的value
    @input="$emit('input', $event.target.value)"     // $emit 发射input事件
    @keydown.enter="keydownEnter"
/>

......待补充