js中的ES6

已于 2023-05-19 19:37:37 修改
阅读量1.8k 收藏 2
点赞数 1
分类专栏： 前端开发 文章标签： javascript es6 前端
于 2023-05-18 13:43:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zouzxxi/article/details/130725393
版权

1.ECMAcript6的简介

ECMAScript6是js语言的一代标准，于2015年6月发布，本节将介绍ES6的概念及转码器babel的使用。

1.1ECMAScript6的概念

ECMAScript和JavaScript的关系是：前者是后者的规格，后者是前者的一种实现。

ES6和ECMAScript 2015的关系：ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JS的下一代标准，涵盖了ES2015,ES2016,ES2017等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。本章中提到的ES6，一般是指ES2015标准。

1.2 ES6转码器babel的使用

babel是一个广泛使用的ES6转码器，可以将ES6代码转换为ES5代码，从而在老版本的浏览器中执行。配置步骤在~~~。

2.let和const命令

2.1 let命令

用来声明变量。它的用法类似于var,但其声明的变量只在let命令所在的代码块内有效。

语法：let 变量名;

  1. let命令作用域只局限于当前代码块
  2. 使用let命令声明的变量作用域不会被提前
  3. 在相同的作用域下不能声明相同的变量

2.2 const命令

const命令用于声明一个只读常量。一旦声明，常量的值就不能改变。

语法：const 变量名;

const命令一但声明常量，就必须立即初始化，不能留到以后赋值。否则就会报错。

const的作用域于let相同，只在声明所在的块级作用域内有效。

const命令声明的常量也不支持提升，和let命令一样只能在声明之后使用。

同样const声明的常量，也与let一样不可以重复声明。

实际上，const命令保证的并不是常量的值不得改动，而是常量指向的内存地址不得改动。对于简单类型的数据（数值，字符串，布尔值），值就保存在常量指向的内存地址，因此等同于常量。但对于引用数据类型（如对象），常量指向的内存地址保存的只是一个对象地址，const只能保证这个对象地址是不能改变的，至于对象本身的属性是不是可变的，就完全不受控制了。

3.解析赋值

解构赋值是对赋值运算符的扩展。ES6允许按照一定模式从数组和对象中提取值，再对变量赋值，这被称为解构（Destructuring）。在代码编写上，解构赋值的写法更加简洁易懂，语言更加清晰明了。

3.1 数组解构赋值

3.1.1 基本使用

let [a,b,c]=[1,2,3];
console.log(a,b,c);//1,2,3

        上面的代码表示可以从数组中提取值，按照对应位置对变量赋值，本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。数组解构除基本用法外，还支持以下解构赋值形式。

 3.1.2 解构嵌套数组

        数组中可以包含数组，这被称为数组嵌套。下面代码中，变量数组中又包含数组。在匹配过程中，会按照对应位置为变量赋值。即变量a赋值为1，变量b赋值为2，变量c赋值为3。

let [a,[[b],c]]=[1,[[2],3]];
console.log(a,b,c);//1,2,3

3.1.3 不完全解构

        正常解构赋值过程中，但变量数组匹配至一部分赋值的数组时，仍然可以解构成功，这时会将第一个匹配到的值赋给变量，多余的值忽略不计。

        下面代码1中，变量a和b接受时，仅匹配到数组值中的1和2，而3则没有匹配成功。代码2中，变量a的值为1；变量b匹配嵌套数组中的第一个值，即2；变量c的值为4。

        如果左右两边的数组缺少变量或值，均可解构成功。如果解构不成功，变量的值就等于undefined,如下代码3中变量a的值为1，变量b的值为3。

//代码1
let [a,b]=[1,2,3];
console.log(a,b);//1,2
//代码2
let [a,[b],c]=[1,[2,3],4];
console.log(a,b,c);//1,2,4
//代码3
let [a,,b]=[1,2,3];
console.log(a,b);//1,3

3.1.4剩余运算符

        在解构赋值中，当无法得知变量值个数时，可以使用剩余运算符（...）进行模式匹配。通常，剩余运算符放在变量数组的最后，如下代码所示。在匹配时，变量a匹配1，变量b采用剩余运算符，则数组值的2和3都保存在变量b下，返回的结果b是一个数组，输出b显示[2,3]。

let [a,...b]=[1,2,3];
console.log(a,b);//1,[2,3]

3.1.5 解构默认值

        解构赋值允许指定默认值。在匹配过程中，如果没有匹配成功，则变量值便是提前设置好的默认值。如下代码中，变量y设置默认值为"b"。在解构时，没有匹配到新的值，则输出显示变量y的值便是“b”。

