【JS】基础知识总结

三、EL表达式

1. 语法结构：${expression} 。
2. EL 提供“.“和“[ ]“两种运算符来存取数据。

四、ES6 扩展运算符( ... )

1. 扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。

var str = 'hello'
var arr = [1, 2, 3]
var obj = {
    x:1,
    y:2,
}

console.log(...str)   // h e l l o
// 字符串转数组
console.log([...str]) // [ 'h', 'e', 'l', 'l', 'o' ]
console.log({...str}) // { '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }

console.log(...arr)   // 1 2 3 
console.log([...arr]) // [ 1, 2, 3 ]
console.log({...arr}) // { '0': 1, '1': 2, '2': 3 }

console.log({...obj}) // { x: 1, y: 2 }

2. 应用场景

（1）数组拼接，代替 concat 方法

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [...arr1, ...arr2];

console.log(arr3);  // [ 1, 2, 3, 4, 5, 6 ]

（2）数组深拷贝

var arr1 = [1, 2, 3];
var arr2 = arr1;
var arr3 = [...arr1];

console.log(arr1 === arr2); // true, 说明arr1和arr2指向同一个数组
console.log(arr1 === arr3); // false, 说明arr1和arr3指向不同数组

（3）数组最大值

var arr1 = [1, 2, 3];
var arr2 = Math.max(...arr1);

console.log(arr2); // 3  

（4）数组去重

var arr1 = [1, 2, 2, 3];
var arr2 = [...new Set(arr1)];

console.log(arr2); // [1, 2, 3]  

（5）函数调用传参

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

// 传统写法
foo(arr[0], arr[1], arr[2]);

// 使用扩展运算符
foo(...arr);
// 1
// 2
// 3

参考：

妙用ES6解构和扩展运算符让你的代码更优雅

ES6 扩展运算符 三个点（...）

五、Rest运算符( ... )

1. Rest运算符也用三个点号表示，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

2. 应用场景

（1）配合解构赋值使用 （只能放在最后一位，否则会报错）

var [a, ...args] = [1, 2, 3, 4];
console.log(a);   // 1
console.log(args); // [2, 3, 4] 

（2）函数调用传参

// 主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}

bar(1, 2, 3, 4);
// 1
// 2
// 3
// 4


var bar = function(...args) {
    console.log(args);
}

bar('h', 'e', 'l', 'l', 'o'); 
// [ 'h', 'e', 'l', 'l', 'o' ]


bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}

bar(1, 2, 3, 4);
// 1
// [ 2, 3, 4 ]

参考：

妙用ES6解构和扩展运算符让你的代码更优雅

六、位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。

在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后，结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数，JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

负数是正数的二进制补码加 1 。

把十进制转换为二进制

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

把二进制转换为十进制

function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}

七、for in 和 for of 的区别

1. for in 循环遍历对象的可枚举属性列表（包括[[Prototype]]链）

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

for (let prop in obj) {
    console.log("obj." + prop + " = " + obj[prop]);
}

// obj.a = 1
// obj.b = 2
// obj.c = 3

let arr = [1,2,3];

for(let v in arr){
    console.log(v);
}

// 0
// 1
// 2

 2. for of 循环遍历迭代器对象的值（普通对象不是迭代器）

let arr = [1,2,3];

for(let v of arr){
    console.log(v);
}

// 1
// 2
// 3

3. 标准的 for 循环，用于数组，遍历的是数组的下标，而不是遍历值。

let arr = [1,2,3];

for(let i=0; i<arr.length; i++){
    console.log(arr[i]);
}

// 1
// 2
// 3

4. 示例：(拼多多2020校园招聘笔试) 

Array.prototype.methods = function(){
    console.log(this.length);
}

let array = [1,2,3];
array.name = "array";

for(let index in array){
    console.log(index);
}
// 0
// 1
// 2
// name
// methods

for(let value of array){
    console.log(value);
}
// 1
// 2
// 3

console.log(array.length)
// 3

八、声明提升

变量和函数的声明会被提升：他们的声明会被提升至当前作用域的最顶部；其中，函数声明将会优先于变量声明。

只有声明本身会被提升，而赋值或其他运行逻辑会保留在原地（先声明，再赋值）。

示例1：(拼多多2020校招笔试)

// 当函数名和变量名一致时, 编译器会根据"函数优先"原则, 首先将函数声明提升。
function fn1(a){
    console.log(a);
    var a = 2;
    function a(){}
    console.log(a);
}
fn1(1);
// [Function: a]
// 2

// 等同于
function fn1(a){
    function a(){};
    console.log(a);
    a = 2;    
    console.log(a);
}
fn1(1);
// [Function: a]
// 2

示例2：以示例1为基础，进行一次测验

function fn1(a){
    var a = 3
    function a(){};
    console.log(a);
    a = 2;    
    console.log(a);
}
fn1(1);
// 3
// 2

// 等同于
function fn1(a){
    function a(){};
    a = 3;
    console.log(a);
    a = 2;    
    console.log(a);
}
fn1(1);
// 3
// 2

 持续更新中。。。