JavaScript 核心基础:变量提升、数据类型与对象字面量详解
本文详解 JavaScript 核心基础,涵盖变量提升机制、let/const 的暂时性死区、六种基本数据类型及对象类型。深入解析数值与字符串在加法与减法运算中的隐式转换规则,以及使用单目运算符转换字符串的方法。同时介绍 ES2015 对象字面量的新特性,包括原型设置、简写语法、方法定义和计算属性名,并列举字符串中的特殊转义字符。
JavaScript 变量声明与提升机制
声明(Declarations)
在布尔类型环境中,undefined 值会被视为 false。
在数值类型环境中,undefined 值会转换为 NaN。
对未初始化的变量求值时,null 在数值类型环境中被视为 0,而在布尔类型环境中被视为 false。
JavaScript 中的变量声明存在“提升”现象,即变量声明会被移动到函数或语句块的顶部。提升后的变量初始值为 undefined。因此,即使变量声明和初始化位于代码后续位置,提前引用该变量仍会返回 undefined。
鉴于变量提升机制,建议将函数内的所有 var 声明尽量放置在函数顶部,以提高代码可读性和清晰度。
在 ECMAScript 2015 标准中,let 和 const 声明不会将变量提升到代码块顶部。在声明之前访问这些变量会抛出 ReferenceError 错误,该区域被称为“暂时性死区”,直到变量被正式声明。
对于函数,只有函数声明会被提升到顶部,函数表达式不会被提升。
/* 函数声明 */
foo(); // "bar"
function foo() {
console.log("bar");
}
/* 函数表达式 表达式定义的函数,成为匿名函数。匿名函数没有函数提升。*/
baz(); // TypeError: baz is not a function
//此时的"baz"相当于一个声明的变量,类型为undefined。
由于baz只是相当于一个变量,因此浏览器认为"baz()"不是一个函数。
var baz = function() {
console.log("bar2");
};
全局对象为 window。你可以通过指定 window 或 frame 的名称,从一个窗口或框架访问另一个窗口或框架中声明的变量。例如,若文档中声明了名为 phoneNumber 的变量,你可以在子框架中使用 parent.phoneNumber 来引用它。
常量定义与作用域限制
常量(Constants)
在同一作用域中,不能使用与变量或函数相同的名称来命名常量。然而,对象属性不受此保护,因此以下语句执行无误:
const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";
JavaScript 数据类型详解
数据结构和类型
JavaScript 有六种基本数据类型以及 Object 对象。
- Boolean:布尔值,true 和 false。
- null:表示空值的特殊关键字。JavaScript 是大小写敏感的,因此 null 与 Null、NULL 或其他变量完全不同。
- undefined:变量未定义时的属性。
- Number:表示数字,例如 42 或者 3.14159。
- String:表示字符串,例如”Howdy”。
- Symbol(在 ECMAScript 6 中新添加的类型):一种数据类型,其实例是唯一且不可改变的。
Objects 和 functions 是本语言的其他两个基本要素。你可以将对象视为存放值的命名容器,而将函数视为应用程序能够执行的过程(procedures)。
数值与字符串的运算及转换
在涉及加法运算符(+)的数字和字符串表达式中,JavaScript 会将数字值转换为字符串。
x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"
在涉及其他运算符(如减号'-‘)时,JavaScript 语言不会把数字变为字符串。例如:
"37" - 7 // 30
"37" + 7 // "377"
字符串转换为数字(converting strings to numbers)
parseInt()和parseFloat()
将字符串转换为数字的另一种方法是使用单目加法运算符。
"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2 // 注:加入括号为清楚起见,不是必需的。
对象属性访问与 ES2015 字面量扩展
对象属性名字可以是任意字符串,包括空串。如果对象属性名字不是合法的 JavaScript 标识符,它必须用””包裹。属性的名字不合法,那么便不能用.访问属性值,而是通过类数组标记(“[]”)访问和赋值。
var unusualPropertyNames = {
"": "An empty string",
"!": "Bang!"
}
console.log(unusualPropertyNames.""); // 语法错误: Unexpected string
console.log(unusualPropertyNames[""]); // An empty string
console.log(unusualPropertyNames.!); // 语法错误: Unexpected token !
console.log(unusualPropertyNames["!"]); // Bang!
注意:
var foo = {a: "alpha", 2: "two"};
console.log(foo.a); // alpha
console.log(foo[2]); // two
//console.log(foo.2); // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo["a"]); // alpha
console.log(foo["2"]); // two
在 ES2015 中,对象字面值扩展支持在创建时设置原型、简写 foo:foo 分配、定义方法、加工父函数(super calls)以及计算属性名(动态)。总之,这些也带来了对象字面量和类声明紧密联系起来,让基于对象的设计得益于一些同样的便利。
var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler'
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
字符串中的特殊字符与转义
能在 JavaScript 的字符串中使用的···特殊字符···
转义字符
// 引号转义
var quote = "He read /"The Cremation of Sam McGee/" by R.W. Service.";
// 转义反斜线
var home = "c://temp";
// 转义换行 一条语句拆成多行书写
var str = "this string /
is broken /
across multiple/
lines."
console.log(str); // this string is broken across multiplelines.
// Javascript没有“heredoc”语法,但可以用行末的换行符转义和转义的换行来近似实现
var poem =
"Roses are red,/n/
Violets are blue./n/
I'm schizophrenic,/n/
And so am I."
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
