快速入坑ES6

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了快速入坑ES6脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

快速入坑ES6

 

快速入坑ES6

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

const es = 'es6';

 块级作用域

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

快速入坑ES6

//块级作用域,会报错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);

 输出结果:

快速入坑ES6

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

 输出结果:

快速入坑ES6

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

快速入坑ES6

 如果不想被改变,冻结

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语法

快速入坑ES6

 

快速入坑ES6

 

快速入坑ES6

 8. 如何更好的学习ES

http://es.xiecheng.live

脚本宝典总结

以上是脚本宝典为你收集整理的快速入坑ES6全部内容,希望文章能够帮你解决快速入坑ES6所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。