ES6 部分笔记
- 递归实现深层冻结
function myFreeze(obj){
Object.freeze(obj);
Object.keys(obj).forEach(function(key){
if(typeof obj[key] === 'object'){
myFreeze(obj[key]);
}
});
}
Object.keys(obj) 会返回当前对象属性所组成的一个数组。
- 使用箭头函数作为事件的回调函数时，函数中的this将指向window
使用箭头函数定义对象中的方法时，函数中的this将指向window；
不能够使用箭头函数作为构造函数；
不能定义原型下面的方法；
arguments 是一个对应于传递给函数的参数的类数组对象。但是arguments在箭头函数中不可以使用。
function func1(a, b, c) {
console.log(arguments[0]);
// expected output: 1
console.log(arguments[1]);
// expected output: 2
console.log(arguments[2]);
// expected output: 3
}
func1(1, 2, 3);
- 模版字符串
var roku = {name:'roku', hobby:'game'}
console.log(`你好，我叫${roku.name},我喜欢${roku.hobby}`)
//输出：你好，我叫roku,我喜欢game
- 解构赋值
const course = {
name:'es6',
price:500,
student: {
name: 'roku',
age:16
}
};
const{
name:courseName, //别名
price,
student:{
name, age
}
} = course;
console.log(courseName, price, name, age)
//output: es6 500 roku 16
解构赋值使用场景：
1.函数参数
const sum = ([a, b, c]) => {
console.log(a+b+c)
};
sum([1, 2, 3])
//6
const foo = ({name, age, school='XX school'}) =>{
console.log(name, age, school)
};
foo({
name:'roku',
age:"20",
});
//roku 20 XX school
2.函数返回值
const foo = () =>{
return{
name:'张三',
age: 20
}
};
const {name,age} = foo();
console.log(name, age);
//张三 20
3.变量互换
a = 1,b = 2;
[b,a] = [a,b];
console.log(a,b);
//2 1
4.JSON应用
const json = '{"name":"es", "price":"500"}';
const{name, price} = JSON.parse(json);
console.log(name, price);
//es 500
5.Ajax请求应用
请求JSON文件数据,引入axios CDN库
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.amd.js"></script>
axios.get方法获取JSON数据文件。
//JSON文件内容：
{
"name": "es6",
"type": "前端"
}
//js文件页面内容
axios.get('./data.json').then(({data:{name, type}})=>{
console.log(name, type);
});
// es6 前端
- 浏览器兼容问题
ES6=>BABEL（转化）=>ES5=>浏览器
