console.log(arr.length);  // 4

arr = arr.filter(it => true);
console.log(arr);  // [1, 2, 3]

parseInt(1, 0);  // 1. `radix` 为 0 时会自动转换成 10，故输出 1
parseInt(2, 1);  // 2. `radix` 值非法（没有一进制），无法解析，故输出 NaN
parseInt(3, 2);  // 3. `string` 为 3 ，`radix` 为 2，无法将 3 按二进制解析，故输出 NaN

let arr2 = arr.map(parseInt);
console.log(arr2);  // [1, NaN, NaN]

var arr3 = arr.concat(arr2);
console.log(arr3);  // [1, 2, 3, 1, NaN, NaN]

arr3 = [...new Set(arr3)];
console.log(arr3);  // [1, 2, 3, NaN]

content.length > 140;

content.trim()  // 移除两端空格
  .replace(/[\r\n]+/g, '\n')  // 连续换行合并为 1 个
  .replace(/[ ]+/g, ' ')  // 内容中的连续空格合并成 1 个
  > 140;

var arr = content.trim()
  .replace(/[\r\n]+/g, '\n')
  .replace(/[ ]+/g, ' ')
  .split(/[\x00-\xff]{2}?/g);  // ASCⅡ 码范围（惰性匹配）
var len = arr.length - 1 + arr.reduce(function(total, cur) {
  return total += cur.length	
}, 0);
len > 140;

function fixASC2CharsNum(str) {
  var arr = str.split(/[\x00-\xff]{2}?/g);

  return arr.length - 1 +
    arr.reduce(function(total, cur) {
      return total += cur.length;
    }, 0);
}

content = content.trim()
  .replace(/[\r\n]+/g, '\n')
  .replace(/[ ]+/g, ' ');

var regex_url = /https?:\/\/(:?[\w-]+\.)+[\w-]+\S+\b/g;  // 网址（宽松判断）
var shortUrlCharsNum = 10;
var placeholder = Array(shortUrlCharsNum).fill('囧');

content = content.replace(regex_url, function(matched) {
  // 小于 10 个字符的不使用短网址
  if (fixASC2CharsNum(matched) < shortUrlCharsNum) {
    return matched;
  }

  return placeholder;
});

fixASC2CharsNum(content) > 140;

function trimBlank(strTel) {
  return strTel.trim()
}

function doubleByteToSingle(strTel) {
  const doubleByteNums = '０１２３４５６７８９';
  return strTel.replace(
    new RegExp('[' + doubleByteNums + ']', 'g'), matched =>
      doubleByteNums.indexOf(matched)
  )  
}

function rmCountryCode(strTel) {
  return strTel.replace(/^\+8\s*6/, '')
}

function rmConnector(strTel) {
  return strTel.replace(/\D/g, '')
}

function isValidTel(strTel) {
  return /^1\d{10}$/.test(strTel);
}

// 方法1：利用 RegExp 的零宽断言
str = str.replace(/fill="(?!none)[^"]+"/gi, '');

// 方法2：先用 RegExp 通用判断，然后 replace 函数进一步判断
str = str.replace(/fill="([^"]+)"/gi, function($0, $1) {
  return $1.toLowerCase() === 'none' ? $0 : '';
});

window.btoa(str)

var reg_encodeChars = new RegExp('["%#{}<>]', 'g');
str = str.replace(reg_encodeChars, encodeURIComponent);

document.querySelectorAll('[type=radio]:required');

// 处于禁用状态的 fieldset 下的 radio 也包含在内
document.querySelectorAll('[type=radio]:disabled');

document.querySelectorAll('[type=radio]:checked');

const activateBtn = document.getElementById('removeDisabled');

activateBtn.addEventListener('click', () => {
  const disabledRadios = document.querySelectorAll('[type=radio]:disabled');

  [...disabledRadios].map(radio => {
    const fieldset = radio.closest('fieldset');  // 这里未考虑多层 fieldset 嵌套的情况

    radio.disabled = false;
    fieldset && (fieldset.disabled = false);
  });
});

