2019-6-27 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这周萌芽决定好好学习一下ES6，感兴趣的小伙伴们来一起学习吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移动端、Node.js
编译转换
1.在线转换（browser.js）
2.提前编译
ES6新特性
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.promise（串行化异步交互）
7.generator（把同步拆分为异步）
8.模块化（ES6自带模块化）
变量
var
1.可以重复声明
2.无法限制修改
3.没有块级作用域（没有语法块！）
let 不能重复声明(变量，可以修改)
const 不能重复声明(常量，不能修改)
块级作用域，let在外部无法调用
函数
箭头函数 =>
function show(){
//这是我们平常的函数
}
let show=()=>{
//箭头函数
}
//区别不大，把function省略掉换成箭头，主要就是为了方便，可传参
1.如果只有一个参数，（）可以省去。
let show=a=>{
return a*2
}
2.如果只有一个return，{}可以省略
let show=a=>a*2;
let arr = [15,2,37,11,67,4,6]; //排序
arr.sort((n1,n2)=>{
return n1-n2;
})
arr.sort((n1,n2)=> n1-n2 );
console.log(arr)
函数的参数
1.参数扩展/展开
2.默认参数
参数的扩展
1.收集参数
function arrData(a,b,...args) {
alert(a);
alert(b);
alert(args);
}
*注意：Rest Parameter必须是最后一个(除其他语言)
1
2.展开数组
arrData(...arr); //等价于 arrData(1,2,3);
1
这仨点儿【…】代表把数组内容掏出来放这。
默认参数
//jQuery中的默认参数
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
//ES6默认传参
function showOne(a,b=10,c=5) {
console.log(a,b,c)
}
解构赋值
1.左右两边解构必须一样
2.右边必须是个合法的东西
3.声明和赋值不能分开(必须在一句话里完成)
let [one,two,three] = [10,20,30];
let {one1,two2,three3} = {a:10,b:20,c:30};
数组
map 映射（一个对一个。传几个返回几个）
let result = arr.map(function (item) {
return item*2;
});//简写一下
let result = arr.map(item=>item*2 );
//判断考试成绩
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');
reduce 汇总（算个总数，算个平均数）
//tmp：上次求和总和，为两两相加，如果之前没有结果则为传进来的数组的第一个数。
//itme：当前的数。
//index：执行的次数。
let result = arr.reduce(function (tmp, item, index) {
return tmp + item;
});
//简写
arr.reduce((tmp, item, index)=>tmp + item);
filter 过滤器(筛选掉不需要的)
let result = arr.filter(item=>{
if (item%2 == 0){
return true;
} else {
return false;
}
});
//简写
let result = arr.filter(item=>item%2 == 0);
//***萌芽在这里提一下！json和之前的item都不是固定的，可以随便命名。意思都是当前的值！
let arrProce = [
{title:'男士衬衫',price:75},
{title:'女士包包',price:5000},
{title:'男士包包',price:20},
{title:'女士鞋',price:2500}
];
let result = arrProce.filter(jsom=>json.price >= 2000);
console.log(result);
forEach循环(迭代)
arr.forEach((item,index)=>{
alert(index+":"+item)
})
字符串
1.多了俩新方法
startsWith()； //判断开头，返回布尔类型
endWith()； //判断结尾，返回布尔类型
let str='hello,world!'
str.startsWith('h')
str.endWith('!') //返回true
2.字符串模板
字符串连接
2.1直接把东西塞进字符串里面 ${东西}
2.2可以折行
<h1>${title}</h1>
<p>${content}</p>
ES6的面向对象
1.class关键字，构造器和类分开啦。
2.class里面直接加方法。
class User{
constructor(name,password){ //构造器
this.name = name;
this.password = password;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.password);
}
}
var user = new User('萌芽子','123456');
user.showName();
user.showPass();
继承
class VipUser extends User{
constructor(name,password,age){
super(name,password); //super 超类
this.age = age;
}
showAge(){
alert(this.age)
}
}
var user = new VipUser('萌芽子','123456','18岁');
user.showName();
user.showPass();
user.showAge();
不得不说作为一只JAVA汪，这种写法真得劲！
面向对象的应用
React
1.组件化（class）
2.JSX（JSXbabelbrowser.js）
JSX属于JS的扩展版
class Test extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li> //props:属性
}
}
window.onload = function(){
let oDiv = document.getElementById('div1');
ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界！"></Item>
</ul>
oDiv
);
};
打卡，下次就学这个了！===============
json
1.JSON对象
JSON.stringify() json转字符串
let json = {a:10, b:20};//JSON.stringify 字符串化
let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
alert(str)
1
2
3
4
JSON.parse() 字符串转json
let str = '{"a":12,"b":20,"c":"可乐"}';
let json = JSON.parse(str);
console.log(json);
2.简写
在新版的ES6当中名字一样的键（key）和值（value）可以只写一个。
let a = 12;
let b = 5;
let json = {a,b,c:21};
简化了JSON中的方法。
let json ={
a:12,
showJson(){
alert(this.a);
}
};
json.showJson();
json的标准写法：
1.只能用双引号
2.所有的名字都必须用引号包起来（所有的key都必须是双引号）
{a:12,b:5} × 错误的写法
{"a":"萌萌萌","b":"芽子"} √ 正确的写法
1
2
Promise(承诺)
异步：操作之间没啥关系，同时进行多个操作
同步：同时只能做一件事
优缺点：
异步：代码更复杂
同步：代码简单
Promise——消除异步操作
*用同步一样的方式来书写异步代码；
let p = new Promise(function (resolve,reject) {
//异步代码
//resolve——成功
//reject——失败
})
-----------------------------------------访问我们的arr.txt文件，这里用到了jQuery的ajax就不详细介绍了。
let p = new Promise(function (resolve, reject) {
//异步代码
//resolve——成功
//reject——失败
$.ajax({
url: 'arr.txt',
dataType: 'json',
success(arr) {
resolve(arr);
}, error(err) {
reject(err);
}
})
});
//结果
p.then(function (arr) {
alert('成功啦' + arr)
}, function (err) {
alert('失败了' + err)
console.log(err)
});
-----------------------------------------------多个请求地址
Promise.all([p1,p2]).then(function (arr){
let [res1,res2] = arr;
alert('全部成功啦');
console.log(res1);
console.log(res2);
},function (){
alert('至少有一个失败了');
});
----------------------------再简化
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){
let [res1,res2] = arr;
alert('全部成功啦');
console.log(res1);
console.log(res2);
},function (){
alert('至少有一个失败了');
});
----------------------完美写法
Promise.all([
$.ajax({url:'arr.txt',dataType:'json'}),
$.ajax({url:'json.txt',dataType:'json'})
]).then(function (results) {
let [arr,json] = results;
alert("成功了");
console.log(arr,json)
},function () {
alert("失败了")
})
我们有了promise之后的异步：
Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
//对了
},err=> {
//错了
})
Promise.all （必须全部成功）
Promise.race（同事读多个数据，即使失败也没关系）
generator(生成器)
普通函数 - 一路到底执行不可中断
generator函数 - 可中断
function * show() {
alert('a');
yield;//暂时放弃执行
alert('b');
}
let genObj = show();
genObj.next();
genObj.next();
yield
yield传参
function * show(num1,num2) {
alert(`${num1},${num2}`);//es6
alert('a');
let a = yield;//暂时放弃执行
console.log(a);
alert('b');
}
let genObj = show(99,88);
genObj.next(12);//第一个next无法给yield传参的，废的
genObj.next(5);
yield返回
function *show() {
alert('a');
yield 12;
alert('b');
return 55;
}
let gen = show();
let res1 = gen.next();
console.log(res1); //{value: 12, done: false}
let res2 = gen.next();
console.log(res2);//{value: undefined, done: true} 加了return {value: 55, done: true}
还没做的菜叫函数参数，过程是yield之前函数里面的东西，干净的菜，切好的菜是中间过程也就是yield，最终我们将它返回出去！不得不说这图很生动。
异步操作
1.回调
$.ajax({
url:'url',
dataType:'json',
success(data){
$.ajax({
url:'xxx',
dataType: 'json',
success(data) {
//完事儿了
},error(err) {
alert('错了')
}
})
},error(){
alert('失败')
}
})
2.Promise
Promise.all([
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'})
]).then(results=>{
//完事儿
},err=>{
//错误的
})
3.generator
runner（function *（）{
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
}）
1
2
3
4
5
generator（不能用=>函数）
逻辑判断下非常好用。
Promise：一次读一堆。
generator：逻辑性。
runner（function *（）{
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
}
//生成...
}
}）
总结
1.变量：
var：能重复声明、函数级
let： 严格的，不能重复声明，块级，变量
const：严格的，不能重复声明，块级，常量
2.箭头函数
2.1方便
i.如果只有一个参数，（）可以省
ii.如果只有一个return，{}可以省
2.2修正了this
this相对正常点
3.参数扩展
…能收集
…能扩展
默认参数
4.数组方法
map 映射
reduce 汇总
filter 过滤
forEach 循环
5.字符串
starsWith/endWith
字符串模板:${a}xxx{b}
6.Promise
封装异步操作
Promise.all([]);
7.generator
function *show(){
yield
}
8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串
9.解构赋值
let [a,b,c] = [12,5,8]；
左右结构一样，右边是个合法的东西，连生命带赋值一次完成。
10.面向对象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
继承
class Test2 extends Test(){
constructor(){
super();
}
}
谈谈ES7和ES8
1.数组includes
数组是否包含某个东西
2.数组 keys/values/entries
for…in(循环数组)
对于数组来讲循环的是下标
对于json循环的是key
for…of(循环迭代器)
对于数组循环的是值
不能用于JSON，json并不是迭代器
keys = >所有的key拿出来 0,1,2,3…
values =>所有的values拿出来 23,5,8,1…
entries =>所有的键值对拿出来 {key:0,value:a}
let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);
预览版，目前极大多数浏览器都不支持，以后可能会支持，了解一下就好。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。