前两篇文章大概把JavaScript的基础语法讲了一下,这篇文章主要讲讲ES6的核心语法。ES6的核心语法说实话其实有点多,我重点挑一些经常在项目中用到的来讲,其他一些我没怎么见过的就不讲了。
目录
1.变量和常量
变量(let 和 var)
var
let
常量(const)
总结
2.箭头函数
语法
示例
特性和行为
使用场景
1.变量和常量
变量(let
和 var
)
var
- 作用域:
var
声明的变量是函数作用域或全局作用域的。如果在函数内声明,则在整个函数内都可以访问;如果在函数外声明,则在全局范围内都可以访问。 - 提升:
var
声明的变量会被提升到函数或全局作用域的顶部,但不会初始化。这意味着你可以在声明之前访问它们,但值是undefined
。
function example() {console.log(x); // undefinedvar x = 10;console.log(x); // 10
}
example();
let
- 作用域:
let
声明的变量是块级作用域的。这意味着它们只在声明它们的块(如{}
包围的代码块)内有效。 - 提升:
let
声明的变量不会被提升到块的顶部,因此在声明之前访问它们会导致ReferenceError
。
function example() {console.log(x); // ReferenceError: x is not definedlet x = 10;console.log(x); // 10
}
example();
常量(const
)
- 作用域:
const
声明的变量是块级作用域的,这与let
类似。 - 不可变:
const
声明的变量必须在声明时初始化,并且不能重新赋值。注意,const
只保证变量名指向的内存地址不变,对于复杂类型(如对象和数组),其内容仍然可以修改。
function example() {const x = 10;console.log(x); // 10x = 20; // TypeError: Assignment to constant variable.
}
example();// 对于对象或数组
const obj = { a: 1 };
obj.a = 2; // 合法,修改对象属性
console.log(obj.a); // 2
总结
var
:函数作用域或全局作用域,变量提升,允许重复声明。let
:块级作用域,不提升,不能在同一作用域内重复声明。const
:块级作用域,不提升,必须初始化,不能重新赋值,适用于常量。
2.箭头函数
箭头函数是 ES6 中引入的一种更简洁的函数表达方式。它们具有一些独特的特性,使得它们在某些情况下比传统函数更方便使用。以下是箭头函数的详细介绍。
语法
箭头函数的基本语法如下:
(param1, param2, ..., paramN) => { statements }
如果只有一个参数,可以省略圆括号:
param => { statements }
如果函数体只有一条语句,并且需要返回值,可以省略大括号和 return
关键字:
(param1, param2, ..., paramN) => expression
示例
- 无参数的箭头函数:
const sayHello = () => {console.log("Hello!");
};
sayHello(); // 输出 "Hello!"
- 一个参数的箭头函数:
const square = x => x * 2;
console.log(square(4)); // 输出 8
- 多个参数的箭头函数:
const add = (a, b) => a + b;
console.log(add(3, 5)); // 输出 8
特性和行为
-
没有自己的
this
绑定:箭头函数不会创建自己的
this
,它会捕获其所在上下文的this
值,作为自己的this
值。function Person() {this.age = 0;setInterval(() => {this.age++;console.log(this.age);}, 1000); }const p = new Person();
在上面的示例中,箭头函数中的
this
绑定到Person
实例,因此可以正确访问this.age
。 -
简化回调函数:
const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); console.log(doubled); // 输出 [2, 4, 6, 8]