javascript es6 语法快速入门
1. let、const
作用:let 声明变量,const 声明常量
与 var 的区别:不能重复声明,且存在块级作用域,即只在代码块内生效
2. 箭头函数
使用:
let show = function (a, b) {
return a + b;
}
alert(show(5, 3)) //结果为8
let show = (a, b) => {
return a + b;
}
alert(show(5, 3)) //结果为8
当函数只有一个参数时,可以省略圆括号;当函数体内只有一条return语句时,可以省略函数体
let score = [19, 78, 90, 32, 12, 88] let r = score.map(item => item >= 60 ? '及格' : '不及格') alert(r)
3. 参数扩展:多余的参数可以通过扩展参数接收
let show = function (a, b, ...args) {
alert(a)
alert(b)
alert(args)
}
show(1, 2, 3, 4, 5, 6, 7, 8, 9);
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr = [...arr1, ...arr2]
alert(arr)
4. 解构赋值:左右两边类型必须一致
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) //结果为:1,2,3
let { a, b, c } = {
a: 123,
b: 324,
c: 54343
}
console.log(a, b, c);
5. 数组
5.1 map (映射)
let arr = [12, 5, 8]
let result = arr.map(
(item) => {
return item * 2;
}
)
alert(result) //结果为24,5,16
5.2 reduce(汇总)
let arr = [1, 2, 3, 4, 5, 6]
let r = arr.reduce((tmp, item, index) => {
return tmp + item;
})
alert(r) //结果为21
let arr = [1, 2, 3, 4, 5, 6]
let r = arr.reduce((tmp, item, index) => {
if (index != arr.length - 1) {
return tmp + item;
} else {
return (tmp + item) / arr.length
}
})
alert(r)
5.3 filter(过滤器)
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let r = arr.filter(item => {
return item % 3 == 0
})
alert(r) //结果为3,6,9
5.4 forEach(迭代)
let arr = [12, 5, 8, 9]
arr.forEach(item => {
alert(item)
})
6. 字符串
1. startsWith、endsWith:匹配开头和结尾的字符串
let str = "http://xxxxx.jpg"
if (str.startsWith('http')) {
alert("ok")
} else {
alert("no")
}
if (str.endsWith('jpg')) {
alert("ok")
} else {
alert("no")
}
2. 字符串模板:支持换行且可以使用 "${ }" 符取值
let title = 'Welcome!'
let content = 'hello es6!'
let str = `
<div>
<h1>${title}</h1>
<p>${content}</p>
</div>
`
alert(str)
javascript es6 语法快速入门的更多相关文章
- Objective-C基础语法快速入门
Objective-C基础语法快速入门 2010-11-04 16:32 折酷吧 zheku8 字号:T | T 假如我们对面向对象的思维已经C语言都很熟悉的话,对于我们学习Objective-C将会 ...
- Less 语法快速入门
Less 语法快速入门 Less 是一门 CSS 预处理语言其可以运行在 Node 或浏览器端. 它将传统的 css 样式结构单一的排版顺序进行了优化,让我们可以通过层级嵌套的方式将 css 类名与H ...
- es6语法快速上手(转载)
一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...
- Markdown 语法快速入门手册
Markdown 是一种轻量级标记语言,能将文本换成有效的XHTML(或者HTML)文档,它的目标是实现易读易写,成为一种适用于网络的书写语言. Markdown 语法简洁明了,易于掌握,所以用它来写 ...
- 《JavaScript ES6 函数式编程入门经典》--推荐指数⭐⭐⭐
这本书比较基础认真看完再自己写点demo一个双休日就差不多, 总体来说看完还是有收获的,会激起一些你对函数编程的兴趣 主要目录如下: 第1章 函数式编程简介 11.1 什么是函数式编程?为何它重要 1 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- shell语法快速入门(1)
#得到绝对路径 DIR=$(cd `dirname $0`;pwd) $DIR/file.txt #去掉#注释 egrep -v "(#|^$)" /etc/zabbix/zabb ...
- python语法快速入门(1)
http://www.runoob.com/python/python-tutorial.html Python 是一种解释型语言: 这意味着开发过程中没有了编译这个环节.类似于PHP和Perl语言 ...
- T4语法快速入门
1.什么是T4? T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit.T4(Text Template Transformation Toolk ...
随机推荐
- 在ag-grid表格上实现类似Excel中的按下enter键自动跳转到下一行对应的输入框功能,Angular4开发
最近的项目使用ag-grid在Angular中处理表格,收到个需求是要能够同时修改大量的数据,按下Enter键的时候,光标得自动跳到下一行的对应列上. 方法一:用ag-grid自带的 enterMov ...
- VS2012编译WDM驱动
新版的VS2012中集成了WDK8,而且WDK8中已经没有之前的Build Environment了,看来编译驱动只能通过VS2012了,直接开发WDF驱动很方便直接选取相应的模板即可,若是编译以前的 ...
- CSS:教程
ylbtech-CSS:教程 1.返回顶部 1. CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局 ...
- scrapy主要防止封IP策略
scrapy如果抓取太频繁了,就被被封IP,目前有以下主要策略保证不会被封: 策略1:设置download_delay下载延迟,数字设置为5秒,越大越安全 策略2:禁止Cookie,某些网站会通过Co ...
- idea无法引用jar包中的class
最近由eclipse换idea的过程中,出现了一个很奇妙的问题! 项目是maven+git+idea管理的,idea某次在使用的过程中,电脑死机重启后,发现无法引用jar包中的class.包括jdk中 ...
- 专题:LFS构建逻辑理解
严格来说,LFS只能称为“pseudo LFS”,WHY? 因为LFS归根结底,还是基于已有的操作系统平台构建而来,并非真正的从0开始,它没有突破所谓“鸡与蛋”的死循环:但它确实有助于理解Linux的 ...
- js 中typeof 检测数据类型的时候需要注意的小细节
博客搬迁给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/26/typeof-%E6%A3%80%E6%B5%8B%E6%95%B0%E6%8D% ...
- pycharm的第一次使用(其实并不是第一次)
file --> settings --> editor -->general --> change font size file --> settings --> ...
- 关于springmvc与ajax的交互-开发记录
每次都栽在这个地方,好衰! 在jsp页面的<form>标签设置了action="请求url" ,button那里用js进行监听,点击触发ajax方法,将前台数据传到后台 ...
- css3条纹进度条
新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...