当前位置:首页 » 《关注互联网》 » 正文

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

27 人参与  2024年12月10日 12:00  分类 : 《关注互联网》  评论

点击全文阅读


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

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

进制

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

二进制:

前缀:   0b0B: 

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

前缀:  0o0O:

let octal = 0o12; // 八进制 12console.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)); // trueconsole.log(mySet.size);   // 2mySet.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')); // Aliceconsole.log(myMap.has('age'));  // trueconsole.log(myMap.size);        // 2myMap.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 对象可以处于以下三种状态之一:

Pending(等待中):初始状态,既不是成功也不是失败。Fulfilled(已成功):表示异步操作成功完成。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

                                                       

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/199029.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1