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在可迭代的对象（Array、Map、Set、String、TypedArray、arguments、…）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

    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-z：97-122
    2. 大写字母 A-Z：65-90
    3. 数字 0-9：48-57

    Percent-encoding

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

    对象遍历

    for...in 与 Object.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()
  5. ```javascript
  6. // citys [{ id: 1, city: '北京'}, { id: 2, city: '上海'}, { id: 1, city: '北京'}, { id: 3, city: '广州'}, { id: 4, city: '深圳'}]
  7. function deDuplicate() {
  8.     let idMap = new Map()
  9.   citys.map(item => {
  10.       if (idMap.has(item.id)) return
  11.     idMap.set(item.id, item)
  12.   })
  13.   return [...idMap.values()]
  14. }

判断空对象

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

encodeURI 与 encodeURIComponent

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

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

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