ES6-11最新语法大全

最新推荐文章于 2025-04-28 16:16:15 发布
最新推荐文章于 2025-04-28 16:16:15 发布
阅读量1.1k 收藏 9
点赞数
分类专栏： ES6-11 文章标签： es6/es7 es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangxiaochaoc/article/details/114917082
版权

ES6-ES11

一、ES简介

  • ECMAScript，欧洲计算机制造商协会
  • ES是一种标准，而JS是ES的一种实现
  • 每年的ES版本中都会引入新特性
    在这里插入图片描述
    在这里插入图片描述

二、NRM的安装与使用

  • NRM是切换源的工具

2.1安装

  • window命令：
 npm install -g nrm
  • mac下命令：
sudo npm install -g nrm

2.2 操作指令

  • 查看可选源
nrm ls
  • 测试源的速度
 nrm test +源名称
  • 切换源
nrm use +源名称
  • 增加定制源
nrm add 源名  http://ip地址
  • 删除源
nrm del+源名

三、let const var

3.1 var 声明

  • delete只能删除对象的属性，不能删除变量

在这里插入图片描述
在这里插入图片描述

  • 说明b是属性，不是变量。b是全局变量window的属性

3.2 JS的败笔

在这里插入图片描述

  • 可以看到 window.a也被打印出来了，如果有很多全局变量，就会造成变量污染
  • 为了解决这一败笔，let就诞生了

3.3 let

在这里插入图片描述

  • 可以看到window.a是undefined,说明let声明的变量不属于顶层对象window
  • 不允许重复声明（多次声明同一变量）
  • 不存在变量提升
  • 暂时性死区（就是防止在声明变量之前去使用变量）
  • 具有块级作用域

3.4 const

  • 不属于顶层对象window
  • 不允许重复命名
  • 暂时性死区
  • 具有块级作用域
  • 不存在变量提升
  • 声明常量

四、解构赋值

  • 含义：找一定模式，从数组或对象中提取值，对变量进行赋值

4.1 数组结构赋值

在这里插入图片描述
在这里插入图片描述

4.2 对象解构赋值

在这里插入图片描述

  • 变量起别名
    在这里插入图片描述

4.3 字符串解构赋值

在这里插入图片描述

4.4 应用场景

  • 对于有默认值的数组和对象
  • 对参数的解构赋值
    在这里插入图片描述
  • 对返回值结构赋值
    在这里插入图片描述
  • 对json解构
    在这里插入图片描述

五、数组的各种遍历方式

5.1 for

在这里插入图片描述

5.2 forEach

  • 注意：forEach不支持break和continue关键字
    在这里插入图片描述

5.3 map

  • map的返回值是新数组，但不会改变原数组
    在这里插入图片描述

5.4 filter

  • 数组过滤 返回符合条件的元素组成新的数组返回
    在这里插入图片描述

5.5 some

  • 返回值是布尔值，只要有一个满足要求就返回true
    在这里插入图片描述

5.6 every

在这里插入图片描述

5.7 reduce

  • 作为一个函数返回的累加器
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021031713502298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd4aWFvY2hhb2M=,size_16,color_FFFFFF,t_7
    在这里插入图片描述
    在这里插入图片描述

5.8 for…in

  • 一般不用来遍历数组，因为会把原型下的方法也遍历出来

在这里插入图片描述

5.9 find

  • 返回第一个通过测试的元素
    在这里插入图片描述

5.10 findIndex

  • 返回第一个符合条件的元素的下标
    在这里插入图片描述

5.11 for…of

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、数组的扩展

6.1 类数组（伪数组）

  • 如下 都是类数组，可以用typeof instanceof Array.isArray来验证

在这里插入图片描述
在这里插入图片描述

6.2 将伪数组转换成数组

6.2.1 Array.prototype.slice.call()

在这里插入图片描述

6.2.2 Array.from()

在这里插入图片描述

6.3 构造函数表示数组

在这里插入图片描述

  • 显然第二种情况和我们想象的不太一样，我们想要的是[3],为了解决这一问题，我们就引入了Array.of

6.4 Array.of()

在这里插入图片描述

6.5 copyWithin

在这里插入图片描述

6.6 fill

在这里插入图片描述

6.7 indexOf和includes

  • indexOf不能检测数组中是否有NAN
  • NAN==NAN结果是false
    在这里插入图片描述

七、函数的参数

7.1 ES5传参

在这里插入图片描述

  • 当y有默认值时
    在这里插入图片描述
  • 上一步代码有一个问题，当y我们传0时 0===false
  • 如果要解决这种问题，需要麻烦的判断
  • 所以我们可以用ES6的传参方式来解决这一问题
    在这里插入图片描述

