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!"
相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js