JS语法杂记

JS语法杂记

完全等同

$$\begin{gathered} {}^{\prime }=={=}^{\prime }判断的话+0和-0会认为是相等的，NaN会认为是不相等的。 \\ 所以碰到这两种情况要进行特殊判断建议使用ES6的Object.is()方法。 \\ \ast \ast NaN与任何值都不相等，包括NaN本身。\ast \ast \end{gathered}$$

function identity(val1, val2) {
    return Object.is(val1,val2);
    // return val1 === val2; // 错误写法
}

// 等价于Object.is
function identity(val1, val2) {
    if(val1===val2){
        // +0不等于-0；但是用===的话会返回true；所以要做额外的判断
        return val1 !== 0 || val2 !== 0 || 1/val1 === 1/val2;
    }else {
        //NaN等于NaN 但是上面的判断 NaN === NaN 会返回false;所以做额外的判断
        return val1 !== val1 && val2!== val2;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

一般使用双等来判断（==），如果还需要类型相同那么就用三等（===）。
说一下这两个的区别：
== equality 等同，=== identity 恒等。
==， 两边值类型不同的时候，要先进行类型转换，再比较。 
==，不做类型转换，类型不同的一定不等。 
下面分别说明： 
先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等： 
1、如果类型不同，就[不相等] 
2、如果两个都是数值，并且是同一个值，那么[相等]。
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。 
4、如果两个值都是true，或者都是false，那么[相等]。 
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。 
6、如果两个值都是null，或者都是undefined，那么[相等]。 
再说 ==，根据以下规则： 
1、如果两个值类型相同，进行 === 比较。 
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较： 
a、如果一个是null、一个是undefined，那么[相等]。 
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。 
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。 
d、任何其他组合，都[不相等]。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

或、且 的逻辑运算

$$\begin{gathered} 返回参数a和b的逻辑或运算结果 \\ 返回参数a和b的逻辑且运算结果 \end{gathered}$$

// a | b 和 a & b 返回值均为0、1，因此需要进行转换
function or(a, b) {
    return a || b;
    // return a | b ? true : false;
}

function and(a, b) {
    return a && b;
    // return a & b ? true : false;
}

// 或运算符“||”的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。**短路，若第一个操作数为true就直接返回结果不再对后面的操作数执行**//
// 同样类比理解“&&”
// 且运算符"&&"的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。**逻辑运算符当中的逻辑与,传入两个参数两个为true才返回true,有一个为false就返回false**
1
2
3
4
5
6
7
8
9
10
11
12
13
14

避免全局变量

$$\begin{gathered} 在Javascript语言中，声明变量使用的都是关键字var、let和const， \\ 如果不使用var而直接声明变量，则该变量为全局变量。 \end{gathered}$$

function globals() {
    // 需要在次添加关键字
    var myObject = {
      name : 'Jory'
    };

    return myObject;
}
1
2
3
4
5
6
7
8

改变上下文

$$\begin{gathered} 在JavaScript中，函数是一种对象，其上下文是可以变化的，对应的，函数内的this也是可以变化的， \\ 函数可以作为一个对象的方法，也可以同时作为另一个对象的方法，可以通过Function对象中的call \\ 或者apply方法来修改函数的上下文，函数中的this指针将被替换为call或者apply的第一个参数。 \\ 将函数fn的执行上下文改为obj对象，只需要将obj作为call或者apply的第一个参数传入即可。 \end{gathered}$$

// bind 方法创建指定 this 值的函数实例
function  alterContext(fn, obj) {
	return  fn.bind(obj)();	//.bind()返回的是一个函数，所以需要立即执行。 
}
// call 方法改变函数 this 值
 function  alterContext(fn, obj) {
	return	fn.call(obj);
}
// apply 方法改变函数 this 值
 function  alterContext(fn, obj) {
	return  fn.apply(obj);
}
//  给 obj 增加 fn 方法
function alterContext(fn, obj) {
    obj.fn = fn;
  	return obj.fn();
}

//原生js法：
function alterContext(fn, obj) {
    obj.temp = fn;
    let result = obj.temp();
    delete obj.temp;
    return result
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

数组合并

$$合并数组arr1和数组arr2$$

// 字符串方式 注意可能会改变数据类型
function concat(arr1, arr2) {
    return (arr1 + "," + arr2).split(",");
// 原生concat方式
function concat(arr1, arr2) {
    return arr1.concat(arr2);
}
// 扩展运算符...
function concat(arr1, arr2) {
    return [...arr1, ...arr2];
}
    
// 数组降维 maybe Wrong
function concat(arr1, arr2) {
    return [arr1,arr2].flat(); 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

段落标识

$$请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”$$

// 解法1 HTML简单实现
<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p> 

// 解法2 JS实现 修改给定的HTML代码，定位body并用带p标签的文本代替原文本
let body = document.getElementsByTagName("body")[0];
body.innerHTML = body.innerText.replace("牛客网是一个专注于程序员的学习和成长的专业平台。","
牛客网是一个专注于程序员的学习和成长的专业平台。
");

// 解法3 JS实现 获取给定HTML代码中的文本，删除原子节点，给获取的文本加上p标签，然后插入页面
const pInnerText = document.body.childNodes[0].textContent.trim();
document.body.removeChild(document.body.childNodes[0]);
const p = document.createElement('p');
p.innerHTML = pInnerText;
document.body.appendChild(p);

// 解法4 JS实现 创建一个p标签，嵌入到body中，缺点是没有删除给定的不带p标签的文本
let p = document.createElement("p");
p.innerText = "牛客网是一个专注于程序员的学习和成长的专业平台。";
document.body.append(p);
// document.querySelector("body").append(p);
// body不需要selector，直接document.body就可以了

// 解法5 JS使用document.write，缺点是没有删除给定的不带p标签的文本
document.write('
牛客网是一个专注于程序员的学习和成长的专业平台。
');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

求二次方

$$为数组arr中的每个元素求二次方$$

function square(arr) {
    // ES6 map 把调用它数组的每个元素分别传给我们指定的函数，并返回函数返回值构成的新数组，注意并不会处理缺失元素，如稀疏数组会略过其中的缺失元素，不会调用函数
    // **使用map不改变原数组**
    // return arr.map(a => a * a);
    
    // old方法 直接模拟
    let Arr = [];
    for (let i of arr) {
        Arr.push(Math.pow(i, 2));
    }
    return Arr;
}
1
2
3
4
5
6
7
8
9
10
11
12

删除数组第一个元素

    //使用shift方法
    function cuttail(arr) {
        var newArr = arr.slice(0);
        newArr.shift();
        return newArr;
    }
    //使用splice切除第一个元素
    function cuttail(arr) {
        var newArr = arr.slice(0);
        return newArr.splice(0,1);

    }
    //使用slice赋值元素，其实可以直接return arr.slice(0);
    function cuttail(arr) {
        var newArr = arr.slice(0);
        console.log(newArr);
        return newArr.slice(1); 
    }
    //每个元素往前移动，最后再pop一下
    function cuttail(arr) {
        var newArr = arr.slice(0);
        for (var i = 0; i < newArr.length - 1; i++) {
            newArr[i] = newArr[i + 1];
        }
        newArr.pop();
        return newArr;
    }
    //使用filter函数过滤
    function cuttail(arr) {
        return arr.filter(function (ele,i) {
            return i != 0;
        });
    }
	// ES6 结构赋值
	function curtail(arr) {
    	const [, ...rest] = arr
    	return rest
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

parseInt

$$\begin{gathered} parseInt(string,radix)当参数radix的值为0， \\ 或没有设置该参数时，parseInt()会根据string来判断数字的基数。 \end{gathered}$$

// 举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
// 按10进制去处理字符串，碰到非数字字符，会将后面的全部无视

function parse2Int(num){
    return parseInt(num,10);
}

// parseFloat()只解析十进制
function parse2Int(num) {
    return parseFloat(num);
}
// 正则表达式
function parse2Int(num) {
    return parseInt(num.match(/^(\d+)/)[0]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二进制转换

$$\begin{gathered} 给定二进制字符串，将其换算成对应的十进制数字 \\ 以此题可以与上题互相参考，并了解其他进制转换 \end{gathered}$$

// parseInt() 方法
function base10(str) {
    //接受传入的字符，后面跟当前字符的进制数 （当前表示二进制）
    return parseInt(str, 2); 
}

// split() + reverse() + Math.pow() 方法
function base10(str) {
    let arr = str.split("").reverse(); 
    //先将数据进行处理 将个位翻转到第一个去
    let result = 0;  
    //定义一个最终返回的结果
    for (let i = 0; i < arr.length; i++) {   
        //对数据进行遍历（都知道二进制转十进制，是从个位开始运算再依次与后面相加）
        result = result + arr[i] * Math.pow(2, i);  
        //Math.pow(2, i)  代表求2的i次方 (pow是一个数***算方法，目的是求某个数的次方的值)
    }
    return result;  
}

// *数字转字符用toString()，字符转数字用parseInt() or parseFloat.*
// 直接模拟
function base10(str) {
    let cnt = 0;
    for (let i = 0, l = str.length; i < l; i++) {
        cnt *= 2;
        if (str.charAt(i) == '1') { 
            cnt += 1;
        }
    }
    return cnt;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

函数传参

$$\begin{gathered} 将数组arr中的元素作为调用函数fn的参数 \\ 主要使用apply或call调用，两种方法均会改变this的指向。 \\ apply：第一个参数：函数体内this的指向，第二个参数：接收一个集合对象（数组和类数组） \\ call：第一个参数L函数体内的this指向，第二个参数往后是依次传入的参数 \\ 或者直接当成参数传递 \end{gathered}$$

// 使用apple(建议使用方法一)
function argsAsArray(fn, arr) {
    return fn.apply(this, arr)
}
// 使用call
function argsAsArray(fn, arr) {
    return fn.call(this, arr[0], arr[1], arr[2])
}
// 直接当成参数传递
function argsAsArray(fn, arr) {
    return fn && fn(...arr);
}
1
2
3
4
5
6
7
8
9
10
11
12

查找元素位置

$$在数组arr中，查找值与item相等的元素出现的所有位置$$

function findAllOccurrences(arr, target) {
    let ans = [];
    for (let i = 0; i < arr.length; i++) {
        if (target === arr[i]) ans.push(i);
    }
    return ans;
}

function findAllOccurrences(arr, target) {
    let ans = [];
    arr.forEach((el, index)=>{
        //  el == target && newArr.push(index);
        if(el == target){
            ans.push(index);
        }
    })
    return ans;
}

// filter
function findAllOccurrences(arr, target) {
    var result=[];
    arr.filter(function(item,index){
        return item === target && result.push(index);
    });
    return result;
}
// for
function findAllOccurrences(arr, target) {
    var result=[];
    for(var i = 0;i < arr.length; i++){
        if(arr[i] ===target){
            result.push(i);
        }
    }
    return result;
}
// lastIndexOf + slice/splice
function findAllOccurrences(arr, target) {
    var result = [],index = arr.lastIndexOf(target);
    while(index > -1){
        result.push(index);
        arr.splice(index,1);//arr=arr.slice(0,index);
        index = arr.lastIndexOf(target);
    }
    return result;
}
// indexOf
function findAllOccurrences(arr, target) {
    var result = [],index = arr.indexOf(target);
    while(index > -1){
        result.push(index);
        index = arr.indexOf(target, index+1);
    }
    return result;
}

// 使用map和filter
    function findAllOccurrences(arr, item) {
        return arr.map(function(e, index) { 
            return e === item ? index : -1;
            /* 样例返回结果为[ -1, -1, -1, -1, -1, -1, -1, 0, 6 ] */
        }).filter(function(i) { 
            return i !== -1;
            /* 过滤掉 i === -1 的情况 */
        })
    }

// ES6箭头函数版
    const findAllOccurrences = (arr, item) =>
        arr.map((e, index) => e === item ? index : -1)    
           .filter(i => i !== -1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

仅仅为本人学习记录，如有不对请大家斧正，持续更新ing