... && =＞ && !== && !! && === 5种特殊js 用法总结

目录

 1. ES6中的扩展运算符（Spread Operator）

1.1. 展开数组

1.2. 展开对象

1.3. 拓展内容（了解就行）

2. 箭头函数（Arrow Function）

2.1. 箭头函数的基本语法

2.2. 箭头函数的特点

3. == 和 === 的区别

3.1. ==（相等运算符）

        3.2. ===（严格相等运算符）

4. !==（严格不等于）

5. !! 用法：将表达式转换为布尔值

6. ||（逻辑或运算符）

 1. ES6中的扩展运算符（Spread Operator）

扩展运算符 ... 是 ES6 中新增的一个非常实用的语法。三点运算符法 主要有两种常见的用法：

1.1. 展开数组

展开运算符(Spread Operator)，作用是和字面意思一样，就是把东西展开。

// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

// 数组拷贝
const arrCopy = [...arr1];
console.log(arrCopy); // [1, 2, 3]

1.2. 展开对象

 扩展运算符也可以用于对象，方便你拷贝对象或者合并多个对象。

array.push(...items)和add(...numbers)，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {a: 1, b: 3, c: 4}

1.3. 拓展内容（了解就行）

... 可以将一个数组展开成函数的参数序列，这是非常常见的用法之一。

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

2. 箭头函数（Arrow Function）

箭头函数是 ES6 中非常重要的一个新增特性，它使得函数的定义更加简洁，且其行为也有所不同，尤其是在 this 的上下文绑定上。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

x => x * x

2.1. 箭头函数的基本语法

箭头函数的基本语法是通过一个箭头（=>）来定义函数，去掉了传统的 function 关键字：

const square = x => x * x; 

// 相当于 function(x) { return x * x; }
console.log(square(5)); // 25

2.2. 箭头函数的特点

• 简洁：去除了 function 关键字，函数体如果只有一行表达式，甚至可以省略花括号和 return 关键字。

• 没有 this：箭头函数不会创建自己的 this，它会从外部词法作用域（外层函数或全局作用域）继承 this，这点与传统函数不同。

function Person(name) {
  this.name = name;
  setTimeout(() => {
    console.log(this.name); // 使用箭头函数，`this` 会指向 Person 实例
  }, 1000);
}
const p = new Person('Alice'); // 输出 "Alice"

3 == 和 === 的区别

    3.1. ==（相等运算符）

== 比较两个值是否相等时，会进行类型转换。也就是说，如果两个值的类型不同，JavaScript 会尝试将它们转换为相同类型后再进行比较。

console.log(5 == '5'); // true，字符串 '5' 被转换为数字 5 后进行比较
console.log(0 == false); // true，false 被转换为数字 0

     3.2. ===（严格相等运算符）

=== 不会进行类型转换。只有在两个值的类型和值都相同的情况下，才会返回 true。

console.log(5 === '5'); // false，不同类型（一个是数字，一个是字符串）
console.log(0 === false); // false，不同类型（一个是数字，一个是布尔值）

4. !==（严格不等于）

!== 和 === 相反，表示“严格不等于”。它要求值和类型都不相等时才返回 true，否则返回 false。

console.log(5 !== '5'); // true，类型不同
console.log(0 !== false); // true，类型不同

5. !! 用法：将表达式转换为布尔值

!! 是一种常见的技巧，用于将一个值强制转换为布尔类型。在 JavaScript 中，!! 先将一个值转换为布尔值，然后再转换回布尔值。具体来说：

• 第一个 ! 将值转为布尔值并取反。
• 第二个 ! 再次将其反转回原来的布尔值。

这样做的好处是可以清楚地看到一个值是否“真”（truthy）或“假”（falsy）。

console.log(!!'hello'); // true，'hello' 是 truthy 值
console.log(!!0); // false，0 是 falsy 值
console.log(!!null); // false，null 是 falsy 值

6. ||（逻辑或运算符）

|| 是逻辑或运算符，用来判断两个值中是否有一个为 true。它的短路特性意味着，如果左侧的表达式为真，右侧的表达式就不会执行。

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false