变量与常量
参考文献:
https://chinese.freecodecamp.org/news/javascript-var-let-and-const/
变量
var
使用
传统变量方式, 已淘汰或不建议使用作用域
可以在全局范围声明或函数/局部范围内声明。
- 当在最外层函数的外部声明var变量时,作用域是全局的。 这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。
- 当在函数中声明var时,作用域是局部的。 这意味着它只能在函数内访问。
例如:
tester是全局范围的,因为它存在于函数外部,而hello是函数范围的。 因此,我们无法在函数外部访问变量hello。var tester = 'hey hi';
function newFunction() {
var hello = 'hello';
};
console.log(hello); // error: hello is not defined
- 变量可以重新声明和修改
var greeter = 'hey hi';
var greeter = 'say Hello instead';
var greeter = 'hey hi';
greeter = 'say Hello instead';
- 变量提升
变量提升是 JavaScript 的一种机制:在执行代码之前,变量和函数声明会移至其作用域的顶部。
var声明的变量会被提升到其作用域的顶部,并使用 undefined 值对其进行初始化.
上述代码被解释成console.log(greeter);
var greeter = 'say hello';
var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';
let
使用
推荐使用作用域
let 是块级作用域
块是由 {} 界定的代码块,大括号中有一个块.大括号内的任何内容都包含在一个块级作用域中.
因此,在带有let的块中声明的变量仅可在该块中使用。
例如:
let greeting = 'say Hi';
let times = 4;
if (times > 3) {
let hello = 'say Hello instead';
console.log(hello); // "say Hello instead"
}
console.log(hello); // hello is not defined
- 可以被修改但是不能被重新声明
let greeting = 'say Hi';
let greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared
但是,如果在不同的作用域中定义了相同的变量,则不会有错误:
let greeting = 'say Hi';
if (true) {
let greeting = 'say Hello instead';
console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"
- 变量提升
用let声明的变量会被提升到其作用域的顶部,不会对值进行初始化。
因此,如果你尝试在声明前使用let变量,则会收到Reference Error。
常量
const
- 作用域
像let声明一样,const声明只能在声明它们的块级作用域中访问 - 不能被修改并且不能被重新声明
例如:
orconst greeting = 'say Hi';
greeting = 'say Hello instead'; // error: Assignment to constant variable.
const greeting = 'say Hi';
const greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared
因此,每个const声明都必须在声明时进行初始化。
- 变量提升
const声明也被提升到顶部,但是没有初始化。
数据类型
原始类型
- 数值:整数,小数
var x = 5;
- 字符串,使用引号(单引号或双引号)当定界符
var x = "John";
- 布尔值: false, true
var x=true; var y=false;
- undefined: 未定义
- null : 空
- typeof: 专用于原始类型的检测
console.log(typeof 100);
引用类型/对象
函数
function sum(a, b, c) {
return a+b+c;
}
- instanceof: 专用于引用类型的类型检测
console.log(hello instanceof Function);
对象
const person = {
name: "zhulaoshi",
gender: "male",
job: "lecture",
getName: function () {
return this.name;
},
};
- 可以用console.dir(person);
数组
const colors = ["red", "green", "blue"];
- 可以用console.table(colors);
数据类型总结
数组与对象的区别在于键名上: 从0开始递增的正整数,是有序数据的集合
对象使用的字符串做为键名, 与顺序无关, 可以无序的数据集合
函数参数与返回值
必选参数
let sum = function (a, b) {
return a + b;
};
console.log(sum());
会报错,因为没有传参数
可选参数
sum = function (a = 1, b = 2) {
return a + b;
};
console.log(sum(40));
不会报错,因为参数有初始值
归并参数
当有许多参数时,可以用归并参数打包处理
例如计算几个数相加sum = function (a, b, c, d, e) {
return a + b + c + d + e;
};
sum = function (...arr) {
return arr.reduce((p, c) => p + c);
};
let a1 = [1, 2, 3, 4, 5];
console.log(sum(...a1));
… : 用在函数声明参数中,就是参数打包功能,rest
… : 用在函数调用的参数中, 就是扩展,spread
返回值
函数都是单值返回,如果返回多个值,返回数组或对象就可以
例如
`function getProduct() {
return [123, "手机", 6789, "HUAWEI"];
}`
function getProduct() {
return { id: 123, "my name": "手机", price: 6789, brand: "HUAWEI" };
}
匿名函数与箭头函数
- 只有匿名函数才可以使用箭头函数进行简化
let sum = function (a, b) {
return a + b;
};
改为箭头函数sum = (a, b) => {
return a + b;
};
- 如果参数大于一个,那么参数的圆括号不能省
- 如果函数体只有一条return语句或只有一条语句,则大括号也可以不用了
- 如果没有参数,参数的圆括号不能省
- 箭头函数没有自己的this,不能用来当构造函数