柚子快報(bào)邀請(qǐng)碼778899分享：前端 es6的核心語(yǔ)法

http://yzkb.51969.com/

在學(xué)習(xí)低代碼時(shí)，經(jīng)常有粉絲會(huì)問(wèn)，低代碼需要什么基礎(chǔ)，es6就是基礎(chǔ)中的一項(xiàng)。我們本篇是做一個(gè)掃盲，可以讓你對(duì)基礎(chǔ)有一個(gè)概要性的了解，具體的每個(gè)知識(shí)點(diǎn)可以深入進(jìn)行了解，再結(jié)合官方模板就會(huì)有一個(gè)不錯(cuò)的掌握。

1 let和const

let：聲明變量，具有塊級(jí)作用域。 const：聲明常量，值不能改變

let x = 5;

{

let y = 10;

}

console.log(x); // 輸出 5

console.log(y); // 報(bào)錯(cuò)：y is not defined

const PI = 3.14;

PI = 3.15; // 報(bào)錯(cuò)：Assignment to constant variable.

2 模板字符串

使用反引號(hào)表示，方便字符串拼接和格式化

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 函數(shù)的默認(rèn)值

可以為函數(shù)的參數(shù)提供默認(rèn)值

function greet(name = 'Guest') {

return `Hello, ${name}!`;

}

console.log(greet()); // 輸出：Hello, Guest!

4 剩余參數(shù)

允許接收不定數(shù)量的參數(shù)

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 擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符（spread operator）用于將一個(gè)數(shù)組或?qū)ο蟮乃性鼗驅(qū)傩哉归_(kāi)。

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 箭頭函數(shù)

箭頭函數(shù)提供了一種更加簡(jiǎn)潔的函數(shù)書(shū)寫方式，它沒(méi)有自己的this、arguments、super或new.target。箭頭函數(shù)內(nèi)的this值繼承自外圍作用域。

let numbers = [1, 2, 3];

numbers.forEach((num) => console.log(num)); // 輸出每個(gè)數(shù)字

let obj = {

value: 10,

getValue: () => console.log(this.value)

};

obj.getValue(); // 輸出 undefined，因?yàn)榧^函數(shù)不綁定自己的this，這里的this指向全局對(duì)象

7 箭頭函數(shù)的this指向

箭頭函數(shù)不會(huì)創(chuàng)建自己的this上下文，所以this引用的是定義箭頭函數(shù)時(shí)的上下文。

function Outer() {

this.value = 1;

this.inner = () => {

console.log(this.value); // 輸出 1，這里的this指向Outer的實(shí)例

};

}

let outer = new Outer();

outer.inner(); // 輸出 1

8 解構(gòu)賦值

解構(gòu)賦值是一種JavaScript表達(dá)式，它可以將值從數(shù)組或?qū)ο笾刑崛〉讲煌淖兞恐小?/p>

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 對(duì)象字面量的屬性簡(jiǎn)寫

在ES6中，如果對(duì)象字面量的屬性名和變量名相同，可以直接使用變量名作為屬性名。

let name = "Alice";

let age = 30;

let person = {

name, // 等同于 name: name

age, // 等同于 age: age

};

console.log(person); // 輸出 { name: "Alice", age: 30 }

10 對(duì)象字面量的方法簡(jiǎn)寫

在ES6中，對(duì)象字面量中的方法可以直接使用函數(shù)名作為方法名，而不需要使用冒號(hào)和函數(shù)關(guān)鍵字。

let person = {

name: "Alice",

greet() {

console.log(`Hello, my name is ${this.name}.`);

}

};

person.greet(); // 輸出 "Hello, my name is Alice."

11 Symbol類型

Symbol是一種新的原始數(shù)據(jù)類型，表示一個(gè)唯一的、不可變的值。

let sym1 = Symbol("key1");

let sym2 = Symbol("key1");

console.log(sym1 === sym2); // 輸出 false，因?yàn)閟ym1和sym2是不同的Symbol值

let obj = {};

obj[sym1] = "value1";

console.log(obj[sym2]); // 輸出 undefined，因?yàn)閟ym1和sym2是不同的Symbol值

12 Set和Map

Set和Map是ES6中引入的兩種新的集合類型。

Set是一種值的集合，它類似于數(shù)組，但成員的值都是唯一的，沒(méi)有重復(fù)的值。

let set = new Set([1, 2, 2, 3, 4, 4, 5]);

console.log(set); // Set { 1, 2, 3, 4, 5 }

Map是一種鍵值對(duì)的集合，任何值（對(duì)象或者基本類型）都可以作為一個(gè)鍵或一個(gè)值。

let map = new Map();

map.set('key', 'value');

console.log(map.get('key')); // 輸出 "value"

13 數(shù)組的擴(kuò)展方法

提供了許多方便的方法，如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）是一個(gè)對(duì)象，它定義了一個(gè)序列，并且有一定的訪問(wèn)規(guī)則。任何具有Symbol.iterator屬性的對(duì)象都是可迭代的。

let arr = [1, 2, 3];

let iterator = arr[Symbol.iterator]();

iterator.next(); // { value: 1, done: false }

15 生成器

生成器（Generator）是一種特殊的迭代器，可以暫停執(zhí)行和恢復(fù)執(zhí)行。它使用function*語(yǔ)法定義，并使用yield表達(dá)式輸出。

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是處理異步操作的一種對(duì)象，它代表了可能現(xiàn)在、將來(lái)或永遠(yuǎn)不會(huì)完成的操作及其結(jié)果值。

let promise = new Promise((resolve, reject) => {

// 異步操作

setTimeout(() => resolve('Success!'), 1000);

});

promise.then(result => console.log(result)); // 輸出 "Success!"

17 async/await

async/await是建立在Promise上，用于處理異步操作的新語(yǔ)法，使得異步代碼看起來(lái)和同步代碼一樣。

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引入了類的概念，用于對(duì)象的原型式繼承。類提供了一種更加清晰、面向?qū)ο蟮姆绞絹?lái)組織代碼。

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引入了模塊的概念，允許將代碼分割成獨(dú)立的文件，然后在其他文件中引入使用。 moduleA.js

export function greet() {

console.log('Hello from module A!');

}

moduleB.js

import { greet } from './moduleA.js';

greet(); // 輸出 "Hello from module A!"

柚子快報(bào)邀請(qǐng)碼778899分享：前端 es6的核心語(yǔ)法

http://yzkb.51969.com/

好文閱讀