new Image()

等价于 document.createElement(‘img’)

  1. let img = new Image(50, 50)
  2. img.src = '...'
  3. document.body.appendChild(img)

for…in 与 for…of

  • for...in以任意顺序遍历一个对象的除Symbol以外的可枚举属性,不建议与数组一起使用

    1. let obj = {
    2. a: 1,
    3. b: true,
    4. c: 'hello'
    5. }
    6. for (let key in obj) {
    7. console.log(obj[key]) // 1, true, 'hello'
    8. }
  • for...of可迭代的对象ArrayMapSetStringTypedArrayarguments、…)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

    1. let arr = [1, 2, 3]
    2. for (let n of arr) {
    3. console.log(n) // 1, 2, 3
    4. }

    获取元素绑定的监听事件

    1. getEventListner(el) // el 元素

    ASCII

    1. 小写字母 a-z97-122
    2. 大写字母 A-Z65-90
    3. 数字 0-948-57

    Percent-encoding

    百分比编码 (有时也被称为URL编码)是一种拥有8位字符编码的编码机制,这些编码在URL的上下文中具有特定的含义;
    编码由英文字母替换组成:“%”后跟替换字符的ASCII的十六进制表示。
    需要编码的字符

    对象遍历

    for...inObject.keys()无法保证对象遍历的顺序,且不同浏览器产生的结果可能不一样,应该避免在对属性顺序有要求的场景中使用。

    对象拷贝

    Tips - 图1

    Array.map

    Tips - 图2

    生成32位随机码

    1. function createRandomCode () {
    2. let timestamp = new Date().getTime().toString();
    3. let arr = 'abcdefghijklmnopqrstuvwsyz0123456789'.split('');
    4. let nonce = '',
    5. len = 32 - timestamp.length;
    6. for (let i = 0; i < timestamp.length; i++) {
    7. nonce += arr[timestamp[i]];
    8. }
    9. for (let j = 0; j < len; j++) {
    10. let num = Math.round(Math.random() * 35);
    11. nonce += arr[num];
    12. }
    13. return nonce;
    14. }

    生成带参数的url

    1. function createUrl (baseUrl, params) {
    2. let url = baseUrl + '?';
    3. for(let key in params) {
    4. url += key + '=' + params[key] + '&';
    5. }
    6. return url.substring(0, url.lastIndexOf('&'));
    7. }

    迭代NodeList

    NodeList 不是一个数组,是一个类似数组的对象(类数组)

  1. 直接使用 forEach()
  2. 先使用 Array.from() 将其转换为数组,然后再迭代
  3. 若上述两个方法浏览器都不支持,则可以使用 Array.prototype.forEach()

    字符串的 substr 和 substring

    Tips - 图3

    数组的 slice 与 splice

    Tips - 图4

    获取url链接中的参数

    1. function getUrlQuery (name) {
    2. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
    3. let r = window.location.search.substring(1).match(reg)
    4. return r ? r[2] : null
    5. }

    区分window.prompt的确定与取消

    1. let value = window.prompt('这是一个带有输入的提示')
    2. if (value || value === '') {
    3. // 确定
    4. } else {
    5. // 取消
    6. }

    typeof

    1. typeof '' // "string"
    2. typeof 0 // "number"
    3. typeof true // "boolean"
    4. typeof [] // "object"
    5. typeof {} // "object"
    6. typeof null // "object"
    7. typeof undefined // "undefined"
    8. typeof function() {} // "function"
    9. typeof Object // "function"
    10. typeof Symbol() // "symbol" (EAMAScript 2015)
    11. typeof 1n // "bigint" (EAMAScript 2020)

    判断一个对象是否数组

    ```javascript typeof [] // “object” ❌

Object.prototype.toString.call([]) // “[object Array]” ✅

Array.isArray([]) // true 👍

  1. <a name="jqiRm"></a>
  2. ## 对象数组去重
  3. > new Map()
  4. ```javascript
  5. // citys [{ id: 1, city: '北京'}, { id: 2, city: '上海'}, { id: 1, city: '北京'}, { id: 3, city: '广州'}, { id: 4, city: '深圳'}]
  6. function deDuplicate() {
  7. let idMap = new Map()
  8. citys.map(item => {
  9. if (idMap.has(item.id)) return
  10. idMap.set(item.id, item)
  11. })
  12. return [...idMap.values()]
  13. }

判断空对象

  1. JSON.stringify({}=== '{}'
  2. Object.keys({}).length === 0

encodeURI 与 encodeURIComponent

encodeURI 一般用于完整的URI,encodeURIComponent 一般用于 URI 组件

  1. : , ; @ / ? & = + $ // 保留字符
  2. - _ . ! ~ * ' ( ) // 不转义字符 🎯
  3. A-Z a-z 0-9 // 字母、数字 🎯
  4. # // 数字标志

对于以上字符,encodeURI 都不会进行编码;encodeURIComponent 除不转义字符、字母、数字外,其余的都会被编码;对于空格,两种方法编码一个空格时都会转换成 %20;