//zxx: 拖不动，除了拖到最后

const viewImgList = {
  init(selector) {
    this.el = document.querySelector(selector);
    this.dialog = null;
    this.bindClick();
    this.bindDrag();
  },
  bindClick() {
    // 图片点击事件
    this.el.addEventListener('click', e => {
      if (e.target.tagName.toLowerCase() === 'img') {
        this.togglePreview(e.target.src);
      }
    });

    // 任意位置点击
    window.addEventListener('click', e => {
      if (!this.el.contains(e.target)) {
        this.togglePreview(false);
      }
    });
  },
  bindDrag() {
    let imgElm = null;
    const isInside = elm => elm === this.el || this.el.contains(elm);

    // 拖动开始
    this.el.addEventListener('dragstart', e => {
      e.target.style.opacity = 0;
      imgElm = e.target;
    });

    // 拖动结束
    this.el.addEventListener('dragend', e => e.target.style.opacity = '');

    // 放置目标
    document.addEventListener('dragover', e => {
      if (isInside(e.target)) {
        e.preventDefault();

        if (e.target === this.el) {
          this.el.appendChild(imgElm);
        } else {
          const compareValue = imgElm.compareDocumentPosition(e.target);

          if (compareValue === 2) {  // 目标图片在前
            e.target.before(imgElm);  // 添加到目标图片前面
          } else if (compareValue === 4) {  // 目标对象在后
            e.target.after(imgElm);  // 添加到目标图片后面
          }
        }
      }
    });

    // 进入目标区域
    document.addEventListener('dragenter', e => {
      this.el.classList[isInside(e.target) ? 'add' : 'remove']('is-dragenter');
    });

    // 允许放置
    this.el.addEventListener('drop', e => {
      e.preventDefault();
      this.el.classList.remove('is-dragenter');
    });
  },
  togglePreview(src) {
    if (src) {
      this.buildDialog(src);
      this.dialog && !this.dialog.open && this.dialog.showModal();          
    } else {
      this.dialog && this.dialog.close();
      this.destoryDialog();
    }
  },
  buildDialog(imgSrc) {
    const dialog = document.createElement('dialog');
    const img = new Image();

    dialog.className = 'img-preview';
    img.src = imgSrc;
    this.dialog = dialog;
    dialog.appendChild(img);
    document.body.appendChild(dialog);
  },
  destoryDialog() {
    this.dialog && document.body.removeChild(this.dialog);
    this.dialog = null;
  }
};

viewImgList.init('#imgList');

document.getElementById('loginForm');  // 方法1：经典的 id 选择器
document.querySelector('#loginForm');  // 方法2：万能的 querySelector
document.forms.loginForm;  // 方法3：表单原生方法，还可以写作：document.forms['loginForm']
loginForm;  // 方法4：标签的 id 可以直接当变量来用

const btnTypes = ['button', 'submit', 'reset', 'image'];
const formData = [...loginForm]
  // 过滤掉表单按钮
  .filter(field => !btnTypes.includes(field.type))

  // 将表单元素的值封装成 k-v 形式的数据，例如：{username: 'abc'}
  .reduce((data, { name, value }) => {        
    // 这里仅按照题意作简单处理，
    // 如果要完善的话，还要考虑单选框、复选框这类 name 值相同的表单元素
    data[name] = value;        
    return data;
  }, {});

console.log(formData)

function telTrim(str) {
  str = String(str);
  const s = str.replace(/[\s-]/g, '');
  return /^\d{11}$/.test(s) ? s : str;
}

const formElm = document.getElementById('form');
const inputElm = document.getElementById('input');

// 或者
const formElm = document.forms['form'];
const inputElm = formElm['input'];

inputElm.addEventListener('drop', function(e) {
  e.preventDefault();
  this.value = telTrim(e.dataTransfer.getData('text'));
});

