ES6技术总结与测试用例

article/2024/6/24 19:24:12

一、介绍

ES6全称是ECMAScript

ECMAScript 和 JavaScript 的关系

一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)

二、基本语法

使用工具: HBuilderX在这里插入图片描述

1、let声明变量

创建文件夹ES6-demo,创建 01-let.js
//声明变量

let a
let b,c,d
let e = 100
let f = 521, g = 'iloveyou', h = []//1. 变量不能重复声明
let name = 'Helen'
let name = '环'//报错:SyntaxError: Identifier 'name' has already been declared//2. 存在块儿级作用域
// if else while for 
{let star = 5
}
console.log(star)//报错:star is not defined//3. 不存在变量提升
console.log(song)//报错:Cannot access 'song' before initialization
let song = '依然爱你';

2、const声明常量

创建 02-const.js

//声明常量
const SCHOOL = '尚硅谷'
console.log(SCHOOL)//1. 一定要赋初始值
const A//报错:SyntaxError: Missing initializer in const declaration//2. 一般常量使用大写(潜规则)
const a = 100//3. 常量的值不能修改
SCHOOL = 'ATGUIGU'//报错:TypeError: Assignment to constant variable.console.log(PLAYER)//报错:ReferenceError: PLAYER is not defined//4. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
const TEAM = ['康师傅','海狗人参丸','雷神','阳哥']
TEAM.push('环') //常量地址不变,不会报错
TEAM = 100 //报错:TypeError: Assignment to constant variable.

3、解构赋值

创建03-assignment…js

/ES6 允许按照一定模式从数组和对象中提取值,对变量进行赋值,
//这被称为解构赋值。
//1. 数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝']
let [xiao, liu, zhao, song] = F4
console.log(xiao)
console.log(liu)
console.log(zhao)
console.log(song)//2. 对象的解构
const zbs = {username: '赵本山',age: '不详',xiaopin: function(){console.log("演小品");}
}let {username, age, xiaopin} = zbs
console.log(username)
console.log(age)
console.log(xiaopin)
xiaopin()//3. 根据名字自动解构
// let {xiaopin} = zbs
// xiaopin()

4、模板字符串

创建 04-char.js
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。

// ES6 引入新的声明字符串的方式 『``'' ""
//1. 声明
let str = `我也是一个字符串哦!`
console.log(str, typeof str)//2. 内容中可以直接出现换行符
let list = `<ul><li>沈腾</li><li>玛丽</li><li>魏翔</li><li>艾伦</li></ul>`
console.log(list)//3. 变量拼接
let lovest = '贾玲'
let out = `我喜欢${lovest}`
console.log(out)

5、声明对象简写

创建 05-obj.js

let username = 'Tom'
let age = 2
let sing = function () {console.log('I love Jerry')
}// 传统
let person1 = {username: username,age: age,sing: sing,
}
console.log(person1)
person1.sing()// ES6:这样的书写更加简洁
let person2 = {age,username,sing,
}
console.log(person2)
person2.sing()

6、定义方法简写

创建 06-fun.js

// 传统
let person1 = {sayHi: function () {console.log('Hi')},
}
person1.sayHi()// ES6
let person2 = {sayHi() {console.log('Hi')},
}
person2.sayHi()

7、参数的默认值

注意:函数在JavaScript中也是一种数据类型,JavaScript中没有方法的重载

//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数
function add(a, b, c = 0) {return a + b + c
}
let result = add(1, 2)
console.log(result)//2. 与解构赋值结合
function connect({ host = '127.0.0.1', username, password, port }) {console.log(host)console.log(username)console.log(password)console.log(port)
}
connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3306,
})

8、对象拓展运算符

扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。

//展开对象(拷贝对象)
let person = { name: '路飞', age: 17 }
// let someone = person //引用赋值
let someone = { ...person } //对拷拷贝
someone.name = '索隆'
console.log(person)
console.log(someone)

9、箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
箭头函数多用于匿名函数的定义

//声明一个函数
let fn = function(a){return a + 100
}//箭头函数
let fn = (a) => {return a + 100
}//简写
let fn = a => a + 100//调用函数
let result = fn(1)
console.log(result)

10、Promise的使用

Promise 是ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数, 用来封装异步操作并可以获取其成功或失败的结果。

const fs = require('fs')//实例化 Promise 对象:
//Promise对象有三个状态:初始化、成功、失败
const p = new Promise((resolve, reject) => {//调用readFile方法读取磁盘文件:异步操作fs.readFile('./他.txt', (err, data) => {//当文件读取失败时,可以获取到err的值if (err) reject(err) //reject将Promise对象的状态设置为失败//当文件读取成功时,可以获取到data的值resolve(data) //resolve将Promise对象的状态设置为成功})
})//调用 promise 对象的方法
//then:当 Promise状态成功时执行
//catch:当 Promise状态失败时执行
p.then(response => {console.log(response.toString())
}).catch(error => {console.log('出错了')console.error(error)
})

