【前端之ES6语法】

前端之ES6语法

    • 1. ES6简介
    • 2. ES6新特性
    • 3.ES6不支持，使用babel
      • 3.1 参考文献
    • 4.let和const命令
    • 5. 模版字符串
    • 6.函数之默认值、剩余参数
    • 7. 函数之扩展运算符、箭头函数
    • 8.箭头函数this指向和注意事项
    • 9.解构赋值
    • 10.对象扩展
    • 11.Symbol类型
    • 12.Set集合类型
    • 13.Map数据类型
    • 14.数组的扩展_1
    • 15.数组的扩展_2

1. ES6简介

  • ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实现不完善等
  • 为了后面vue、尤其是react框架做好了准备
  • 目前大部分公司的项目都在使用es6

ECMAScript6.0(l以下简称ES6)是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一
代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特
指该年发布的正式版本的语言标准。

2. ES6新特性

  • let和const命令
  • es6的模板字符串
  • 增强的函数
  • 扩展的字符串、对象、数组功能
  • 解构赋值
  • Symbol
  • Map和Set
  • 迭代器和生成器
  • Promise对象
  • Proxyi对象
  • async的用法
  • 类class
  • 模块化实现

各大浏览器的最新版本，对ES6的支持可以查看 点我，随着时间的推移，支特度已经越来越高了，超过90%的ES6语法特性都实现了。

3.ES6不支持，使用babel

  • 被称为下一代的JavaScript编译器。可以将es6的代码转换成es5的代码，从而让浏览器获得支特
  • 这个课程我们只需要知道前端工具babe这个工具的作用，在这里不做过多的赘述
  • 这里不讲解babel，只讲述es6语法

3.1 参考文献

  • ES6阮一峰教程 http://es6.ruanyifeng.com
  • MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

4.let和const命令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let_const</title>
</head>
<body><script>// var// console.log(a) //输出 undefined// var a = 2;// a = 2;//1.let声明变量, 没有变量提升,报错// console.log(a)// let a = 2;//2.是一个块级作用域,报错:Uncaught ReferenceError: b is not defined// console.log(b)// if(1==1) {//   let b = 10;// }// 3. let不能重复声明(Uncaught SyntaxError: Identifier 'c' has already been declared )// let c = 1;// let c = 2;// 4.const定义变量,不能重新修改const NAME = "热爱学习编程";// NAME = "我不喜欢学习"; // 直接报错// 5.const修饰的对象，只能修改其属性，不能对对象重新赋值。const obj = {name: "张三",age: 18}// 可以obj.age = 19;// 不可以/*  obj = {name: "李四",age: 20}*/const arr = [];for(let i = 0 ; i <10; i++) {arr[i] = function(){return i;}}console.log(arr[5]()) // 输出10，不对呀，不应该是5吗？/*解决方法: 使用let*/// 不会污染全局变量let RegExp = 10;console.log(RegExp)console.log(window.RegExp)/** 建议：在默认情况下用const;* 而只有你知道变量会改变值的时候，用let.*/</script>
</body>
</html>

5. 模版字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模版字符串</title>
</head>
<body><div class="box"></div><script>// 模板字符串：使用tab键上面的反引号``，插入变量时使用$(变量名)const oBox = document.querySelector('.box');let id = 1,name = "ypy";// 麻烦版本// oBox.innerHTML = "<ul><li><p id="+id+">" +name+ "</p></li></ul>";// 方便版本oBox.innerHTML = `<ul><li><p id=${id}>${name}</p></li></ul>`</script>
</body>
</html>

在这里插入图片描述

6.函数之默认值、剩余参数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数默认参数_剩余参数</title>
</head>
<body><script>// es5/*function add(a,b) {a = a || 10;b = b || 20;return a+b;}*/// console.log(add()); // 30function add(a = 10, b = 20) {return a + b;}console.log(add())console.log("-----------------------")//es5写法/*function pick(obj) {let result = Object.create(null);for (let i = 1; i < arguments.length; i++) {result[arguments[i]] = obj[arguments[i]];}return result;}const book = {title: 'es6教程',author:'yeskip',year:'2019'}let bookData = pick(book,'author','year')console.log(bookData)*/// 剩余参数：由三个点，和一个紧跟着的具名参数指定 ...keys// 解决了argument的问题function pick(obj, ...keys) {let result = Object.create(null);for (let i = 0; i < keys.length; i++) {result[keys[i]] = obj[keys[i]];}return result;}const book = {title: 'es6教程',author:'yeskip',year:'2019'}let bookData = pick(book,'author','year')console.log(bookData)</script>
</body>
</html>

