0


【前端】--- ES6下篇(带你深入了解ES6语法)

前言:ECMAScript是 JavaScript 的标准化版本,由 ECMA 国际组织制定。ECMAScript 定义了 JavaScript 的语法、类型、语句、关键字、保留字等。

ES6 是 ECMAScript 的第六个版本,于 2015 年发布,引入了许多重要的新特性,使 JavaScript 更加现代化。

进制

** ES6 中增加了二进制和八进制的写法: 二进制使用前缀 '0b' 或 '0B' , 八进制使用前缀 '0o' 或 '0O'**

二进制:

**前缀:

0b

0B:

**

let binary = 0b1010; // 二进制 1010
console.log(binary); // 输出: 10
八进制:

**前缀:

0o

0O:

**

let octal = 0o12; // 八进制 12
console.log(octal); // 输出: 10

symbol

**主要用于创建唯一且不可变的标识符(主要用于创建不重复的键) 如下面的sym1和sym2可以当做键,也不会报错 **

const sym1 = Symbol('description');
const sym2 = Symbol('description'); // sym1 和 sym2 不相等
console.log(sym1 === sym2); // 输出: false

class

类是一种蓝图或模板,用于创建对象。它定义了一组属性(状态)和方法(行为),可以被多个对象共享

class Parent {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}
class继承 :

当你在子类中定义构造函数时,必须调用 super( ) ,否则将无法访问 this 关键字,并且会抛出错误。

class Child extends Parent {
    constructor(name) {
        // 如果没有 super(),将无法使用 this
        super(name); // 必须调用 super() 来访问父类的构造函数
    }
}

const child = new Child('Alice');
child.greet(); // 输出: Hello, my name is Alice.

set和map

Set和Map主要的应用场景在于数据重组和数据储存。Set是一种叫做集合的数据类型,Map是一种叫做字典的数据类型

Set和Map是ES6新增的一种数据结构,类似于数组,成员唯一。并且使用键对数据排序即顺序存储,Set本身是一种构造函数,用来生成Set数据结构,Set对象允许你储存任何类型唯一值,无论是原始值还是对象引用

set的一些方法:

创建set对象,然后将元素添加到里面,之后判断该has有没有该元素,size判断该对象当中有几个元素,delete用来进行元素的删除

const mySet = new Set();
mySet.add(1);
mySet.add(5);
mySet.add(5); // 不会添加重复项
console.log(mySet.has(5)); // true
console.log(mySet.size);   // 2
mySet.delete(5);
console.log(mySet.size);   // 1
map的一些方法:

** map当中存放的是键值对,然后比set方法当中多了可以通过健名来查找元素**

const myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('age', 30);
console.log(myMap.get('name')); // Alice
console.log(myMap.has('age'));  // true
console.log(myMap.size);        // 2
myMap.delete('age');
console.log(myMap.size);        // 1

Generator

Generator(生成器)是 JavaScript 中的一种特殊类型的函数,它允许你暂停和恢复函数的执行

let tell = function* () {
        console.log('1')
        yield 'a'
        console.log('2')
        yield 'b'
        console.log('3')
      }
      let it = tell()
      it.next() //输出1
      it.next() //输出2
      it.next() //输出3

next传参第一个参数是没有意义的

    {
      //yield传参(第一个参数是没有意义的)
      let tell = function* () {
        console.log('1')
        let res1 = yield
        console.log('2', res1)
        let res2 = yield
        console.log('3', res2)
      }
      let it = tell()
      it.next(10) //1
      it.next(20) //2,20
      it.next(30) //3,30
    }

通过Symbol.iterator可使一个普通对象变成一个可迭代对象,从而可以使用let of迭代方法,然后进行输出

      //需求 使用for...of输出对象属性值
      let obj = {
        name: 'zhangsan',
        age: 29,
        address: 'tianjin'
      }
      obj[Symbol.iterator] = function* () {
        yield obj.name
        yield obj.age
        yield obj.address
      }
      for (let i of obj) {
        console.log(i)
      }

promise

Promise 是异步编程的一种解决方案, 它的构造 函数 是 同步 执行的,then 方法是 异步 执行的,所以Promise创建后里面的函数会立即执行, 构造函数 中的resolve和reject只有第一次执行有效,,也就是说 Promise状态一旦改变就不能再变 promise主要是用来解决 回调地狱 的问题,通过使用.then来使得代码成链式调用,方便维护和使用。

promise的三种状态:

一个 Promise 对象可以处于以下三种状态之一:

  1. Pending(等待中):初始状态,既不是成功也不是失败。
  2. Fulfilled(已成功):表示异步操作成功完成。
  3. Rejected(已失败):表示异步操作失败。

一旦 Promise 的状态从 "pending" 变为 "fulfilled" 或 "rejected",它的状态就不可再改变,这种特性被称为不可变性(Immutability)。