总结:借助于Promise,可以使异步操作中的成功和失败的处理函数独立出来。

11、使用require

读取文件

const fs = require('fs')fs.readFile("D:\\test\\test.txt", (err, result) => {if(err) {console.log(err);return;}console.log(result)  // 默认的格式是buffer 类型console.log(result.toString())  // 默认的格式是buffer 类型
})

搭建服务器

const http = require('http');
//  req: 客户端向服务器请求
//  res: 服务器向客户端响应
http.createServer((req, res) => {// 设置响应头res.writeHead(200, {"Content-type":"text/plain; charset=utf-8"})//  返回数据res.write(data);//  终止响应  也可以返回数据res.end("<h1>hello world!</h1>") //  服务正确开启,需要监听3000 端口
}).listen(3000, () => {console.log('server runnning ....')
})

http://www.ngui.cc/article/show-1007657.html

相关文章

【Autoware规控】mpc_follower模型预测控制节点

文章目录1. 技术原理2. 代码实现1. 技术原理 MPC&#xff0c;即Model Predictive Control&#xff08;模型预测控制&#xff09;&#xff0c;是一种基于动态模型的控制算法。MPC算法通过建立系统的数学模型&#xff0c;根据当前状态和一定时间内的预测&#xff0c;优化未来的控…

【蓝桥杯集训·每日一题】AcWing 3662. 最大上升子序列和

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴树状数组一、题目 1、原题链接 3662. 最大上升子序列和 2、题目描述 给定一个长度为 n 的整数序列 a1,a2,…,an。 请你选出一个该序列的严格上升子序列&#xff0c;要求所…

Oracle 启动后一会儿就挂掉故障处理—ORA-600 17182----惜分飞

一例正常运行的数据库突然节点不停重启(因为是rac,启动一会儿就crash,然后又被crs给启动起来,然后有crash,依次循环),告警日志类似:Fri Mar 24 13:36:07 2023QMNC started with pid124, OS id188397 ARC3: Archival startedARC0: STARTING ARCH PROCESSES COMPLETECompleted: A…

JNI原理及常用方法概述

1.1 JNI(Java Native Interface) 提供一种Java字节码调用C/C的解决方案&#xff0c;JNI描述的是一种技术。 1.2 NDK(Native Development Kit) Android NDK 是一组允许您将 C 或 C&#xff08;“原生代码”&#xff09;嵌入到 Android 应用中的工具&#xff0c;NDK描述的是工具集…

【PC自动化测试-3】GUI对象检查工具

1&#xff0c;Inspect.exe (C:\Program Files(x86)\Windows Kits\10\bin\x64)Inspect.exe 是Microsoft创建的另外一个很棒的工具。它包含在Windows SDK中&#xff0c;因此可以在x64 Windows上的一下位置找到它上传资源https://download.csdn.net/download/qq_26086231/87530399…

Golang流媒体实战之二:回源

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 今天的实战是流传输过程中的常见功能&#xff1a;回源如下图&#xff0c;lal(源站)和lal(拉流节点)代表两台电脑&#xff0c;上面都部署了lalVLC在…

面试官:vue2和vue3的区别有哪些

目录 多根节点&#xff0c;fragment&#xff08;碎片&#xff09; Composition API reactive 函数是用来创建响应式对象 Ref toRef toRefs 去除了管道 v-model的prop 和 event 默认名称会更改 vue2写法 Vue 3写法 vue3组件需要使用v-model时的写法 其他语法 1. 创…

Android SDK对应版本

前言 很多时候看到某个版本都无法对应起来&#xff0c;需要去网上查找&#xff0c;这里做个记录&#xff0c;方便查找对应版本。 平台版本SDK版本版本名称13.0T(33)Android 13 (Android Tiramisu)12LSv2(32)Android 12L (Android Sv2)12.0S(31)Android 12 (Android S)11.0R(3…

图解WebView -- (1) WebView概述

前言 目前各移动应用或多或少都内嵌了Web网页&#xff0c;在Android开发中&#xff0c;就不可避免的使用本系列的主角——WebView。 一、WebView 是什么&#xff1f; WebView是Android 展示Web网页的控件&#xff0c;类似于应用提供一个内置的浏览器&#xff0c;在应用内实现…

【Mongoose笔记】SOCKS5 服务器

【Mongoose笔记】socks5 服务器 简介 Mongoose 笔记系列用于记录学习 Mongoose 的一些内容。 Mongoose 是一个 C/C 的网络库。它为 TCP、UDP、HTTP、WebSocket、MQTT 实现了事件驱动的、非阻塞的 API。 项目地址&#xff1a; https://github.com/cesanta/mongoose学习 下…