7. 函数之扩展运算符、箭头函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展运算符_箭头函数</title>
</head>
<body><div></div>
<script>// 剩余参数：把多个独立的参数，合并成一个数组// 扩展运算符：把数组展开成独立的参数，并将值作为参数传递给函数const maxNum = Math.max(20, 30)console.log(maxNum)// 处理数组的最大值，使用applyconst arr = [10, 20, 30, 40, 50, 60, 70, 100]console.log(Math.max.apply(null, arr))// 使用es6扩展运算符const maxNumber = Math.max(...arr);console.log("maxNumber=", maxNumber)console.log("--------------------------------")//箭头函数/** 使用=> 定义 function(){} 等价于 () => {}*/let addWithArrow = (a,b) => a+b;console.log("arrow function compute result: ",addWithArrow(1, 2));;/*let getId = id => {return {id: id,name: "小袁子"}}*/// ===》 等价于let getId = id => ({id: id, name: "小袁子"});let obj = getId(1)console.log(obj)// 闭包函数/*声明一个函数fun1，此函数fun1返回一个函数fun2,执行fun1()*/let fn = (function() {return function() {console.log("hello es6");}})();fn();let fnWithArrow = () => (function(){console.log("hello es6 with arrow!")})()let fnWithArrow2 = (()=>{return ()=>{console.log("hello es6 with arrow!!!")}})();// fnWithArrow();fnWithArrow2();</script>
</body>
</html>

8.箭头函数this指向和注意事项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数需要注意</title>
</head>
<body><script>// this指向，没有// es5中this指向，取决于该函数的上下文对象// function.bind() 是将function绑定到其他对象身上的做法,绑定到参数上的thislet PageHandle = {id: 123,init: function (){document.addEventListener('click', function (event){//Uncaught TypeError: this.doSomething is not a function// this => documentthis.doSomething(event.type);}.bind(this), false);},doSomething: function (type) {console.log(`事件类型: ${type},当前id: ${this.id}`)}}// PageHandle.init();// 使用箭头函数let pageHandler = {id: 123,init:  () => {// 箭头函数是没有this指向的，箭头函数内部this值只能通过查找作用域链来确定，// 一旦使用箭头函数，当前就不存在作用域链，全部没有的话，就找到了window对象document.addEventListener('click', (event) => {//Uncaught TypeError: this.doSomething is not a function// this => documentthis.doSomething(event.type);});},doSomething: function (type) {console.log(`事件类型: ${type},当前id: ${this.id}`)}}pageHandler.init();// 如果上边的pageHandler.init定义方法都是箭头函数，那么就会找到这一层的scopefunction doSomething(type) {console.log(`this is window scope. ${type}`);}// 使用箭头函数注意事项/** 1.使用箭头函数的注意事顶1：使用箭头函数函数内部没有arguments*/// let getVal = (a, b) => {//   console.log(arguments)// 没有作用域了，相应的argument也不在//   return a + b;// }// console.log(getVal(1, 3))let getVal2 = function (a, b) {console.log(arguments)return a + b;}console.log(getVal2(5, 8));// 箭头函数能使用new关键字实例化对象// let Person = ()=> {//// }// 这样可以创建new Personlet Person = function(a,b) {return {age: a,name: b}}// function函数也是一个函数，但是箭头函数不是一个对象，其实就是一个语法糖(表达式)let p = new Person(11,"tom");console.log(p)</script>
</body>
</html>

9.解构赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解构赋值</title>
</head>
<body>
<script>// 解构赋值是对赋值运算符的一种扩展// 它针对数组和对象来进行操作// 优点: 代码书写上简洁易读let node = {type: 'iden',name: 'foo'}// 完全解构let {type, name} = node;console.log(type, name)let obj = {a: {name:"张三"},b:[],c:"hello world"}// 不完全解构let {a,b,c} = obj;// console.log(a)// console.log(b)// console.log(c)// 剩余运算符,起别名let {a:ss,...res} = obj;// console.log(aa,res)console.log(ss)console.log(res)// 数组解构let arr = [1,2,3]let [t,m,p] = arr;console.log(t,m,p)// 嵌套let [r,[w],v] = [12,[13],49];console.log(r,w,v)
</script>
</body>
</html>

