JavaScript之ES6常用语法

文章目录

  • JavaScript之ES6常用语法
  • 1. 基本用法
    • 1.变量声明var、let、const
      • 1. 作用域
      • 2. 变量提升
      • 3. 声明次数
      • 4. const常量
    • 2.模板字符串
    • 3.函数
      • 3**函数默认参数**
    • 4.拓展的对象功能
    • 5.更方便的数据访问--解构
    • 6.Spread Operator 展开运算符
    • 7.import 和 export
    • 8. Promise
    • 9.Generators
    • 总结
  • 2. 常用案例
    • 1. JSON数组去重
    • 总结
  • 2. 常用案例
    • 1. JSON数组去重

JavaScript之ES6常用语法

1. 基本用法

1.变量声明var、let、const

varletconst
作用域声明的变量往往会越域声明的变量有严格的作用域
声明次数可多次声明变量只能声明一次只能声明一次,
一旦声明必须初始化,否则会报错
变量提升会变量提升不会变量提升
是否改变不允许改变

1. 作用域

 {var a = 1;let b = 2;}console.log(a);  // 1console.log(b);  // ReferenceError: b is not defined

2. 变量提升

// var 会变量提升// let 不存在变量提升console.log(x);  // undefinedvar x = 10;console.log(y);   //ReferenceError: y is not definedlet y = 20;

在ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

  function aa() {if(bool) {var test = 'hello man'} else {console.log(test)}}

