ES6-day03
发布人:shili8
发布时间:2025-02-11 21:31
阅读次数:0
**ES6-Day03**
###1. let 和 const在 ES6 中,引入了 `let` 和 `const` 关键字来声明变量。这些关键字与传统的 `var` 有一些不同之处。
####1.1 let`let` 声明的变量与 `var` 类似,但有以下几个区别:
* `let` 只在块级作用域内有效,而 `var` 在函数作用域内有效。
* `let` 不会被提升到函数作用域的顶部,除非使用 `let` 声明的变量是在函数体内。
javascript// var 的提升console.log(x); // undefinedvar x =10; // let 的块级作用域{ console.log(y); // ReferenceError: Cannot access 'y' before initialization let y =20; }
####1.2 const`const` 声明的变量是只读的,不能被重新赋值。它也会在块级作用域内有效。
javascript// const 的只读性const z =30; z =40; // TypeError: Assignment to constant variable.
###2. 解构赋值解构赋值是一种将数组或对象的元素直接赋给变量的方式。它可以简化代码,使其更易读和理解。
####2.1 数组解构
javascript// 数组解构let [a, b, c] = [10,20,30]; console.log(a); //10console.log(b); //20console.log(c); //30
####2.2 对象解构
javascript// 对象解构let { name: n, age: a } = { name: 'John', age:25 }; console.log(n); // Johnconsole.log(a); //25
###3. 函数参数的默认值在 ES6 中,可以为函数参数指定默认值。这样可以避免传递空值或 undefined 值。
javascript// 函数参数的默认值function greet(name = 'World') { console.log(`Hello, ${name}!`); } greet(); // Hello, World!
###4. 箭头函数箭头函数是一种更简洁的函数定义方式。它可以用来定义小型函数,尤其是在回调函数中。
####4.1 箭头函数的基本语法
javascript// 箭头函数的基本语法let add = (a, b) => a + b; console.log(add(10,20)); //30
####4.2 箭头函数的 this 绑定箭头函数的 `this` 绑定与普通函数不同。它会继承外层作用域的 `this` 值。
javascript// 箭头函数的 this 绑定let obj = { name: 'John', sayHello: () => console.log(`Hello, my name is ${this.name}.`) }; obj.sayHello(); // Hello, my name is undefined.
###5. PromisePromise 是一种用于处理异步操作的对象。它可以简化代码,使其更易读和理解。
####5.1 Promise 的基本语法
javascript// Promise 的基本语法let promise = new Promise((resolve, reject) => { // 异步操作 resolve('Hello, World!'); }); promise.then((value) => console.log(value)); // Hello, World!
####5.2 Promise 链式调用Promise 支持链式调用,允许将多个异步操作连接起来。
javascript// Promise 链式调用let promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve('Hello'),1000); }); promise1.then((value) => { console.log(value); // Hello return 'World'; }).then((value) => console.log(value)); // World
###6. async/awaitasync/await 是一种用于处理异步操作的语法糖。它可以简化代码,使其更易读和理解。
####6.1 async/await 的基本语法
javascript// async/await 的基本语法let asyncFunction = async () => { let value = await Promise.resolve('Hello, World!'); console.log(value); // Hello, World! }; asyncFunction();
####6.2 async/await 的错误处理async/await 支持 try-catch 块来捕捉异步操作中的错误。
javascript// async/await 的错误处理let asyncFunction = async () => { try { let value = await Promise.reject('Error!'); console.log(value); // Error! } catch (error) { console.error(error); // Error! } }; asyncFunction();
###7. Set 和 MapSet 和 Map 是 ES6 中的集合数据结构。它们可以用于存储和操作唯一值或键值对。
####7.1 Set 的基本语法
javascript// Set 的基本语法let set = new Set([10,20,30]); console.log(set); // Set {10,20,30 }
####7.2 Map 的基本语法
javascript// Map 的基本语法let map = new Map([[10, 'a'], [20, 'b']]); console.log(map); // Map {10 => 'a',20 => 'b' }
###8. ProxyProxy 是 ES6 中的代理对象。它可以用于拦截和修改原始对象的行为。
####8.1 Proxy 的基本语法
javascript// Proxy 的基本语法let target = { name: 'John', age:25 }; let proxy = new Proxy(target, { get: (target, property) => console.log(`Getting ${property}...`), }); proxy.name; // Getting name...
####8.2 Proxy 的陷阱Proxy 可以用于拦截和修改原始对象的行为,但也可能导致一些陷阱。
javascript// Proxy 的陷阱let target = { name: 'John', age:25 }; let proxy = new Proxy(target, { get: (target, property) => console.log(`Getting ${property}...`), }); proxy.name = 'Jane'; // Error!
###9. ReflectReflect 是 ES6 中的反射对象。它可以用于拦截和修改原始对象的行为。
####9.1 Reflect 的基本语法
javascript// Reflect 的基本语法let target = { name: 'John', age:25 }; let reflect = new Proxy(target, { get: (target, property) => console.log(`Getting ${property}...`), }); reflect.get(target, 'name'); // Getting name...
####9.2 Reflect 的陷阱Reflect 可以用于拦截和修改原始对象的行为,但也可能导致一些陷阱。
javascript// Reflect 的陷阱let target = { name: 'John', age:25 }; let reflect = new Proxy(target, { get: (target, property) => console.log(`Getting ${property}...`), }); reflect.set(target, 'name', 'Jane'); // Error!
###10. WeakMap 和 WeakSetWeakMap 和 WeakSet 是 ES6 中的弱集合数据结构。它们可以用于存储和操作弱引用。
####10.1 WeakMap 的基本语法
javascript// WeakMap 的基本语法let weakMap = new WeakMap(); weakMap.set({ name: 'John' }, { age:25 }); console.log(weakMap.get({ name: 'John' })); // { age:25 }
####10.2 WeakSet 的基本语法
javascript// WeakSet 的基本语法let weakSet = new WeakSet(); weakSet.add({ name: 'John' }); console.log(weakSet.has({ name: 'John' })); // true
###11. SymbolSymbol 是 ES6 中的符号对象。它可以用于创建唯一标识符。
####11.1 Symbol 的基本语法
javascript// Symbol 的基本语法let symbol = Symbol('name'); console.log(symbol); // Symbol(name)
####11.2 Symbol 的陷阱Symbol 可以用于创建唯一标识符,但也可能导致一些陷阱。
javascript// Symbol 的陷阱let symbol1 = Symbol('name'); let symbol2 = Symbol('name'); console.log(symbol1 === symbol2); // false
###12. ClassClass 是 ES6 中的类定义语法。它可以用于创建类和实例。
####12.1 Class 的基本语法
javascript// Class 的基本语法class Person { constructor(name) { this.name = name; } } let person