10.对象扩展

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展的对象</title>
</head>
<body>
<script>const name = "yeskip", age = 20;const person = {name: name, age: age, sayName() {}}// 对象扩展const person1 = {name, // 等价于name:nameage, // 等价于age:agesayName() {console.log(this)console.log(this.name)}}person1.sayName();// 特殊的写法const names = 'a'const obj = {isShow: true,['f' + names]() {console.log(this)},[names + 'bc']: 123}console.log(obj)// is() 比较两个对象严格相等 assign()console.log(Object.is(NaN, NaN));console.log(NaN === NaN);// assign对象的合并let target = {}let obj1 = {name: '李四'}let obj2 = {age: 34}Object.assign(target, obj1, obj2)console.log(target)</script>
</body>
</html>

11.Symbol类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>symbol类型</title>
</head>
<body><script>// 原始数据类型 Symbol，它表示独一无二的值// 最大的用途：用来定义对象的私有变量const name = Symbol('name')const name2 = Symbol('name')console.log(name === name2)let s1 = Symbol('s1');console.log(s1)let obj = {[s1]:'小袁'}//let obj = {}// obj[s1] = '小袁'console.log(obj)// 如果用symbol定义的对象中的变量，取值时一定要用[变量名]console.log(obj[s1])console.log("obj对象所有的keys:"+Object.keys(obj)); // 看不到// 获取自己的属性获取let s = Object.getOwnPropertySymbols(obj);console.log(s)// 反射获取let m = Reflect.ownKeys(obj);console.log(m)console.log(m[0])console.log(obj[m[0]])</script>
</body>
</html>

12.Set集合类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Set集合类型</title>
</head>
<body>
<script>// 集合let set = new Set();set.add("张三")set.add(12)set.add(123)// set.delete(12)// 校验某个值是否在集合set中let exist = set.has(`张三`);// console.log(exist)// console.log(set)// 集合长度// console.log(set.size);set.forEach((item, index) => {console.log(item, index)})// 将set转换为数组,扩展运算符let arr = [...set]console.log(arr)//了解即可 1.set中对象的引用无法被释放let set3 = new Set(),obj1 = {}set3.add(obj1)obj1 = null;console.log(set3) // 还存在一个元素，无法释放// 使用弱引用let set4 = new WeakSet(),obj2 ={name:"张三"};set4.add(obj2)obj2 = null;console.log(set4)// WeakSet// 1. 不能传入非对象类型的参数// 2. 不可迭代// 3. 没有forEach()// 4. 没有size属性</script>
</body>
</html>

13.Map数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Map数据类型</title>
</head>
<body>
<script>let map = new Map();map.set("name", "张三")map.set("age", 12)map.set([0, 1, 2], "hello");let map2 = new Map([['1', 2], ['3', 4]]);console.log("map2:", map2)console.log(map)let existAge = map.has("age");console.log(existAge)map.forEach((value, key) => {console.log(key, value)})// 删除key为name的项map.delete("name")//清空mapmap.clear()let weakMap = new WeakMap();</script>
</body>
</html>

14.数组的扩展_1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的扩展</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<script>// 数组的方法 from() of()// from() 将伪数组转换为真正的数组function add() {let args = Array.from(arguments)console.log(args)}add(1, 2, 3)// from应用let lis = Array.from(document.querySelectorAll('li'));console.log(lis)// 扩展运算符let les = [...document.querySelectorAll('li')]console.log(les)// from 接收第二个参数，用于对每个元素进行处理let list = [1, 2, 3]let newList = Array.from(list, ele => ele ** 2);console.log(newList)// of将一组值转换为一个数组(将任意类型的数据转为一个数组)let arr2 = Array.of(3, 11, 20, '30', {id: 12})console.log(arr2)// 3.copywithin()// 从3位置往后的所有数值，替换从0位置往后的三个数值console.log([0, 1, 2, 4, 5, 6, 7, 8, 9].copyWithin(0, 3));// find findIndex()// find 找出第一个符合条件的数组成员// findIndex找出第一个符合条件的数组成员索引let number = [1, 2, -10, 5, -8].find(n => n < 0);let index = [1, 2, -10, 5, -8].findIndex(n => n < 0);console.log(number,index)
</script>
</body>
</html>

15.数组的扩展_2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的扩展2</title>
</head>
<body><script>// entries() keys() values() 返回一个遍历器，可以使用for...of循环遍历let arr = [1,2,3,4]let entries = arr.entries();let keys = arr.keys();let values = arr.values();for (let key of keys) {console.log(key)}for (let value of values) {console.log(value)}for (let [index,ele] of entries) {console.log(index + "==> " + ele)}// 还可以使用遍历器下一部分讲// includes()返回一个布尔，表示某个数组是否包含给定值console.log([12,56,55].includes(12))console.log([12,56,55].includes(51))</script>
</body>
</html>

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

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