inputElm.addEventListener('paste', function(e) {
  e.preventDefault();
  const { selectionStart: start, selectionEnd: end } = this;  // 文本框光标位置
  const text = e.clipboardData.getData('text');

  this.setRangeText(text, start, end);  // 从当前光标位置追加粘贴的内容
  this.value = telTrim(this.value);  // 格式化文本框内容
});

formElm.addEventListener('submit', function(e) {
  e.preventDefault();
  inputElm.value = telTrim(inputElm.value);

  // 后续提交表单的操作... 如 ajax 或 this.submit();
});

function getRandomSkins(uid, skins) {
  skins = skins instanceof Array ? skins : [];

  if (!uid) {
    return skins;
  }

  // 1.将 uid 的每个字符串元字符转换为编码值，组合成一个数字
  var charCodes = String(uid).split('').reduce(function(total, cur) {
    return total + (isNaN(cur) ? cur.charCodeAt() : cur);
  }, '');

  // 2.使用上一步生成的数字生成一个和皮肤数组长度一致的字符串数字
  var seed = String(Math.sin(charCodes)).split('.')[1].substr(0, skins.length);      

  // 3.将上一步生成的字符串数字打散添加到皮肤数组的每一项中，用于排序
  var result = skins.map(function(item, idx) {
    item._order = Number(seed[idx]);
    return item;
  });

  return (
    // 4.根据 order 排序
    result.sort(function(o, p) {
      return o._order - p._order;
    })
    
    // 5.移除 order，还原数组本来面貌
    .map(function(item) {
      delete item._order;
      return item;
    })
  )
}

const object1 = {
  userid: 123,
  username: '王二',
  tel: '13208033621'
};

Object.keys(object1)
  .map(key => `${key}=${encodeURIComponent(object1[key])}`)  // 转码
  .join('&');

location.search;

// zxx: 有bug
function getQueryObj(queryStr = '') {
  // 移除前面的 ? 号（如有）
  queryStr = queryStr.indexOf('?') === 0 ? queryStr.substr(1) : queryStr;
  if (!queryStr) return {};

  return queryStr.split('&')
    .map(s => s.split('='))  // 拆解 key 和 value
    .reduce((obj, [key, value]) => {
      value = value ? decodeURIComponent(value) : '';  // 解码

      if (key in obj) {
        Array.isArray(obj[key]) ? obj[key].push(value) : obj[key] = [obj[key], value];
      } else {
        obj[key] = value;
      }
        
      return obj;
    }, {});
}

getQueryObj();  // 参数为空

// 一般情况
getQueryObj('userid=123&username=%E7%8E%8B%E4%BA%8C&tel=13208033621');

// 空值（username 值为空）
getQueryObj('userid=123&username=&tel=13208033621');

// 多个重复的键名（tel、favorite）
getQueryObj('?userid=123&tel=13208033621&username=%E7%8E%8B%E4%BA%8C&favorite=rap&favorite=Hip%20hop&favorite=basketball&tel=15888888888&tel=18099999999');

let myslider1 = new Slider({ el: '#box' });  // 指定容器
new Slider({ value: 50 });  // 缺省赋值
new Slider();  // 无参数（插入到 body 标签最后，赋值为 0）

myslider1.val(value);  // js 动态赋值

class Slider {
  constructor(opts = {}) {
    this.el = opts.el;
    this.value = opts.value || 0;
    this.slider = null;
    this.render();
    this.bindEvt();

    return {
      // 赋值方法
      val: (value) => {
        this.val(value);
      }
    }
  }

  // 渲染 DOM
  render() {
    const container = document.querySelector(this.el);
    const slider = document.createElement('div');

    this.slider = slider;

    // 有缺省值则赋值
    if (this.value) {
      this.val(this.value);
    }

    slider.className = 'slider';
    slider.innerHTML = (
      // 轨道无需获取焦点
      `<button class="slider-track" tabindex="-1"></button>
      <button class="slider-thumb"></button>`
    );

    if (container) {
      container.appendChild(slider);
    } else {
      // 若未指定容器，则在 body 标签最后插入 DOM 结构
      document.body.appendChild(slider);
    }
  }

