前端相关知识系列（一）

这个系列我会记录一些平时看文章或遇到的相关知识点。

outline: 绘制于元素周围的一条线

与border不同的是，border会增加元素大小，但是outline不会

html * {
   outline: 1px solid red
}
// 取消某个元素的轮廓
input {
  outline: none;
}

浮点数

浮点数表示法： 1.XXX

1.toFixed() // 报错, 可是通过Number(1).toFixed()创建基本包装类型(称为显示装箱)
1.0.toFixed() // '1'
1..toFixed() // '1'
// 1. 和 1.0会被作为相同的浮点数
1. === 1.0 //true

二进制、十进制互转

十进制转二进制：NumberObject.toString(radix)

let num = 10
num.toString(2) // 1010

二进制转十进制： parseInt(string, radix)

let num = 1010101
parseInt(num, 2) // 85

交换两个变量的值

1、使用加减

a = a + b
b = a - b
a = a - b

2、使用位运算

a^=b
b^=a
a^=b

3、使用对象或数组

{
    a = {a, b}
    b = a.a
    a= a.b
}

// 数组
{
    a = [a, b]
    b = a[0]
    a = a[1]
}

4、使用解构赋值

[a, b] = [b, a]

5、使用运算优先级

a = [b, b = a][0]
// 会先运行b = a得到b的值

一个对象数组按照另一个数组排序

const sortFunc = (propsName, refArr) => (prev, next) => {
    refArr.indexOf(prev[propsName]) - refArr.indexOf(next[propsName])
}
const age = [35,36,22,56,66]
const objArr = [
    {age: 36, name: 'a'},
    {age: 22, name: 'b'},
    {age: 35, name: 'c'},
    {age: 56, name: 'f'},
    {age: 66, name: 'g'}
]
const arr = objArr.sort(sortFunc('age', age))

ASI

自动分号插入(automatic semicolon insertion): 一种程序解析技术，它在 JavaScript 程序的语法分析 (parsing) 阶段起作用
ASI机制可以让你省略一些分号，但是有些地方的分号是不能省略：
1、for循环头部里的分号
2、作为空语句存在的分号
3、以[、(、\、+、-开头的语句前面的分号

for (var i = 0, len = a.length
    i < len
    i++) {
    msg += a[i] + ' '
} // 报错，分号不能省略

var a = 2
/error/i.test('error') // 报错


var num = 5
+new Date - new Date(2009, 10)
// 等价于
var num = 5 + new Date - new Date(2009, 10)

位运算

1、与(&): 数位都为1时，返回1，否则返回0

0 & 1  => 0
1 & 1 => 1

1111 & 0001  => 0001
1111 & 1010 => 1010

2、或(|): 其中一位是1，则返回1，反之返回0
3、异或(^): 如果两个数位不同则返回1，反之返回0

0^0 => 0
0^1 => 1
1^1 => 0

1111^1011 => 0100
1111^0010 =>1101

4、非(~): 反转
~1010 =>0101
5、零填充左位移(<<): 一个或多个零数位从右被推入，最左侧的数位被移除

5 // 00000000000000000000000000000101
5 << 1 // 10  00000000000000000000000000001010

6、有符号右位移(>>): 保留符号的右移。最左侧的数位被从左侧推入，最右侧的数位被移出

-5 // 11111111111111111111111111111011
-5 >> 1 // -3  11111111111111111111111111111101

7、零填充右位移(>>>): 一个或多个零数位从左侧被推入，最右侧的数位被移出

5 // 00000000000000000000000000000101
5 >>> 1 // 2  00000000000000000000000000000010

妙用

1、使用&判断奇偶
偶数 & 1 = 0
奇数 & 1 = 1
2、使用~~、>>、 <<、 >>>、 |取整

~~3.9 // 3 向下取整
2.3>>0 // 2 向下取整
4.6 << 0 // 4
5.6 >>> 0 // 5 不可用于负数
3.6 | 0 // 3

3、使用计算<<，>>乘除

// <<： 整数左移n位，相当于乘以2的n次方
6 << 3 // 6 * 8 = 48
// >>: 相当于除以2的n次方，再向下取整
5>>1 // 2

4、利用^来完成比较两个数是否相等：!(a ^ b)

!(4^4) // true
!(5^7) // false

5、使用^值交换

a^=b
b^=a
a^=b

6、使用&、>>、|完成rgb和16进制颜色转换

// 16进制转RGB
function hexToRGB(hex){
  hex = hex.replace("#","0x");
  let r = hex >> 16;
  let g = hex >> 8 & 0xff;
  let b = hex & 0xff;
  return "rgb("+r+","+g+","+b+")";
};
hexToRGB('#cccccc'); // rgb(204,204,204)

// RGB转16进制颜色值
function RGBToHex(rgb){
  let rgbArr = rgb.split(/[^\d]+/);
  let color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3];
  return "#"+color.toString(16);
};
RGBToHex('rgb(204,204,204)'); // #cccccc

参考