当前位置:实例文章 » HTML/CSS实例» [文章]ES6-day03

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

其他信息

其他资源

Top