Es6基础总结——前端必看
Es6知识点归纳
1.ES6怎么来的
ECMAScript 和 JavaScript
- ECMA 是标准,JS 是实现
- ECMAScript 简称 ECMA 或 ES
历史版本
- 1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织,ES 正式出现
- 1999, ES3.0 被广泛支持
- 2011, ES5.1 成为 ISO 国际标准
- 2015, ES6.0 正式发布
2.ES6兼容性
ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS
解决不兼容办法,编译、转换
- 在线转换
- 或者提前编译
Babel 中文网 (前端的小伙伴可以了解一下)
- Babel 入门教程 阮一峰
- Babel 是一个 JavaScript 编译器
- 一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
- 现在就用 ES6 编写程序,而不用担心现有环境是否支持
3.变量 let 和 常量 const
var 的问题
- 可以重复声明,没有报错和警告
- 无法限制修改
- 没有块级作用域,
let 和 const
- 不能重复声明,有报错和警告
- 块级作用域,
{ }
块内声明的,块外无效 - let 是变量,可以修改
- const 是常量,不能修改
4.函数-箭头函数
- 箭头函数:是函数的简写
- 如果只有一个参数,
()
可以省 - 如果只有一个
return
,{}
可以省
- 如果只有一个参数,
// 普通函数
function name() {}
// 箭头函数,去掉 function, 加上 =>
() => {}
let show1 = function () {console.log('abc')
}let show2 = () => {console.log('abc')
}show1() // 调用函数
show2()let show4 = function (a) {return a*2
}let show5 = a => a * 2 //简洁,类似python lambda 函数console.log(show4(10))
console.log(show5(10))
5.函数-参数
- 参数扩展/展开
...args
- 收集剩余的参数,必须当到最后一个参数位置
- 展开数组,简写,效果和直接把数组的内容写在这儿一样
- 默认参数
function show(a, b, ...args) {console.log(a) //1console.log(b) //2console.log(args) //[3,4,5]
}
console.log(show(1, 2, 3, 4, 5)) //undefinedlet arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)function show2(a, b=5, c=8) {console.log(a, b, c)
}
show2(88, 12)
6.解构赋值
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)
- 解构赋值
- 左右两个边结构必须一样
- 右边必须是个东西
- 声明和赋值赋值不能分开,必须在一句话里
7.数组
- 新增4个方法
- map 映射 一个对一个
let arr = [12, 5, 8]
let result = arr.map(function (item) {return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)// 结果
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '不及格', '及格', '及格', '不及格' ]
- reduce 汇总 一堆出来一个
- 用于比如,算个总数,算个平均
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {//tmp 上次结果 第一次是1,item当前数,index次数1开始console.log(tmp, item, index)return tmp + item
})
console.log(result)var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {if (index != arr.length - 1) { // 不是最后一次return tmp + item} else {return (tmp + item)/arr.length}
})
console.log(result) // 平均值
- filter 过滤器 保留为true的
var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)var arr = [{ title: '苹果', price: 10 },{ title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)
- forEach 循环迭代
var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))
8.字符串
- 多了两个新方法
startsWith
endsWith
var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true
- 字符串模版
- 使用反引号,
${变量}
- 可以折行
- 使用反引号,
let a = 12
let str1 = `asdf${a}`
console.log(str1)let title = '标题'
let content = '内容'
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
`
console.log(str)
<div>
<h1>标题</h1>
<p>内容</p>
9.面向对象-基础
- 原来写法
- 类和构造函数一样
- 属性和方法分开写的
// 老版本
function User(name, pass) {this.name = namethis.pass = pass
}User.prototype.showName = function () {console.log(this.name)
}
User.prototype.showPass = function () {console.log(this.pass)
}var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {User.call(this, name, pass)this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {console.log(this.level)
}var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
- 新版面向对象
- 有了 class 关键字、构造器
- class 里面直接加方法
- 继承,super 超类==父类
class User {constructor(name, pass) {this.name = namethis.pass = pass}showName() {console.log(this.name)}showPass() {console.log(this.pass)}
}var u1 = new User('able2', '111')
u1.showName()
u1.showPass()// 新版本继承
class VipUser extends User {constructor(name, pass, level) {super(name, pass)this.level = level}showLevel(){console.log(this.level)}
}v1 = new VipUser('blue', '123', 3)
v1.showLevel()
10.面向对象应用
- React
- 用于构建用户界面的 JavaScript 库
- 组件化,一个组件就是一个 class
- JSX == bable == browser.js
11.json
JSON 格式
- JavaScript Object Notation 的缩写,是一种用于数据交换的文本格式
- JSON 是 JS对象 的严格子集
- JSON 的标准写法
- 只能用双引号
- 所有的key都必须用双引号包起来
JSON 对象
- JSON 对象是 JavaScript 的原生对象,用来处理 JSON 格式数据,有两个静态方法
- JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
- JSON.stringify(obj) :接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)
console.log(url)var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)
hi,{"a":12,"b":5}
http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
{ a: 12, b: 4, c: 'abc' }
对象(object)
- 是 JavaScript 语言的核心概念,也是最重要的数据类型
- 对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合
- 对象的所有键名都是字符串, 所以加不加引号都可以
- 如果键名是数值,会被自动转为字符串
- 对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型
- 如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用
- in 运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值
- for…in循环用来遍历一个对象的全部属性
对象 简写
- key-value 一样时可以简写
- 里面函数可以简写, 去掉
var a = 12, b = 5
console.log({a:a, b:b})
console.log({a, b})
console.log({a, b, c:"c"})
console.log({ a, b, show(){ console.log('a') }})
{ a: 12, b: 5 }
{ a: 12, b: 5 }
{ a: 12, b: 5, c: 'c' }
{ a: 12, b: 5, show: [Function: show] }
12.Promise
异步和同步
- 异步,操作之间没有关系,同时执行多个操作, 代码复杂
- 同步,同时只能做一件事,代码简单
Promise 对象
- 用同步的方式来书写异步代码
- Promise 让异步操作写起来,像在写同步操作的流程,不必一层层地嵌套回调函数
- 改善了可读性,对于多层嵌套的回调函数很方便
- 充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口
Promise 也是一个构造函数
- 接受一个回调函数f1作为参数,f1里面是异步操作的代码
- 返回的p1就是一个 Promise 实例
- 所有异步任务都返回一个 Promise 实例
- Promise 实例有一个then方法,用来指定下一步的回调函数
function f1(resolve, reject) {// 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成,就会执行f2。
- Promise 使得异步流程可以写成同步流程
// 传统写法
step1(function (value1) {step2(value1, function(value2) {step3(value2, function(value3) {step4(value3, function(value4) {// ...});});});
});// Promise 的写法
(new Promise(step1)).then(step2).then(step3).then(step4);
- Promise.all(promiseArray)方法
- 将多个Promise对象实例包装,生成并返回一个新的Promise实例
- promise数组中所有的promise实例都变为resolve的时候,该方法才会返回
- 并将所有结果传递results数组中
- promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象
var p1 = Promise.resolve(1),p2 = Promise.resolve(2),p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {console.log(results); // [1, 2, 3]
});
- Promise.race([p1, p2, p3])
- Promse.race就是赛跑的意思
- 哪个结果获得的快,就返回那个结果
- 不管结果本身是成功状态还是失败状态
13.generator-认识生成器函数
- generator 生成器函数
- 普通函数,一路到底
- generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权
- yield 有 放弃、退让、退位的意思
- 需要调用next()方法启动执行,需要遇到 yield 停, 踹一脚走一步
- generator函数前面加一个
*
两边可以有空格,或靠近函数或function
- 背后实际生成多个小函数,实现走走停停
function show() {console.log('a')console.log('b')
}
show() // 普通函数function *show2() {console.log('1')yieldconsole.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了,没有结果
14.generator-yield是啥
yield
- 既可传参,又可以返回
- 第一个
next()
传参无效,只用来启动
如果函数前漏掉
*
- 就是普通函数
- 如果有
yield
会报错,ReferenceError: yield is not defined
- yield 只能在Generator函数内部使用
function * show() {console.log('1')var a = yieldconsole.log('2')console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参,yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield,但没有执行赋值
gen.next(20) // 2 和 20function* show2() {console.log('1')yield 10console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回
15.generator-实例
- Promise 适合一次读一组
- generator 适合逻辑性的
// 带逻辑-generator
runner(function * () {let userData = yield $.ajax({url: 'getUserData'})if (userData.type == 'VIP') {let items = yield $.ajax({url: 'getVIPItems'})} else {let items = yield $.ajax({url: 'getItems'})}
})
// yield 实例,用同步方式写异步
server.use(function * () {let data = yield db.query(`select * from user_table`)this.body = data
})
16.ES7 预览
- 数组
arr.includes()
数组是否包含某个东西- 数组的 arr.keys(), arr,entries()
- for … in 遍历数组 下标 key
- for … of 遍历数组 值 value, 不能用于json
let arr = ['a', 'b', 'c']
console.log(arr.includes(1))for (let i in arr) {console.log(i) // 循环的时下标 key
}for (let i of arr) {console.log(i) // 循环的是值 value
}
for (let i of arr.keys()) {console.log('>'+i)
}
for (let [key, value] of arr.entries()) {console.log('>' + key + value)
}let json = { a: 12, b: 5, c: 7 }
for (let i in json) {console.log(i)
}
- 字符串
- padStart()/padEnd() 指定宽度,不够就补空格或指定字符
console.log('=' + 'abcd'.padStart(6, '0') + '=')
console.log('=' + 'abcd'.padEnd(6, '0') + '=')
=00abcd=
=abcd00=
容忍度
- [1, 2, 3,] 老版数组最后不能有逗号,新的可以有
- 函数参数最后多的逗号也可以
async await
- 和 generator yield 类似
- generator 不可以写成箭头函数, async 可以
async function show() {console.log(1)awaitconsole.log(2)
}
Es6基础总结——前端必看相关推荐
- 视频教程-Python零基础入门高薪必看动画课程-Python
Python零基础入门高薪必看动画课程 从事多年的Web应用开发,拥有10余年一线开发经验和教学经验.曾在中国银行从事数据采集服务,现专注于Python教学相关工作.参与过O2O外卖平台系统.微信商城 ...
- JavaScript基础教程——入门必看篇
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. ...
- java重要基础知识点_必看 | 新人必看的Java基础知识点大梳理
原标题:必看 | 新人必看的Java基础知识点大梳理 各位正在认真苦学Java的准大神,在这烈日炎炎的夏季里,老九君准备给大家带来一个超级大的"冰镇西瓜,"给大家清凉一下,压压惊. ...
- 【0基础学python必看】python行业调研分析——现状+优势+薪资+发展
Python是越来越火了! 它以薪资高.好入门.语言简洁等优势等受到一众程序员的青睐,如果要说近几年最火的编程语言,那非Python莫属. TIOBE程语言榜单新鲜出炉,排行榜的榜首位置首次出现了除 ...
- 前端必看 | 2D游戏化互动入门基础知识
简介:在非游戏环境中将游戏的思维和游戏的机制进行整合运用,以引导用户互动和使用 本文作者:淘系前端团队-Eva.js作者-明非 CodeDay#7 北京站报名ing,欢迎点击免费报名. 背景 现在越来 ...
- react方法返回html_React全家桶之React基础(推荐新手必看)
学习目标 安装create-react-app脚手架 熟练React基础语法 掌握JSX语法 掌握setState 掌握React生命周期 掌握props传递参数 掌握React组件通信 资源 rea ...
- 前端必看书籍总结(哪些值得看)
JavaScript 高级程序设计 前端红宝书 2012年3月1日 门外汉入门 初级前端进阶 JS 语法讲得比较细致 如第3.4.5.7.8. 10.11.13.14.20. 21 没有 ES6 是最 ...
- 【前端必看】2017 年 JavaScript 全面崛起大运势
最受欢迎项目 下面是年度最流行的项目,不区分类别. Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40,000 的 star. 相较于 2016 ...
- vue移动端用什么数据可视化插件_前端必看的数据可视化入门指南
作者:董晓庆 蚂蚁金服体验技术部 这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明: ...
最新文章
- 单链表-删除单链表L中第一个值为x的结点(双指针法)
- Tensorflow源码解析2 -- 前后端连接的桥梁 - Session
- 苹果核 - Tangram 的基础 —— vlayout(Android)
- 计算机软件集成项目工程师上海,2021年上海系统集成项目管理工程师报名时间和报名入口...
- ssl提高组周六模拟赛【2018.9.23】
- [转]Messenger:使用消息的跨进程通信
- Django后台管理之商品分类
- 使用Java8改造出来的模板方法真的是yyds
- NGINX1.19安装手册
- 虚幻4 捏脸和换装系统实现
- Sublime Text 支持GBK , 解决中文乱码问题
- Java 异常的捕获与处理详解 (一)
- java的socket编程---telnet客户端的实现
- vega56刷64_AMD Vega 56显卡能刷成Vega 64真相了
- python记录鼠标和键盘操作并重复_Python模拟鼠标和键盘操作实现重复性操作
- 【渝粤题库】陕西师范大学200941小学数学教学论 作业(高起专)
- 基于Barra多因子模型的组合权重优化
- 如何找到mysql的初始密码_如何查看mysql的初始密码
- mysql 5.7 master、salve 切换
- java开发知识总结1
热门文章
- PHP魔鬼训练第二季,设计模式,注册树模式,模版模式,HTTP响应过程,多进程
- 2020年B证(安全员)报名考试及B证(安全员)找答案
- 八字推断系统:(一) 基础知识介绍
- JAVA用一个函数交换两个数字
- Mybatis一级缓存和二级缓存(带测试方法)
- mysql用alter修改root密码_mysql修改root密码
- 初学键盘计算机输入时注意,计算机基础键盘录入
- 广度优先搜索BFS进阶(一):多源BFS、优先队列BFS、双端队列BFS
- Jetson Nano 部署(5):: Jetson Nono YOLOv5实战部署流程
- git: Your branch and ‘origin/xxx‘ have diverged,and have 1 and 1 different commits each, respectivel