7.2 ES6传参

  • ES6解决参数默认值问题
    在这里插入图片描述
  • 参数变量是默认声明的
    在这里插入图片描述
    -参数名不允许重复
  • 默认值应该放到最后边
  • length能获取函数中没有指定默认值的参数的个数
    在这里插入图片描述
  • 默认参数作用域问题
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

八、扩展运算符与rest参数

8.1 扩展运算符

  • 把数组或类数组展开成用逗号分隔的值
    在这里插入图片描述
  • ES5合并数组
    在这里插入图片描述
  • ES6合并数组
    在这里插入图片描述

8.2 rest参数

  • 把逗号隔开的值组成一个新的数组
  • ES5不定参数求和
    在这里插入图片描述
  • ES6不定参数求和
    在这里插入图片描述
    在这里插入图片描述

九、箭头函数

9.1 ES5声明函数

  • 第一种会预编译，第二种不会

在这里插入图片描述
在这里插入图片描述

9.2 ES6箭头函数

  • this指向定义时所在的函数的对象，而不是调用时所在的对象
  • 不可以当做构造函数
  • 不可以使用arguments对象
    在这里插入图片描述

十、对象的的扩展

10.1 属性的简写

  • 当属性值与属性相同时，可以这样简写
    在这里插入图片描述

10.2 属性名表达式

在这里插入图片描述

10.3 方法的简写形式

  • 注意： 对象里定义方法不要写箭头函数，因为this指向问题

在这里插入图片描述

10.4 Object.is()

  • 判断两个值是否严格相等
与==的区别是：==会进行类型转换，而Object.is不会

与===的区别是：===会认为+0和-0相等，NumberNaN与NaN不相等，而Object.is不会

10.5 Object.assign()

  • 对象复制
    在这里插入图片描述
    在这里插入图片描述
  • Object.assign()是浅拷贝
  • 可以用于对象合并，将源对象的所有可枚举属性复制到对象中（第一个参数是对象，其余都是源对象）

10.6 in

10.6.1 判断对象是否包含某个属性

在这里插入图片描述

10.6.2 数组里判断当前下标是否有值

在这里插入图片描述

10.7 对象的遍历

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十一、深拷贝与浅拷贝

  • Object.assign()是浅拷贝，拷贝引用类型时只是把地址指过去而已
  • JSON.parse(JSON.stringify(obj))可以实现新拷贝

11.1 手写深拷贝

在这里插入图片描述

十二、面向对象与面向过程

  • 面向对象就是把物体本身看作是一个对象，再从对象本身具有的功能和方法出发
  • 面向过程就是把大象装进冰箱一共分为三步，必须按照这个顺序进行
  • JS是基于面向对象的编程语言
  • 类（class）是对象（Object）的模板，定义了一组对象共有的方法和属性

十三、ES5中的类与继承

13.1 ES5中的类

在这里插入图片描述

  • 静态属性直接定义在类上，实例属性定义在构造函数中
    在这里插入图片描述
  • 静态方法
  • 实例方法都定义在类的原型上
  • 静态方法里的this指向的是构造函数
    在这里插入图片描述

13.2 ES5中的继承

13.2.1 构造函数的继承

在这里插入图片描述

13.2.2 原型继承

在这里插入图片描述

13.2.3 组合继承在这里插入图片描述

十四、ES6的类与继承

14.1 ES6中的类

在这里插入图片描述

14.2 ES6的继承

在这里插入图片描述

14.3 定义静态属性

  • class中目前不支持定义静态属性

在这里插入图片描述

