首页 > 编程语言 >JavaScript|ES6语法

JavaScript|ES6语法

时间：2023-07-11 10:01:50浏览次数：45  
标签：ES6 const log JavaScript 导出 语法 promise console name

1 箭头函数

1) 语法

const fn = (参数) => {
  函数体
}
const fn = (x) => x + 1

简写

 const fn = (x) => x + 1

当函数体中只有一行return时

  • 可以同时省略{}和return

2) 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const add = (x, y) => {
        return x + y
      }

      console.log(add(1, 2))

      // 当代码比较简单时, 只有一个return
      // 可以同时省略{}和return

      const fn = (x, y) => x + y
    </script>
  </body>
</html>

2 解构赋值

1) 对象的解构

基础语法

const {属性名1, 属性名2} = 对象

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = {
        name: 'xiaoming',
        // ES6中方法的简写
        sayHi() {
          console.log('hi')
        },
      }
      // 定义了两个普通变量
      //   1. 根据对象的属性名解构
      //   2. 不是根据对象属性的顺序
      const { name, sayHi } = obj
      console.log(name)
      sayHi()

      // const name = obj.name
      // const sayHi = obj.sayHi
    </script>
  </body>
</html>

默认值

const {属性名1=默认值, 属性名2...} = 对象

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = {
        name: 'xiaoming',
        gf: {
          name: 'xiaomei',
        },
      }
      // 给不存在的属性赋初始值
      const { name = 'new', age = 20 } = obj
      console.log(name, age) // xiaoming 20
    </script>
  </body>
</html>

别名

const {属性名1:别名, 属性名2:别名} = 对象

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = {
        name: 'xiaoming',
        gf: {
          name: 'xiaomei',
        },
      }

      const {
        name,
        gf: { name: gfName },
      } = obj
      console.log(name, gfName) // xiaoming xiaomei
    </script>
  </body>
</html>

2) 数组的解构

基础语法

const [变量名1, 变量名2, ...] = 数组

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = ['red', 1, true]

      // 数组的解构: 根据数组元素的顺序
      const [a, b, c, d = 100] = arr
      console.log(a, b, c, d)
      // 展开运算符..., 剩余参数
      const [red, ...res] = arr
      console.log(red, res)
    </script>
  </body>
</html>

3 class定义类

1) 基础语法

class 类名 {
  constructor() {
    // 属性
  }
  方法1
  方法2
}

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 定义类
      class Person {
        constructor(n, a) {
          // 构造函数: 完成属性的初始化
          this.name = n
          this.age = a
        }
        // 定义方法
        getName() {
          return this.name
        }
      }

      // 根据类创建实例对象
      const p1 = new Person('xiaoming', 20)
      console.log(p1)
      console.log(p1.getName())

      const { name } = p1
      console.log(name)
    </script>
  </body>
</html>

5 promise对象

1) 属性

promise对象有两个属性

  • 状态
  • 结果

状态

状态有三种

  • pending: 准备
  • fulfilled: 成功
  • rejected: 失败

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 创建一个promise对象
      //  1. Promise接收一个函数作为参数
      //  2. promise对象(属性和方法)
      //      - 状态 pending, fulfilled, rejected
      //      - 结果

      // 3. promise状态的改变是单向, 不可逆, 状态的改变是一次性
      // 只能从pending => fulfilled / rejected
      const p1 = new Promise((resolve, reject) => {
        // 当调用resolve函数, 当前promise对象的状态从 pending => fulfilled(成功)
        resolve()
        // 当调用reject函数, 当前promise对象的状态从 pending => rejected(失败)
        reject()
      })
      console.log(p1)
    </script>
  </body>
</html>

2) 方法

then方法

在then方法中, 可以获取promise对象的结果

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const p1 = new Promise((resolve, reject) => {
        // resolve('p1的结果')
        reject('p1出错')
      })
      const p2 = p1.then(
        (value) => {
          // 1. 语法错误
          // console.log(a)
          // 2. throw 抛出一个错误
          // throw new Error('错误')
          return 123
        },
        () => {}
      )
      p2.then(
        (value) => {
          console.log(1, value)
        },
        () => {
          console.log(2)
        }
      )
      // console.log(p2)

      // p2的状态是由p1的成功/失败的回调决定
      //    如果在函数中没有报错, 那么p2的状态就是 成功
      //    如果在函数中有报错, 那么p2的状态就是 失败
      // p2的结果由函数的返回值确定
    </script>
  </body>
</html>

