Coding-everyday

1. 生成数组0-4
2. 自适应字体大小
3. 双~的用法
4. | 的用法，通常用来取整
5. 原生JS获取dom中的id
6. [,,,] 的长度？
7. 如何判断当前脚本运行在浏览器还是 node 环境中？
8. 如何中断ajax请求？
9. Object.getOwnPropertyNames 和 Object.keys 的区别
10. 基本陷阱
- 10.1. 空语句
- 10.2. 自动插入分号

# 1. 生成数组`0-4`

Array.from({length: 5}, (v, i) => i);     // [0, 1, 2, 3, 4]

# 2. 自适应字体大小

给html设置fontSize大小，其实就是在DOMContentLoaded或者resize变化后调整fontSize的大小，从而调整rem的比值关系。

var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

# 3. 双~的用法

~~它代表双按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意：

对于正数，它向下取整；
对于负数，向上取整；
非数字取值为0，它具体的表现形式为：

~~null;      // => 0
~~undefined; // => 0
~~Infinity;  // => 0
--NaN;       // => 0
~~0;         // => 0
~~{};        // => 0
~~[];        // => 0
~~(1/0);     // => 0
~~false;     // => 0
~~true;      // => 1
~~1.9;       // => 1
~~-1.9;      // => -1

特殊类型，转化为Boolean是true的输出1，转化为boolean是false的输出0；

# 4. `|` 的用法，通常用来取整

1.2|0  // 1
1.8|0 // 1
-1.2|0 // -1

# 5. 原生JS获取dom中的id

querySelector() 返回匹配的一个元素，比如'.class'，‘#id’
把数据通过data-放在dom上，比如data-id={id}，JS中获取到元素后，通过element.dataset.id来取

# 6. [,,,] 的长度？

有几个逗号，长度就是几，最后一个逗号后面的undefined不算。

# 7. 如何判断当前脚本运行在浏览器还是 node 环境中？

this === window ? 'browser' : 'node';

通过判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器中。

# 8. 如何中断ajax请求？

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

# 9. Object.getOwnPropertyNames 和 Object.keys 的区别

对于一般的对象来说，Object.keys()和Object.getOwnPropertyNames()返回的结果是一样的。只有涉及不可枚举属性时，才会有不一样的结果。 Object.keys方法只返回可枚举的属性，Object.getOwnPropertyNames方法还返回不可枚举的属性名。

var a = ['Hello', 'World'];

Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

上面代码中，数组的length属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames方法的返回结果中。

又一例子：

var obj = Object.defineProperties({}, {
  p1: { value: 1, enumerable: true },
  p2: { value: 2, enumerable: false }
});

Object.getOwnPropertyNames(obj)
// ["p1", "p2"]

# 10. 基本陷阱

# 10.1. 空语句

const length = 4;
const numbers = [];
for (var i = 0; i < length; i++);{
  numbers.push(i + 1);
}

numbers; // => ???

很容易忽略这个分号，而它创建了一个空语句。空语句是不做任何事情的语句。

for() 在空语句（什么也不做）上循环了 4 次，忽略了实际上往数组里添加元素的代码块{ numbers.push(i + 1); }。

# 10.2. 自动插入分号

function arrayFromValue(item) {
  return
    [item];
}

arrayFromValue(10); // => ???

很容易忽略return关键字和[items]表达式之间的换行。换行使 JavaScript 自动在return和[items]表达式之间插入一个分号。函数中的return; 导致它返回undefined。因此 arrayFromValue(10) 的值是 undefined。

← 事件委托前端面试手写代码 →

# 1. 生成数组0-4