脚本宝典收集整理的这篇文章主要介绍了快速入坑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
以上是脚本宝典为你收集整理的快速入坑ES6全部内容,希望文章能够帮你解决快速入坑ES6所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。