  // 绑定事件
  bindEvt() {
    const { slider } = this;
    const slider_track = slider.querySelector('.slider-track');
    const slider_thumb = slider.querySelector('.slider-thumb');
    let readyMove = false;

    const startHandle = e => {
      if (e.target === slider_thumb) {
        e.stopPropagation();
        readyMove = true;
      }
    };

    const moveHandle = e => {
      if (readyMove) {
        this.computeVal(e);
      }
    };

    const endHandle = () => readyMove = false;

    // 点击监听
    slider.addEventListener('click', e => {
      // 点击轨道
      if (e.target === slider_track) {
        this.computeVal(e);
      }
    }, false);

    // 键盘监听
    slider.addEventListener('keydown', e => {
      // 滑块获得焦点
      if (document.activeElement === slider_thumb) {
        let value = this.val();
        
        switch(e.keyCode) {
          case 37:  // 左箭头
            value--;
            break;
          case 39:  // 右箭头
            value++;
            break;
        }

        this.val(value);
      }
    }, false);

    // 开始拖动
    slider.addEventListener('touchstart', startHandle);
    slider.addEventListener('mousedown', startHandle);

    // 拖动中
    window.addEventListener('touchmove', moveHandle);
    window.addEventListener('mousemove', moveHandle);

    // 拖动结束
    window.addEventListener('touchend', endHandle);
    window.addEventListener('mouseup', endHandle);
  }

  // 计算当前值
  computeVal(e) {
    const { width, left } = this.slider.getBoundingClientRect();
    let posX = e.pageX;

    if (e.touches) {  // 兼容移动端
      posX = e.touches[0].pageX;
    }

    this.val((posX - left) / width * 100);
  }

  // 赋值 & 取值
  val(value) {
    if (typeof value === 'undefined') {
      // 返回当前 slider 的 percent 值
      return this.slider.style.getPropertyValue('--percent').trim() || 0;
    }

    if (isNaN(value)) {  // 过滤非法字符
      return;
    }

    // 边界处理
    if (value < 0) {
      value = 0;
    } else if (value > 100) {
      value = 100;
    }

    this.slider.style.setProperty('--percent', value);
  }
}

let title = '这是最后一期了，感谢同学们的一路相伴，更要向为47期小测耗费心血的张老师致敬！';

if (title.length > 15) {
  title = title.replace(/^(.{6}).*(.{6})$/, '$1...$2');
}

console.log(title);  // "这是最后一期...张老师致敬！"

let filename = 'weixin_20191221232646.jpg';

if (filename.length > 15) {
  filename = filename.replace(/^(.+)(\.\w+)$/, (_, $1, $2) => {
    let tail = '...' + $1.substr(-1) + $2;
    return $1.substr(0, tail.length - 1) + tail;
  });
}

console.log(filename);  // "weixin_...6.jpg"

