关于前端:前端相关知识系列一

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

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

参考