es6的核心语法

在学习低代码时,经常有粉丝会问,低代码需要什么基础,es6就是基础中的一项。我们本篇是做一个扫盲,可以让你对基础有一个概要性的了解,具体的每个知识点可以深入进行了解,再结合官方模板就会有一个不错的掌握。

1 let和const

let:声明变量,具有块级作用域。

const:声明常量,值不能改变

bash 复制代码
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 模板字符串

使用反引号表示,方便字符串拼接和格式化

bash 复制代码
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 函数的默认值

可以为函数的参数提供默认值

bash 复制代码
function greet(name = 'Guest') {
   return `Hello, ${name}!`;
}
console.log(greet());  // 输出:Hello, Guest!

4 剩余参数

允许接收不定数量的参数

bash 复制代码
function sum(...args) {
    let sum = 0;
    for (const num of args) {
       sum += num;
    }
    return sum;
}
console.log(sum(1, 2, 3, 4, 5));  // 输出:15

5 扩展运算符

扩展运算符(spread operator)用于将一个数组或对象的所有元素或属性展开。

bash 复制代码
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值继承自外围作用域。

bash 复制代码
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引用的是定义箭头函数时的上下文。

bash 复制代码
function Outer() {  
  this.value = 1;  
  this.inner = () => {  
    console.log(this.value); // 输出 1,这里的this指向Outer的实例  
  };  
}  
  
let outer = new Outer();  
outer.inner(); // 输出 1

8 解构赋值

解构赋值是一种JavaScript表达式,它可以将值从数组或对象中提取到不同的变量中。

bash 复制代码
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 = 30

9 对象字面量的属性简写

在ES6中,如果对象字面量的属性名和变量名相同,可以直接使用变量名作为属性名。

javascript 复制代码
let name = "Alice";  
let age = 30;  
  
let person = {  
  name, // 等同于 name: name  
  age, // 等同于 age: age  
};  
  
console.log(person); // 输出 { name: "Alice", age: 30 }

10 对象字面量的方法简写

在ES6中,对象字面量中的方法可以直接使用函数名作为方法名,而不需要使用冒号和函数关键字。

bash 复制代码
let person = {  
  name: "Alice",  
  greet() {  
    console.log(`Hello, my name is ${this.name}.`);  
  }  
};  
  
person.greet(); // 输出 "Hello, my name is Alice."

11 Symbol类型

Symbol是一种新的原始数据类型,表示一个唯一的、不可变的值。

bash 复制代码
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是一种值的集合,它类似于数组,但成员的值都是唯一的,没有重复的值。

bash 复制代码
let set = new Set([1, 2, 2, 3, 4, 4, 5]);  
console.log(set); // Set { 1, 2, 3, 4, 5 }

Map是一种键值对的集合,任何值(对象或者基本类型)都可以作为一个键或一个值。

bash 复制代码
let map = new Map();  
map.set('key', 'value');  
console.log(map.get('key')); // 输出 "value"

13 数组的扩展方法

提供了许多方便的方法,如filter()、map()、reduce()等

bash 复制代码
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属性的对象都是可迭代的。

bash 复制代码
let arr = [1, 2, 3];  
let iterator = arr[Symbol.iterator]();  
iterator.next(); // { value: 1, done: false }

15 生成器

生成器(Generator)是一种特殊的迭代器,可以暂停执行和恢复执行。它使用function*语法定义,并使用yield表达式输出。

bash 复制代码
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是处理异步操作的一种对象,它代表了可能现在、将来或永远不会完成的操作及其结果值。

bash 复制代码
let promise = new Promise((resolve, reject) => {  
  // 异步操作  
  setTimeout(() => resolve('Success!'), 1000);  
});  
  
promise.then(result => console.log(result)); // 输出 "Success!"

17 async/await

async/await是建立在Promise上,用于处理异步操作的新语法,使得异步代码看起来和同步代码一样。

bash 复制代码
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引入了类的概念,用于对象的原型式继承。类提供了一种更加清晰、面向对象的方式来组织代码。

bash 复制代码
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

bash 复制代码
export function greet() {  
  console.log('Hello from module A!');  
}

moduleB.js

bash 复制代码
import { greet } from './moduleA.js';  
greet(); // 输出 "Hello from module A!"
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端