文章目录
一、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 正式发布
二、变量 let 和 常量 const
- 首先说一下JavaScript语言存在的问题：
- 可以重复声明 比如：
var a=5; var a=19;不报错，弹出来19 (缺点：在大型项目中，如果多人重复声明同一变量, 出问题不好排错) - 无法限制修改(没有常量的概念，语法不严谨)
- 没有块级作用域
- 可以重复声明 比如：
- ES6对应解决方案
- let 不能重复声明, 变量可以修改, 有块级作用域
- const 不能重复声明, 常量不能修改, 有块级作用域
三、函数 — 箭头函数
格式：()=>{}
注意：1. 如果只有一个参数, ( )可以省 2. 如果只有一个return，{ }可以省
<script>
let show = function(a){
alert(a*2);
}
show(15);
------------- 简写：----------------
let show = a => alert(a*2);
show(15);
</script>
<script>
let arr = [12,45,854,5,612,4,1,5,22];
arr.sort(function(n1,n2){
return n1 - n2;
})
//arr.sort((n1,n2) => n1-n2); --- 简写形式
alert(arr);
</script>
四、函数 — 参数
-
参数扩展/数组展开
...args-
收集剩余的参数, …args必须放到最后一个
<script> function show(a,b,...args){ alert(a); alert(b); alert(args); //3,4,5,6 } show(1,2,3,4,5,6); </script> -
展开数组
展开后的效果跟直接把数组的内容写在这儿一样
<script> let arr1 = [1,2,3]; let arr2 = [11,22,33]; let arr3 = [...arr1,...arr2]; alert(arr3); // 1,2,3,11,22,33 </script>
-
-
默认参数
<script> function show(a,b=5,c=9){ console.log(a,b,c) } show(100,56); //输出：100,56,9 </script>
五、解构赋值
规则：
- 左右两边结构必须一样
- 右边必须是个合法的东西
- 声明和赋值不能分开 (必须在一句话里完成)
<script>
let [a,b,c] = [4,5,7];
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] = [{x:6,y:9},[3,6,9],88,'krisWu'];
console.log(json,arr,num,str);
</script>
六、数组 — 新增4个方法
| 方法名 | 含义 | 作用 |
|---|---|---|
| map | 映射 | 一个对应一个 |
| reduce | 汇总 | 一堆出来一个 |
| filter | 过滤器 | 根据条件决定删留 |
| forEach | 循环(迭代) | 遍历数组 |
-
map
案例：给出成绩判断是否合格
<script> let score = [52,52,45,100,99,63]; let result = score.map(item => item >= 60?'及格':'不及格'); alert(score); alert(result); </script> -
reduce
案例：给出分数求平均值
<script> let arr = [52,52,45,100,99,63]; let result = arr.reduce(function(tmp,item,index){ if(index != arr.length-1){ return tmp+item; }else{ return (tmp+item)/arr.length; } }) alert(result); </script> -
ffilter
案例：输出能被3整除的数
<script> let arr = [52,52,45,100,99,63]; let result = arr.filter(item => item%3 == 0); alert(result); </script> -
forEach
案例：依次弹出数组与下标
<script> let arr = [52,52,45,100,99,63]; arr.forEach((item,index) => { alert(index + ":"+item); }) </script>
七、字符串
-
多了2个新方法
-
startsWith
var str = "https://www.baidu.com/"; console.log(str.startsWith('https')); -
endsWith
var imgStr = "img.png"; console.log(imgStr.endsWith('png'));
-
-
字符串模板
反单引号 ``
优点：①可以往字符串里直接放东西,不用再字符串拼接 ②可以折行
八、ES6的面向对象
-
class关键字、构造器和类分开了
-
class里面直接加方法
-
继承，super 超类==父类
----------------------- 老版面向对象及继承 -------------------- <script> function User(name,pwd){ this.name = name; this.pwd = pwd; } User.prototype.showName = function(){ console.log(this.name); } User.prototype.showPwd = function(){ console.log(this.pwd); } var user1 = new User('kris','1106'); user1.showName(); user1.showPwd(); //继承 function VipUser(name,pwd,level){ User.call(this,name,pwd); this.level = level; } VipUser.prototype = new User(); VipUser.prototype.constructor = VipUser; VipUser.prototype.showLevel = function(){ console.log(this.level); } var vip = new VipUser('cxy','121211',3); vip.showName(); vip.showPwd(); vip.showLevel(); </script> ----------------------- ES6.0版面向对象及继承 -------------------- <script> class User{ constructor(name,pwd){ this.name = name; this.pwd = pwd; } showName(){ console.log(this.name); } showPwd(){ console.log(this.pwd); } } var user1 = new User('kris','1106'); user1.showName(); user1.showPwd(); //继承 class VipUser extends User{ constructor(name,pwd,level){ super(name,pwd); this.level = level; } showLevel(){ console.log(this.level); } } var vip = new VipUser('cxy','121211',3); vip.showName(); vip.showPwd(); vip.showLevel(); </script>
九、json
-
json的标准写法
-
只能用双引号，不能用单引号
-
所有的名字都必须用引号包括起来
{"x":12,"y":66}
-
-
简写形式
-
名字跟值(key 与 value)一样的，留一个就行
{a:a,b,b,c:116}=>{a,b,c:116} -
:function 可以删掉
show:function(){}=>show(){}
-
-
json对象
-
JSON.stringify( ) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
JSON.stringify({a:5,b:8}) =>'{"a":5,"b":8}' -
JSON.parse( ) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
JSON.parse('{"a":5,"b":8}') =>{a:5,b:8}
-
十、Promise
1.Promise是一个构造函数 可以通过new Promise()得到一个Promise的实例
2.在Promise上有两个函数，分别叫做resolve(成功之后的回调函数)和reject(失败之后的回调函数)
3.在Promise构造函数的Prototype属性上 有一个.then 方法，只要是Promise构造函数创建的实例都可以访问到.then()方法
4.如果Promise表示一个异步操作 每当我们new一个Promise实例 就表示一个具体的异步操作
5.既然Promise创建的实例是一个异步操作，那么异步操作的状态只有两个结果 – 状态1：异步执行成功了，调用resolve 状态2：异步执行失败了，调用reject 由于Promise的实例是一个异步操作 所以内部拿到操作的结果后无法使用return把操作的结果返回给调用者 只能使用回调函数的形式把成功或失败的结果返回给调用者
const fs= require('fs');
function getFileByPath(fpath){
return new Promise(function(resolve,reject){
fs.readFile(fpath,'utf-8',(err,dataStr) =>{
if (err) return reject(err)
resolve(dataStr)
})
})
}
//先读取文件1，再读取文件2，再读取文件3
//在上一个.then中 返回一个新的promise实例 可以继续用下一个.then来处理
getFileByPath('./files/1.txt')
.then(function(data){
console.log(data);
//读取文件2
return getFileByPath('./files/2.txt')
})
.then(function(data){
console.log(data);
//读取文件3
return getFileByPath('./files/3.txt')
})
.then(function(data){
console.log(data);
})
- 异步与同步
- 异步：各个操作之间没有关系，可以同时进行多个操作 ------ 代码复杂
- 同步：同时只能做一件事 ------ 代码简单
- promise对象
- 用同步的方式来书写异步代码
- Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
- 改善了可读性，对于多层嵌套的回调函数很方便
- 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口
十一、generator — 认识生成器函数
-
generator生成器函数
- 普通函数 — 一站到底 ； generator函数中间能停, 与 yield (放弃) 配合使用
- 需要调用next()方法启动执行，遇到 yield 停, 踹一脚走一步
- generator函数前面加一个
*两边可以有空格，或靠近函数名或靠近function - 背后实际生成多个小函数，实现走走停停
<script>
function show(){
alert('a');
alert('b');
}
show();
</script>
---------------------------- generator生成器 ---------------------------
<script>
function *show(){
alert('a');
yield;
alert('b');
}
let genObj = show();
genObj.next();
genObj.next();
</script>
十二、generator-yield是什么？
yield
- 既可传参，又可以返回
- 第一个
next()传参无效，只用来启动
<script>
function *show(){
alert('a');
let a = yield;
alert('b');
alert(a);
}
let genObj = show();
genObj.next(12);
genObj.next(36); //输出：a,b,36
</script>
扫一扫
2066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
