小知识随手记（十）：多重重复解构对象、es6函数带默认参数时将生成声明作用域、一些注意点、动态设置getter/setter、mysql将字符串字段转为数字排序或比大小、pointer-events:none;属性

一、多次重复解构对象

　　es6居然可以重复解构对象。我们看代码

const obj = {
  a: {
    b: 1
  },
  c: 2
};

const { a: { b }, a, c } = obj;
console.log(b, a, c)

　　一行代码同时获取 a 和 a.b 和 c 。 在a和b都要多次用到的情况下，普通人的逻辑就是先解构出 a ，再在下一行解构出 b 。

　　接着继续看多重重复解构，nice，挺方便的。

　　这里有个需要注意的地方就是下面：

// 这种情况下，你把 name 和 age 从 part1 里解构出来了以后，你就无法使用变量 obj 中的 part1 属性了，如：
const { part1: { name, age } } = obj
console.log(part1)   // Uncaught ReferenceError: part1 is not defined

// 所以就需要多次解构，如：
const { part1: { name, age }, part1 } = obj
console.log(part1)   // 这样就可以取到 part1 了，{name: "零一", age: 23}

二、es6函数带默认参数时将生成声明作用域

　　我们直接看代码

var x = 10;

function fn(x = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // 3

　　改一下：

var x = 10;

function fn(a = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // 11

　　取的是最外层的x。那我们再改一下

var b = 10;

function fn(a = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // VM660:3 Uncaught ReferenceError: x is not defined

　　再改一下：

var x = 10;

function fn(x = 2, y = function (x) { return x + 1 }) {
  var x = 5;
  return y(x);
}

fn(); // 6

　　这样一测试，就比较清楚了。

三、一些注意点

1、parseInt 太小的数字会产生 bug

parseInt(0.00000000454);  // 4
parseInt(10.23);          // 10

parseInt(0.0000454);  // 0

2、与null或undefined相加

1 + null          // 1
1 + undefined     // NaN

Number(null)      // 0
Number(undefined) // NaN

3、arguments 和形参是别名关系，前提是arguments与传的实参一一对应

function test(a, b) {
  console.log(a, b); // 2, 3
  
  arguments[0] = 100;
  arguments[1] = 200;
  
  console.log(a, b); // 100, 200
}
test(2, 3);

　　但是如果不是一一对应的话，那么没对应的就没有关系。比如test(2)，那么arguments[0]与参数a是别名关系，arguments[1]与参数b就没有关系了。

4、是否存在这样的变量 x ，使得它等于多个数字？

const x = {
  value: 0,
  toString() {
    return ++this.value;
  }
}

x == 1 && x == 2 && x == 3;    // true

　　通过隐式转换，这样不是什么难的事情。关于隐式转换，直接看：

5、对象 === 比较的是内存地址，而 >= 将比较转换后的值

{} === {} // false

// 隐式转换 toString()
{} >= {}  // true

6、Function.prototype 是个函数类型。而自定义函数的原型却是对象类型。

typeof Function.prototype === 'function';  // true

function People() {}
typeof People.prototype === 'object';      // true

　　所以我们设置空函数可以这么做：

// Good 
const noop = Function.prototype;

// Bad
const noop = () => {};

7、重复字符串 N 次

　　有时候出于某种目的需要将字符串重复 N 次，最笨的方法就是用for循环拼接。其实更简单的方法是用repeat：

var  ss = 'test'
ss.repeat(5)
// "testtesttesttesttest"

8、简单指数运算

//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8

四、getter/setter 也可以动态设置

class Hello {
  _name = 'lucy';
 
  getName() {
    return this._name;
  }
  
  // 静态的getter
  get id() {
    return 1;
  }
}

const hel = new Hello();

hel.name;       // undefined
hel.getName();  // lucy

// 动态的getter
Hello.prototype.__defineGetter__('name', function() {
  return this._name;
});

Hello.prototype.__defineSetter__('name', function(value) {
  this._name = value;
});

hel.name;       // lucy
hel.getName();  // lucy

hel.name = 'jimi';
hel.name;       // jimi
hel.getName();  // jimi

五、mysql将字符串字段转为数字排序或比大小

　　mysql里面有个坑就是，有时按照某个字段的大小排序（或是比大小）发现排序有点错乱。后来才发现，是我们想当然地把对字符串字段当成数字并按照其大小排序（或是比大小），结果肯定不会是你想要的结果。

　　这时候需要把字符串转成数字再排序。最简单的办法就是在字段后面加上+0，如把'123'转成数字123：

// 1、排序：
方法一：ORDER BY '123'+0;（首推）

方法二：ORDER BY CAST('123' AS SIGNED);
方法三：ORDER BY CONVERT('123',SIGNED);

// 2、比大小：
SELECT '123'+0;  --   结果为123
SELECT '123'+0>127;  --   结果为0
SELECT '123'+0>12;  --   结果为1

SELECT CAST('123' AS SIGNED);    --  结果为123
SELECT CONVERT('123',SIGNED)>127;   --  结果为0
SELECT CONVERT('123',SIGNED)>12;   --  结果为1

六、浅谈CSS3有意思的属性：pointer-events:none;

1、pointer-events: none； 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。

　　可以用来取消某个元素上绑定的所有事件。

2、而display：none; 是你摸不着，也看不见。

3、pointer-events: none；摸不着，但是看得见。如果把某个元素再加上opacity：0；则可以很容易实现类似display:none；的效果（摸不着，看不见）。