JS学习之ES6

一、ES简介

ES6是一个泛指,指EDMAJavaScript之后的版本。它是JS的语言标准。

Nodejs

简介:它是一个工具,主攻服务器,使得利用JS也可以完成服务器代码的编写。

安装:

安装Nodejs的同时,会附带一个npm命令,npm是Node的包管理工具。

还需要用到cnpm工具。cnpm是一个国内的镜像工具。比使用npm安装一些包会更快一些。

Babel

它是转码器,可以将ES6代码转为ES5代码,从而在老版本的浏览器执行。意味着可以使用ES6的方式编写程序,而不用担心环境是否支持。例如:下面是使用ES6的代码进行转码。

安装Babel工具:

第一步:使用命令安装,cnpm install --save -dev @babel/core   //(注意是在我们需要使用转码工具的项目下使用这个命令)安装好之后,会出现两个文件:node_modules 和 { }package_json。

第二步:配置babel。创建配置文件.balerc文件。在里面输入:{   “presets”:{ },“plugins”:{ }   }

let命令:

ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块有效。

区别:以循环为例。

 注意下面这种用法:

Const命令

声明一个只读常量,不能改变。(只要声明,就必须初始化)

它是一个块级作用域;const常量也不存在常量提升。

对象解构赋值:

就是对多个变量进行赋值。例如:

let {name,age} = {name:"iwen" ,age:20 }

字符串扩展:

循环for( of ):例如,var str = “hello”

                           for(let i of str){ console.log(i) }

字符串模板:

这个模板的格式:${  }   

字符串方法:

indexof()   判断一个字符串里面是否包含在另一个字符串中。下面是ES6新增的方法。

repeat():

返回一个新字符串,表示将原字符串重复n次。里面参数是数字。

padStart(),padEnd()

字符串补全长度功能,比如:游戏创建角色的姓名,可以使用这个方法自补齐姓名。

语法:"dada".padStart(6,"li")   //得到“lidada” 。长度是6。

          “da”.padStart(5,"li")     //得到“lilda”  长度是5.

act()

接受一个整数作为参数,返回参数 指定位置的字符(是单个字符噢,不是字符串),支持负索引(即倒数的位置)。

若index超出范围,返回undefined。

数组扩展:

扩展运算符: 

数组的扩展运算符(spread)是三个点:...     //将一个数组转为用逗号隔开的参数序列。

格式:var arr=[1,2,3];  console.log(...arr);   打印1,2,3

在JS里面,Math.max(~)。里面传入一系列的参数,不能用于判断数组里面的大小。

在Java里,Math.max(~,~)。是判断两个参数的大小。同样不能用于判断数组的大小。

但是,在js里面可以用数组的扩展运算符对数组进行变成一系列数据,然后获取数组的最大值。

例如:Math.max(...arr)。就能获取arr数组的最大值。

还可以用来合并数组:

新增方法(数组扩展):

Array.from()方法,用于将类数组、伪数组转为真正的数组。而常见的类数组有三类:arguments、元素集合、类似数组的对象。

类数组、伪数组,只能使用数组的读取方式和length属性,不能使用数组方法push。

//argument,例如:add(10,20,30)。这就是一个类数组。通过function add(){console.log(argument) } 可以读取到10,20,30。

//元素集合:let titles = document.querySelectorAll("h3");

         <h3>这是一个标题</h3>   <h3>这是一个标题</h3>   <h3>这是一个标题</h3>

通过console.log(titles),就可以打印出三个<h3>的标签。

//类似于数组的对象,其实就是对象。var user={name:"iwen",age:20}

这三种方式,都可以通过Array.from()转换成数组,它的返回类型是数组。

格式:var arr = Array.from(arguments);

Arrays.of()这是另一种方法,它用于将一组值,转换为数组。与Array.from()不同,格式:Array.of(3,11,8)   //得到[3,11,8]

对象的扩展:

它的主要用法是使得对象的书写变得更加简约。ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。例如:在大括号外面定义了let name="iwen"。那么在大括号里面,对象,const user={name,age:20};里面可以直接写name,而不用写name:“iwen”。

还可以用作属性名表达式、对象的扩展运算符。

函数的扩展: 

