1.5JavaScript语言的变量(Variable)

1.变量声明

//声明后再初始化
let 变量名;
变量名 = 值;

//声明时同时初始化
let 变量名 = 值;

2.变量分类

2.1全局变量

2.2成员变量

数据属性、静态字段、实例字段声明时，都不需要添加 let 或 const 关键字。

2.3局部变量

3.赋值方式

当我们将一个原始类型的值赋给变量时，我们是将原始类型的值本身存储到了变量中。

当我们将一个引用类型的值赋给变量时，我们并没有将对象本身存储到此变量中，而是在此变量中存储了一个指向那个对象的引用。

4.复制值

通过变量将一个原始类型的值赋给另一个变量时，原始类型的值会被复制到新变量的位置。此时，两个变量是独立的，互不干扰。

let num1 = 5;
let num2 = num1;

通过变量将一个对象赋给另一个变量时，对象的引用会被复制到新变量的位置，因为两个引用同时都指向同一个对象，所以一个对象上面的变化会在另一个对象上反应出来。

let obj1 = new Object();
let obj2 = obj1;
obj1.name = "张三";
console.log(obj2.name);  // 张三

5.解构(Destructuring)赋值

解构(Destructuring)赋值用于在一条语句中实现给一个或多个变量或常量的赋值操作。

数组解构赋值是按顺序赋值，而对象解构赋值是按名称赋值。

5.1数组解构赋值

等号左侧是由变量名组成的数组字面量，等号右侧就是普通数组字面量。

//左侧数量等于右侧数量
//相当于let a=10, b=20;
let [a, b] = [10, 20];

//左侧数量小于右侧数量
//忽略右侧多余元素
const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

//忽略中间的元素
const x = [1, 2, 3, 4, 5];
const [y,,z] = x;
console.log(y); // 1
console.log(z); // 3

//左侧数量大于右侧数量
//多余的变量会被赋予undefined值。
const foo = ["one", "two"];

const [red, yellow, green, blue] = foo;
console.log(red);     // "one"
console.log(yellow);  // "two"
console.log(green);   // undefined
console.log(blue);    // undefined

//默认值，相当于const a = 1;
const [a = 1] = [];

//给已声明的变量赋值时，不需要在赋值表达式左侧添加let关键字。
let a, b;
[a, b] = [10, 20];
console.log(a);  // 10
console.log(b);  // 20

实际上，等号左侧内的变量名可以是任何可赋值的标识符，比如对象字面量的属性名。

//给对象属性解构赋值
let user = {};
[user.name, user.age] = ["张三", 28];
console.log(user.name); // 张三
console.log(user.age);  // 28

实际上，等号右侧可以是任何可迭代(Iterable)类型。

let [a, b, c] = "123";
console.log(a,b,c); // 1 2 3

let [one, two, three] = new Set([1, 2, 3]);
console.log(one,two,three); // 1 2 3

等号右侧的数组的元素还可以是函数。

//命名函数
const [a, b] = [1, function c() {
  return "hello";
}];

//匿名函数
const [a, b] = [1, function () {
  return "hello";
}];

//箭头函数
const [a, b] = [1, () => {
  return "hello";
}];

//都输出一样
b(); // "hello"

5.2对象字面量解构赋值

5.2.1用于变量赋值

等号左侧是由变量名组成的对象字面量，等号右侧就是普通对象字面量。

//左侧数量等于右侧数量
let person = {
  name: '张三',
  age: 28
};

//属性名与变量名不一样
//前面name是右侧person对象的属性名，后面personName是变量名
let { name: personName, age: personAge } = person;

console.log(personName); // 张三
console.log(personAge);  // 28

//属性名与变量名一样
//前面name是右侧person对象的属性名，后面name是变量名
let { name: name, age: age } = person;
//简写
let { name, age } = person;

console.log(name); // 张三
console.log(age);  // 28

//左侧数量小于右侧数量
//忽略右侧多余属性
let person = {
  name: '张三',
  age: 28
};

let { name } = person;

console.log(name); // 张三
console.log(age);  // 抛出错误

//左侧数量大于右侧数量
//多余的变量会被赋予undefined。
let person = {
  name: '张三',
  age: 28
};

let { name, age, job } = person;

console.log(name); // 张三
console.log(age);  // 28
console.log(job);  // undefined

//默认值
let person = {
  name: '张三',
  age: 28
};

let { name, age, job='Software engineer' } = person;

console.log(name); // 张三
console.log(age);  // 28
console.log(job);  // Software engineer

//给已声明的变量赋值时，赋值表达式必须包含在一对圆括号内。
let personName, personAge;

let person = {
  name: '张三',
  age: 28
};

//前面name是右侧person对象的属性名，后面personName是变量名
//注意：这里没有let、const关键字。
({ name: personName, age: personAge } = person);

console.log(personName); // 张三
console.log(personAge);  // 28

实际上，等号左侧内的变量名可以是任何可赋值的标识符，比如数组的索引。

//给数组的索引解构赋值
let arr = [];
({ a: arr[0], b: arr[1] } = { a: 1, b: 2 });
console.log(arr); // Array [ 1, 2 ]

等号右侧的数组的元素还可以是函数。

//命名函数
const { a, b } = { a: 1, b: function c() {
  return "hello";
}};

//匿名函数
const { a, b } = { a: 1, b: function () {
  return "hello";
}};

//箭头函数
const { a, b } = { a: 1, b: () => {
  return "hello";
}};

//都输出一样
b(); // "hello"

5.2.2用于函数参数

对象字面量解构赋值语法还可以用于函数参数。

let person = {
  name: '张三',
  age: 28
};

function printPerson( { name, age } ) {
  console.log(name, age);
}

function printPerson2( { name: personName, age: personAge } ) {
  console.log(personName, personAge);
}

printPerson(person);  // 张三 28

printPerson2(person);  // 张三 28

//默认值
function drawChart({
  size = "big",
  coords = { x: 0, y: 0 },
  radius = 25
}) {
  console.log(size, coords, radius);
}

//将使用size参数的默认值"big"
drawChart({
  coords: { x: 18, y: 30 },
  radius: 30
});

//输出：big Object { x: 18, y: 30 } 30

5.3...剩余(rest)操作符和...扩展(spread)操作符

见非操作符相关章节。