1、const
不允许重复声明
不属于顶层对象window
不存在变量提升
暂时性死区
块级作用域
const 不属于顶层对象window
const str='es6';
console.log(window.str); // undefined
//变量提升
console.log(str);
var str = 'es6';
//相当于
var str;
console.log(str);
str = 'es6';
//不存在变量提升(1、需先定义后使用;2、块级作用域)
console.log(str);
const str = 'es6';
2、const声明的常量能被改变吗?
变量如何存储
js中分为基本数据类型和引用数据类型
基本数据类型(栈内存):number、boolean、string、NUN、undefined
引用数据类型(堆内存):对象、数组
freeze浅冻结
深层次冻结:需要将每一层对象都冻结
const esObj = {
name:'es6',
year:2015
}
esObj.name = 'es2015';
console.log(esObj); // es2015
const arr = ['es6','es7','es8'];
arr[0] = 'es2015';
console.log(arr[0]);//es2015
const arr = ['es6','es7','es8'];
Object.freeze(arr);
arr[0] = 'es2015';
console.log(arr[0]);//es6
const esObj = {
name:'es6',
year:2015,
extension:['es7','es8','es9']
}
Object.freeze(esObj );
esObj.extension[0]= 'es2015';
console.log(esObj.extension[0]); // es7
Object.myFreeze(esObj );
esObj.extension[0]= 'es2016';
console.log(esObj.extension[0]); // es7
function myFreeze(obj){
Object.freeze(obj);
Object.keys(obj).forEach(function(key){
if(typeof obj[key] === 'object'){
myFreeze(obj[key]);
}
})
}
3、箭头函数
箭头函数左边:指函数参数
箭头函数右边:指方法体
箭头左边如果只有一个参数,则不需要写括号
箭头右边如果只有一行代码,则不需要大括号
使用箭头函数我们应注意:
1、事件的回调函数用箭头写的时候,因为this指向与之前是不同的,箭头函数里面没有this,它会沿着它的 作用域链向上查找,找到谁就指向谁
2、通过箭头函数去定义对象里面的方法,因为this指向与之前是不同的,我们需要注意
3、箭头函数里面arguments不能使用
4、箭头函数不能作为构造函数
5、箭头函数不能定义原型下面的方法
const res = (x,y) => x+y;
const fn = x => {
//业务逻辑代码
}
const oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',()=>{
console.log(this); // this只向window
this.style.backgroundColor = '#f0f';
})
const obj = {
name :'zj',
showName: () => {
console.log(this);//this指向window
console.log('my name' + this.name)
},
showAge(){ //es6对象 简写的形式
console.log(this);this指向obj
}
}
obj.showName();
function sum2(x, y){
console.log(arguments);//arguments可以取到该方法里面形参的值
}
sum2(2,3);
const sum =(x,y)=>{
console.log(arguments);//会报错
return x+y;
}
sum2(22,33);
//类
function Course(name,price){
this.name = name;
this.price = price;
}
const Course = (name,price) => {
this.name = name;
this.price = price;
}
Course.prototype.study = function(){
console.log(`名字${this.name},价格${this.price}`);
}
Course.prototype.study = () => {
console.log(`名字${this.name},价格${this.price}`);
}
const c1 = new Course('es',500);
console.log(c1);
4、es6优雅取值
js:数组取值(下标取值),对象取值(属性取值)
es6:解构赋值
//解构赋值
const course = {
name: 'es6',
price:500,
student:{
name:'xioahong',
age:16
}
};
//const name = course.name;
//const price = course.price;
const {
name: courseName,
price,
student:{
name, age
}
} = course;
console.log(courseName,price,name,age);
const courseArr = ['es6', 'es7', 'es8' ];
//const a = courseArr [0];
//const b = courseArr [1];
//const c = courseArr [2];
const [
a,
b,
c
] = courseArr;
//项目中使用解构赋值
1、函数参数
2、函数返回值
3、变量互换
4、JSON应用
5、Ajax请求应用
const sum = arr => {
let result = 0;
for(let i=0; i< arr.length; i++) {
result += arr[i];
}
console.log(result);
}
const sum = ([a,b,c])=> {
console.log(a+b+c);
}
sum([1,2,3]);
const foo = ({name,age,course:'语文'}) => {
console.log(name,age,course);
};
foo({
name:'张三',
age:20,
course:'数学'
})
const foo = () => {
return {
name:'张三',
age:20
}
};
const {name, age} = foo();
console.log(name,age);
let a = 1;
let b = 2;
[b, a] = [a, b];
const json = '{"name":"es","price":"500"}';
const obj = JSON.parse(json);
console.log(obj);
const {name,price} = JSON.parse(json);
console.log(name,price);
axios.get('./data.json').then(res => {
console.log(res);
})
axios.get('./data.json').then( ({data}) => {
console.log(data);
})
axios.get('./data.json').then( ({data:{name,age}}) => {
console.log(name,age);
})
5、es6不能被所有的浏览器识别
建议使用最新版的chrome,或可使用babel工具将es6转换为es5
安装
1、安装node.js环境
2、进入项目初始化package.json(npm init -y)
3、安装babel:npm install --save-dev babel-preset-env babel-cli
4、创建文件并配置:.babelrc
{"presets":["env"]}
文件转化
文件:babel src/index.js -o dist/index.js
文件夹:babel src -d dist
实时监控: babel src -w -d dist
[es官网]:http://www.ecma-international.org/ecma-262/6.0/
参考:http://es.xiecheng.live/