Js-ES6语法个人总结

admin
2021-08-27 / 0 评论 / 120 阅读 / 正在检测是否收录...

本文仅且代表个人理解,如有错误,请在评论下方指正 !

1.let(变量) 与 const(常量)
在es6中,我们通常用let来定义变量和const来定义常量
它们都是 块级作用域 ,所以 在同一个代码块中不允许重复声明
区别:
var : 存在变量提升问题,降低js代码的可阅读性;没有块级作用域,容易造成变量污染
let : 不存在变量提升问题,只有定义之后才能使用此变量,且属于块级作用域
const :
不存在变量提升问题,只有定义之后才能使用此变量;
const 定义的常量,无法被重新赋值;
当定义常量的时候,必须定义且初始化,否则报语法错误;
const 定义的常量,也有 块级作用域
注意 : 如果const的是一个对象,对象的值是可以被修改的.

2、字符串模板(Template String)
用一对反引号(`模板字符串`),它可以当普通字符串使用,也可以嵌入变量、js表达式、函数等,变量、js表达式、函数需要写在${}中

/*
*来源: 苏酥博客(blog.ssyyds.top)
*作者:苏酥 (HuaYin)
*QQ: 499933521
*/
let url = `user/users/${this.username}/`;

3、变量的解构赋值
ES6中,允许开发者按照一定的模式从数组和对象中提取,并对提取的变量进行赋值,这就是结构赋值。即把数组或者对象中的属性提取出来,并把它作为变量给解放出来,然后就能当做变量使用了

 let [name,pwd,sex] = ['susu','123','man']
 console.log(name)
 console.log(pwd)
 console.log(sex)
 let user = {
   name:'susu',
   age:99,
   gender:'男'
}
   const {name1,age,gender} = user;
   console.log(name)
   console.log(age)
   console.log(gender)

4. 箭头函数
箭头函数是一种匿名函数。
特性:箭头函数内部的this永远和箭头函数外部的this保持一致。

<button id="btn">按钮</button>
<script>
    document.getElementById('btn').onclick = function(){
        console.log(this);
            let that = this;
            setTimeout(function (){
                console.log(this);//指向window对象
                that.style.backgroundColor = 'red'//不能用this,因为this指向window不指向btn
            },1000)
    };
    //使用箭头函数
    document.getElementById('btn').onclick = function () {
        //箭头函数内部的this永远指向箭头函数外部的this
             setTimeout(() => {
                 console.log(this); //this指向<button id="btn">按钮</button>
                 this.style.backgroundColor = 'red'
             })
    };
</script>

5、对象扩展
属性简写: 允许属性中直接写变量,这时属性名未变量名,属性值为变量值
对象中方法简写:可省略function关键字

6、展开运算符(…)
常用的两种方式:
① 将字符串转换成数组
②合并数组

//字符串转数组
let str = 'abc';
const Arr = [...str]; //不需要数组方法转换
console.log(Arr); //['a','b','c']

//两个数组合并
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr = [...arr1,...arr2];
console.log(arr); //[1,2,3,4,5,6]
2

评论 (0)

取消