let [x,y="b"]=["a"];
console.log(x,y);//"a","b"

3.2 对象解构赋值

对象的解构与数组的解构有一个重要的不同，数组的元素是按照次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

//对象解构赋值的基本用法
let {a,b}={b:"y",a:"x"};
console.log(a,b);//x,y
let {abc}={def:"ghj"};
console.log(abc);//undefined
/*a,b两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。
变量abc则没有对应的同名属性，导致取不到值，最后等于undefined*/

//为了解决对象解构赋值中变量名与属性名不一致的问题，
let {foo:x,bar:y}={foo:"ES6",bar:"hello"};
console.log(x,y);//ES6,hello
/**foo与bar是匹配的模式，x和y才是变量。真正被赋值的是变量x和y，而不是模式foo与bar。
 * 通过这种写法即可解决变量名和属性名不一致的问题，对象解构赋值和数组解构赋值相同，
 * 除基础用法外，支持如嵌套，不完全解构等形式，二者使用方法一致。*/

//解构嵌套对象
let obj={p:["hello",{c:"woeld"}]};
let {p:[z,{c}]}=obj;
console.log(z,c);//hello,world

//不完全解构
let obje={a,b,...rest}={a:10,b:20,c:30,d:40};
console.log(a,b,rest);//10,20,{c:30,d:40}

//解构默认值
let {q=10,m=5}={q:3};
console.log(q,m);//3,5
let {a:aa=10,b:bb=5}={a:3};
console.log(aa,bb)//3,5

3.3 字符串解构赋值

字符串解构赋值是将字符串转换成一个类似数组的对象，

let [a,b,c,d,e]="hello";
console.log(a,b,c,d,e);//h,e,l,l,o

3.4 函数参数解构赋值

function add([x,y]){
    console.log(x+y);//3
}
add([1,2]);

函数add()的参数表面上是一个数组，但是在传入参数值的那一刻，数组的参数就被解构成变量x和y。对于函数内部的代码来说，得到的参数就是x和y。 

4.函数扩展

4.1 函数参数默认值

function foo(x,y){
    y=y || "world";
    console.log(x,y);
}
foo("hello");//hello world
foo("hello","");//hello world

 foo()函数包含两个参数，分别为x和y,其中对参数y设置默认值，当y没有被赋值时，y的值。y的值默认为“World”。

以ES6的写法为函数参数设置默认值。

function foo(x,y="world"){
    console.log(x,y);
}
foo("hello");//hello world
foo("Hello","");//Hello

函数参数默认值也有它的局限性，具体表现如下。

  • 参数变量是默认声明的，不能用let或const命令再次声明。
  • 使用参数默认值时，函数不能有同名参数。
  • 参数默认值一定要放在参数最后。 

4.2 rest参数与name属性

rest参数用于获取多余参数，name属性用于获取函数名称。

4.3 箭头函数

语法：（参数1，，，参数N）=> {函数声明}

和普通函数的区别：

  1. 不绑定this对象
  2. 不绑定arguments对象 

5.内置对象的扩展

5.1 字符串的扩展

5.1.2 模板字符串

let name="Bob",time="today";
document.write(`Hello ${name},how are you ${time}?`);

使用反引号（``）代替普通字符串中的双引号和单引号，可当作普通字符串使用，也可用来定义多行字符串。同时，使用模板字符串还可以嵌入变量，嵌入字符串或调用函数，

 5.1.3 新增的字符串操作方法

ES6中新增的常用字符串操作方法
方法描述

includes(string):boolean

表示是否找到了参数字符串

startsWith(string):boolean

表示参加数字字符串是否在原字符串头部

endsWith(string):boolean

表示参数字符串是否在原字符串尾部

repeat(number):string

返回一个新字符串，表示将原字符串重复n次

padStart(number,string):string

用于头部补全

padEnd(number,string):string

用于尾部补全

trimStart():string

消除字符串头部的空客

trimEnd():string

消除尾部的空格
let str = "hello ECMAScript";
console.log(str.includes("h"));//true
console.log(str.startsWith("h"));//true
console.log(str.endsWith("t"))//true
console.log(str.repeat(3))//hello ECMAScripthello ECMAScripthello ECMAScript
console.log(str.padStart(18,"a"));//aahello ECMAScript
console.log(str.padEnd(18,"z"));//hello ECMAScriptzz
console.log(str.trimStart());//消除字符串头部的空格
console.log(str.trimEnd());//消除字符串尾部的空格

5.2 数组的扩展

5.2.1 扩展运算符