function formatTitle(titleStr) {
  // emoji 的 unicode 范围实在是太繁杂了，既有双字节的，还有单字节的
  // 下面的 emoji 正则表达式参考自 [email protected]
  const regexp_emoji = new RegExp('(' +
    '(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])' +
    '[\ufe0e\ufe0f]?' +
    '(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?' +
    '(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])' +
    '[\ufe0e\ufe0f]?' +
    '(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*' +
  ')', 'g');
  const regexp_symbol = /[，；：……——]/;
  const emojiArr = titleStr.match(regexp_emoji);
  // 将 title 字符串打散成数组，避免双字节 emoji 字符的影响（每个 emoji 算1个字符）
  const titleArr = titleStr.split(regexp_emoji).reduce((arr, s) => {
    if (emojiArr && emojiArr.includes(s)) {
      arr.push(s)
    } else {
      arr = arr.concat(s.split(''))
    }

    return arr;
  }, []);

  if (titleArr.length > 15) {
    const half = Math.floor(titleArr.length / 2);
    let left = titleArr.slice(0, half);
    let right = titleArr.slice(half);
    let leftPoint = 0;
    let rightPoint = 0;

    // 从中心向两端查找第一个 emoji 或中文标点出现的指针位置
    left.some((_, idx, arr) => {
      const index = arr.length - 1 - idx;
      if (emojiArr && emojiArr.includes(arr[index]) || regexp_symbol.test(arr[index])) {
        leftPoint = index + 1;
        return true;
      }
    });
    right.some((item, idx) => {
      if (emojiArr && emojiArr.includes(item) || regexp_symbol.test(item)) {
        rightPoint = idx;
        return true;
      }
    });

    if (leftPoint === 0 && rightPoint === 0) {
      return titleStr.replace(/^(.{6}).*(.{6})$/, '$1...$2');
    }

    let diffValue;

    if (rightPoint > left.length - leftPoint) {
      diffValue = 15 - left.length - 3;  // 差值
      left = left.join('');
      right = right.slice(0, rightPoint).join('') + '...' +
        right.slice(right.length - 1 - rightPoint).join('');
    } else {
      diffValue = 15 - right.length - 3;  // 差值
      left = left.slice(0, left.length - 1 - diffValue).join('') + '...' +
        left.slice(leftPoint).join('');
      right = right.join('');
    }

    return left + right;
  }

  return titleArr.join('');
}

var xhr = new XMLHttpRequest();

// 上传进度（监听 upload 的 onprogress 事件）
xhr.upload.onprogress = function(e) {
  var percent = e.loaded / e.total * 100
  console.log('上传进度：' + percent + '%');
}

// 请求完成
xhr.onload = function() {
  var resOK = 200;
  console.log('请求完成');

  // 一个完成的请求不一定是成功的请求，故需要判断状态码来确认
  if (xhr.status === resOK) {
    console.log('请求成功')
  }
}

// 请求错误
xhr.onerror = function() {
  console.log('请求失败')
}

xhr.open('POST', '/upload', true);
xhr.send(file);

var maxFileSize = 1 * (1024 * 1024);  // 1MB

files = [].slice.call(files).filter(function(file) {
  return file.size <= maxFileSize
});

// 这里的 files 是第 2 题中处理过的 files
files.map(uploadImg);

function uploadImg(img) {
  var xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var resOK = 200;

    if (xhr.status === resOK) {
      img._uploaded = true
    }
  }

  xhr.onerror = function() {
    img._uploaded = false
  }

  // 请求结束（无论成功与否）
  xhr.onloadend = checkUpload;

  xhr.open('POST', '/upload', true);
  xhr.send(img);
}

function checkUpload() {
  var isDone = files.every(function(file) {
    return file.hasOwnProperty(_uploaded)
  });

  if (isDone) {
    console.log('上传已结束');

    var result = files.reduce(function(count, cur) {
      count[cur._uploaded ? 'success' : 'fail'] += 1;
      return count;
    }, {
      success: 0,
      fail: 0
    });

    console.log('上传结果：' +
      '成功' + result.success + '个' +
      '失败' + result.fail + '个'
    );

    if (result.success === files.length) {
      console.log('图片全部上传成功')
    }
  }
}

let boxNums = 20;
new Box(boxNums);  // 调用

class Box {
  constructor(nums = 0) {
    this.nums = isNaN(nums) ? 0 : Math.floor(nums);  // 数量
    this.boxes = [];  // 当前实例的 .box 元素集合
    this.rangeFrame = {  // 范围选框
      el: null,
      x: 0,
      y: 0
    };

    if (nums > 0) {
      this.build();
    }
  }

  // 在 body 元素里创建 .box 盒子
  build() {
    // 使用文档片段，减少性能损耗
    let fragment = document.createDocumentFragment();

    for (let i = 0; i < this.nums; i++) {
      let box = document.createElement('div');

      box.className = 'box';

      // 阻止移动端长按时弹出系统默认菜单
      box.addEventListener('touchstart', e => e.preventDefault());

      this.boxes.push(box);
      fragment.appendChild(box);
    }

    document.body.appendChild(fragment);
    this.bindEvt();
  }

