一、介绍
- ES5.1成为ISO国际标准
- 2015年06月，ES6.0预计发布正式版
兼容性 谷歌、IE10+ 、
ES6兼容性方面，我们可以使用
1、在线转换
2、提前编译
变量
var
1、可以重复声明
2、无法限制🚫修改，例如常量 PI=3.1415926这样的常量，这个值不要改，但是用var并不能限制别人更改它
3、没有块级作用域 {} if(){} for(){}
ES6有了两种新的定义变量的方式 （let、 const）
let 不能重复声明，块级作用域，变量-可以修改
const 不能重复声明，块级作用域， 常量-不可以修改
for (var i = 0; i < aBtn.length; i++) {
(function (i) {
aBtn[i].onclick = function () {
alert(i)
}
})(i);
} //我们利用原生js的函数是一层作用域
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function () {
alert(i)
}
}
函数
箭头函数
()=>{
//这就是箭头函数
}
1、如果只有一个参数，圆括号可以省略
2、如果只有一个return，圆括号可以省
let show2 = function (a) {return a * 2}
let show2 = a => a * 2
函数参数
- 函数参数的展开和扩展
1、收集剩余参数
function(a,b,...args) //args是剩余参数
2、展开数组 展开后的效果，就直接跟吧数组写在这里是一样的
let A=[1,2,3]
let B=[4,5,6]
[...A,...B] //扩展参数
//[1, 2, 3, 4, 5, 6]
function show(...args) { //收集参数
fn(...args) // fn(12,5)
}
function fn(a, b) {
alert(a + b)
}
show(12, 5)
解构赋值
1、左右两边结构必须一样
2、右边得是合法的东西
3、声明和赋值不能分开
let [a,b,c]=[1,2,3]
let {a,c,d}={a:12,c:5,d:6}
let [{a,b},c,[n1,n2,n3]]=[{a:2,b:3},4,[7,8,9]]
let [json,c,[n1,n2,n3]]=[{a:2,b:3},4,[7,8,9]]
let [a,b] //❌，声明和赋值不能分开
[a,b]=[1,2]
数组
多了四个非常好用的方法 map、reduce、filter、forEach
- map 映射
- reduce 汇总
- filter 过滤器
- forEach 循环（迭代）
映射（一个对一个）
let arr=[1,2,3]
let result=arr.map(function(item){ return item*2})
let result2=arr.map(item=>item*2) //简写
let score=[90,19,87,60,61]
let result=score.map(item=>item>=60?'及格':'不及格')
汇总 (一堆出一个)
应用：算总数、平均分
总和：
let arr=[12,69,180,8763]
let result2=arr.reduce(function(a,b,c){return a+b})
//第一个参数,第一次是arr[0],第二次是第二个参数第一次的结果
//第二个参数,第一次是arr[0]+arr[1]
//第三个参数数索引
平均数：
let result3 =arr.reduce(function(a,b,c){
if(c!=arr.length-1){
return a+b
} else{
return (a+b)/arr.length
}
})
过滤器(留一部分过滤到一部分)
//应用：只看价格40以上的、只看男装、只看。。。
//找出能被3整除的数
let arr=[12,5,8,99,36,75]
let result =arr.filter(item=>{
if(item%3==0){
return true
}else{
return false
}
})
//简写
let result =arr.filter(item=>{
return item%3==0
})
//再简写
let result =arr.filter(item=>item%3==0)
let arr=[
{title:'男生寸衫',price:75},
{title:'女生上衣',price:35},
{title:'女生裤子',price:15},
{title:'裙子',price:55},
{title:'鞋子',price:35},
{title:'袜子',price:95},
]
let result=arr.filter(json=>json.price>=40)
foreach循环（迭代）
let arr=[12,43,56,77]
arr.forEach(item=>{
console.log(item)
})
字符串
多了两个新的方法
startsWith
endsWith
字符串模板
新的方法
let http='http://abc.com'
console.log(http.startsWith('http://')) //是否已http://开头
应用：startsWith判断网址
let str="git://www.baidu.xxx"
if(str.startsWith('http://')){
console.log('普通网址')
}else if(str.startsWith('git://')){
console.log('git网址')
} else if(str.endsWith('svn://')){
console.log('svn地址')
}
应用：endsWith可以判断文件类型
let str="xue.txt"
if(str.startsWith('.txt')){
console.log('文本类型')
}else if(str.startsWith('.jpg')){
console.log('图片类型')
} else if(str.endsWith('.html')){
console.log('html文件')
} else{
console.log('其他')
}
字符串模板
作用
- 可以直接把东西直接塞到 字符串里面
${东西} - 可以折行
let str=`${1+1}`
let str=`<div>AAA</div>`
`<div>AAA</div>
<h1>22222<h1>
<div>BBB</div>
`
面向对象
1、class关键字、构造器和类分开了
2、class里面直接加方法
老版本的继承
function People(name, age) {
this.name = name;
this.age = age
}
People.prototype.showName = function () {
console.log(this.name)
}
People.prototype.showPass = function () {
console.log(this.age)
}
function Teacher(name, pass, level) {
People.call(this, name, pass) //实现继承
this.level = level
}
Teacher.prototype = new People(); //继承方法
Teacher.prototype.constructor = Teacher; //纠正VipUser的constructor
Teacher.prototype.showLevel = function () {
console.log(this.level)
}
var t1 = new Teacher('lily', '12', 3)
t1.showLevel()
t1.showName()
t1.showPass()
面向对象继承新的写法
class People {
constructor(name, age) {
this.name = name;
this.age = age
}
showName = function () {
console.log(this.name)
}
showPass = function () {
console.log(this.age)
}
}
class Teacher extends People {
constructor(name, age, level) {
super(name, age, level); //超类，执行父类的构造函数
this.level = level
}
showLevel() {
console.log(this.level)
}
}
var t1 = new Teacher('lily', '12', 1)
t1.showLevel()
t1.showName()
t1.showPass()
面向对象应用 - React（从React来看ES6）
React特点：
模块化/组件化-class
强依赖JSX
JSX=babel=browser.js
<script type="text/babel">
class Item extends React.Component {
constructor(...args) {//收到任何参数都原封不动给super
super(...args)
}
render() {
return <li>{this.props.str}</li>
}
}
class List extends React.Component {
constructor(...args) { //constructor必须得有
super(...args)
}
render() {
// 方法一，利用for循环比遍历
// let aItems = [];
// for (let i = 0; i < this.props.arr.length; i++) {
// aItems.push(<Item str={this.props.arr[i]}></Item>)
// }
// 方法一，利用ES6的Map遍历
// let aItems = this.props.arr.map(str => <Item str={str}></Item>)
return <ul>
{this.props.arr.map(str => <Item str={str}></Item>)}
</ul>
}
}
window.onload = function () {
let getDiv = document.getElementById('div1')
ReactDOM.render(<ul>
<List arr={['abc', 'efg', 'kiss']}></List>
<Item str="abc"></Item>
<Item str="vvv"></Item>
<Item str="rrr"></Item>
</ul>, getDiv)
}
</script>
JSON
json对象
json的简写：名字和值一样的时候
json的标准写法：
只能用双引号
所有的名字必须用引号包起来
{"a": 1, "b": 5}
{}
json对象
有两个方法
1、stringify
2、parse
JSON.stringify({ "name": "vina", "age": "12" }) //转换成字符串
JSON.parse('{ "name": "vina", "age": "12" }') //字符串转换为对象
json简写
名字和值（key和value）一样的时候
name="vina" age="25"
let result={name:name,age:age}
let result={name,age}
json里面有方法，可以简写function
let json = {
a: 12,
// show: function () {
// alert(this.a)
// }
//简写
show() {
alert(this.a)
}
}
Promise
含有：承诺
学习promise先要了解：异步
什么是异步？典型特点：操作之间没啥关系，同时进行多个操作，代码更复杂
什么是同步？同时只能做一件事，代码简单
Promise消除异步操作，只不过是用同步一样的方式，来书写异步代码
Promise怎么用？