相关文章

React自定义Componment和State深层次理解-07

React自定义Componment和State深层次理解-07

本节主要从底层原理上分析下React开发相关的内容和注意事项&#xff0c;本节会围绕使用展开&#xff0c;而非源码讲解。 Componment详解 什么是组件 在 MVVM架构出现之前&#xff0c;组件主要分为两种。 狭义上的组件&#xff0c;又称为 UI 组件&#xff0c;比如 Tabs 组件、…
阅读更多...
Java计算日期相差天数的几种方法

Java计算日期相差天数的几种方法

Java计算日期相差天数的几种方法 &#x1f5d3;️ Java计算日期相差天数的几种方法摘要引言一、使用java.util.Date和java.util.Calendar&#x1f4c5;1. 使用java.util.Date示例代码 2. 使用java.util.Calendar示例代码 二、使用java.time.LocalDate&#x1f4c6;示例代码 三、…
阅读更多...
微信小程序文本框输入显示已经输入的字数

微信小程序文本框输入显示已经输入的字数

我们遇到这样的需求&#xff0c;就是微信小程序的输入框下面需要显示输入的字数&#xff1a; 我们通常会使用bindinput事件&#xff0c;让显示的字数等于value的长度&#xff0c;看下面的图&#xff1a; 但在实践中&#xff0c;真机测试中&#xff0c;我们会发现以下问题: 这个…
阅读更多...
IP编址、进制转换、IP地址分类、变长子网掩码VLSM、无类域间路由CIDR

IP编址、进制转换、IP地址分类、变长子网掩码VLSM、无类域间路由CIDR

前言 网络层位于数据链路层与传输层之间。网络层中包含了许多协议&#xff0c;其中最为重要的协议就是IP协议。网络层提供了IP路由功能。理解IP路由除了要熟悉IP协议的工作机制之外&#xff0c;还必须理解IP编址以及如何合理地使用IP地址来设计网络。 IP编址 每个网段上都有两…
阅读更多...
Java的类路径究竟是什么？

Java的类路径究竟是什么？

回答 问了chatgpt这个问题&#xff0c;首先类路径的定义是&#xff1a; 是指一组路径&#xff0c;这些路径告诉Java虚拟机&#xff08;JVM&#xff09;和类加载器在哪里可以找到应用程序所需的类和资源文件。说白了就是在运行java程序的时候需要先将java源代码编译成class文件…
阅读更多...
基础IO用户缓冲区 、inode、硬软链接【Linux】

基础IO用户缓冲区 、inode、硬软链接【Linux】

文章目录 用户缓冲区磁盘磁盘分区EXT2文件系统的存储方案 inode软链接硬链接 用户缓冲区 代码一&#xff1a; 1 #include<stdio.h>2 #include<unistd.h>3 #include<string.h> 4 int main()5 {6 const char * fstr &…
阅读更多...
基于FIDO2和USBKEY硬件的SSH认证

基于FIDO2和USBKEY硬件的SSH认证

在 8.2&#xff08;最新为 8.3&#xff09;版本中&#xff0c;OpenSSH 提供了对 FIDO 和 UAF 的支持。从此用户就可以用硬件 USBKEY 证书进行 SSH 原生认证。这样可以实现简捷、有效和安全的 SSH 认证。本文我们就就少一下 FIDO2 以及 OpenSSH 对其的支持&#xff0c;并尝试一下…
阅读更多...
【调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件】

【调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件】

调试笔记-系列文章目录 调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 文章目录 调试笔记-系列文章目录调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 前言一、调试环境操作系统&#xff1a;Ubuntu 22.04.4 LTS编译环境调试目标 二、调…
阅读更多...
日志的介绍及简单实现

日志的介绍及简单实现

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 日志是什么&#xff1f; 为什么需要日志&#xff1f; 实现一个简单日志 时间戳 clock_gettime time & localtime 可变模板参数(使用C语言)&#xff0c;va_start & va_end & vsprintf 宏 __LINE__…
阅读更多...
Digital Image Processing System（DIPS）

Digital Image Processing System（DIPS）

数字图像处理系统 Digital Image Processing System&#xff08;DIPS&#xff09; 早前版本&#xff1a; ​​​​​​​DIPS_YTPC OCR-CSDN博客
阅读更多...
数据结构和算法｜排序算法系列（二）｜冒泡排序

