[JavaScript知识库]快速入坑ES6

?

?1.js中可以声明常量吗？

const es = 'es6';

?块级作用域

//块级作用域，会报错str is no defined
if(true) {
    const str = 'es6';
}
console.log(str);

//块级作用域，会报错str is no defined
if(true) {
    const str = 'es6';
    //在{}内有效
    console.log(str);
}

?const:

不允许重复声明

不属于顶层对象window

不存在变量提升

暂时性死区

块级作用域

2.const声明的常量真的不可以改变吗？

const esObj = {
	name: 'es6',
	year: 2015
};
esObj.name = 'es2015';
console.log(esObj);

?输出结果：

const arr = ['es6','es7','es8'];
arr[0] = 'es2015';
console.log(arr);

?输出结果：

?基本数据类型 和 引用数据类型、

?如果不想被改变,冻结

Object.freeze(esObj);

Object.freeze(arr);//只能浅冻住一级的，要想深度冻住，就要使用递归

const esObj = {
    name: 'es6',
    year: 2015,
    extension:['es7','es8','es9']
}

//使用递归
function myFreeze(obj) {
		Object.freeze(obj);
		Object.keys(obj).forEach(function(key){
		if(typeof obj[key] === 'object') {
				myFreeze(obj[key]);
		}
	});
}

3.函数有更简单的写法吗？使用箭头函数

<script>
const sum = (x, y)=>{
    return x + y;
}
const res = sum(4,5);
</script>

4.箭头函数任何场景都可以使用吗？this指向不同的

const obj = {
    name: 'dzh',
    //ES6对象 简写的形式
    showName(){
        console.log(this.name)
    }
};

obj.showName();

5.取值有更优雅的方式吗？

//解构赋值

const {name, price} = course;

// 数组的解构赋值
const courseArr = ['es6', 'es7', 'es8'];

const [a,b,c] = courseArr;

const course = {
    name:'es6',
    price:500,
    teacher:{
        name:'xinsdf',
        age:34
    }
}

//解构赋值
const {
    name:courseName,
    price,
    teacher: {
        name,
        age
    }
} = course;

6.你能在项目中准确的使用解构赋值吗？

函数参数

<script>
const sum = ([a,b,c]) =>{
    let result = 0;
    for(let i = 0; i < arr.length; i++){
        return += arr[i];
    }
    console.log(result);
}
//更简洁的方式
const sum = ([a,b,c]) => {
    console.log(a+b+c);
}
sum([1,2,3])
</script>

const foo = (name, age) => {
    console.log(name, age)
}

foo({
    name: '张三'，
    age: 20
})

函数返回值

const foo = () => {
    return {
        name: "张三",
        age: 20
    }
};

const {name, age} = foo();
console.log(name, age);

变量互换

let a = 1;
let b = 2;

[b, a] = [a,b];

console.log(a,b);// 2 1

JSON应用

// json 前端发送数据给后端的时候
const json = '{"name": "es", "price":"500"}';

const obj = JSON.parse(json);

console.log(obj);

//或者
const {name, price} = JSON.parse(json);

console.log(name, price);

Ajax请求应用

axios.get('./xxx').then((res)=>{
    cons.log(res.data)
})
//去掉()
axios.get('./xxx').then(res=>{
    cons.log(res.data)
})

//解析res
axios.get('./xxx').then({data}=>{
    cons.log(data)
})
//解析data里面的对象
axios.get('./xxx').then({data: {name, try}}=>{
    cons.log(name, try)
})

7.ES6不能被所有浏览器解析怎么办?

可以使用babel把es6转化成es5语法

?

?

?8. 如何更好的学习ES

http://es.xiecheng.live