ES6学习记录

作者: 大白熊_8133 | 来源:发表于2018-11-13 23:50 被阅读0次

10. 回调和promise
ES6学习记录
ES6学习记录
ECMA Script 6开发环境搭建
ES6新特性简单学习记录
ECMAScript 6学习记录<一>基本语法
ES6 map && set
es6学习
ES6入门（ECMAScript 6 ）
【一起来烧脑】入门ES6体系

根据哔哩哔哩av20327829自学，老师说的话真是相当通俗

介绍

ECMA是一个标准，JS是实现

兼容性

ES6（ES2015）——IE10以上，Chrome,FireFox,移动端，NodeJS
编译，转换
1.在线转换
babel和browser.js同义词

<script src="broswer.js" charset="utf-8"></script>
<script type="text/babel">

必须给type值才可以在线编译
2.提前编译

新特性

变量

var
1.可以重复声明

var a=12
var a=5
alert(a)

弹出a是5 未报错
2.无法限制修改
3.没有块级作用域，var的作用域是函数
语法块
if(){
}
JS在if中定义变量，在if外可以使用
语法块也可以独立存在

let 不能重复声明变量-可以修改块级作用域

const 不能重复声明常量-不可以修改，不能对常量赋值块级作用域

函数

箭头函数
()=>{}

//let show=function(){
//alert("abc")
//}
let show=()=>{
alert("abc")
}
show()；

arr.sort((n1,n2)=>{return n1-n2;})

如果只有一个参数，（）可以省略
如果只有一个return，{}和return可以省略

2、参数
2.1参数扩展/参数展开
2.1.1.收集参数 "..."

function show(a,b,...args)
{
alert(a)
alert(b)
alert(args)
}
show(12,15,8,9,20)

args是剩余参数，必须是最后一位形参
2.1.2 展开数组
展开后的效果，和数组内容写在响应位置一样

let arr1=[1,2,3]
let arr2=[5,6,7]
let arr=[...arr1,...arr2]
function show(a,b,c)
{
alert(a)
alert(b)
alert(c)
}
show(...arr)

2.2默认参数

function show(a,b=5,c=12)
{
alert(a)
alert(b)
alert(c)
}
show(99)

如果show不传参数，b,c为默认，传参数则改变默认参数

解构赋值

解构：拆分结构
1.左右两边结构必须一致
2.右边必须是个东西
3.声明和赋值必须在一句话完成

let [a,b,c]=[1,2,3]
let{a,c,d}={a:12,c:5,d:6}
let[{a,b},[n1,n2,n3],num,str]=[{a:5,b:16},[12,5,8],8,'sadaf']

数组

map——映射一个对应一个

let arr=[19,85,99]
let result=arr.map(item=>item>=60?"及格":"不及格"
})

2.reduce——汇总一堆出来一个