扩展运算符使用三个点（...）表示，可以将一个数组转换为用逗号分隔的序列。

语法：...数组 

5.2.2 Array.from()方法

from()方法用于将数组对象或可遍历对象转换成一个真正的数组。其中，类数组对象必须有length属性。如果没有length属性，则转换出来的是空数组。

语法：let list=Array.from(类数组)；

5.2.3 数组遍历方法

ES6新增遍历数组方法
方法描述
keys():iterator对键名的遍历
values():iterator对键值的遍历
entries():iterator对键值对的遍历
for(let [i,v] of ["张三","李四"].entries()){
    console.log(i,v);
}

5.3 对象的扩展

5.3.1 属性的简洁表示法

let name="小明";
let birth="2023/5/19";
const Person={
    name,
    birth,
    getInfo(){
        console.log(`我的名字是：${this.name},我出生时间是：${this.birth}`);
    }
}
Person.getInfo();//我的名字是：小明,我出生时间是：2023/5/19

5.3.2 对象新增方法

1.Object.is()方法

console.log(Object.is(NaN,NaN));//true
console.log(Object.is({},{}));//false
console.log(Object.is(+0,-0));//false

2.Object.assign()方法

语法：Object.assign(target,source_1,...);

该方法第一个参数是目标对象，后面的参数是源对象，可以包含多个源对象，也可以定义一个新对象接收目标对象。

5.3.3 对象遍历方法

ES6对象遍历方法
方法描述
keys():iterator放回参数对象自身的所有可遍历属性的键名
values():iterator返回参数对象自身的所有可遍历属性的键值
entries():iterator返回参数对象自身的所有可遍历属性的键值对数组

6.Set和Map对象

6.1 Set对象

Set对象的数据结构类似于数组，但成员的值都是唯一的，没有重复的值。

Set对象的常用属性和方法
分类名称描述
属性sizeSet实例的成员总数
操作方法add(value)添加某个值，返回Set结构本身
delete(value)删除某个值，返回一个布尔值，表示是否删除成功
has(value)返回一个布尔值，表示该值是否为Set的成员
clear()清除所有成员，没有返回值
遍历方法keys()返回键名的遍历器
values()返回键值的遍历器
entries()返回键值对的遍历器
forEach()使用回调函数遍历每个成员

6.2 Map对象

js的对象(Object)本质上是键值对的集合（Hash结构），但是传统上只能使用字符串作为键，这给它的使用带来了很大的限制。为了解决这个问题，ES6提供了Map对象。它也就是键值对的集合，但其“键”的范围不限于字符串，各种类型的值()都可以被当作键。

Map对象的常用属性和方法
分类名称描述
属性sizeMap对象的成员总数
操作方法set(key,value)设置键名key对应的键值为value,返回整个Map结构
get(key)读取key对应的键值，如果找不到key,返回undefined
has(key)返回一个布尔值，表示某个键是否在当前Map对象中
delete(key)删除某个键，返回true。如果删除失败，返回fales
clear()清除所有成员，没有返回值
遍历方法keys()返回键名的遍历器
values()返回键值的遍历器
entries()返回所有成员的遍历器

本章总结

人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成世界超级大师的必要条件。

                                                                                        ——格拉德威尔《一万小时定律》