主要就是箭头函数。ES6允许使用箭头“=>”定义函数。例如:原本的函数有两种写法:

function fn1(x,y){ return x+y; }

第二种方式:赋值声明函数。var fn2 = function(x,y) {return x+y;}

第三种方式:var fn3 = (x,y) => x+y。箭头函数。

箭头函数也有几种常用方式:比如无参的情况:var fn4 = () => 10。

函数体有变量的情况:下图左。返回值是对象的情况:下图右。

 

 emmmmm,怎么说,感觉有点无聊,不知道会不会用到就在这不停的写。我的建议是停一下吧,先把前面的都搞懂在继续往下。不然,在往下学都是不会的,没意思。至少,现在停一下。把前面的都融汇一下,然后再往后看,应该或许就会简单很多。欧克,实操起来。

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

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

相关文章

远程控制平台简介

写在前面 之所以想自己动手实现一个远程控制平台,很大一部分原因是因为我那糟糕的记性,虽然经常加班到很晚,拖着疲惫的步伐回到家,才想起忘记打卡了,如果我能在家控制在办公室的手机打一下卡就好了… 有人说,市场上有TeamViewer,向日葵,AnyDesk,ToDesk,等等这些老大…

抓紧收藏,Selenium无法定位元素的几种解决方案

01、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位&#xff0c;对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法&#xff1a; driver.switch_to.frame(id/name/obj) switch_to.frame()默认可以直接取表单的id或name属性。如果没有可用的id和…

一文教你搭建工程化开发环境!

搭建工程化开发环境 下载 Node.js 官方下载地址 https://nodejs.org/zh-cn/download/releases node.js 版本迭代的非常快&#xff0c;目前官方已经推出到 v19.2.0 版本了&#xff0c;相对是一个比较新的版本了。建议下载 v14.18.3 版本&#xff0c;至少这个版本目前在很多项…

Android跨进程传大图思考及实现——附上原理分析

1.抛一个问题 这一天&#xff0c;法海想锻炼小青的定力&#xff0c;由于Bitmap也是一个Parcelable类型的数据&#xff0c;法海想通过Intent给小青传个特别大的图片 intent.putExtra("myBitmap",fhBitmap)如果“法海”(Activity)使用Intent去传递一个大的Bitmap给“…

pinctrl 子系统与gpio子系统深入理解

绑定文档&#xff0c;官网为了不同的芯片的pinctrl规范写了一个模板 linux-imx-rel_imx_4.1.15_2.1.0_ga_alientek/Documentation/devicetree/bindings/pinctrl$ imx芯片的文档是 fsl&#xff0c;imx-pinctrl.txt Examples: usdhc0219c000 { /* uSDHC4 */non-removable;vmmc-s…

java: 无法访问redis.clients.jedis.JedisPoolConfig

问题描述: 在编译java springboot程序的时候报错 java: 无法访问redis.clients.jedis.JedisPoolConfig 找不到redis.clients.jedis.JedisPoolConfig的类文件 问题分析 该问题是由于找不到JedisPoolConfig包导致的,很可能是没有添加相关的依赖 问题解决 在pom文件中添加依赖项…

iOS开发-聊天emoji表情与自定义动图表情左右滑动控件

iOS开发-聊天emoji表情与自定义动图表情左右滑动控件 之前开发中遇到需要实现聊天emoji表情与自定义动图表情左右滑动控件。使用UICollectionView实现。 一、效果图 二、实现代码 UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图&#x…

无涯教程-jQuery - jQuery.post( url, data, callback, type)方法函数

