es6新语法

es6新语法

1 什么是ES6

JS语法分三块

  1. ECMAScript : 基础语法
  2. BOM 浏览器对象 history location window
  3. DOM 文档对象 document

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。ECMAScript定义了:

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版?其实,在过去确实曾计划发布提出巨量新特性的第4版,但最终却因想法太过激进而惨遭废除(这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统)。

ES4饱受争议,当标准委员会最终停止开发ES4时,其成员同意发布一个相对谦和的ES5版本,随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”,因此,ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言,并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5,引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

可以参考:

http://es6.ruanyifeng.com/

回顾之前的es6语法:

1.定义变量:let 变量名=数据;
2.定义常量:const 常量名=数据;
3.箭头函数:(参数,参数,...)=>{函数体}
4.模板字符串:let s="def";let s1 = `abc`; 方便拼接字符串let s2=`${s}${s1}`;===>`defabc`

2. 对象初始化简写

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>//es5function people (username,age){//username='Rose',age=18return {username:username,age:age}}//打印console.log(people('Rose',18));//es6function people2 (username,age){return {//如果key的名字和变量参数名一致,则可以简化写username,age}}//打印console.log(people2('Jack',88));
</script>
</html>

小结:

创建对象格式:

function people2 (name,age){return {//如果key的名字和变量参数名一致,则可以简化写name,age}}

3.解构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>//目标:从json对象中取值const people = {username: 'Rose', age: 18};//es5//好处,直观;缺点:如果你要取多个值就代码多了一些/* let username=people.username;let age = people.age;console.log(username + ' --- ' + age);*///es6//等号左边的大括号中的变量必须和等号右边对象中的key一致//例如:等号左边的username,那么等号右边people中的key必须有username// const {username,age}=people;// const {age,username}=people;const {age} = people;// console.log(username + "," + age)console.log(age);////数组const color = ['red', 'blue'];//es5// let first = color[0];// console.log(first);//'red'// //es6//等号左边中括号中的变量随便定义const [first,second]=color;console.log(first);console.log(second);
</script>
</html>

小结:

解构:就是简化获取对象和数组的数据。

1.获取对象:const people={username:'Rose',age:18};const {username,age}=people;//要求等号左边大括号中的变量必须和等号右边对象中key一致console.log(username + "," + age);2.获取数组:const color = ['red', 'blue'];const [first,second]=color;//等号左边中括号中的变量随便定义console.log(first);console.log(second);

4. 延展操作符(掌握)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>//目标:扩展对象的值//原来的对象const peopleOld={username:'Rose',age:18};//需要重新生成一个对象,并基于之前的对象扩展const peopleNew={...peopleOld,address:'上海'};console.log(peopleOld);//{username: "Rose", age: 18}console.log(peopleNew);//{username: "Rose", age: 18, address: "上海"}//原来的数组const colorOld=['red', 'yellow'];//需要重新生成一个数组,并基于之前的数组扩展const colorNew=[...colorOld,'blue','green'];console.log(colorOld);//["red", "yellow"]console.log(colorNew);// ["red", "yellow", "blue", "green"]
</script>
</html>

小结:

作用:对原来的js对象和数组进行数据的扩展。

1.扩展js对象:const peopleOld={username:'Rose',age:18};const peopleNew={...peopleOld,address:'上海'};
2.扩展数组:const colorOld=['red', 'yellow'];const colorNew=[...colorOld,'blue'];

5. import 和 export【重点】

模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出),然后以import的形式将这个变量进行引入

import导入模块、export导出模块

lib.js

// 方式1
let add=function(){console.log('add...');
}
let remove=function(){console.log('remove...');
}
export {add,remove}// 方式2: 还可以写成
// export default {
//     add(){
//         console.log('add...');
//     },
//     remove(){
//         console.log('remove...');
//     }
// }

demo09.js

// 方式1
import {add,remove} from './lib.js';
add();
remove();//方式2:  还可以写成
// import jsApi from './lib.js'  // 使用这种方式 ,必须要使用export default {} 导出
// jsApi.add()
// jsApi.remove()

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body><script  type="module" src="js/demo09.js"></script></html>

小结:

1.使用导入导出的好处是我们可以将上述lib.js理解为源码,然后在demo09.js文件中导入源码的内容并使用,使用起来较方便

2.对于在html文件中使用标签引入具有导入导出的js代码,要求必须书写type="module"属性,表示模块化,因为在js中导入导出只能使用在模块化中

3.引入模块化就是为了降低系统的可维护性,把成本降低,把一个复杂的项目解耦成为一个细小单一的模块,这样好维护好开发出现问题也可以快速的锁定。可以将上述不同的代码书写在不同的模块中的js文件中就是模块化思想

4.使用vscode演示导入和导出模块化报错解决方案:

在这里插入图片描述

说明:主要是加载js文件时使用了file协议,该协议会导致跨域,而使用http、https等协议时则没有跨域问题。

解决方案:在vscode中安装插件Live Server(这是一个具有实时重载功能的小型开发服务器。用它来热加载你的HTML / JavaScript / CSS文件),主要是有了live server之后就不在vscode中使用file协议,直接使用live server打开不会涉及到跨域问题

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/867586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

03:C语言运算符

C语言运算符 1、常见运算符2、赋值运算符3、判断运算符4、与- - 1、常见运算符 数学运算符号。常见数学运算符号&#xff0c;跟数学中理解相同 加号 - 减号 * 乘号 / 除号&#xff0c;相除以后的商 % 取余符号&#xff0c;相除以后余数是几 ()括号括起来优先级最高&#xff0…

计算机网络面试常见题目(一)

计算机网络面试中常见的问题涉及多个层面&#xff0c;包括网络协议、网络体系结构、网络安全、数据传输等。以下是一些常见题目的详解&#xff1a; 1. OSI七层模型是什么&#xff1f;每层的功能是什么&#xff1f; OSI七层模型是国际标准化组织&#xff08;ISO&#xff09;制…

医疗器械企业CRM系统推荐清单(2024版)

近年来&#xff0c;我国医疗器械行业在国家政策支持、医改深入、人口老龄化和消费能力提升等因素推动下&#xff0c;得到了快速发展&#xff0c;正日益成为创新能力增强、市场需求旺盛的朝阳产业。然而&#xff0c;行业也面临价格压力、市场份额重新分配、合规风险以及产品和服…

解决 MEX 文件 ‘xxx.mexw64‘ 无效: 找不到指定的模块。的问题

1.问题描述 在matlab R2021b中运行编译好后的gptoolbox工具箱中的函数[SVtemp,SFtemp,IF] selfintersect(V,F);报错如下 MEX 文件 E:\MATLAB_File\gptoolbox\mex\selfintersect.mexw64 无效: 找不到指定的模块。出错 offset_bunny (第 15 行) [SVtemp,SFtemp,IF] selfinter…

论文略读:Learning and Forgetting Unsafe Examples in Large Language Models

随着发布给公众的大语言模型&#xff08;LLMs&#xff09;数量的增加&#xff0c;迫切需要了解这些模型从第三方定制的微调数据中学习的安全性影响。论文研究了在包含不安全内容的噪声定制数据上微调的LLMs的行为&#xff0c;这些数据集包含偏见、毒性和有害性 发现虽然对齐的L…

3033. 修改矩阵 Easy

给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix &#xff0c;新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等&#xff0c;接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。 返回矩阵 answer 。 示例 1&#xff1a; 输入&#xff1a;…

查看电脑显卡(NVIDIA)应该匹配什么版本的CUDA Toolkit

被串行计算逼到要吐时&#xff0c;决定重拾CUDa了&#xff0c;想想那光速般的处理感觉&#xff08;夸张了&#xff09;不要太爽&#xff0c;记下我的闯关记录。正好我的电脑配了NVIDIA独显&#xff0c;GTX1650&#xff0c;有菜可以炒呀&#xff0c;没有英伟达的要绕道了。回到正…

【Linux】生物信息学常用命令

参考资料来自生信技能树 先输入echo export PS1"[\033]2;\h:\u \w\007\033[33;1m]\u \033[35;1m\t\033[0m [\033[36;1m]\w[\033[0m]\n[\e[32;1m]$ [\e[0m]" >> ~/.bashrc 再输入source ~/.bashrc就能够让命令字体带上颜色&#xff0c;同时命令将会在下一行开…

Python 学习之框架(七)

Python的框架是一系列可重用的代码库&#xff0c;它们为开发者提供了构建应用程序所需的基础设施和工具。这些框架广泛应用于Web开发、数据分析、机器学习、网络爬虫等多个领域。以下是对Python中一些主要框架的清晰归纳和介绍&#xff1a; 1. Web开发框架 ● Django&#xff1…

有些人的成功不是偶然

——读《张忠谋自传》有感 之前读了关于台积电创始人张忠谋先生的一篇公众号文章&#xff0c;对于他的人生经历产生了兴趣&#xff0c;于是找来《张忠谋自传(1931-1964)》阅读。读完之后我最大的感受是张先生的成功绝不是偶然&#xff0c;他的渊博学识、好学上进、人脉广泛等等…

软件设计之Java入门视频(12)

软件设计之Java入门视频(12) 视频教程来自B站尚硅谷&#xff1a; 尚硅谷Java入门视频教程&#xff0c;宋红康java基础视频 相关文件资料&#xff08;百度网盘&#xff09; 提取密码&#xff1a;8op3 idea 下载可以关注 软件管家 公众号 学习内容&#xff1a; 该视频共分为1-7…

每日一题~ (判断是否是合法的出栈序列)

大概的题意&#xff1a; 将 1-n 按照顺序进栈&#xff0c;问 输入的序列是否是合法的出栈序列。 遍历序列&#xff0c;如果当前这个值a小于 栈顶的值&#xff0c;说明它还未进栈&#xff08;因为我们是按照顺序进栈的&#xff09;&#xff0c;所以我们将 一些元素进栈&#xff…

简过网:什么是咨询工程师?我不允许还有人不知道!

咨询工程师真的有必要考吗&#xff1f;近期小编收到很多关于咨询工程师的的问题&#xff0c;今天&#xff0c;小编给大家整理汇总了一下关于咨询工程师的相关问题&#xff0c;希望能够帮助到大家&#xff01; 一、什么是咨询工程师&#xff1f; 咨询工程师是从事工程咨…

nacos源码 nacos注册中心1.4.x 源码 spring cloud alibaba 的discovery做了什么 nacos客户端是如何启动的(二)

spring-cloud-alibaba-nacos-discovery 老版本中如何调用nacos的 1. 整体结构&#xff1a; 2. 思考: 如果你来做&#xff0c;如何做client 向server注册服务&#xff1a; 1.2.1 读yml&#xff0c;或本地文件找到服务器地址&#xff0c;以及其他配置 1.2.2 向server注册服务 1.2…

自定义控件之绘图篇(三)区域(Range)

在Android开发中&#xff0c;自定义控件经常需要处理各种类型的绘图需求&#xff0c;包括但不限于按钮、滑块、进度条等。对于涉及范围&#xff08;Range&#xff09;概念的控件&#xff0c;比如滑动选择器、时间线指示器或是数值范围选择器&#xff0c;实现起来需要对Canvas和…

6800和8080单片机读写时序和液晶屏接口

前言&#xff1a; 随着单片机发展&#xff0c;集成度越来越高&#xff0c;因此目前单片机较少使用RD和WR信号操作外设&#xff0c;因此很多时候&#xff0c;变成了6800和8080单片机读写液晶屏了。早期的读写本质上是对一个地址进行即时的操作&#xff0c;现在可能是等数据送到…

网易游戏员工怒怼丁磊上热搜:每天员工陪你演戏点赞有意思吗

【头部财经】近日&#xff0c;网易游戏一员工在内部群怒怼丁磊的聊天记录曝光&#xff0c;引发网友关注。据头部财经了解&#xff0c;该员工名叫石佳煊&#xff0c;是网易游戏的游戏开发工程师&#xff0c;毕业于华盛顿大学&#xff0c;已在网易工作四年多。 截图显示&#xf…

【国产开源可视化引擎Meta2d.js】铅笔

铅笔 铅笔是可以任意涂鸦的绘图小工具 在线体验&#xff1a; 乐吾乐2D可视化 示例&#xff1a; // 开始铅笔绘画 meta2d.drawingPencil();// 鼠标抬起结束// 停止铅笔绘画&#xff08;关闭铅笔绘画状态&#xff09; meta2d.stopPencil(); 国产开源 乐吾乐潜心研发&#xff…

C语言从头学29——数组(二)

四、数组的地址&#xff08;继续前文编号&#xff09; 数组是连续有序储存的同类型值&#xff0c;只要获得首地址&#xff08;第0个成员的内存地址&#xff09;&#xff0c;其它成员的地址也就知道了&#xff0c;就能遍历整个数组。比如&#xff0c;声明一个数组&#x…

基于星火大模型的群聊对话分角色要素提取挑战赛

赛事任务与数据 2024 iFLYTEK A.I.开发者大赛-讯飞开放平台 (xfyun.cn) 从给定的<客服>与<客户>的群聊对话中, 提取出指定的字段信息&#xff0c;待提取的全部字段见下数据说明。 赛题方提供了184条真实场景的群聊对话数据以及人工标注后的字段提取结果&#xf…