1. ES6简介
2. ES6兼容性和新特性
ES6兼容的平台：IE10+、Chrome、FireFox、移动端、Node.js、混合开发
兼容解决办法：
一、在线转化
二、提前编译（beble.js ==browser.js）
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
let a=12;
let b=5;
alert(a+b);
</script>
ES6新特性：
- 变量
- 函数
- 数组
- 字符串
- 面向对象
- Promise
- generator
- 模块化
3. 变量 let 和 const
变量 var ：
- 可以重复声明
- 没有限制修改
- 没有块作用域
变量 let 不能重复声明，变量（可以修改），块级作用域
变量 const 不能重复声明，常量（不可修改变量），块级作用域
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.function(){
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
(function(i){
aBtn[i].onclick=function(){
alert(i);
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.function(){
var aBtn=document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
};
}
};
</script>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
</html>
4. 箭头函数
普通函数
function 名字(){
}
<script type="text/javascript">
let show=function(a){
return a*2;
}
alert(show(12));
</script>
箭头函数
（）=>{
}
<script type="text/javascript">
let show=(a)=>{
return a*2;
}
alert(show(12));
</script>
- 如果只有一个参数，（）可以省
<script type="text/javascript">
let show=function(a){
return a*2;
}
alert(show(12));
</script>
<script type="text/javascript">
let show=a=>{
return a*2;
}
alert(show(12));
</script>
- 如果只有一个return，{return }可以省
<script type="text/javascript">
let show=function(a){
return a*2;
}
alert(show(12));
</script>
<script type="text/javascript">
let show=a=>return a*2;
alert(show(12));
</script>
5. 参数（函数）
- 参数扩展、展开
- 默认参数
参数扩展:
- 收集剩余参数
<script type="text/javascript">
function show(a,b,...args){
alert(a);
alert(b);
alert(args);
}
show(1,2,3,4,6,67,7,7);
</script>
**Rest Parameter必须是最后一个
- 展开数组
展开后的效果，与直接把数组展开后内容相同
<script type="text/javascript">
let arr1=[1,2,3];
let arr2=[2,3,4]
//let arr=[1,2,3,2,3,4];
let arr=[...arr1,...arr2];
alert(arr);
</script>
默认参数
<script type="text/javascript">
function show(a,b=2,c=3){
alert(a+b+c);
}
show(1);
</script>
6. 解构赋值
- 左右两边结构必须一样
- 解构右边必须合法
- 声明与赋值不能分开
<script type="text/javascript">
let arr=[1,2,3];
/*let a=arr[0];
let b=arr[1];
let c=arr[2];*/
let [a,b,c]=[1,2,3];
alert(a+ " "+b+ " "+ c);
</script>
#左右结构一样
let [a,b,c]={a:1,b:2,c: 3}
#语法合法
let {a,b}={1,2} //右边不是合法语法
#声明与赋值不能分开
let [a,b];
[a,b]=[1,2];
7. 数组
map 映射 一对一
[20,70,30,88,99] // 分数
[不及格、及格、不及格、及格、及格]
[20,32,14,57,65] // ID
[
{name : ’ a’, level : 0, role : 0},
{name : ’ b’, level : 2, role : 99},
{name : ’ c’, level : 44, role : 23},
{name : ’ d’, level : 23, role : 33},
{name : ’ e’, level : 99, role : 0},
]
reduce 汇总 一堆出来一个
算总数
【12,40000,23333333】=>XXXXXX
<script>
let arr=[12,56,291,4444];
let result=arr.reduce(function(a,b,c){
// alert(a+','+b+','+c);
return a+b;
});
console.log(result);
</script>
算平均分
【12,59，99】 =>56.7
<script>
let arr=[12,56,291,4444];
let result=arr.reduce(function(a,b,c){
if(c!=arr.length-1){
return a+b;
}else{
return (a+b)/arr.length;
}
});
console.log(result);
</script>
filter 过滤器
<script>
let arr=[
{title: '男士衬衫',price: 75},
{title: '女士衣服',price: 1000},
{title: '男士鞋',price: 222},
{title: '女士包包',price: 333}
];
let result=arr.filter(json=>json.price>=500);
console.log(result);
</script>
foreach 循环（迭代）
<script>
let arr=[120,23,24,66];
arr.forEach((item,index)=>{
alert(index+":"+item);
});
</script>
8. 字符串
- 多了两个新方法
- startsWith
<script>
let str="http://www.baidu.com";
if(str.startsWith('http://')){
alert('普通网址');
}else if(str.startsWith('https://')){
alert('加密网址');
}else if(str.startsWith('git://')){
alert('git网址');
}else if('svn://'){
alert('svn地址');
}else{
alert('其他');
}
</script>
- endsWith
<script>
let str='1.txt';
if(str.endsWith('.txt')){
alert('文本文件');
}else if(str.endsWith('.jpg')){
alert("JPG 文件");
}else{
alert('其他');
}
</script>
- 字符串模板
字符串连接
<script>
let tilt="标题";
let content='内容';
let str='<div>\
<h1>'+title+'</h1>\
<p>'+content+'</p>\
</div>';
let str2=`<div>
<h1>{title}</h1>
<p>{content}</p>
</div>`;
</script>
i. 直接把字符塞进字符串里面
<script>
/*
let str="abc";
let sstr='abc';
*/
//let str=`abc`;
let a=12;
let str=`a${a}bc`;
alert(str); //a12bc
</script>
ii. 可以折行
<script>
let tilt="标题";
let content='内容';
let str='<div>\
<h1>'+title+'</h1>\
<p>'+content+'</p>\
</div>';
let str2=`<div>
<h1>{title}</h1>
<p>{content}</p>
</div>`;
</script>
9. 面向对象
- class关键字、构造器和类分开
- class里面直接加方法
<script>
class User{
//构造器
constructor(name,pass){
this.name=name;
this.pass=pass;
}
//添加方法
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
var ul=new User('blue','12345');
ul.showName();
ul.showPass();
</script>
继承
super
<script>
class User{
//构造器
constructor(name,pass){
this.name=name;
this.pass=pass;
}
//添加方法
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
class VipUser extends User{
constructor(name,pass,level){
//继承父类
super(name,pass);
this.level=level;
};
showLevel(){
alert(this.level);
}
}
var v1=new VipUser('blue','12345',3);
v1.showName();
v1.showPass();
v1.showLevel();
</script>
10. 面向对象实例
面向对象应用——React
React:
- 组件化——Class
- JSX=bable=browser.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/react.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
window.function(){
let oDiv=document.getElementById('div1');
ReactDom.render(
<span>123</span>
oDiv;
);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
let aItems=[];
for(let i=0;i<this.props.arr.length;i++){
aItems.push(<Item str={this.props.arr[i]}></Item>);
}
return
<ul>
{aItems}
</ul>;
}
}
window.function(){
let oDiv=document.getElementById('div1');
ReactDom.render(
<List arr="{['asd','asfw','aagag']}"></List>;
oDiv;
);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class aItems extends React.Component{
constructor(...args){
super(...args);
}
render(){
let aItems=this.props.arr.map(a=><Item str={a}></Item>);
return
<ul>
{aItems}
</ul>;
}
}
window.function(){
let oDiv=document.getElementById('div1');
ReactDom.render(
<aItems arr={['abc','aer','afaf']}></aItems>
oDiv;
);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class aItems extends React.Component{
constructor(...args){
super(...args);
}
render(){
return
<ul>
{this.props.arr.map(a=><Item str={a}></Item>)}
</ul>;
}
}
window.function(){
let oDiv=document.getElementById('div1');
ReactDom.render(
<aItems arr={['abc','aer','afaf']}></aItems>
oDiv;
);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
10. JSON
-
JSON对象
JSON.parse();
JSON.stringify
json的标准写法
1、只能用双引号
2、所有的名字都必须用引号包起来JSON转换成字符串
<script>
let json={a: 12,b: 5};
let str="http://www.baidu.com?date="+encodeURIComponent(JSON.stringify(json));
alert(str);
</script>
字符串转换成JSON
<script type="text/javascript">
let str='{"a" : 12, "b" : 5, " c " : "test"}';
let json=JSON.parse(str);
console.log(json);
</script>
</head>
- 简写
名字一样
<script>
let a=1;
let b=2;
// let json={a:a,b:b,c:23};
let json={a,b,c:23};
console.log(json);
</script>
方法简写
<script>
let json={
a:12,
/*show:function(){
alert(this.a);
}*/
show(){
alert(this.a);
}
};
json.show();
</script>
11.Promise
异步：操作之间不相关 同时并行进行多个操作
同步：同时只能做一件事
无Promise异步数据请求
<script type="text/javascript">
$.ajax(url:'/banners',function(banners_date){
$.ajax(url:'hots',function(hots_date){
$.ajax(url:'price',function(price_date){
},function(){
alert('失败了');
});
},function(){
alert('失败了');
});
},function(err){
alert('失败了');
});
</script>
有了Promise
Promise.all([
$.ajax({url: 'json.txt',dateType: 'json'}),
$.ajax({url: 'arr.txt',dateType: 'json'})
]).then(function(arr){
let [res1,res2]=arr;
alert('全部成功了');
console.log(res1);
alert(res2);
},function(err){
alert('至少一个失败了');
})
</script>
12.Generator
- generator 生成器函数
- 普通函数，一路到底
- generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权
- yield 有 放弃、退让、退位的意思
- 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
- generator函数前面加一个
*两边可以有空格，或靠近函数或function - 背后实际生成多个小函数，实现走走停停
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'})
}
})
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