jQuery.post(url&#xff0c;[data]&#xff0c;[callback]&#xff0c;[type])方法使用POST HTTP请求从服务器加载页面。 该方法返回XMLHttpRequest对象。 jQuery.post( url, [data], [callback], [type] ) - 语法 $.post( url, [data], [callback], [type] ) 这是此方法使…

C# Winform中使用SendMessage方法(发送消息与接收消息)

C# Winform窗口间消息通知&#xff0c;使用Windows API SendMessage方法跨进程实现消息发送&#xff0c;重写WndProc方法接收消息并消息处理 主要使用到如下三个方法函数&#xff1a; WndProc&#xff1a;主要用在拦截并处理系统消息和自定义消息 可以重写WndProc函数&#xf…

JMeter常用内置对象:vars、ctx、prev

在前文 Beanshell Sampler 与 Beanshell 断言 中&#xff0c;初步阐述了JMeter beanshell的使用&#xff0c;接下来归集整理了JMeter beanshell 中常用的内置对象及其使用。 注&#xff1a;示例使用JMeter版本为5.1 1. vars 如 API 文档 所言&#xff0c;这是定义变量的类&a…

ansible——roles 角色

一、概述 1.roles角色简介 roles用于层次性、结构化地组织playbook。roles能够根据层次型结构自动装载变量文件、tasks以及handlers等。要使用roles只需要在playbook中使用include指令引入即可。 简单来讲&#xff0c;roles就是通过分别将变量、文件、任务、模板及处理器放置…

【数据结构篇C++实现】- 图

友情链接&#xff1a;C/C系列系统学习目录 文章目录 &#x1f680;一、图的基本概念和术语1、有向图和无向图3、基本图和多重图4、完全图5、子图6、连通、连通图和连通分量7、强连通图、强连通分量8、生成树、生成森林9、顶点的度、入度和出度10、边的权和网11、稠密图、稀疏图…

Ubuntu Server版 之 共享文件 samba和NFS 两种方法

NFS 和 Samba NFS &#xff1a; linux之间资源共享 Samba&#xff1a; 是windows系统与Linux系统之间资源共享的 samba 安装samba 工具 sudo apt install samba 创建共享目录 sudo mkdir /home/shared sudo chmod 777 /home/shared 配置sambd sudo vim /etc/samba/smb.con…

大数据课程E5——Flume的Selector

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解Selector的概念和配置属性&#xff1b; ⚪ 掌握Selector的使用方法&#xff1b; 一、简介 1. 概述 1. Selector本身是Source的子组件&#xff0c;决定了将数据分发…

mysql的整体架构

服务层-引擎层-硬盘层 一条语句执行的整体过程: 先建立连接&#xff08;mysql -h -p 密码&#xff09;–预处理-词法分析-语法分析-优化器选择用什么索引表如何连接等-执行器 到这里都是属于server层&#xff0c;大多数功能包括视图&#xff0c;存储过程&#xff0c;触发器都是…

机器学习笔记之优化算法(一)无约束优化概述

机器学习笔记之优化算法——无约束优化概述 引言回顾&#xff1a;关于支持向量机的凸二次优化问题无约束优化问题概述解析解与数值解数值解的单调性关于优化问题的策略线搜索方法信赖域方法 引言 从本节开始&#xff0c;将介绍优化算法 ( Optimization Algorithm ) (\text{Opt…

用DBeaver进行数据备份与恢复

一、数据备份 1、选择需要备份的数据库或数据表&#xff0c;鼠标右击。 2、选择“工具-转存数据库” 3、勾选需要导出备份的数据库和数据表 可自行设置&#xff0c;这里直接点击开始&#xff1b; 导出完成 二、数据恢复 1、选择需要恢复的数据库或数据表&#xff0c;鼠标右…

Ubuntu下安装Node.js;npm

Ubuntu下安装Node.js curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs Ubuntu下安装npm sudo apt-get install npm Ubuntu下指定版本升级npm sudo npm install npm8.15.0 -g Ubuntu下升级node 安装n模块&#xff1a;s…

台灯头灯手电筒UL153亚马逊美国站测试要求

在将台灯、头灯或手电筒上架到亚马逊美国站之前&#xff0c;UL153测试是必不可少的一项认证。UL153是美国安全实验室&#xff08;Underwriters Laboratories&#xff09;颁布的一项标准&#xff0c;旨在确保产品的安全性和可靠性。那么&#xff0c;我们应该如何办理UL153测试报…

锌离子荧光探针TSQ,109628-27-5,具有很好的选择性荧光探针

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ PART1----外观以及性质&#xff1a; 锌离子荧光探针TSQ&#xff08;CAS号&#xff1a;109628-27-5&#xff09;&#xff0c;锌离子荧光探针TSQ是用于检测锌离子的荧光探针。 TSQ与Zn离子结合后&#xff0c;吸收波长和发射波…