网站 只收录首页,长沙市网站推广哪家专业,dedecms 调用wordpress,广州建设银行官方网站在学习低代码时#xff0c;经常有粉丝会问#xff0c;低代码需要什么基础#xff0c;es6就是基础中的一项。我们本篇是做一个扫盲#xff0c;可以让你对基础有一个概要性的了解#xff0c;具体的每个知识点可以深入进行了解#xff0c;再结合官方模板就会有一个不错的掌握…在学习低代码时经常有粉丝会问低代码需要什么基础es6就是基础中的一项。我们本篇是做一个扫盲可以让你对基础有一个概要性的了解具体的每个知识点可以深入进行了解再结合官方模板就会有一个不错的掌握。
1 let和const
let声明变量具有块级作用域。 const声明常量值不能改变
let x 5;
{let y 10;
}
console.log(x); // 输出 5
console.log(y); // 报错y is not defined
const PI 3.14;
PI 3.15; // 报错Assignment to constant variable.2 模板字符串
使用反引号表示方便字符串拼接和格式化
const name Alice;
const age 25;
const message Hello, ${name}. You are ${age} years old.;
console.log(message); // 输出Hello, Alice. You are 25 years old.3 函数的默认值
可以为函数的参数提供默认值
function greet(name Guest) {return Hello, ${name}!;
}
console.log(greet()); // 输出Hello, Guest!4 剩余参数
允许接收不定数量的参数
function sum(...args) {let sum 0;for (const num of args) {sum num;}return sum;
}
console.log(sum(1, 2, 3, 4, 5)); // 输出155 扩展运算符
扩展运算符spread operator用于将一个数组或对象的所有元素或属性展开。
let arr1 [1, 2, 3];
let arr2 [...arr1, 4, 5]; // [1, 2, 3, 4, 5] let obj1 { a: 1, b: 2 };
let obj2 { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }6 箭头函数
箭头函数提供了一种更加简洁的函数书写方式它没有自己的this、arguments、super或new.target。箭头函数内的this值继承自外围作用域。
let numbers [1, 2, 3];
numbers.forEach((num) console.log(num)); // 输出每个数字 let obj { value: 10, getValue: () console.log(this.value)
};
obj.getValue(); // 输出 undefined因为箭头函数不绑定自己的this这里的this指向全局对象7 箭头函数的this指向
箭头函数不会创建自己的this上下文所以this引用的是定义箭头函数时的上下文。
function Outer() { this.value 1; this.inner () { console.log(this.value); // 输出 1这里的this指向Outer的实例 };
} let outer new Outer();
outer.inner(); // 输出 18 解构赋值
解构赋值是一种JavaScript表达式它可以将值从数组或对象中提取到不同的变量中。
let [a, b, ...rest] [1, 2, 3, 4, 5]; // a 1, b 2, rest [3, 4,5]
let { name, age } { name: Alice, age: 30 }; // name Alice, age 309 对象字面量的属性简写
在ES6中如果对象字面量的属性名和变量名相同可以直接使用变量名作为属性名。
let name Alice;
let age 30; let person { name, // 等同于 name: name age, // 等同于 age: age
}; console.log(person); // 输出 { name: Alice, age: 30 }10 对象字面量的方法简写
在ES6中对象字面量中的方法可以直接使用函数名作为方法名而不需要使用冒号和函数关键字。
let person { name: Alice, greet() { console.log(Hello, my name is ${this.name}.); }
}; person.greet(); // 输出 Hello, my name is Alice.11 Symbol类型
Symbol是一种新的原始数据类型表示一个唯一的、不可变的值。
let sym1 Symbol(key1);
let sym2 Symbol(key1); console.log(sym1 sym2); // 输出 false因为sym1和sym2是不同的Symbol值 let obj {};
obj[sym1] value1;
console.log(obj[sym2]); // 输出 undefined因为sym1和sym2是不同的Symbol值12 Set和Map
Set和Map是ES6中引入的两种新的集合类型。
Set是一种值的集合它类似于数组但成员的值都是唯一的没有重复的值。
let set new Set([1, 2, 2, 3, 4, 4, 5]);
console.log(set); // Set { 1, 2, 3, 4, 5 }Map是一种键值对的集合任何值对象或者基本类型都可以作为一个键或一个值。
let map new Map();
map.set(key, value);
console.log(map.get(key)); // 输出 value13 数组的扩展方法
提供了许多方便的方法如filter()、map()、reduce()等
const array [1, 2, 3, 4, 5];
const evenNumbers array.filter(num num % 2 0);
const doubledNumbers array.map(num num * 2);
const sumOfNumbers array.reduce((accumulator, current) accumulator current, 0);14 迭代器
迭代器Iterator是一个对象它定义了一个序列并且有一定的访问规则。任何具有Symbol.iterator属性的对象都是可迭代的。
let arr [1, 2, 3];
let iterator arr[Symbol.iterator]();
iterator.next(); // { value: 1, done: false }15 生成器
生成器Generator是一种特殊的迭代器可以暂停执行和恢复执行。它使用function*语法定义并使用yield表达式输出。
function* generator() { yield 1; yield 2; yield 3;
} let gen generator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }16 Promise
Promise是处理异步操作的一种对象它代表了可能现在、将来或永远不会完成的操作及其结果值。
let promise new Promise((resolve, reject) { // 异步操作 setTimeout(() resolve(Success!), 1000);
}); promise.then(result console.log(result)); // 输出 Success!17 async/await
async/await是建立在Promise上用于处理异步操作的新语法使得异步代码看起来和同步代码一样。
async function asyncFunc() { return new Promise(resolve setTimeout(resolve, 1000, Async result!));
} async function main() { let result await asyncFunc(); console.log(result); // 输出 Async result!
}
main();18 类
ES6引入了类的概念用于对象的原型式继承。类提供了一种更加清晰、面向对象的方式来组织代码。
class Person { constructor(name) { this.name name; } greet() { console.log(Hello, my name is ${this.name}.); }
} let alice new Person(Alice);
alice.greet(); // 输出 Hello, my name is Alice.19 模块
ES6引入了模块的概念允许将代码分割成独立的文件然后在其他文件中引入使用。 moduleA.js
export function greet() { console.log(Hello from module A!);
}moduleB.js
import { greet } from ./moduleA.js;
greet(); // 输出 Hello from module A!
