ES6部分笔记

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=>浏览器
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。