js基础知识

Array.from的使用

• 适用于ArrayLike或者Iterable对象
• 第一种方式

var arguments = {
        "0": "weeo",
        "length": 1
    }
    var arr = [].slice.call(arguments) //不可迭代

• 第二种方式

var arr = Array.from(arguments)
var temp = Array.from({length: 100}).map(item.index)=>return index)

---

call、bind 与apply的区别

• call的使用

Object[functionName].call(this,[param1,[param2,param3]])
    作用：改变作用域
    区别：使用参数列表

• apply的使用

Object[functionName].apply(this,[...param])
    作用：改变作用域
    区别：使用参数数组

-- 处理类数组 Array.from() Array.prototype.slice(this,...arg)

• bind的使用

Object[functionName].bind(this,[param2,param3]])
    作用：改变作用域
    区别：不是立刻执行

---

示例

    function A () {
        this.name = 'demoName'
    }
    function B () {
        printName() {
        console.log(this.name)
        }
    }
    const a = A()
    B.printName.call(a)

---

总结： 可以实现继承操作

前端开发中cookie、sessionStorage以及localStorage实践

vue中的data

• 使用函数返回（深拷贝）; 每个使用组件的地方一个新的的数据副本;

vue中computed

    computed: {
        getNum() {
            return this.num + 5
        },
        getNum2: {
            get() {
                return this.num + 5
            },
            set(num) {
                return this.num -= num
            }
        }
}
区别：只有依赖字段的缓存发生变化才会重新计算

vuex的使用

• 第一种方式：getters、actions(异步操作)、mutations、state单独js文件书写；
• 第二种方式：getters、actions、mutations、state放在一个js文件中；
• 第三种方式：使用modules的方式管理
• 使用方式

this.$store.state.xxx
this.$store.commit()
this.$store.dispatch()
mapState、mapGetters、mapMutations、mapActions

页面加载的几种方式

• 第一种方式

    window.onload(function() {
        // todo
    })

• 第二种方式

    $(document).ready(function() {
        //todo
    })

• 第三种方式

    $(function() {
        // todo
    })

改变鼠标的图标

    cursor: pointer|cross-hair|help|wait|... | data-uri(base64) auto;

$使用

$(dom).append|empty
$.each() $.inArray()
数据属性 data-xxxx dataset  data-main（入口）+require.js 异步加载解决script加载js文件顺序不能颠倒的问题
AMD规范
define(['xx'],function('依赖的别名') {
    return xxx
})
require(['xx',..],function('依赖的别名') {
    return xxx
})
$.ajax({options})
类数组 {0: xx,1: xx,length: 2}

var Model = function() {

}

http-equiv content的使用

    http的文件头，可以控制浏览器的行为
    glob.sync("/*/*.js")

定义对象的属性

    Object.defineProperty(obj,prop,descriptor)

---

```js v-model.xxx 修饰符 lazy|number|trim /(^\s*)|(\s*$)/g .test .match vue中代码高亮支持es6 require('').default resolve => require([''],resolve) （） => import() 动态导入组件需要使用babel-plugin-dynamic-import-webpack [参考博客](https://juejin.cn/post/6844903920330866702) ---在webpack.config.js中配置 ---.babelrc文件配置 ``` ### **csr与ssr** ### **webGL** ```js 引入一个与OpenGL ES 2.0符合的api，在html的canvas元素中使用 input标签通过设置event.target.value = ''解决同一个文件不能多次上传的问题 ``` * **获取文件md5值** ```js 1.使用spark-md5 /** * 获取文件的md5值 * @param {*} file */ static async getMd5(file, callback) { const fileSize = file.size; // 文件大小 const chunkSize = 1024 * 1024 * 10; // 切片的大小 const chunks = Math.ceil(fileSize / chunkSize); // 获取切片个数 const fileReader = new FileReader(); const spark = new SparkMD5.ArrayBuffer(); const bolbSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; let currentChunk = 0;

fileReader.onload = e => {
  const res = e.target.result;
  spark.append(res);
  currentChunk++;
  if (currentChunk < chunks) {
    loadNext();
  } else {
    const md5 = spark.end();
    callback(md5);
  }
};
const loadNext = () => {
  const start = currentChunk * chunkSize;
  const end = start + chunkSize > file.size ? file.size : start + chunkSize;
  fileReader.readAsArrayBuffer(bolbSlice.call(file, start, end));
};
loadNext();

} 2.使用js-md5

---

！！运算符将undefined|null转换成false

---

SVGElement extends Element extends Node .. EventTarget
~按位求非 -1 -> 0

---
### `检测设备像素比（缩放比）`

 detectZoom () {
  let ratio = 1,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase()
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI
    }
  } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth
  }
  return ratio
}

---

addEventListener(eventName,handleFn,{passive: true})  
    --监听器内部不使用preventDefault阻止滑动行为，可以优化页面的滑动性能

---
    webpack生成的map文件用于bug定位源代码的位置
    链表反转
    class Node <E> {
        E element;
        Node<E> next;
        Node(E element) {
            this.element = element
        }
    }
    public Node<E> reverseList(Node<E> head) {
        Node<E> current = head;
        Node<E> preNode = null;
        if(head == null) {
            return head
        }
        while(current !== null) {
            Node<E> currentNode = current.next
            current.next = preNode
            preNode = current
            current = currentNode
        }
    }
---
- 对象属性的删除

delete object.xx
object.xx = undefined

- 事件监听的处理

document.addEventListener('xxx',fn,useCapture)
useCapture： 控制事件的向下传播行为，true会先处理fn的逻辑，然后事件传递到目标对象；

- 正则的使用

中文 \u4e00-\u9fa5
str.match(/aaa(\S*)/g)[1] //截取