1.变量声明
//声明后再初始化
let 变量名;
变量名 = 值;
//声明时同时初始化
let 变量名 = 值;
2.变量分类
2.1全局变量
名称 | 修饰符 |
全局变量 | —————— |
2.2成员变量
数据属性、静态字段、实例字段声明时,都不需要添加 let
或 const
关键字。
名称 | 修饰符 |
静态字段(类) | static |
实例字段(类) | —————— |
数据属性(对象字面量) | —————— |
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)操作符
见非操作符相关章节。
原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/javascriptlang/4734.html