let promise = new Promise((resolve, reject) => {
        console.log('chengnou')
        setTimeout(() => {
          // resolve('zaiyiqi')
          reject('fensuo')
        }, 2000);
      })
      promise.then(res => {
        console.log('res', res)
      }, err => {
        console.log('err', err)
      })
promise的一些方法:

all([p1, p2, p3]) 等待多个请求完成后触发then,有一个失败,则catch
race([p1, p2, p3]) 哪个先完成就先完成哪个
allSettled([p1, p2, p3]) 不管这些请求是否会成功,都会执行then方法
any([p1, p2, p3]) 只要有一个先完成执行then,等所有都失败再catch,一个对就对,全错才错

    let p1 = new Promise((resolve, reject) => {
      setTimeout(resolve, 1000, 'p1')
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(reject, 3000, 'p2')
    })
    let p3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 2000, 'p3')
    })

    Promise.all([p1, p2, p3]).then(res => {
      console.log('success', res) //返回p1
    }).catch(err => {
      console.log('err', err)//err AggregateError: All promises were rejected
    })

module

ES6 中的模块(module)机制是一个现代化的 JavaScript 模块系统,用于更好地组织和管理代码。它的特点是基于 文件级模块作用域,并使用export和import关键字来定义和使用模块

模块的核心特点

  • 文件级作用域: 每个模块都有独立的作用域,模块中的变量和函数默认是私有的,除非显式导出。
  • 严格模式: ES6 模块默认启用严格模式,不需要手动添加"use strict"。
  • 静态分析: ES6 模块在编译时就会确定模块依赖关系,不像 CommonJS 那样在运行时加载。这种特性使得编译器和工具可以进行更好的优化。
  • 单例模式: 同一模块无论被引入多少次,始终只加载一次,并且会缓存结果。
导出模块:

**命名导出和默认导出的最大区别就是命名导出可以导出多次,但是默认导出只能导出一次 **

1.命名导出:
export const pi = 3.14159;
export function add(a, b) {
  return a + b;
}
2.默认导出:
export default function log(message) {
  console.log(message);
}
导入模块:
1.命名导入:
import { pi, add, Calculator } from './math.js';
//也可以重命名导入成员
import { add as sum } from './math.js';
2.默认导入:
import log from './logger.js';
3.混合导入:
import log, { pi } from './math.js';
4.导入模块当中的所有内容:
import * as math from './math.js';

ES6中新增的一些其他方法

填充字符串的方法:
1.头部进行填充:
      let str = 'addsfsaf'
      //str.padstart(目标长度,[,填充字符串])
      let s = str.padStart(10)
      let s1 = str.padStart(10, '2')
      console.log(s1)  //22addsfsaf
2.尾部进行填充:
      let str = 'addsfsaf'
      //str.padstart(目标长度,[,填充字符串])
      let s = str.padEnd(10)
      let s1 = str.padEnd(10, '2')
      console.log(s1) //addsfsaf22
3.适用场景:
      //使用场景
      console.log('111'.padStart(6, '0'))//000111
      console.log('12-12-12'.padStart(10, '0000-00-00'))
对象新增的方法:
let obj = {
      name: '11',
      age: 22
    }

    //遍历值
    console.log(Object.values(obj))
    //遍历键值对
    console.log(Object.entries(obj))
    //遍历键
    console.log(Object.keys(obj))

    //将对象转换成map
    let map = new Map(Object.entries(obj))
    console.log(map)
字符串收尾去空格:
    let s = '    1324325 4324  4532       '
    console.log(s.trim()) //'1324325 4324  4532'
    console.log(s.trimStart()) //'1324325 4324  4532       '
    console.log(s.trimEnd()) //'    1324325 4324  4532'
替换字符串:
1.替换所有的 a字符
    //替换所有a字符
    let s = "aflsdjflsefel"
    console.log(s.replaceAll('s', 'a'))
**2.替换a字符当中的第一个a字符 **
      //替换第一个
      let s = "aflsdjflsefel"
      console.log(s.replace('s', 'a'))
3.正则替换所有字符
      //正则替换所有
      let s = "aflsdjflsefel"
      console.log(s.replace(/s/g, 'a'))
通过下标查找数组:
    let arr = [12, 3, 3, 2, 56, 5]

    //正数  与之前数组访问下标相同
    //负数  从后往前进行查找
    console.log(arr.at(1))
    console.log(arr.at(-1))//5
标签: 前端 es6 ecmascript

本文转载自: https://blog.csdn.net/2301_81253185/article/details/142630539
版权归原作者 心.c 所有, 如有侵权,请联系我们删除。

“【前端】--- ES6下篇(带你深入了解ES6语法)”的评论:

还没有评论