es6新语法
qq_43260366的博客
06-06 1136
ES2015(2015年发布的， javascript的第六个版本) 以及后续版本就是统称为ES6；解构赋值语法是一种 Javascript 表达式。通过**解构赋值，**可以将 属性/值 从 对象/数组 中取出，赋值给其他变量； es6-解构赋值 语法 ：let [变量1，变量2，…变量3] = 数组举例说明 利用数组解构赋值交换两个变量的值 非解构-借助第三个变量进行交换 解构 [2]对象 es5-非解构赋值 es6-解构赋值 语法1：
ES6-ES11新特性（这一篇就够了）
m0_61490399的博客
06-29 3917
ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展ECMAScript 是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为 LiveScript，最后重命名为 JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公
ES6-11语法详解
共勉
05-24 3863
ES6 语法详解1、变量1.1、变量的定义和使用 1、变量 1.1、变量的定义和使用
es2025新特性
最新发布
weixin_45403802的博客
04-28 629
ES2025 的新特性进一步提升了 JavaScript 的开发效率和代码质量，尤其在异常处理、集合运算、正则表达式和模块系统等方面提供了更强大的工具。这些特性不仅简化了开发流程，还为构建更高效、更可靠的应用提供了支持。随着浏览器的逐步支持，开发者可以开始在项目中尝试这些新特性，以提升代码的可维护性和性能。
ES6新语法
m0_59023231的博客
04-08 333
ES6新语法
ES6-11语法万字简单总结，看这个就够了，持续更新中...
你是我修复不了的bug，但我会用一生去维护
11-13 1105
ES6-11语法简单总结 什么是ES？ 我们经常说到的ES5、ES6到底指的是什么？ ES是指ECMAScript，它是脚本语言的规范。而平时我们经常编写的JavaSript，是ECMAScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性。我们所学的JS基础应该都是基于ES5(早在2009年12月份ECMA公司就发布了ECMAScript5)，而我们嘴边所说的ES6是在2015年发布的，之后每年ECMA都会更新迭代新版本的ES，不过之后的每一版改动的内容不多。 我们会发现，现在关
ES6语法
架构专栏
05-19 294
ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。 变量声明let和const let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关...
es6-string-html：es6多行字符串中的突出显示代码
02-05
在es6多行字符串中添加了对代码的语法突出显示支持： HTML（包括带引号和未引号的html的atts） SQL 社区 在ES6模板文字中突出显示CSS 在python多行字符串中突出显示SQL代码 在多行字符串中突出显示JS 安装 从扩展...
前端开源库-es6-promisify-all
08-30
ES6 引入了一种新的语法特性——Promise，它为处理异步操作提供了更优雅的方式，避免了传统的回调函数地狱（Callback Hell）。`es6-promisify-all` 是一个前端开源库，旨在帮助开发者将所有非 Promise 的异步方法...
JavaScript --- ES6 涵盖（ES6 -- ES11）语法学习
02-24
以上就是从ES6到ES11的一些重要语法特性，这些新功能为JavaScript开发者提供了更多工具和灵活性，使代码更简洁、更易于理解和维护。学习并掌握这些知识点，将有助于提升你的JavaScript开发能力。
es6-ES6概念&新增语法&内置对象拓展1
08-03
本篇将详细探讨ES6中的关键概念、新增语法以及内置对象的拓展。 首先，让我们了解什么是ES6。ES6，全称ECMAScript 2015，是ECMAScript标准的第六版，由ECMA国际制定。ECMAScript是一种标准化的脚本语言规范，它规定...
ES6+新语法
qq_50582468的博客
03-16 1039
当代码在执行之前，会把所有在当前作用域下var声明的变量提升到当前作用于的最前面，只提升声明，不提升赋值，然后依次执行代码。可以把数组进行展开，可以利用其求数组的最大值以及合并数组的操作，剩余参数在函数内部进行使用。剩余参数允许我们将一个不定数量的参数表示为一个数组，其为真数组，例如其用...参数数组名。动态参数是伪数组，箭头函数里没有arguments，剩余参数为真数组，开发中剩余参数常用。：另外如果还有其他参数，则会先把用户输入的数给其他参数，剩余的参数给定义的数组参数。2、以数组进行开头的时候。
es6新语法及特性
热门推荐
weixin_62650212的博客
03-19 1万+
在现代前端开发中，JavaScript 已经成为了必不可少的一部分，而 ES6（ECMAScript 2015）则为 JavaScript 带来了一系列的新语法和特性，使得 JavaScript 更加现代化、高效和易用。作为开发者，掌握 ES6 是必不可少的，因为它可以提高我们的开发效率，减少代码冗余，并提高代码的可读性和可维护性。在本篇博文中，我们将介绍 ES6 中一些重要的新语法和特性，帮助读者更好地掌握这一新的 JavaScript 版本。
ES6-11、基本全部语法
weixin_51225684的博客
02-23 579
Map的属性和方法：(1)size:返回Map元素的个数，(2)set:增加一个新元素，返回当前Map，(3)get：返回键名对象的键值，(4)has：检测Map中是否包含某个元素，返回布尔值,(5)clear:清空集合，返回undefined。集合的属性和方法：(1)size:返回集合的个数，(2)add:增加一个新元素，返回当前集合，(3)delete：删除元素，返回布尔值，(4)has：检测集合中是否包含某个元素，返回布尔值。(3)箭头函数适合与this无关的回调，如定时器，数组方法的回调。
再学JavaScript ES(6-11)全版本语法大全
以码平川的博客
11-20 816
学习es6语法
Es6新语法(持续更新中)
Grapefruit_____的博客
07-18 205
1.let const 异同点2.模板字符串3.扩展运算
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值