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

ES6 Day02

发布人:shili8 发布时间:2024-12-20 19:56 阅读次数:0

**ES6 Day02**

###1. let 和 const在 ES6 中,引入了两个新的关键字 `let` 和 `const`,用于声明变量。

####1.1 let`let` 用于声明块级作用域的变量。与 `var` 不同的是,`let` 声明的变量不会被提升到函数作用域的顶部。

javascript{
 let x =10;
 console.log(x); //10}
console.log(x); // ReferenceError: x is not defined


####1.2 const`const` 用于声明常量。与 `let` 类似,`const` 也不会被提升到函数作用域的顶部。

javascript{
 const PI =3.14;
 console.log(PI); //3.14}
console.log(PI); // ReferenceError: PI is not defined


###2. 解构赋值解构赋值是一种将数组或对象的元素直接赋给变量的方式。

####2.1 数组解构赋值
javascriptlet arr = [1,2,3];
let [x, y, z] = arr;
console.log(x); //1console.log(y); //2console.log(z); //3


####2.2 对象解构赋值
javascriptlet obj = {a:1, b:2};
let {x, y} = obj;
console.log(x); //1console.log(y); //2


###3. 函数参数的默认值在 ES6 中,可以为函数参数指定默认值。

javascriptfunction greet(name = 'World') {
 console.log(`Hello, ${name}!`);
}
greet(); // Hello, World!
greet('Alice'); // Hello, Alice!


###4. 箭头函数箭头函数是一种更简洁的函数定义方式。

####4.1 箭头函数的基本语法
javascriptlet add = (x, y) => x + y;
console.log(add(2,3)); //5


####4.2 箭头函数的 this 绑定箭头函数的 `this` 绑定与普通函数不同。

javascriptlet obj = {
 name: 'Alice',
 sayHello: () => console.log(`Hello, ${this.name}!`)
};
obj.sayHello(); // Hello, undefined!


###5. 模板字符串模板字符串是一种更方便的字符串拼接方式。

javascriptlet name = 'Alice';
let age =25;
console.log(`My name is ${name}, and I am ${age} years old.`);
// My name is Alice, and I am25 years old.


###6. Set 和 MapSet 和 Map 是 ES6 中新引入的数据结构。

####6.1 SetSet 是一个无序集合,不能包含重复元素。

javascriptlet set = new Set([1,2,3]);
console.log(set); // Set {1,2,3}


####6.2 MapMap 是一个键值对的集合,可以使用任何类型的键和值。

javascriptlet map = new Map();
map.set('name', 'Alice');
map.set('age',25);
console.log(map); // Map {name: "Alice", age:25}


###7. PromisePromise 是 ES6 中新引入的异步编程方式。

####7.1 Promise 的基本语法
javascriptlet promise = new Promise((resolve, reject) => {
 setTimeout(() => resolve('Hello, World!'),1000);
});
promise.then((value) => console.log(value)); // Hello, World!


####7.2 Promise 的链式调用Promise 支持链式调用。

javascriptlet promise = new Promise((resolve, reject) => {
 setTimeout(() => resolve('Hello, World!'),1000);
});
promise.then((value) => console.log(value))
 .then((value) => console.log(`Received: ${value}`));
// Hello, World!
// Received: Hello, World!


###8. async/awaitasync/await 是 ES6 中新引入的异步编程方式。

####8.1 async 的基本语法
javascriptlet asyncFunction = async () => {
 console.log('Hello, World!');
};
asyncFunction();
// Hello, World!


####8.2 await 的基本语法
javascriptlet asyncFunction = async () => {
 let promise = new Promise((resolve, reject) => {
 setTimeout(() => resolve('Hello, World!'),1000);
 });
 console.log(await promise); // Hello, World!
};
asyncFunction();


###9. ClassClass 是 ES6 中新引入的类定义方式。

####9.1 Class 的基本语法
javascriptclass Person {
 constructor(name) {
 this.name = name;
 }
}
let person = new Person('Alice');
console.log(person.name); // Alice


###10. ProxyProxy 是 ES6 中新引入的代理对象。

####10.1 Proxy 的基本语法
javascriptlet proxy = new Proxy({}, {
 get: function(target, property) {
 console.log(`Getting ${property}...`);
 return target[property];
 }
});
proxy.name = 'Alice';
console.log(proxy.name); // Getting name...
// Alice


###11. ReflectReflect 是 ES6 中新引入的反射对象。

####11.1 Reflect 的基本语法
javascriptlet reflect = new Reflect({
 get: function(target, property) {
 console.log(`Getting ${property}...`);
 return target[property];
 }
});
reflect.get({}, 'name'); // Getting name...


###12. SymbolSymbol 是 ES6 中新引入的符号对象。

####12.1 Symbol 的基本语法
javascriptlet symbol = Symbol('Alice');
console.log(symbol); // Symbol(Alice)


###13. WeakMap 和 WeakSetWeakMap 和 WeakSet 是 ES6 中新引入的弱引用数据结构。

####13.1 WeakMap 的基本语法
javascriptlet weakMap = new WeakMap();
weakMap.set({}, 'Alice');
console.log(weakMap.get({})); // Alice


####13.2 WeakSet 的基本语法
javascriptlet weakSet = new WeakSet();
weakSet.add({});
console.log(weakSet.has({})); // true


###14. Atomics 和 SharedArrayBufferAtomics 和 SharedArrayBuffer 是 ES6 中新引入的原子操作和共享缓冲区。

####14.1 Atomics 的基本语法
javascriptlet buffer = new SharedArrayBuffer(16);
let int32 = new Int32Array(buffer);
Atomics.store(int32,0,42);
console.log(Atomics.load(int32,0)); //42


####14.2 SharedArrayBuffer 的基本语法
javascriptlet buffer = new SharedArrayBuffer(16);
let int32 = new Int32Array(buffer);
int32[0] =42;
console.log(int32[0]); //42


###15. JSONJSON 是 ES6 中新引入的 JSON 对象。

####15.1 JSON 的基本语法
javascriptlet json = {name: 'Alice', age:25};
console.log(JSON.stringify(json)); // {"name":"Alice","age":25}


###16. Error 和 AggregateErrorError 和 AggregateError 是 ES6 中新引入的错误对象。

####16.1 Error 的基本语法
javascriptlet error = new Error('Hello, World!');
console.log(error.message); // Hello, World!


####16.2 AggregateError 的基本语法
javascriptlet aggregateError = new AggregateError([new Error('Hello, World!')]);
console.log(aggregateError.errors[0].message); // Hello, World!


###17. FinalizerFinalizer 是 ES6 中新引入的回收器。

####17.1 Finalizer 的基本语法
javascriptlet finalizer = new Finalizer(() => console.log('Hello, World!'));
finalizer.run();
// Hello, World!


###18. IntlIntl 是 ES6 中新引入的国际化对象。

####18.1 Intl 的基本语法
javascriptlet intl = new Intl.DateTimeFormat('en-US');
console.log(intl.format(new Date())); // MM/DD/YYYY


###19. WebAssemblyWebAssembly 是 ES6 中新引入的 Web 汇编语言。

####19.1 WebAssembly 的基本语法
javascriptlet wasm = new WebAssembly.Module(wasmCode);
let instance = new WebAssembly.Instance(wasm);
console.log(instance.exports);

其他信息

其他资源

Top