什么是ECMA?
一个组织,不过多写了。
let声明变量 let特性
let同一个作用域下不能重复声明块级作用域,let声明的变量是在块级作用域的,块级作用域通常是一个{}没有变量提升不影响作用域链,同样满足向上查找该变量。
const声明常量
常量就是不能改变的量。一定要赋初始值。一般常量使用大写常量的值不能修改块级作用域没有变量提升一旦声明一个常量就不允许改变,但是只是不能改变栈中,即不能修改基础类型,可以对数组和对象中的元素进行修改,可以改变堆内存中的。
const arr
= [1,2,3];
arr
.push(4)
变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
const f4
= ['小沈阳', '刘能'];
let [xiao
, liu
] = f4
;
console
.log(xiao
);
const zhao
= {
name
:'赵本山',
age
:'65',
xiaopin
: function() {
console
.log('昨天今天明天');
}
}
let {name
, age
, xiaopin
} = zhao
;
console
.log(name
);
xiaopin();
模板字符串
let str
= `我也是一个字符串`;
console
.log(str
);
使用模板字符串在内容中可以直接出现换行直接进行变量的拼接
let a
= 'bob';
let b
= `${bob}是优秀的前端工程师!!`
console
.log(b
)
对象的简化写法
let name
= 'bob';
let change = function() {
console
.log('改变自己');
}
const school
= {
name
,
change
,
fn() {
console
.log('方法简化');
}
}
console
.log(school
);
箭头函数
没有自己的this没有arguments,arguments是用来保存实参的。没办法new实例化箭头函数的简写适合与this无关的问题, 定时器,数组的方法回调
let add = n
=> {
return n
+n
;
}
let pow = (n
) => n
*n
;
function getName() {
csonsole
.log(this.name
);
}
let getName2 = () => {
console
.log(this.name
);
}
window
.name
= 'aaaa';
const school
= {
name
: 'bbbb'
}
getName();
getName2();
getName
.call(school
);
getName2
.call(school
);
箭头函数的例子
const arr
= [1,6,8,7];
cosnt result
= arr
.filter(function(item
) {
if(item
% 2 === 0) {
return true;
} else {
return false;
}
});
console
.log(result
);
const result arr
.filter(item
=> item
% 2 === 0);
console
.log(result
);
参数形参赋初始值
function add (a
,b c
=10) {
return a
+b
+c
;
}
let result
= add(1,2);
function connect(host
, username
) {
console
.log(host
);
console
.log(username
);
}
connnect({
host
: 'aa',
username
: 'bb'
})
rest参数
rest(…)参数,用于获取函数的实参,用来代替arguments
function date() {
console
.log(arguments
);
}
date('aa', 'bb', 'cc');
function date(...args
) {
console
.log(args
);
}
date('aa', 'bb', 'cc');
扩展运算符…
将一个数组转化成逗号分隔的参数序列
const arr
= [aa
, bb
, cc
]
function fn() {
console
.log(arguments
);
}
fn(...arr
);
用处:
数组的合并 […arr, …arr1]数组克隆 […arr] 浅拷贝将伪数组转换成真正的数组。 [… arguments]
symbol
symbol的值是唯一的不能进行运算不能for in 循环
let s
= Symbol();
console
.log(s
, typeof s
);
使用: 给对象添加属性和方法
let game
= {up
:..,...}
let method
= {
up
: Symbol(),
down
: Symbol()
}
game
[method
.up
] = function() {
}
game
[methos
.down
] = function() {...}
console
.log(game
)
symbol的内置值
迭代器
概念:是一种接口,(就是对象里面的一个属性)为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口,就可以完成遍历的操作。(调用next方法,不断调用下一个函数,直到done的状态变为true,结束遍历) 具有iterator接口的数据:
arrayargumentssetmapstringtypedArraynodelist
const arr
= [aa
,bb
,cc
];
for(let v
of arr
) {
console
.log(v
);
}
迭代器的应用
const obj
= {
name
: 'aaa',
stus
: [
'aa',
'bb',
'cc'
],
[Symbol
.iterator
]() {
let index
= 0;
let _this
= this;
return {
next
: function() {
if (index
< _this
.stus
.length
) {
const result
= {value
: _this
.stus
[i
], done
: false};
index
++;
return result
;
} else {
{value
: undefined
, done
: true};
}
}
}
}
}
for(let v
of obj
) {
console
.log(v
);
}
生成器
生成器就是一个特殊的函数,进行异步编程,之前是纯回调函数
function * fn() {
console
.log('111');
yield '一只耳朵';
console
.log('222')
yield '一只尾巴';
console
.log('333')
}
let iterator
= fn();
console
.log(iterator
.next())
console
.log(iterator
.next());
for(let v
of fn()) {
console
.log(v
);
}
生成器函数参数
function * gen(arg
) {
console
.log(arg
);
let one
= yield 111;
console
.log(one
);
yield 222;
}
let iterator
= gen('AAA');
console
.log(iterator
.next());
console
.log(iterator
.next('BBB'));
异步编程,生成器解决回调地狱
function one () {
setTimeout(() => {
console
.log('111');
iterator
.next();
}, 1000)
}
function two () {
setTimeout(() => {
console
.log('222');
iterator
.next();
}, 2000)
}
function three () {
setTimeout(() => {
console
.log('333');
iterator
.next();
}, 3000)
}
function * gen() {
yield one();
yield two();
yield three();
}
let iterator
= gen();
iterator
.next();
生成器函数实例
function getUser() {
setTimeout(() => {
const data
= '用户数据';
iterator
.next(data
);
},1000)
}
function getOrder() {
setTimeout(() => {
const data
= '订单数据';
iterator
.next(data
);
},1000)
}
function getGood() {
setTimeout(() => {
const data
= '商品数据';
iterator
.next(data
);
},1000)
}
function * gen() {
const users
= yield getUser();
console
.log(users
);
const orders
= yield getOrder();
console
.log(orders
);
const goods
= yield getGood();
console
.log(goods
);
}
promise
const p
= new Promise(function(resolve
, reject
) {
setTimeout(function() {
let data
= '接口获取的数据';
resolve(data
);
let err
= '失败的数据';
reject(err
);
}, 1000)
})
p
.then(function(value
) {
console
.log(value
);
}, function(reason
) {
conslole
.error(reason
);
})
Promise封装ajax
function ajax(url
){
return new Promise((resolve
,reject
)=>{
var xhr
=new XMLHttprequest();
xhr
.open('GET',url
,true);
xhr
.onreadystateChange=function(){
if(this.readyState
===4&&this.status
===200){
resolve(this.responseText
,this)
}else{
var errMsg
={"code":this.status
,"msg":"请求接口失败"}
reject(errMsg
);
}
}
xhr
.send();
}).then((response
)=>{
console
.log('resolve处理成功接收的数据:',response
)
},err
=>{
console
.log('reject处理的错误信息:',err
)
})
}
Promsie的then方法
const p
= new Promise(function(resolve
, reject
) {
setTimeout(function() {
resolve('用户数据');
reject('出错了');
}, 1000)
})
const result
= p
.then(function(value
) {
console
.log(value
);
}, function(reason
) {
conslole
.error(reason
);
})
console
.log(result
);
如果then里面返回的是非promise对象,then的状态也为成功
const result
= p
.then(function(value
) {
console
.log(value
);
return 123;
}, function(reason
) {
conslole
.error(reason
);
})
console
.log(result
);
如果then里面返回的是Promise对象
const result
= p
.then(function(value
) {
console
.log(value
);
return new Promise((reslove
, reject
) => {
reslove('ok');
reject('err')
});
}, function(reason
) {
conslole
.error(reason
);
})
console
.log(result
);
then中抛出错误
const result
= p
.then(function(value
) {
console
.log(value
);
throw new Error('出错了!')
}, function(reason
) {
conslole
.error(reason
);
})
console
.log(result
);
Promise的catch方法
catch获取promise中失败的结果,也可以通过then的第二个参数获取失败的结果。
set
集合类似数组
有iterator接口,可以for of循环
add、delete、has、size方法等等 用处:
去重
交集
并集
差集
map
1.对象 健名不限于字符串 2. 可以for of循环 3. set新增属性,get获取属性
class类
function Phone(price
) {
this.price
= price
;
}
Phone
.prototype
.call = function() {
console
.log('可以打电话')
}
let Huawei
= new Phone(2333);
console
.log(Huawei
);
Hiawei
.call();
class Phone{
constructor(price
){
this.price
=price
;
}
call() {
console
.log(' 我可以打电话');
}
}
let ss
= new Phone(3333);
console
.log(ss
);
类的静态成员
实例对象不能访问函数对象的属性和方法,这些就是静态成员
function Phone
{}
Phone
.name
= '手机';
let nokia
= new Phone();
console
.log(nokia
.name
);
实例对象只能访问原型上的属性和方法
es6的继承
function phone(price
) {
this.price
= price
;
}
phone
.prototype
.call =function() {
console
.log(' 我可以打电话')
}
function sonPhone(price
, color
) {
phone
.call(this, price
);
this.color
= color
;
}
sonphone
.prototype
= new phone();
sonphone
.propotype
.constructor
= sonphone
;
sonphone
.propotype
.photo = function() {
console
.log(' 拍照')
}
const ss
= new sonphone(2999, '黑色');
console
.log(ss
);
class phone{
constructor(price
) {
this.price
= price
}
call() {
console
.log(' 我可以打电话')
}
}
class sonphone extends phone{
constructor(price
, color
) {
super(price
);
this.color
=color
;
}
photo() {
console
.log(' 拍照')
}
call() {
console
.log('我可以视频通话')
}
}
const xiaomi
= new sonphone(3333,'黑色');
console
.log(xiaomi
);
xiaomi
.call();
es6的模块化
好处:
防止命名冲突。A文件夹下的a.js和B文件夹下的a.js不冲突代码复用。公共功能可抽离出,export导出即可高维护性
语法
export导出import导入
es6的babel转换es5