实例详解JavaScript赋值运算符

在JavaScript使用的运算符中，有一个赋值运算符用于为变量赋值。

在本节中，我们将解释如何使用赋值运算符。

赋值运算符(=)

赋值运算符用于给变量赋值。

以下变量声明中使用的=赋值运算符。

let a = 5; // 变量声明
console.log(a); // 5

意思是将赋值运算符之后的操作数赋值给赋值运算符之前的变量。

变量 赋值运算符 值(操作数)

代入运算符与等号(等于)不同。

在这种情况下，您声明变量a为5，然后将6重新赋值给a。

let a = 5;
console.log(a = 6); // 6

要检查值 5 和 6 是否相等，请使用比较运算符，而不是赋值运算符。

let a = 5;
console.log(a === 6); // false

可以看到，赋值运算符=是用来赋值的，不是用来判断是否相等的。

解构赋值

传统赋值运算符是将值赋给一个变量。

但是，从ES2015开始，随着解构赋值这一功能的引入，可以同时为多个变量赋值。

解构赋值使用数组文字或对象文字。

对于数组，赋值运算符之前的操作数是数组文字。

// 创建数组
let array = [1, 2];

// 解构赋值。将数组的第0个值赋给a，将第1个值赋给b
let [a, b] = array;

console.log(a); // 1
console.log(b); // 2

如果不是解构赋值，而是用普通的方法写的话就会变成这样。

let array = [1, 2];

let a = array[0];
let b = array[1];

console.log(a); // 1
console.log(b); // 2

对于对象，赋值运算符前面的操作数是一个对象。

// 创建对象
let obj = {
  name: 'ciyawang',
  id: 1 
};

// 解构赋值。将右侧对象的属性值赋给左侧的键
let { name, id } = obj;

console.log(name); // "ciyawang"
console.log(id); // 1

如果你用正常的方式写这个就会这样。

let obj = {
  name: 'ciyawang',
  id: 1
};

let name = obj.name;
let id = obj.id;

console.log(name); // "ciyawang"
console.log(id); // 1

如果想一次对多个变量进行赋值，使用解构赋值比较方便。

多重赋值(链式赋值)

您可以将相同的值分配给多个变量。

这样的赋值称为多重赋值或链式赋值。

let a, b, c;

// 5 → c → b → 按a的顺序代入
a = b = c = 5;

console.log(a); // 5
console.log(b); // 5
console.log(c); // 5

多重赋值从右到左进行计算。

在这种情况下，首先计算5，然后将其赋给左边的变量，结果是所有变量都具有相同的值。

如果将其拆分为多行，则会出现以下情况。

let a, b, c;

c = 5;
b = c;
a = c;

console.log(a); // 5
console.log(b); // 5
console.log(c); // 5

可以对简单值使用多重赋值，但请记住，有时将其拆分为多行会更容易阅读。

组合赋值和算术运算符

赋值运算符可以与算术运算符结合使用。

例如，在将一个数字存储到一个变量中之后，您希望将新的结果存储到同一个变量中。

let a = 5;

a = a + 3;
a = a * 2;

console.log(a); // 16

将5赋值给变量a作为初始值后，将a加3，再将a乘以2的值赋值给变量a。

通过使用+=或*=，可以缩短写法。

let a = 5;

a += 3; // 与 a = a + 3 相同
a *= 2; // 与 a = a * 2 相同

console.log(a); // 16

这种简化的赋值运算符适用于算术运算符或位运算符的赋值运算符。

可以在该运算符后面描述赋值运算符。

以下是算术运算符和赋值运算符组合的表。

结语

在文章中我们学习了JavaScript赋值运算符，以下是本文要点。

• 赋值运算符是用于赋值的运算符

• 解构赋值可以同时给多个变量赋值

• 多重赋值按照从右到左的顺序进行赋值，给多个变量赋值单一值

• 有将赋值运算符和算术运算符组合起来的缩短写法法