JS(第二十四课)JS高级Es6语法
ECMAScript 6_百度百科 (baidu.com)
第一部分:百度简介
ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 [1] 。
另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。
这又是ES6 JS高级Es6语法
1 let变量名的基本内容解释
- 1 变量不能重复的声明
- 2 块级的作用域 全局 函数 evel 只在代码块中有效
- 3 不存在变量的提升
- 4 不影响的作用域链的效果
1 声明变量的格式
let a;let b,c,d;let f=567,g="liveyou",h=[];
2 块级的作用域 全局 函数 evel 只在代码块中有效
{let gair="李四"// console.log(gair)}
console.log(gair)
3 不存在变量的提升
console.log(aaa)var aaa="先鸟";let aaa="先鸟"
4 不影响的作用域链的效果
{let school="上高速"function fn(){console.log(school)}fn()}
2 const 常量
- 1 一定要有初始值
- 2 一般常量用大写
- 3 常量的值不能修改
- 4 const 也是块级作用域
- 5 对于数组和对象的元素修改 不算对常量的修改 不会报错
const SCHOOL = "我要上高速"const TEAM = ['UZR', 'MXLG', 'MING', 'LETME'];// TEAM.push('Meiko')console.log(TEAM)
3 数组解构
<!-- 数组解构--><!--! ES6按照一定的模式从数组对象中提取值 对变量赋值 这被称为解构赋值--><!-- !数组结构 --><script>const F4=['A','B','C','D','E']let [a,b,c,d,e]=F4console.log(a+b+c+d+e)</script><!-- !对象的结构 --><script>const zhaomienan={name:"静态",age:'89',eat:function(){console.log("吃饭")},sleep:function(){console.log("睡觉吧")}};let {name,age,eat,sleep}=zhaomienan;console.log(name+"_"+age+"_"+eat+"_"+sleep)eat()sleep()</script>
4 模板字符串[``]
// 声明let str=`我是字符串的内容解析`console.log(str,typeof str)// 内容直接有换行符let str1=`<ul><li>1</li><li>2</li><li>3</li></ul>`// document.write(str1)// 变量的直接拼接let lover='上述'let out=`${lover}是我心中的偶像`console.log(out)
5 对象的简化写法
<script>let name = "李四玩有幸"let change = function () {console.log("我可以改变你的内容信息")}const school = {// name:namename,change,imporve: function () {console.log("我深蓝了")},eat() {console.log("Hellow word")}}console.log(school)</script>
6 箭头函数
- 1 this 是静态的 始终指向函数声明的作用域下的this 的值
- 2 不能作为构造函数 实例化对象
- 3 不能使用arguments对象
- 4 箭头函数的简写 省略()有且只有一个
() => {} //():代表是函数; =>:必须要的符号,指向哪一个代码块;{}:函数体
<script>let fn = function () {}let fn1 = (a, b) => {return a + b;}let results = fn1(1, 1)console.log(results)// 箭头函数 // 1 this 是静态的 始终指向函数声明的作用域下的this 的值function getName() {console.log(this.name)}let getName2 = () => {console.log(this.name)}// 设置Window对象window.name = '加油'const school = {name: "ASDFGHJ"}// 直接调用// getName()// getName2()// call 方法的调用 改变this的值getName.call(school)getName2.call(school)// 2 不能作为构造函数 实例化对象// let Person=(name,age)=>{// this.name=name;// this.age=age;// }// let me=new Person("销毁",90);// console.log(me)// 3 不能使用arguments对象// let fn23=()=>{// console.log(arguments)// }// fn23(1.2,3)// 4 箭头函数的简写 省略()有且只有一个let add=n=>{return n+n;}console.log(add(9))// 省略{} returnlet pow =(n)=>n*nconsole.log(pow(9))</script>
7 形参的初始值与结果赋值使用
// 形参的初始值// function add(a,b,c,d,e){// return a+b+c+d+e;// }// let result=add(1,2,3,4);// console.log(result)// 与结果赋值使用function connect(host = "127.0.9.0", username, password, port) {console.log(host)}connect({host: "123456",username: "李四上栅",password: "12345678",port: "33060987"})// ES5function date1() {console.log(arguments)}date1("1张三", "2李四", "3空", "4思考", "5小康", "6订单")// rest 参数 必须放在最后 这是为什么?function date(...args) {console.log(args)}date("1张三", "2李四", "3空", "4思考", "5小康", "6订单")function fn4(a, b, c, d, e, f, ...args) {console.log(a);console.log(b);console.log(c);console.log(d);console.log(e);console.log(f);console.log(args);}fn4("1张三", "2李四", "3空", "4思考", "5小康", "6订单","47思考", "58小康", "69订单","4思考", "5小康", "6订单")
8 扩展运算符 能将数组转换为逗号分开 参数序列化
<script>const tyop=['XXX','YYY','RRR','HHH','LLL','WWW','DDD','FFF','SSS']function chunwan(){console.log(arguments)}chunwan(...tyop)</script><script>//定义一个集合let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3}; //转成数组let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']console.log((arr2))</script>
9 扩展运算符的应用
<!-- 扩展运算符的应用 --><div></div><div></div><div></div><!--! 数组的并和 亲生 误删 唐安 --><script>const kuaizi=['效率','小明',"小王","小鸡"]const fangkuang=['小坡','老婆','欧赔']constfangkuang1=kuaizi.concat(fangkuang)// ES5console.log(constfangkuang1)// ES6const hebing=[...kuaizi,...fangkuang]console.log(hebing)// 数组克隆const san=['A','B','C']const sane=[...san]console.log(sane)// 3 将伪数组转为真正的数组const divs=document.querySelectorAll("div");const divArr=[...divs];console.log(divArr)</script>
JS(第二十四课)JS高级Es6语法相关推荐
- NeHe OpenGL第二十四课:扩展
NeHe OpenGL第二十四课:扩展 扩展,剪裁和TGA图像文件的加载: 在这一课里,你将学会如何读取你显卡支持的OpenGL的扩展,并在你指定的剪裁区域把它显示出来. 这个教程有一些难度,但它 ...
- python dataframe 新列_Python第二十四课:Pandas库(四)
Python第二十四课:Pandas库(四)点击上方"蓝字",关注我们. 不知不觉,我们已经跨越了千难万险,从零开始,一步步揭开了Python神秘的面纱.学到至今,回过头,才晓得自 ...
- 实践数据湖iceberg 第二十四课 iceberg元数据详细解析
系列文章目录 实践数据湖iceberg 第一课 入门 实践数据湖iceberg 第二课 iceberg基于hadoop的底层数据格式 实践数据湖iceberg 第三课 在sqlclient中,以sql ...
- 学习淘淘商城第二十四课(前台系统工程搭建)
上节课我们一起学习了添加商品的实现,这节课我们学习搭建前台系统工程. 我们先来看一下淘淘商城的首页,如下图所示. 我们再来看看淘淘商城的系统架构图,我们目前只是完成了后台管理系统和商品服务,还有很多没 ...
- 深入浅出CChart 每日一课——快乐高四第二十四课 武当梯云纵,移花接木之Visual Basic.Net
既然说到了C#,那么一奶同胞的VB.Net怎么能忽略呢? Visual Basic .Net和C#的内核完全一样,都是.Net,只是外在的语言形式不一样.这种情况下,调用CChart的方法也非常类似. ...
- 【问链财经-区块链基础知识系列】 第二十四课 摩根币来了,Ripple们该怎么办?
编者按:2019 年 2 月 14 日,美国最大的商业银行摩根大通宣布发行加密货币 JPMCoin,主要用来实现跨银行和跨境即时支付,消息一经发布,一时激起千层浪,各种银行业纷纷磨拳擦掌,跃跃欲试,而 ...
- 第二十四课.循环神经网络RNN
目录 朴素RNN与LSTM 从NN到RNN RNN结构 LSTM RNN的扩展模型 多层RNN 双向RNN 递归网络Recursive Network 注意:本篇是RNN的内容补充,关于RNN模型和B ...
- 【批处理学习笔记】第二十四课:直接传递
直接传递参数,即在使用call命令时,不使用任何参数,在子函数或子批处理里面直接对主函数(也称父批处理)里面的变量进行修改.这跟汇编语言里面的参数传递方式类似. 直接传递参数举例: ===== ...
- 潭州课堂25班:Ph201805201 django 项目 第二十四课 文章主页 多级评论数据库设计 ,后台代码完成 (课堂笔记)...
加载新闻评论功能 1.分析 业务处理流程: 判断前端传的新闻id是否为空,是否为整数.是否不存在 请求方法:GET url定义:'/news/<int:news_id>' 请求参数:url ...
最新文章
- void main()是错的!
- 马斯克成功把人从太空送回地球!历时64天,SpaceX首次载人任务圆满收工
- 阿里云1C2G虚拟机【99/年】羊毛党集合啦!
- 区块链BaaS云服务(32)同盾科技 IASC平台
- centos上安装supervisor来管理dotnetcore等应用程序
- POJ 2798 2进制转换为16进制
- 5G New Radio and System Standardization in 3GPP(3gpp中5g新的无线电和系统标准化)
- MVC4 数据验证、特性、自动属性总结
- 一个简单的json解析器
- 深度学习模型高并发方案
- java工程师求职简历,实战案例
- 屏幕录制软件有哪些?4款超好用录屏软件下载,强烈推荐
- phpspreadsheet 中文文档(七)技巧和诀窍
- 给网页质量进行瘦身的办法-金瑞帆建站
- linux——进程的概念与状态
- 2021第十届PMO大会线上会议成功举办
- pdm转excel(基于PowerDesigner软件)
- windows时间同步软件_在Windows电脑桌面上记录每日工作备忘事项用哪个便签软件好?...
- 开发工具【官网+参考地址+最全+持续更新】-wztool
- 出现身份验证错误,要求的函数不受支持 可能是由于CredSSP加密Oracle修正。