九个超级好用的Javascript技巧

Javascript是一门非常强大的语言，但是也有它的一些不足之处。在长时间的开发过程中，我们掌握了一些技巧，能够让我们更好地利用这门语言。以下是九个超级好用的Javascript技巧，让你的代码变得更精简、易读、高效。

把布尔值用!!转化

在Javascript中，我们可以通过使用两个非符号将任何值转化为布尔值。例如：

const myString = "hello world";
const myBoolean = !!myString;
console.log(myBoolean); // true

上面的代码将一个字符串值转化为一个布尔值，将转换后的布尔值存储在myBoolean变量中。

使用三元运算符（Ternary Operator）实现条件表达式

三元运算符是一种快捷、简短的条件表达式写法。类似于if/else块，它可以在满足条件时返回一个值，否则返回另一个值。更简单的说，就相当于让if/else块的缩写。

const myNumber = 10;
const result = myNumber > 5 ? "Greater than 5" : "Less than or equal to 5";
console.log(result); // "Greater than 5"

在上面的例子中，当myNumber大于5时，返回字符串“Greater than 5”；否则，返回字符串“Less than or equal to 5”。

使用解构赋值交换变量的值

在Javascript中，我们可以使用解构赋值来交换变量的值。这种方法非常快捷高效，而且逻辑非常清晰。

let a = "world";
let b = "hello";
[a, b] = [b, a];
console.log(a, b); // "hello", "world"

在上面的代码中，我们首先将字符串“world”存储在变量a中，将字符串“hello”存储在变量b中。然后，我们使用解构赋值将变量a和变量b的值交换。最后，我们输出变量a和b，结果是"hello", "world"。

使用数组展开语法

数组展开语法是一种非常方便的方法，可以在插入数组的同时将数组展开为单个元素。这种方法非常适用于给函数传递一组参数。

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

在上面的代码中，我们使用“...”语法展开数组numbers，然后将每个元素分别输出。

使用默认参数

在Javascript中，我们可以设置默认参数值来避免不必要的错误或空值。在调用函数时，如果没有为参数提供值，则默认参数值将被用于该参数。

function greet(name = "world") {
  console.log(`Hello, ${name}!`);
}
greet(); // "Hello, world!"
greet("John"); // "Hello, John!"

在上面的代码中，我们定义了一个名为greet的函数，并将参数name的默认值设置为“world”。在第一个调用中，我们未提供参数，因此默认值“world”被用于该参数。在第二个调用中，我们提供了名为“John”的参数，因此该参数的值是“John”。

使用Object.assign()方法合并对象

在Javascript中，我们可以使用Object.assign方法将两个对象合并为一个。

const object1 = {
  name: "John",
  age: 25
};
const object2 = {
  location: "New York",
  profession: "Developer"
};
const combinedObject = Object.assign({}, object1, object2);
console.log(combinedObject);
// {name: "John", age: 25, location: "New York", profession: "Developer"}

在上面的代码中，我们首先定义两个对象object1和object2，它们各自包含不同的属性。然后，我们使用Object.assign方法将两个对象合并为一个新的对象combinedObject。最后，我们将打印出combinedObject的内容，就会发现把两个对象合并了。

使用模板字面量

模板字面量是一种非常强大的方法，可以让我们更容易地组合字符串和变量。使用模板字面量，我们可以轻松地在字符串中插入变量值，而无需像以前那样输入几个字符：+变量+。

const name = "John";
const message = `Hello, ${name}!`;
console.log(message); // "Hello, John!"

在上面的代码中，我们定义了名为name的变量，并将其值设置为“John”。然后，我们使用模板字面量创建变量message，将变量name插入到字符串中。最后，我们输出变量message。

获取对象中的唯一属性

在Javascript中，我们可以使用数组map()方法和Set对象来获取对象中唯一的值。

const numbers = [
  { value: 1 },
  { value: 2 },
  { value: 3 },
  { value: 2 },
  { value: 1 }
];
const uniqueValues = [...new Set(numbers.map(number => number.value))];
console.log(uniqueValues); // [1, 2, 3]

在上面的代码中，我们定义了一个名为numbers的数组，该数组包含具有不同值的对象。然后，我们使用map()方法从每个对象中选择值，然后使用Set对象仅保留唯一值。最后，我们将结果输出，结果就是[1, 2, 3]。

使用解构赋值简化函数参数

在Javascript中，我们可以使用解构赋值和默认参数来简化函数参数，使函数更清晰、易读。

function sendMessage({ recipient, message = "Hello" }) {
  console.log(`To: ${recipient}`);
  console.log(`Message: ${message}`);
}
sendMessage({ recipient: "John" }); 
// To: John
// Message: Hello
sendMessage({ recipient: "Sarah", message: "Hi there" });
// To: Sarah
// Message: Hi there

在上面的代码中，我们定义了名为sendMessage的函数，并将其参数使用解构赋值进行简化。我们使用默认参数来设置默认的消息文本，如果调用方不提供。在两个函数调用中，我们只提供recipient参数，因为有默认值的message参数被省略了。

本文链接：http://task.lmcjl.com/news/15739.html