  // 绑定操作事件
  bindEvt() {
    let timer = null;
    let isReady = false;

    // 按下时
    const startHandle = e => {
      e.stopPropagation();

      let elm = e.target;
      
      // “按压”对象为当前实例中创建的 .box 盒子之一
      if (!!~this.boxes.indexOf(e.target)) {
        timer = setTimeout(() => {
          let { clientX, clientY } = e;

          if (e.touches) {  // 移动端
            clientX = e.touches[0].clientX;
            clientY = e.touches[0].clientY;
          }

          isReady = true;
          elm.classList.add('active');
          this.buildRangeFrame(clientX, clientY);
        }, 350);
      } else {  // 点击空白处
        this.boxes.map(box => box.classList.remove('active'));
      }
    };

    // 拖动中
    const moveHandle = e => {
      if (isReady) {
        let { clientX, clientY } = e;

        if (e.touches) {  // 兼容移动端
          clientX = e.touches[0].clientX;
          clientY = e.touches[0].clientY;
        }

        this.updateRangeFrame(clientX, clientY);
      }
    };

    // 松起时，清空定时器（中断高亮操作）
    const endHandle = (e) => {
      e.preventDefault();
      isReady = false;
      clearTimeout(timer);
      this.removeRangeFrame();
    };

    // 按下
    window.addEventListener('touchstart', startHandle);
    window.addEventListener('mousedown', startHandle);

    // 拖动
    window.addEventListener('touchmove', moveHandle);
    window.addEventListener('mousemove', moveHandle);
    
    // 松起
    window.addEventListener('touchend', endHandle);
    window.addEventListener('mouseup', endHandle);
  }

  // 创建范围选框
  buildRangeFrame(posX, posY) {
    let elm = document.createElement('i');

    elm.className = 'range-frame';
    elm.style.left = `${posX}px`;
    elm.style.top = `${posY}px`;
    document.body.appendChild(elm);

    this.rangeFrame.el = elm;
    this.rangeFrame.x = posX;
    this.rangeFrame.y = posY;
  }

  // 更新范围选框
  updateRangeFrame(posX, posY) {
    let { el, x, y } = this.rangeFrame;

    if (posX < x) {  // 向左反方向
      el.style.left = 'auto';
      el.style.right = `${window.innerWidth - x}px`;
    } else {
      el.style.left = `${x}px`;
      el.style.right = 'auto';
    }

    if (posY < y) {  // 向上反方向
      el.style.top = 'auto';
      el.style.bottom = `${window.innerHeight - y}px`;
    } else {
      el.style.top = `${y}px`;
      el.style.bottom = 'auto';
    }

    // 矩形选框尺寸
    el.style.width = `${Math.abs(posX - x)}px`;
    el.style.height = `${Math.abs(posY - y)}px`;

    // 获取矩形区域左上、右下坐标
    // this.computeContains({
    // 	x1: Math.min(posX, x), y1: Math.min(posY, y),
    // 	x2: Math.max(posX, x), y2: Math.max(posY, y)
    // });

    this.computeContains(el.getBoundingClientRect());
  }

  // 移除范围选框
  removeRangeFrame() {
    if (this.rangeFrame.el) {
      document.body.removeChild(this.rangeFrame.el);
      this.rangeFrame.el = null;
    }
  }

  // 计算 box 是否包含在选框区域
  computeContains(area) {
    this.boxes.map(box => {
      let { left, top, width, height } = box.getBoundingClientRect();
      
      // 矩形碰撞检测
      if (
        area.left + area.width > left && left + width > area.left  // 横向
        &&
        area.top + area.height > top && top + height > area.top  // 纵向
      ) {
        box.classList.add('active');
      }
    });
  }
}

// zxx: 框选有bug，一旦框选经过，框选范围再变小的时候，选中态没有还原。
// wingmeng: 谢谢张老师指点，我题意理解错了……