以上的代码实际上是:

  function aa() {var test // 变量提升if(bool) {test = 'hello man'} else {//此处访问test 值为undefinedconsole.log(test)}//此处访问test 值为undefined}

所以不用关心bool是否为true or false。实际上,无论如何test都会被创建声明。

接下来ES6主角登场:
我们通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?

  • 在一个函数内部
  • 在一个代码块内部

说白了 {}大括号内的代码块即为let 和 const的作用域。

看以下代码:

  function aa() {if(bool) {let test = 'hello man'} else {//test 在此处访问不到console.log(test)}}

let的作用域是在它所在当前代码块,但不会被提升到当前函数的最顶部。

再来说说const。

    const name = 'lux'name = 'joe' //再次赋值此时会报错

说一道面试题

    var funcs = []for (var i = 0; i < 10; i++) {funcs.push(function() { console.log(i) })}funcs.forEach(function(func) {func()})

这样的面试题是大家常见,很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢?两种解决方法。直接上代码。

    // ES5告诉我们可以利用闭包解决这个问题var funcs = []for (var i = 0; i < 10; i++) {func.push((function(value) {return function() {console.log(value)}}(i)))}// es6for (let i = 0; i < 10; i++) {func.push(function() {console.log(i)})}

达到相同的效果,es6简洁的解决方案是不是更让你心动!!!

3. 声明次数

// var 可以声明多次// let 只能声明一次var m = 1var m = 2let n = 3let n = 4console.log(m)  // 2console.log(n)  // Identifier 'n' has already been declared

4. const常量

// const
// 1. 声明之后是一个常量,不允许改变
// 2. 一但声明必须初始化,否则会报错const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

2.模板字符串

es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点。

第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

    //es5var name = 'lux'console.log('hello' + name)//es6const name = 'lux'console.log(`hello ${name}`) //hello lux

第二个用途,在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

    // es5var msg = "Hi \man!"// es6const template = `<div><span>hello world</span></div>`

对于字符串es6当然也提供了很多厉害的方法。说几个常用的。

    // 1.includes:判断是否包含然后直接返回布尔值let str = 'hahay'console.log(str.includes('y')) // true// 2.repeat: 获取字符串重复n次let s = 'hh'console.log(s.repeat(3)) // 'hehehe'//如果你带入小数, Math.floor(num) 来处理

3.函数

3函数默认参数

在ES5我们给函数定义参数默认值是怎么样?

    function action(num) {num = num || 200//当传入num时,num为传入的值//当没传入参数时,num即有了默认值200return num}

但细心观察的同学们肯定会发现,num传入为0的时候就是false, 此时num = 200 与我们的实际要的效果明显不一样

ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。

    function action(num = 200) {console.log(num)}action() //200action(300) //300

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

  • 不需要function关键字来创建函数
  • 省略return关键字
  • 继承当前上下文的 this 关键字
//例如:[1,2,3].map( x => x + 1 )
//等同于:[1,2,3].map((function(x){return x + 1}).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{};例如:

    var people = name => 'hello' + name//参数name就没有括号

作为参考

    var people = (name, age) => {const fullName = 'h' + namereturn fullName} //如果缺少()或者{}就会报错

4.拓展的对象功能

对象初始化简写

ES5我们对于对象都是以键值对的形式书写,是有可能出现价值对重名的。例如:

    function people(name, age) {return {name: name,age: age};}

键值对重名,ES6可以简写如下:

    function people(name, age) {return {name,age};}

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法:

    const people = {name: 'lux',getName: function() {console.log(this.name)}}

ES6通过省略冒号与 function 关键字,将这个语法变得更简洁

    const people = {name: 'lux',getName () {console.log(this.name)}}

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象,然后返回目标对象。第一参数即为目标对象。在实际项目中,我们为了不改变源对象。一般会把目标对象传为{}

    const obj = Object.assign({}, objA, objB)

5.更方便的数据访问–解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息,ES6新增了解构,这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下:

    const people = {name: 'lux',age: 20}const name = people.nameconst age = people.ageconsole.log(name + ' --- ' + age)

是不是觉得很熟悉,没错,在ES6之前我们就是这样获取对象信息的,一个一个获取。现在,解构能让我们从对象或者数组里取出数据存为变量,例如

    //对象const people = {name: 'lux',age: 20}const { name, age } = peopleconsole.log(`${name} --- ${age}`)//数组const color = ['red', 'blue']const [first, second] = colorconsole.log(first) //'red'console.log(second) //'blue'

6.Spread Operator 展开运算符

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿…接下来就展示一下它的用途。

组装对象或者数组

    //数组const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink]//对象const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

    //数组const number = [1,2,3,4,5]const [first, ...rest] = numberconsole.log(rest) //2,3,4,5//对象const user = {username: 'lux',gender: 'female',age: 19,address: 'peking'}const { username, ...rest } = userconsole.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}

对于 Object 而言,还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名,右边覆盖左边

    const first = {a: 1,b: 2,c: 6,}const second = {c: 3,d: 4}const total = { ...first, ...second }console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

import导入模块、export导出模块

//全部导入
import people from './example'
//有一种特殊情况,即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
// 部分导出
export class App extend Component {};

导入的时候有没有大括号的区别总结:

1.当用export default people导出时,就用 import people 导入(不带大括号)2.一个文件里,有且只能有一个export default。但可以有多个export3.当用export name 时,就用import { name }导入(记得带上大括号)4.当一个文件里,既有一个export default people, 又有多个export name 或者 export age时,导入就用 import people, { name, age } 5.当一个文件里出现n多个 export 导出很多模块,导入时除了一个一个导入,也可以用import * as example

8. Promise

在promise之前代码过多的回调或者嵌套,可读性差、耦合度高、扩展性低。通过Promise机制,扁平化的代码机构,大大提高了代码可读性;用同步编程的方式来编写异步代码,保存线性的代码逻辑,极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求

    fetch('/api/todos').then(res => res.json()).then(data => ({ data })).catch(err => ({ err }));

今天看到一篇关于面试题的很有意思。

    setTimeout(function() {console.log(1)}, 0);new Promise(function executor(resolve) {console.log(2);for( var i=0 ; i<10000 ; i++ ) {i == 9999 && resolve();}console.log(3);}).then(function() {console.log(4);});console.log(5);

Excuse me?这个前端面试在搞事!

当然以上promise的知识点,这个只是冰山一角。需要更多地去学习应用。

9.Generators

生成器( generator)是能返回一个迭代器的函数。生成器函数也是一种函数,最直观的表现就是比普通的function多了个星号*,在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号,机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了,直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时,它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值,它返回的对象具有两个属性:done和value。value是你获得的值,done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子,每张排队号就是这里的value,打印票的纸是否用完就这是这里的done。

    // 生成器function *createIterator() {yield 1;yield 2;yield 3;}// 生成器能像正规函数那样被调用,但会返回一个迭代器let iterator = createIterator();console.log(iterator.next().value); // 1console.log(iterator.next().value); // 2console.log(iterator.next().value); // 3

那生成器和迭代器又有什么用处呢?

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事,我们的函数并不会等待异步调用完再执行,你可能会想到用回调函数,(当然还有其他方案比如Promise比如Async/await)。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了,咱们也不能手动一直调用next()方法,你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

    function run(taskDef) { //taskDef即一个生成器函数// 创建迭代器,让它在别处可用let task = taskDef();// 启动任务let result = task.next();// 递归使用函数来保持对 next() 的调用function step() {// 如果还有更多要做的if (!result.done) {result = task.next();step();}}// 开始处理过程step();}

生成器与迭代器最有趣、最令人激动的方面,或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用 yield 来等待异步操作结束。

总结

ES6的特性远不止于此,但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex…等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!

2. 常用案例

1. JSON数组去重

const jsonArray = [{ id: 1, name: "张三" },{ id: 2, name: "李四" },{ id: 3, name: "王五" },{ id: 1, name: "张三" },
];const uniqueJsonArray = Array.from(new Set(jsonArray.map((item) => item.id))).map((id) => jsonArray.find((item) => item.id === id));console.log(uniqueJsonArray);

生成器与迭代器最有趣、最令人激动的方面,或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用 yield 来等待异步操作结束。

总结

ES6的特性远不止于此,但对于我们日常的开发开说。这已经是够够的了。还有很多有意思的方法。比如findIndex…等等。包括用set来完成面试题常客数组去重问题。我和我的小伙伴们都惊呆了!

2. 常用案例

1. JSON数组去重

const jsonArray = [{ id: 1, name: "张三" },{ id: 2, name: "李四" },{ id: 3, name: "王五" },{ id: 1, name: "张三" },
];const uniqueJsonArray = Array.from(new Set(jsonArray.map((item) => item.id))).map((id) => jsonArray.find((item) => item.id === id));console.log(uniqueJsonArray);

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

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

相关文章

linux(进程概念)

目录 前言&#xff1a; 正文 冯诺依曼体系结构 操作系统 &#xff08;Operator System&#xff09; 概念 目的 定位 如何理解“管理” 进程组织 基本概念 内核数据结构 代码和数据 查看进程 ps指令 top指令 父子进程 fork创建进程 小结&#xff1a; 前…

【Redis】Redis有哪些适合的场景

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 &#xff08;1&#xff09;会话缓存&#xff08;Session Cache&#xff09; &#xff08;2&#xff09;全页缓存&#xff08;FPC…

深入理解TCP网络协议(1)

目录 1.TCP协议的段格式 2.TCP原理 2.1确认应答 2.2超时重传 3.三次握手(重点) 4.四次挥手 1.TCP协议的段格式 我们先来观察一下TCP协议的段格式图解: 源/目的端口号:标识数据从哪个进程来,到哪个进程去 32位序号/32位确认号:TCP会话的每一端都包含一个32位&#xff08…

Windows 7 x64 SP1 安装 Google Chrome 109.0.5414.120 (正式版本) (64 位)

1 使用 IE 浏览器 输入网址 Google Chrome 网络浏览器得益于 Google 智能工具&#xff0c;Chrome 现在更易用、更安全、更快速。https://www.google.cn/chrome/&#xff0c;点击下载 Chrome。 2 点击 接受并安装。 3 提示。 4 保存。 5 双击 运行 ChromeSetup.exe。 6 等待安…

紫外工业相机在半导体制造检测系统中的应用

光刻机使用193-365nm波长的准分子激光器和二极管激光器产生的深紫外线来蚀刻连接晶体管的复杂电路。 裸晶圆检测 半导体制造的原材料是单晶硅&#xff0c;即所谓的裸晶圆/衬底晶圆。在检测时&#xff0c;有的污染或缺陷只有几微米大小。波长更短的紫外线&#xff0c;在识别晶圆…

9.异步爬虫

异步爬虫可以理解为非只单线程爬虫 我们下面做个例子&#xff0c;之前我们通过单线程爬取过梨视频 https://blog.csdn.net/potato123232/article/details/135672504 在保存视频的时候会慢一些&#xff0c;为了提升效率&#xff0c;我们使用异步爬虫爬取 目录 1 线程池 2 …

类和对象 第五部分第三小节:递增运算符重载

作用&#xff1a;通过重载递增运算符&#xff0c;实现自己的整型数据递增 代码案例 1.重载前置运算符 #include <iostream> #include <string> using namespace std;class MyInteger {friend ostream& operator<<(ostream& out, const MyInteger&…

Go语言常用标准库fmt、格式化占位符、获取输入

1.fmt fmt包实现了类似C语言printf和scanf的格式化I/O。主要分为向外输出内容和获取输入内容两大部分。 函数说明Print内容输出到系统的标准输出Fprintf将内容输出到一个io.Writer接口类型的变量w中Sprint把传入的数据生成并返回一个字符串Errorf根据format参数生成格式化字符…

简盒工具箱iapp源码

一款工具箱兼做软件库。 新增远程更新功能 修复了部分失效功能 修复了偶尔会卡在启动页的情况 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/88776737 更多资源下载&#xff1a;关注我。

Open CASCADE学习|读取STEP文件并显示

STEP文件是基于ISO 10303标准创建的三维模型数据交换文件&#xff0c;也称为产品模型数据交换标准&#xff08;Standard Exchange of Product data model&#xff09;。这种文件格式旨在提供一个不依赖具体系统的中性机制&#xff0c;实现产品数据的交换和共享。 STEP文件是一…

C#实现带光标的截图

1&#xff0c;目的&#xff1a; 可通过热键实现带光标与不带光标两种模式的截图。 2&#xff0c;知识点&#xff1a; 快捷键的注册与注销。 [DllImport("user32.dll", SetLastError true)] public static extern bool RegisterHotKey(IntPtr hWnd, int id, KeyMo…

在Linux中用C语言实现Socket通信

Socket是封装了TCP协议&#xff0c;让我们更容易使用TCP协议。TCP协议在OSI模型中属于四层协议&#xff0c;即传输层协议。 TCP&#xff0c;中文叫传输控制协议&#xff0c;它是一种面向连接的协议&#xff0c;就是说它通信前必须先连接&#xff0c;再能通信。设计TCP这种协议的…

【算法与数据结构】139、LeetCode单词拆分

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题可以看做一个动态规划问题。其中&#xff0c;字符串s是背包&#xff0c;而字典中的单词就是物品。…

Dubbo框架注册中心-Zookeeper搭建

Dubbo 是阿里巴巴公司开源的高性能、轻量级的Java RPC框架&#xff0c;致力于提供高性能。 Dubbo官网 本篇开始dubbo的第一篇&#xff0c;注册中心 ZooKeeper 环境搭建。 环境前置&#xff1a;由于Zookeeper是基于Java环境&#xff0c;必须安装有JDK。查看命令 java -version。…

服务端开发小记01——Tomcat

Tomcat Tomcat简介Tomcat在Linux下的安装Tomcat验证Tomcat常用命令&#xff08;Linux下&#xff09; Tomcat简介 Tomcat是一个Web容器&#xff0c;JavaEE程序可以在此运行。Tomcat是一个中间件&#xff0c;在B/S架构中&#xff0c;浏览器发出的http请求经过tpmcat中间件&#…

面试经典题---30.串联所有单词的子串

30.串联所有单词的子串 我的解法&#xff1a; 滑动窗口&#xff1a; 解法中用到了两个哈希表map1和map2&#xff0c;分别用于记录words中各个单词的出现频数和当前滑动窗口[left, right)中单词的出现频数&#xff1b;外部for循环i从0到len - 1&#xff0c;内部while循环每次会…

降压模块LM2596S的操作使用

一、技术参数 二、使用说明 1.引脚说明&#xff1a; IN输入正极 IN-输入负极 OUT输出正极 OUT-输出负极 2.输入电压范围&#xff1a;直流3.2V 至 46V (输入的电压必须比要输出的电压高1.5V以上。不能升压) 3.输出电压范围&#xff1a;直流 1.25V至 35V 电压连续可调&#…

SBDD的节点选择(Node selection)和树的扩展(Tree expansion)的操作是怎么进行的?

Node selection: 1&#xff09;选择规则&#xff1a; “focus atom”是从生成的原子中选出的&#xff0c;如果一个原子没有“capped”&#xff0c;那么它就可以被选为“focus atom”。 一个原子被“capped”是因为它的化合价约束&#xff08;valency constraint&#xff09;…

内网安全:NTLM-Relay

目录 NTLM认证过程以及攻击面 NTLM Relay攻击 NTLM攻击总结 实验环境说明 域横向移动&#xff1a;NTLM中继攻击 攻击条件 实战一&#xff1a;NTLM中继攻击-CS转发上线MSF 原理示意图 一. CS代理转发 二. MSF架设路由 三. 适用smb_relay模块进行中继攻击 域横向移动…

【李宏毅机器学习】Transformer 内容补充

视频来源&#xff1a;10.【李宏毅机器学习2021】自注意力机制 (Self-attention) (上)_哔哩哔哩_bilibili 发现一个奇怪的地方&#xff0c;如果直接看ML/DL的课程的话&#xff0c;有很多都是不完整的。开始思考是不是要科学上网。 本文用作Transformer - Attention is all you…