zou_xi
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES6详细介绍及使用
小仙儿
02-22 6914
ES6中的export和import介绍 一、ES6概念及发展史 1、ES6概念 WSC中：ECMAScript 6.0（以下简称ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了（所以也被叫作ES2015）。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2、ES6发展史 版本 时间 描述 ECMA-262/ ...
JavaScript高级——ES6基础入门
明哥
07-29 4287
ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记。
JavaScript ES6新特性详解及实际应用案例
最新发布
LindRoland的博客
04-21 1060
ES6（ECMAScript 2015）作为JavaScript的一个重要版本，引入了许多新特性和语法糖，极大地提高了开发效率和代码的可读性。ES6引入了大量的新语法和API，包括let和const关键字、箭头函数、模板字符串、解构赋值、类（class）、模块（module）导入导出、Promise对象、异步函数（async/await）等。箭头函数是ES6中引入的一种新的函数语法。ES6提供了原生的模块系统，使得我们可以将代码拆分成不同的文件，并通过import和export语句来组织和共享代码。
ES6(JS)
Yes_You_Can 的博客
12-20 9813
ES6(JS)笔记
JSES6知识大全
SOLar7SysteM的博客
12-26 725
ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）。
js--es6学习
gua_Piter的博客
01-31 188
它们与传统的全局方法isFinite(和isNaN的区别在于，传统方法先调用Number(将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，NumberisFinite对于非数值一律返回false,Number.isNaN0只有对于NaN才返回true，非NaN一律返回false。Proxy如其名，它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值，以及实例化等等多种操作，都会被拦截住，经过这一层我们可以统一处理，我们可以认为它就是“代理器。js现在有两种模块。
js -- ES6简述
将心_的博客
07-10 232
琐碎的基础整理，ES6-数组、对象、函数。
ES6中js的运算符（?.、?:、? ?、? ?=、）
ShIcily的博客
12-03 1万+
一、空值合并操作符（ ?? ） 空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。 空值合并操作符（ ?? ）与逻辑或操作符（ || ）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。 const nullValue = null; const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false const someNumber = 42; const
JavaScript中ES6字符串扩展方法
10-21
主要介绍了JavaScript中ES6字符串扩展方法的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
JavaScript中ES6 Babel正确安装过程
10-21
主要介绍了JavaScript中ES6 Babel正确安装过程的相关资料,需要的朋友可以参考下
js文件 ES6转换为ES5
03-14
JavaScript是Web开发中不可或缺的一部分，随着版本的更新，ES6（ECMAScript 2015）引入了许多新的特性和语法糖，提升了代码的可读性和简洁性。然而，考虑到浏览器兼容性和旧版本的JavaScript引擎，有时我们需要将ES6...
js的es6
qq_40305844的博客
07-08 731
js的es6
JS ES6
weixin_33940102的博客
05-21 1468
1. Let和Const let和const定义的变量都是块级作用域，var定义的变量是函数级作用域 { var a = 10 } console.log(a) // 10 { let a = 10 } console.log(a) // ReferenceError: a is not defined 复制代码 3. 模板字符串 #不使用模板字符串 var name = 'Your n...
JavaScript的ES6语法学习总结
Night_X的博客
09-15 248
文章目录letconstlet const var的区别解构赋值数组解构对象解构箭头函数 let 使用let关键字声明的变量具有块级作用域。var关键字不具备这个特点。 if (1) { var a = 100; let b = 200; } console.log(a);// 100 console.log(b);// error: b is not defined 使用let关键字可以防止循环变量变成全局变量 for (var i = 0; i < 3; i++) { } conso
React.js中常用的ES6写法总结
热门推荐
浩时代的博客
08-18 2万+
一 模块1 引入模块以便使用用import实现：import '模块文件地址' import 组件 from '模块文件地址'2 导出模块用export default实现：export default class MyComponent extends Component{ ... }引用：import MyComponent from './MyComponent';二 组件1 定义组件
js面向对象 —— ES6
mocoll的博客
08-23 298
一、ES6简介 什么是ES6 ? ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。 ES6实际上是一个泛指，泛指ES2015及后续的版本。 为什么使用ES6 ? 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身 也有一些令人不满意的地方。 ● 变量提升特性增加 了程序运行时的不可预测性。 ● 语法过于松散,实现相同的功能，不同的人可能会写出不同的代码。 二、ES6的新增语法 2.1、let ES6中新增的用于声明变量的关键字。 ●
ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？「译」
狂热代码份子
05-29 1万+
原网址:http://huangxuan.me/2015/09/22/js-version/ JavaScript 有着很奇怪的命名史。 1995 年，它作为网景浏览器（Netscape Navigator）的一部分首次发布，网景给这个新语言命名为 LiveScript。一年后，为了搭上当时媒体热炒 Java 的顺风车，临时改名为了 JavaScript （当然，Java 和 Ja
设置IDEA支持JS ES6语法
猪猪
12-14 3877
ES6 js高级
qq_45465689的博客
09-17 292
每一个对象都是功能中心，具有明确分工。灵活 面向对象的特性：封装性，继承性，多态性。 创建类和对象：通过class关键字来创建类，类名首字母大写，类里面有constructor函数，可以接受传递过来的参数，同时返回给实例对象。创建类后面不要小括号，类里面函数都不要加function 类添加方法：类里面所有的函数省略function。多个函数之间不需要逗号分隔。 类的继承：子承父业class So...
js中es6 class类的继承
04-14
很高兴回答你的问题。关于JS中ES6 class类的继承，可以通过extends关键字实现类的继承，如下所示： class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } const d = new Dog('Mitzie'); d.speak(); 通过extends关键字，类Dog继承了类Animal的所有属性和方法，并可以在其中覆盖原有的方法。 在上述例子中，类Dog继承了类Animal的构造函数和speak()方法，并重写了speak()方法，实现了bark()动作。请注意，调用super()方法可调用父类构造函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zou_xi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值