ES6 部分新特性使用

简介: ES6 部分新特性使用

箭头函数

// 箭头函数定义
const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出3
// 箭头函数表达式
const nums = [1, 2, 3];
const sum = nums.reduce((total, num) => total + num, 0);
console.log(sum); // 输出6

模板字符串

// 使用模板字符串拼接字符串
const name = 'Alice';
const age = 20;
console.log(`Name: ${name}, Age: ${age}`); // 输出 Name: Alice, Age: 20

解构赋值

// 从数组中解构赋值
const [x, y] = [10, 20];
console.log(x); // 输出10
console.log(y); // 输出20
// 从对象中解构赋值
const { name, age } = { name: 'Alice', age: 20 };
console.log(name); // 输出Alice
console.log(age); // 输出20

默认参数

// 设置默认参数
function greet(name = 'John') {
console.log(`Hello, ${name}`);
}
greet(); // 输出 Hello, John
greet('Alice'); // 输出 Hello, Alice

块级作用域变量(使用letconst

// 使用let定义块级作用域变量
if (true) {
let x = 10;
console.log(x); // 输出10
} else {
console.log(x); // ReferenceError: x is not defined
}

类(Class)定义(扩展了ES5的类语法)

class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
const person = new Person('Alice');
person.greet(); // 输出 Hello, Alice

模块化:

// 导出模块
export const PI = 3.14159;
export function area(radius) {
return PI * radius * radius;
}
// 导入模块
import { PI, area } from './math';
console.log(PI); // 输出3.14159
console.log(area(5)); // 输出78.53981633974483

解构赋值:

let [x, y] = [10, 20];
console.log(x); // 输出10
console.log(y); // 输出20
let { name, age } = { name: 'Alice', age: 20 };
console.log(name); // 输出Alice
console.log(age); // 输出20

Promise:

let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Success!'), 1000);
});
promise.then(result => console.log(result)); // 输出Success!(1秒后)
相关文章
|
2月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
28天前
|
JavaScript 前端开发 开发者
es6的新特性
es6的新特性
20 7
|
9月前
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
9月前
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
32 0
|
8月前
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
9月前
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
23 0
|
9月前
|
Java
es6中简单常用的新特性
es6中简单常用的新特性
36 0
|
10月前
|
前端开发 JavaScript
es6的8条新特性总结
es6的8条新特性总结
109 0
|
前端开发 JavaScript 网络架构
ES6的新特性
const 和 let let: 声明在代码块内有效的变量。
109 0
es6的新特性使用
使用 命令有: export、import 、export default
87 0