知识技术点[不定时更新]

HTML:

1.解析HTML字符窜
<dl v-html='item.content'>{{item.content}}</dl>
2.禁用输入框的历史输入记录
<input autocomplete='off' />

JS：

1. JS：遍历对象，删除空对象 
 for (const key in this.obj) { 
    if (this.obj[key] === "") { 
      delete this.obj[key]; 
    } 
  } 

2. JS：将多条数据，根据同类型进行分组 
data： 
    oldArr: [], 
    newArr: [] 
JS： 
   this.newArr= []; 
   const rotationObj = this.oldArr.item.reduce((prev, current) => { 
      if (typeof prev[current.rotation] === "undefined") { 
         prev[current.rotation] = [current]; 
      } else { 
         prev[current.rotation].push(current); 
      } 
      return prev; 
      }, {}); 
   Object.keys(rotationObj).forEach((k) => { 
      this.newArr.push(rotationObj[k]); 
   }); 

3. JS：new Set()方法去重合并
  arr = [ ...new Set(arr) ]; 

4. JS：格式化时间格式 
   // 对小于 10 的数字，前面补 0 
    pad(str) { 
      return str < 10 ? `0${str}` : str; 
    }, 
    // 传入年、月、日 
    stringify(year, month, date) { 
      let str = [year, this.pad(month + 1), this.pad(date)].join("-"); 
      return str; 
    } 

5. JS：算法简写 
  所有算法都可以简写，如  (x = x / y  =>  x /= y),(x = x % y  =>  x % = y)。 
  注意：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。 

6.JS：用代码模拟手动操作 
  this.$nextTick(() => { 
    // 要模拟的操作 
  }); 

7.JS：遍历键名为id、name值之类的对象 取值的方法 
  （1）先获取对象里的所有key 
  let objArr = Object.keys(res.data); 
  （2）然后循环objArr，进行赋值 
  let newArr = []; 
  objArr.forEach(item => { 
    newArr.push(res.data[item]); 
  }) 

  let newArr = objArr.map(item => return res.data[item]);

8.JS：网页调用拨打电话
  <meta name="format-detection"  content="telephone=no"> // 移动web页面自动探测电话号码
  <a href="tel:400-0000-688">400-0000-688</a>

9.JS：打开某网址
  （1）新的窗口
  ①window.open(URL, 目标窗口, 特性字符窜, 新窗口在浏览器历史记录中是否替代当前加载页面的布尔值) // 最后一个参数只有在不打开新窗口时才使用
  如window.open("http://www.wrox.com/", "topFrame", "fullscreen=yes,location=no")
（2）同一窗口，新的标签页
  let _URL = "http://www.wrox.com/"
  ①<a :href="_URL" tarfet="topFrame" />
  ②window.location.href = _URL
  ③window.open(_URL, "topFrame")
  ④locations.assign(_URL)
（3）同一窗口，同一标签页，并关闭当前标签页
  location.replace("http://www.wrox.com/")
附录：重新加载
  location.reload(); // 重新加载， 可能是从缓存加载
  location.reload( true); // 重新加载， 从服务器加载

10.JS：数组排序
  function sortnumber(a,b){
    // return a-b;     //默认升序
    return b-a;     //默认降序
  }
  let arr = [12,345,45,23,11,445];
  let arrnew = arr.sort(sortnumber);
    
11.JS：获取对象的key或者value成为一个数组
（1）key
  Object.keys(obj);
（2）values
  Object.values(obj)

12.JS：input过滤表情的正则方法
  value.replace(/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g, "");

