😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~
🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志
🎐 个人CSND主页——Micro麦可乐的博客
🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战
🌺《RabbitMQ》本专栏主要介绍使用JAVA开发RabbitMQ的系列教程,从基础知识到项目实战
🌸《设计模式》专栏以实际的生活场景为案例进行讲解,让大家对设计模式有一个更清晰的理解
💕《Jenkins实战》专栏主要介绍Jenkins+Docker+Git+Maven的实战教程,让你快速掌握项目CI/CD,是2024年最新的实战教程
如果文章能够给大家带来一定的帮助!欢迎关注、评论互动~
【前端技术成长之路】 ES6介绍及语法说明
- ES6介绍
- 1、变量声明
- 1.1 let关键字
- 1.2 const关键字
- 2、箭头函数
- 2.1 没有自己的 this 绑定
- 2.2 没有 arguments 对象
- 2.3 不能用作构造函数
- 2.4 没有 prototype 属性
- 3、模板字符串
- 4、解构赋值
- 4.1 数组解构
- 4.2 对象解构
- 5、默认参数
- 6、扩展运算符
- 6.1 数组展开
- 6.2 对象展开
- 6.3 字符串展开
- 7、模块化
- 7.1 导出模块
- 7.2 导入模块
- 8、Promise
- 9、生成器函数
- 总结
ES6介绍
ECMAScript 6(ES6),又称 ECMAScript 2015,是 JavaScript 的一个重要版本,引入了许多新特性,使得开发者能够编写更加简洁、优雅和高效的代码。本文将介绍 ES6 的一些关键特性,并通过代码示例展示其用法。
1、变量声明
在 ES6
之前,JavaScript
只有 var
用于变量声明。ES6
引入了 let
和 const
,它们提供了块级作用域和不可变的变量。
1.1 let关键字
let关键字用于声明可变的变量,它的作用范围限定在当前的块级作用域内,包括花括号({})内部的任何代码块。在同一个作用域内,不能重复声明同名的let变量。
在以前使用 var
声明变量会存在:越域
、重复声明
、变量提升
等问题,我们来看看代码演示
跨域问题
// var 越域的问题
if (true) {var x = 10;
}
console.log(x); // 输出 :10,变量 x 泄露到了全局作用域// let 的块级作用域
if (true) {let y = 20;
}
console.log(y); // ReferenceError: y is not defined
重复声明
// var 可以声明多次
// let 只能声明一次
var a = 1
var a = 2
let b = 3
let b = 4
console.log(a) // 2
console.log(b) // Identifier 'n' has already been declared
变量提升
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;
1.2 const关键字
const
关键字用于声明常量,它的作用范围也是在当前的块级作用域内,const
声明的变量是不可变的
// 1. 声明之后不允许改变
// 2. 一但声明必须初始化,否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
2、箭头函数
学过 java 的小伙伴一定知道 lambda
表达式,与之一样箭头函数提供了一种更简洁的函数定义方式,并且不会绑定自己的 this
// 传统函数
function sum(a, b) {return a + b;
}// 箭头函数
const sum = (a, b) => a + b;console.log(sum(2, 3)); // 5// 只有一个参数
const square = x => x * x;
console.log(square(4)); // 16// 没有参数
const greet = () => 'Hello, World!';
console.log(greet()); // Hello, World!
使用箭头函数需要注意以下几点:
2.1 没有自己的 this 绑定
箭头函数没有自己的 this
绑定,它会捕获其所在上下文的 this
值。对于处理回调函数中的 this 问题非常有用
function Person() {this.age = 0;// 传统函数需要额外绑定 thissetInterval(function growUp() {this.age++;}.bind(this), 1000);
}function Person() {this.age = 0;// 箭头函数自动捕获外部 thissetInterval(() => {this.age++;}, 1000);
}
2.2 没有 arguments 对象
箭头函数没有 arguments
对象,但可以使用 rest
参数(...args
)代替
const showArgs = (...args) => {console.log(args);
};showArgs(1, 2, 3); // [1, 2, 3]
2.3 不能用作构造函数
箭头函数不能使用 new
关键字来实例化对象,因为它没有 [[Construct]]
方法
const Foo = () => {};
const bar = new Foo(); // TypeError: Foo is not a constructor
2.4 没有 prototype 属性
箭头函数没有 prototype
属性,因此不能用于定义类的方法。
const Foo = () => {};
console.log(Foo.prototype); // undefined
3、模板字符串
模板字符串使用反引号定义,可以嵌入变量和表达式。使用 ${}
语法,在模板字符串中嵌入表达式或变量
const name = 'John';
const age = 25;// 普通字符串拼接
let info = "你好,我的名字是:【"+name+"】,年龄是:【"+age+"】"
console.log(info);// 模板字符串的写法
let info = `你好,我的名字是:${name},年龄是:${age}`
console.log(info);
4、解构赋值
解构赋值允许从数组或对象中提取值,并赋给变量。
4.1 数组解构
let arr = [1, 2, 3];
//以前获取 通过使用角标
console.log(arr[0]); // 1const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
4.2 对象解构
const person = {name: "jack",age: 21,hobby: ['唱', '跳', 'rap']
}
// 解构表达式获取值,将 person 里面每一个属性和左边对应赋值
const {name, age, hobby} = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.hobby;// 可以分别打印
console.log(name);
console.log(age);
console.log(hobby);//扩展:如果想要将 name 的值赋值给其他变量,可以如下,nn 是新的变量名
const {name: nn, age, hobby} = person;
console.log(nn);
console.log(age);
console.log(hobby);
5、默认参数
默认参数允许在函数定义时为参数指定默认值,这样可以简化函数的调用,避免出现undefined
的情况
function greet(name = 'Guest') {return `Hello, ${name}!`;
}console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!//还可以使用表达式
function multiply(a, b = 2 * a) {return a * b;
}console.log(multiply(5)); // 输出:50
console.log(multiply(5,2)); // 输出:10
6、扩展运算符
展开运算符(...
)可以用来展开数组或对象,主要用于将一个可迭代对象(如数组、字符串或类数组对象)展开成多个元素
6.1 数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]
6.2 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
6.3 字符串展开
const str = 'hello';
const chars = [...str];
console.log(chars); // 输出:['h', 'e', 'l', 'l', 'o']
7、模块化
ES6 模块允许将代码分割成小块,并通过 import
和 export
进行组织和重用,
7.1 导出模块
使用 export
暴露方法或变量等
// 假设我们有一个名为 math.js 的模块
export function add(a, b) {return a + b;
}export const PI = 3.14;
7.2 导入模块
我们可以使用 import
关键字导入 math.js 模块中的函数和变量
// main.js
import { add, PI } from './math.js';console.log(add(2, 3)); // 5
console.log(PI); // 3.14
8、Promise
Promise
是一种用于处理异步操作的对象,类似Java中的 CompletableFuture
。它可以将异步操作封装成一个 Promise
对象,通过 then()
方法来添加回调函数,当异步操作完成时自动执行回调函数。
const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success!');}, 1000);
});promise.then((message) => {console.log(message); // Success!
}).catch((error) => {console.error(error);
});
使用 Promise
对象可以使异步操作的代码更加清晰、简洁,并且可以避免回调地狱的问题。
9、生成器函数
生成器函数使用 function*
语法,可以通过 yield 关键字多次返回值
function* generator() {yield 1;yield 2;yield 3;
}const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
定义了一个生成器函数 myGenerator,它包含三个 yield 表达式。我们通过调用该函数得到一个迭代器对象 generator,每次调用 generator.next() 都会执行一次函数体,并返回一个包含 value 和 done 两个属性的对象
总结
ES6
引入了许多新特性和改进,使 JavaScript
更加现代化和强大。通过使用这些特性,开发者可以编写出更加简洁、高效和可维护的代码。这种变化和改进不仅提高了代码的可读性和可维护性,也使得开发者能够更轻松地实现复杂的功能。通过学习和掌握这些新特性,您将能够更加高效地编写 JavaScript 代码,适应现代 web 开发的需求。
最后希望本文对小伙伴们了解 ES6 及其语法有所帮助~ 欢迎一起评论交流!