数据结构和算法｜排序算法系列（二）｜冒泡排序

首先需要你对排序算法的评价维度和一个理想排序算法应该是什么样的有一个基本的认知&#xff1a; 《Hello算法之排序算法》 主要内容来自&#xff1a;Hello算法11.3 冒泡排序 我觉得冒泡排序非常有意思&#xff0c;也非常简单&#xff0c;就是不停地交换相邻的元素即可&#…
阅读更多...
ElasticSearch插件版本与ES版本不对应的解决方案

ElasticSearch插件版本与ES版本不对应的解决方案

一、背景 最近需要给es安装ik、hanlp分词器和ingest-attachment管道&#xff0c;服务器已有的es版本为8.5.3&#xff08;似乎太新了&#xff09;&#xff0c;hanlp和ingest-attachment都没有这么高的版本&#xff0c;因此只能下载相对老的版本&#xff0c;然后自己修改配置文件…
阅读更多...
安全设计 | 安全设计不得马虎！微软STRIDE威胁建模方法让你事半功倍，快速发现应用安全隐患！

安全设计 | 安全设计不得马虎！微软STRIDE威胁建模方法让你事半功倍，快速发现应用安全隐患！

STRIDE威胁建模方法最早发表于2006年11月的《MSDN杂志》&#xff0c;作者是微软的工程师Shawn Hernan、Scott Lambert 、Tomasz Ostwald 和 Adam Shostack。那我们为什么要进行威胁建模&#xff1f; 如何使用数据流图对系统进行威胁建模&#xff1f;如何减轻威胁&#xff1f;接…
阅读更多...
java项目之桂林旅游景点导游平台源码(springboot+vue+mysql)

java项目之桂林旅游景点导游平台源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的桂林旅游景点导游平台。 项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 桂林旅游景点导游…
阅读更多...
mysql5.5版本安装过程

mysql5.5版本安装过程

mysql是关系型数据库的管理系统 将安装包放在 c盘根目录 名称为mysql 在该路径下cmd进入命令执行窗口 出现此页面说明安装成功 需要修改配置文件内容 将my-medium.ini 复制粘贴并改名为 my.ini 并添加如下内容 改好之后在mysql目录下cmd进入命令执行窗口 切换到cd bin …
阅读更多...
Java实现图书系统

Java实现图书系统

首先实现一个图书管理系统,我们要知道有哪些元素? 1.用户分成为管理员和普通用户 2.书:书架 书 3.操作的是: 书架 目录 第一步:建包 第二步:搭建框架 首先:完成book中的方法 其次:完成BookList 然后:完成管理员界面和普通用户界面 最后:Main 第三步:细分方法 1.退…
阅读更多...
Spring—Spring配置文件概念及应用（实现一个图形验证码）

Spring—Spring配置文件概念及应用（实现一个图形验证码）

文章目录 配置文件配置文件作用配置文件的格式配置文件优先级说明配置文件书写代码的格式yml文件代码的格式 Value注解 properties 缺点分析properties VS yml实现一个验证码程序 配置文件 配置文件作用 整个项目的重要信息我们都会配置在配置文件中&#xff0c;比如说我们数…
阅读更多...
视频拼接融合产品的产品与架构设计(四）分布式GPU运算合并单元

视频拼接融合产品的产品与架构设计(四）分布式GPU运算合并单元

上一篇如下 视频拼接融合产品的产品与架构设计(三&#xff09;内存和显存单元数据迁移 视频合并单元说明 对下面这张图做些说明&#xff0c;视频接入是比较常见&#xff0c;可以说是普通&#xff0c;但是做到接入后随即进行比较重的算法运算&#xff0c;这个在视频领域并不多…
阅读更多...
软件项目详细设计说明书实际项目参考（word原件下载及全套软件资料包）

软件项目详细设计说明书实际项目参考（word原件下载及全套软件资料包）

系统详细设计说明书案例&#xff08;直接套用&#xff09; 1.系统总体设计 2.性能设计 3.系统功能模块详细设计 4.数据库设计 5.接口设计 6.系统出错处理设计 7.系统处理规定 软件开发全文档下载&#xff08;下面链接或者本文末个人名片直接获取)&#xff1a;软件开发全套资料-…
阅读更多...
C++ 常用UI库

C++ 常用UI库

AWTK github gitee doc scons 类似RT-Thread element github C Cross platfrom C GUI libraries&#xff0c;QT可替代方案。调试包 SDL GUI cegui 创作不易&#xff0c; 小小的支持一下吧&#xff01;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023