//算总数
let arr=[12,60,66]
let result=arr.reduce(function(tmp,item,index){ return tmp+item;})
//tmp是中间结果
//index是下标
//算平均数
let result=arr.reduce(function(tmp,item,index){if(index!=arr.length-1) return tmp+item;
else
return (tmp+item)/arr.length;
}

3.filter——过滤器

let arr=[12,5,8,99,27,36,75]
let result=arr.filter(item=>item%3)
//arr.filter(function(item){
//if
//return true;
//else
//return false
//})

forEach——循环（迭代）

arr.forEach(item=>{})
//arr.forEach(function(item,index){})

没有返回值

find 用于找到第一个符合条件的数组成员，参数是一个回调函数，所有数组成员执行回调函数，直到知道到第一个

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

所有都不符合就返回undefined

fill()给定值，填充一个数组

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

includes()返回布尔值，表示某个数组是否包含给定的值

[1, 2, 3].includes(2)     // true

也可以给定第二个参数，作为搜索的起始位置，默认为0，如果是负数，则表示倒数的位置

[1, 2, 3].includes(3, 3);  // false

字符串

1.多了两个新方法
startsWith

let str="asfaf"
alert(str.startsWith('a'))

也可以不是字符，以字符串为开始

let str='https://afafag.com"
if(str.startsWith("https://")
alert("加密网址")

endsWith

let str="safag.txt"
if(str.endsWith('.txt'))
alert("文本文件）

2.字符串模板
拼接字符串

 let s=12
let str=`ads$(s)sa`
//$()将内容引入到字符串中，模板字符串用反单引号

直接把变量嵌入字符串中
可以换行
原本换行需要加\

面向对象

class User{
constructor(name,pass)
{
this.name=name;
this.pass=pass;
}
//构造器
showName(){
alert(this.name)
}
//不用加:function
}

构造器和类分开
方法不用在类外定义
继承

class VipUser extends User{
constructor(name,pass,level){
super(name,pass);
//超类,执行父类的构造函数
this.level=level
showlevel()
{
alert(this.level)
}
}

以前的版本

function User(name,pass){
this.name=name
this.pass=pass
}
User.prototype.showname=function(){
alert(this.name)
}
var u1=new User('blue',"qweqwrq")
//继承
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(){
alert(this.level)
}
var v1=new VipUser("blue","Asdaf",3)

面向对象应用——React

1.组件化——Class
2.强依赖于JSX==babel==browser.js
没学过以后再说吧

JSON

JSON对象
json标准写法：
1.只能用双引号
2.所有名字必须用双引号包起来
JSON.parse必须用标准格式

let json={a:12,b:5}
alert(JSON.stringify(json))
//如果想变成URL格式 需要encodeURIComponent方法
let str='{"a":12,"b":5,"c":"abc"}'
let json=JSON.parse(str)

JSON简写
变量和值名字一样，保留一个

let a=5；
let json={a,c:5}
//和let json={a:a,c:5}一样

方法

let json={
show(){}
}
// show:function(){}效果一致

Promise

消除异步操作
用同步一样的方式，书写异步代码

let p1=new Promise(function(resolve,reject){
//异步代码
//resolve-成功了，reject-失败了
$.ajax({
url:'arr.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
let p2=new Promise(function(resolve,reject){
//异步代码
//resolve-成功了，reject-失败了
$.ajax({
url:'json.txt',
dataType:'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
p1.then(
function(arr){alert("成功了")},
//resolve
function(err){alert("失败了")});
//当promise执行有结果调用then
}
})
//这是一个promise的情况
Promise.all([p1,p2]).then(function(arr){alert("全部成功了")},
function(){alert("全部失败了"})
//所有promise一起判断
//这里的arr装了所有promise的数据

现在创建Promise的过程是两个步骤，可以简化为以下

function createPromise(url){
return new Promise(function(resolve,reject){
$.ajax(
url,
dataType:"json",
success(arr){
resolve(arr);
},
error(err){
reject(err);
})
})
}
Promise.all([createPromise('arr.txt'),
createPromise('json.txt)]).then(function(arr){alert("全部成功了")},
function(){alert("全部失败了"})

使用高版本的jQuery的情况下，ajax返回的值是promise对象

Promise.all([
$.ajax(),
$.ajax()
]).then(function(result){})

generator

生成函数
和普通函数相比，可以暂停

生成函数前要有星号，*show()

暂时放弃执行利用yield

function *show(){
alert('a');
yield;
alert('b');
}
let genObj=show();
genObj.next();
genObj.next();
//只一个next就只弹出a

并不是执行函数，而是创建了generator对象

yield

传参

      function *show(){
        alert("a")
        let a=yield;
        alert("b");
        alert(a)
        //这时a是5
        //第一个next执行到yield
        //第二个next从let a开始，a接到的是5
      }
      let gen=show();
      gen.next(12);
      //第一个next，yield无法传参
      gen.next(5);

      function *show2(){
        alert("a")
        yield 12
        alert("b")
      }
      let gen=show2()
      let res1=gen.next();
      console.log(res1)
      //Object{value:12,done:false}
      let res2=gen.next()
      console.log(res2)
      //Object{value:55,done:true}

generator实例

runner

     runner(function*(){
       let data1=yield $.ajax({url:'1.txt',dataType:'json'})
      //yield 一个promise给runner，执行完后控制权还给generator函数
       let data2=yield $.ajax({url:'2.txt',dataType:'json'})
       let data3=yield $.ajax({url:'3.txt',dataType:'json'})
     })

generator函数会使有逻辑的异步操作更简单

runner(function *(){
let userData=yield $.ajax({url:'getUserDate',dataType:'json'});
if (userData.type=='VIP'){
let items=yield $.ajax({url:'getVIPItems',dataType:'json'})}
else{
let items=yield $.ajax({url:'getItems',dataType:'json'})
}
})

复习

变量
var 重复声明，函数级
let 不能重复声明，块级，可以修改
const 不能重复声明，块级，不可以修改
箭头函数
a. 只有一个参数()可以省略，如果只有一个返回值，{}可以省略
b. 修正this
参数扩展
...args
收集参数
展开数组
默认参数
数组方法
map——一个对应一个，输出数组
reduce——一堆对应一个
filter——过滤出符合的，function中return的是true false，最终获得的是数组
forEach——循环
字符串
startsWith/endsWith
字符串模板：用反单引号，$(a)
Promise
封装异步操作
Promise.all([]).then()
generatore
function *show(){
yield
}
JSON
JSON.stringify()
将JSON转换为字符串
JSON.parse()
将字符串转换为JSON
面向对象
class Test{
constructor(参数){
this.name=name
}
方法(){}
}
继承
class Class2 extends Class1{
constructor(参数)
{
super(参数)
this.xxx=xxx
}
方法(){}
}
解构赋值
左右两边解构一致
右边合法
声明赋值一次完成

10. 回调和promise
异步加载 JSES5 ES6 promise 学习视频记录
ES6学习记录
根据哔哩哔哩av20327829自学，老师说的话真是相当通俗介绍 ECMA是一个标准，JS是实现兼容性 ES6...
ES6学习记录
参考资料阮一峰《ES6标准入门教程》通过node命令行可以查看node已经实现的ES6的新特性好多新特性在...
ECMA Script 6开发环境搭建
声明：跟着技术胖学习ES6,此处是在记录笔记。原文链接：http://jspang.com/2017/06/03/...
ES6新特性简单学习记录
学习文章转自：ES6简单特性学习记录变量定义新方式：let/const let特性：块级作用域（一对{}包括...
ECMAScript 6学习记录<一>基本语法
上篇文章记录了在开启ES6之旅前需要使用的babel转码器的使用方法，本篇文章正式开始ES6的语法学习。 1、 G...
ES6 map && set
之前我们记录过一些常用的ES6属性，常用ES6总结，今天再来学习两个虽然不是太常见但是用起来非常好用的两个属性。 ...
es6学习
学习es6
ES6入门（ECMAScript 6 ）
学习es6的笔记，记录下自己的成长，如有不合理之处，请多多指教，学习途径。 let 和 var 的区别let变量只...
【一起来烧脑】入门ES6体系
为什么要学习ES6掌握ES3、ES5、ES6的联系和区别快速入门ES6 学会快速构建ES6的编译环境学习ES6...