3) async...await

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // async: 写在函数的前面
      //  1. 可以单独使用.
      //  2. 将返回值包装成一个promise对象
      async function foo() {
        // return Promise.resolve(123)
        return 123
      }
      console.log(foo())

      // 获取123的值
      foo().then((value) => {
        console.log(value)
      })

      // await: 后面跟一个promise
      //  1. 不能单独使用. 配合async使用
      //  2. 表达式的值 就是 promise的结果

      async function test() {
        // 如果await后面不是一个promise对象, 会自动转换成promise对象
        const res = await foo()
        console.log(res)
      }
      test()
    </script>
  </body>
</html>

6 ES Module

1) 导出

在一个js文件中, 通过export导出

  • 变量
  • 函数
  • 类

示例

// 导出变量
export const str = 'str'

// 导出函数
export function foo() {
  console.log('foo')
}

// 导出类
export class Person {
  constructor(n) {
    this.name = n
  }
}

2) 导入

在一个js文件中, 通过import导入

在一个html文件中, 通过<script type="module">导入

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      // 1. 通过 export 导出
      // 2. 通过 import 导入
      import { str, foo, Person } from './01-test.js'
      console.log(str)
      foo()
      const p = new Person('xiaoming')
      console.log(p)
    </script>
  </body>
</html>

3) 默认导入导出

默认导出

在一个js文件中, 使用export default默认导出

// 默认导出
export default function () {
  console.log('hello')
}

⚠️ 注意

一个模块只能有一个默认导出

// 默认导出
export default function () {
  console.log('hello')
}

// 一个模板只能存在一个默认导出, 会报错
export default function bar () {
  console.log('bar')
}
img

默认导入

通过import语法, 在模块A中导入模块B

// 不写括号: 表示导入 另一个模块中 默认导出的内容
import fn from './02-默认导出.js'
console.log(fn)

总结

  1. 导入时加括号, 表示普通导入, 使用export导出

  2. 导入时 箭头函数

标签：ES6,const,log,JavaScript,导出,语法,promise,console,name
From： https://www.cnblogs.com/tangjielin/p/17541474.html

相关文章

  • 【JavaScript】js 处理复制函数实现
    consthandleCopy=()=>{if(!keywordList.value.length)returnElMessage.warning('没有数据');consttext=JSON.stringify(keywordList.value);constinput=document.createElement('input');input.setAttribute('readonly......
  • 复习ES(6-11)语法之ES9
    目录异步迭代正则表达式扩展对象扩展Promise.prototype.finally()放松模板字符串文字限制异步迭代for-await-ofSymbol.asyncIteratorfor...of循环用于遍历同步的Iterator接口。functiongetPromise(time){returnnewPromise((resolve,reject)=>{s......
  • 复习ES(6-11)语法之ES11
    目录String.prototype.matchAll()按需导入新的原始数据类型：BigIntPromise扩展globalThis可选链空值合并运算符String.prototype.matchAll()conststr=`<html><body><div>这是第一个div</div><p>我是p</p><......
  • 复习ES(6-11)语法之ES10
    目录Object.fromEntries()字符串扩展数组扩展JSON扩展Symbol.prototype.description()Object.fromEntries()Object.entries()返回一个给定对象自身可枚举属性的键值对数组。Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象......
  • JavaScript加密：常见加密种类、优缺点和代码示例
    当涉及到JavaScript加密时，有多种加密算法和技术可供选择。下面我将列举一些常见的加密种类、它们的优缺点，并提供一些代码案例作为参考。对称加密算法：对称加密算法使用相同的密钥进行加密和解密。常见的对称加密算法包括AES（AdvancedEncryptionStandard）和DES（DataEncryptionS......
  • JavaScript|对象
    1类和对象1)对象的概念对象:一个具体的实体在现实世界中,对象随处可见,一个人,一个学生,一个杯子,一辆汽车,游戏里的一个英雄...都是一个对象2)对象的组成如何描述一个对象呢比如,每个人都有姓名,年龄,性别这些特征.游戏里的英雄都有生命值,攻击力,防御......
  • JavaScript|流程控制
    一.概念流程控制就是来控制代码按照一定结构顺序来执行主要有3种结构顺序条件循环二.顺序顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。三.条件根据不同的条件，执行不同的路径......
  • OpenLayers入门篇es6之第一个地图
    一、介绍OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers支持的地图来源包括GoogleMaps、Yahoo、Map、微软VirtualEarth等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLa......
  • python学习巩固一（基础语法）
    大学四年毕业，对于计算机还是一头雾水，现在准备去读研了，导师要求我好好掌握python，突然回想到我学python的时候曾注册过博客园，哈哈哈，找回密码后发现我账号竟然有三个粉丝，某些阅读量还挺高的，感谢感谢。为了督促自己这次能认认真真再好好学习python，我又开始弄我的博客园了，现在从零开始，......
  • 复习ES(6-11)语法之ES7
    Array.prototype.includes（searchEle,fromIndex）Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99