13.JS：删除一个数组中和另一个数组相同的元素或者属性
  var newArray=array1.filter(function(item) {
    return array2.indexOf(item) === -1;
  }

14.JS：验证是否输入的数字或者英尺英寸的正则
（1）简易版
  /(^[\d]$|^[\d]+[\d]$)|(^[\d]+\'$)|(^[\d]+\'+[\d]+\"$)|(^[\d]+\"$)|(^[\d]+\s+[\d]+\/+[\d]+\"$)|(^[\d]+\'+[\d]+\/+[\d]+\"$)|(^[\d]+\'+[\d]+\s+[\d]+\/+[\d]+\"$)/
（2）优化版
  /^(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))((\x27(((([1-9]\d*)([ ]+|\x2d+))?([1-9]\d*)(\/)([1-9]\d*))|(([1-9]\d*\.?\d*)|([0]\.\d*)))(\x22))|(\x27|\x22))|(([1-9]\d*\.?\d*)|([0]\.\d*))/g

15.JS：进行JS运算时，会出现浮点数误差的简单处理方式
  先扩大N倍计算值，再除以相应的倍数，如 (0.1 * 100) / 0.2 / 100

16.JS：函数内遍历引入本地图片资源
  arrforEach(item => {
    item.url = require(`@/assets/image/layoutFurniture/${item.id}.png`)
  })

17.JS：字符窜比较时，是根据字母顺序来比较大小的
  console.log('2' > '12') // true

18.JS：replace时，不区分大小写的判断
  let str = 'Visit Microsoft!'
  str.replace(/microsoft/i, "W3School")

19.JS：找指定元素下的第N个元素
（1）ref方式：
  this.$refs['color-classfily-ul'].children[index]
（2）DOM方式：
  document.getElementById('color-classfily-ul').childNodes[index]
（3）拓展：动态绑定多个类似的ref名字
  this.$refs['editFolderInput' + index][0]

20.JS：数组对象根据某个字段大小进行排序
  compare (property) {
    return function (a, b) {
      let value1 = a[property]
      let value2 = b[property]
      return value1 - value2
    }
  }
  arr.sort(compare('id'))

21.JS：浏览器大小变化时，获取元素的宽高（注意需要元素生成后）
  this.screenWidth = document.body.clientWidth;
  this.screenHeight = document.body.clientHeight;
  window.onresize = () => {
    return (() => {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
    })();
  };

22.JS：一个数是否能被另一个数整除
  x % y  === 0 

23.JS：keyup的相关事件
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素
    // 则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是 enter 键或者没有同时按下 shift 键，则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }

24.JS：对象的属性值是一个方法时，简写
  const methodKey = 'sayName'
  let person = {
    // sayName: (name) => { console.log(`My name is ${name}`) }
    [methodKey](name) {
      console.log(`My name is ${name}`)
    }
  }
  person.sayName(' Matt') // My name is Matt

25.JS：关于浏览器窗口的消息弹框
（1）警告框：alert
  alert('这是警告消息')
（2）确认框：confirm
  if (confirm(" Are you sure?")) {
    alert(" I'm so glad you're sure!");
  } else { 
    alert(" I'm sorry to hear you're not sure.");
  }
（3）提示框：prompt
  let result = prompt(" What is your name? ", "");
  if (result !== null) {
    alert(" Welcome, " + result);
  }

26.JS：判断一个数有几位小数
  decimals(num) {
    //判断数字是否有小数 
    if (num.indexOf('.') !== 1) {
      return 0
    } else {
      let x = String(num).indexOf('.') + 1; //小数点的位置
      let y = String(num).length - x; //小数的位数
      //返回小数点后的个数
      return y
    }				
  }

VUE

1. VUE：v-model的几种修饰符.lazy,.number和.trim的介绍 
  (1).lazy并不是实时改变，而是在失去焦点或者按回车时才会更新 
  (2).number将输入转换成Number类型 
  (3).trim可以自动过滤输入首尾的空格 

2. VUE：v-if 多个值满足一个即成立 
  <div v-if="[10,11,20].includes(row.id)"></div> 

3. VUE：动态绑定多个class 
  <div :class="[isActive ? 'mySelected' : '']" :class="{'myDisabled': disabled}"></div> 

4. VUE：给对象添加或者修改字段的值，并让页面也跟着局部变化 
  this.$set(item, "active", true); 
  
5. VUE：设置滚动到盒子底部 
  <div id="main" ref="mainRef"></div> 
  this.$refs.mainRef.scrollTop = this.$refs.mainRef.scrollHeight; 

6. 自定义返回按钮事件
  watch:{
    $route(now,old){  //监控路由变换，控制返回按钮的显示
      if(now.path=="/home/home"){
        this.isShow=false;
      } else{
        this.isShow=true;
      }
    }
  }

7. 父子组件双向绑定传值
子组件：
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
  this.$emit("update:isShow", false);

父组件：
  <div :isShow.sync="explain"></div>

8. 父组件调用子组件方法
  <navigation-bar ref="navBar" title="专家门诊" @click.native="navBackHomeFun"></navigation-bar>
  navBackHomeFun() {
    this.$refs.navBar.navBackHomeFun();
  }

9. VUE2.x中，路由中的alias，如此使用，表示访问链接只有域名则访问指定页面
  {
    alias: "/",
    path: "/demo/home",
    name: "demo-home",
    component: () => import("@/views/demo/home")
  }

10. VUE2.x中，路由中的 *，如此使用，表示，路由跳转时找不到要跳转的路由对象，就会重定向到指定的 "index" 页面。
  {
    path: "*",
    redirect: "/index"
  }

11.输入框获取焦点，自动全选文本
// html
  <input v-model="val" @focus="selectFun" ref="inchesInput" />
// js
  selectFun() {
    this.$refs.inchesInput.select()
  }

12.更新数组或对象的值
  this.$set(this.someObject,'b',2)
  this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

微信小程序

1. 设置屏幕高度
（1）方法一：
  .index{
    height: 100vh;
    width: 100vw;
  }
  # CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 
  # "vw" = "view width"  "vh" = "view height"
拓展获取高度的方法
（2）方法二：
  onLoad: function () {
    this.setData({
      height: wx.getSystemInfoSync().windowHeight,
      width: wx.getSystemInfoSync().windowWidth
    })
  }

2. 如何在行内实现字符窜转换：filter.formatJSON("字符窜")
  <view wx:if="{{filter.formatJSON(item.datas).childType == 'both'}}">
    <text>{{filter.formatJSON(item.datas).data.text}}</text>
  </view>

3. 如何查看图片的大图
// wxml
  <image src="{{item.materialUrl}}" bindtap="previewImgFun" data-url="{{item.materialUrl}}" mode="aspectFill"/>
// js
  previewImgFun: function(e) {
    let previewArr = this.data.imageData.map(item => {
      return item.materialUrl;
    });
    wx.previewImage({
      current: e.currentTarget.dataset.url, // 当前图片地址 必须是---线上---的图片
      urls: previewArr // 所有要预览的图片的地址集合 数组形式
    });
  }