JavaScriptES6（一）

最新推荐文章于 2024-11-10 15:10:09 发布

MWXXXXX

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量702

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_48315043/article/details/121865176

版权

一、let及const

1、是ES6新增的两种新的声明格式，用于补全ES5标准中var声明变量的不足：在JavaScript中用'var'来声明变量会出现变量提升的情况，即通过"var"声明的变量，系统都会把声明隐式的升至顶部，这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应，导致程序出现问题。

2、ES5中定义作用域有两种：全局作用域和函数作用域,ES6中新增了块级作用域,用"{}"表示。块级作用域用于声明作用域之外无法访问的变量,主要有两种：
(1)函数内部块级作用域：

function test() {
let a = 20
}
test()
console.log(a)

(2)在字符{}之间的区域：

            {
                let a = 10
            }
            console.log(a)

            for(let i=0;i<100;i++) {
                let sum = 0;
                sum = sum+i
            }

3、const命令：使用const声明的是常量，常量的值不能通过重新赋值来改变，并且不能重新声明，所以每次通过const来声明的常量必须进行初始化。

(1)与其他语言不同，const在使用过程中如果声明的是对象,需要注意是可以修改对象的属性值,但不允许修改已经声明的对象

const obj = {
                name: '张三',
                age: 20
            }
            //属性值是可以直接修改的
            obj.name = '李四'
            console.log(obj)

            //对象直接修改会报错
            obj = {}

(2)如果想让对象属性不能修改,可以借助Object.freeze函数来冻结对象

const obj = {
                name: '张三',
                age: 20
            }
            Object.freeze(obj); //冻结对象
            obj.name = "李四"; //修改属性
            console.log(obj); //结果任然是{name:'张三',age:20}

(3)通过Object.freeze冻结对象需要注意的是：不能冻结多层对象

 const obj = {
                name: '张三',
                age: 20,
                family: {
                    father: {
                        name: '张安',
                        age: 48
                    }
                }
            }
            Object.freeze(obj); //冻结对象
            obj.family.father.age = 50; //family对象里的属性不能被冻结
            console.log(obj); //对象age的值被改变

解决多层冻结问题可以通过封装一个deepFreeze函数来实现：

 function deepFreeze(obj){
                Object.freeze(obj);
                for(let key in obj){
                    if(obj.hasOwnProperty(key) && typeof obj[key] === 'object'){
                        deepFreeze(obj[key])
                    }
                }
            }

            deepFreeze(obj); //冻结对象
            obj.family.father.age = 50; //修改对象属性的值
            console.log(obj); //对象age的值未被改变

4、临时死区：

let和const都是块级标识符,所以let和const都是在当前代码块内有效,常量不存在变量提升的情况。但是通过let和const声明的常量,会放在临时死区(temporal dead zone),通过下面代码可以看出：

 {
                console.log(typeof a);
                let a = 10
            }

即使通过安全的typeof操作符也会报错,原因是JavaScript引擎在扫描代码变量时,要么会把变量提升至顶部,要么会把变量放在临时死区。这里通过let声明的'a'变量会被放在临时死区,所以在声明之前打印就会报错

5、循环中let和const的使用

(1)在ES5标准中，for循环中的循环变量都是通过var来声明的,由于var没有独立的作用域,导致在循环中创建函数时会出现结果和思路不一致的情况,如下：

  let funArr = []; //该数组中存放的是函数
            for(var i=0;i<5;i++) {
                funArr.push(function(){
                    console.log(i)
                })
            }
            funArr.forEach(item=> {
                item()
            })

(2)循环结果不是预想的0,1,2,3,4,而是5个5,这是因为var声明在循环中作用域共用，并且会把i保存在全局作用域中。要解决循环中保存函数的问题,可以利用闭包创建独立的作用域,代码如下：

 let funArr = [];
            for(var i=0;i<5;i++) {
                (
                    function(i) {
                        funArr.push(function(){
                            console.log(i)
                        })
                    }
                )(i) 
            }
            funArr.forEach(item=> {
                item()
            })

(3)这样通过自执行函数就可以解决循环中创建函数的问题。但利用ES6中let和const提供的快级作用域可以让代码更简洁：

 let funArr = [];
            for(let i=0;i<5;i++) {
                funArr.push(function(){
                    console.log(i)
                })
            }
            funArr.forEach(item=> {
                item()
            })

(4)在for-in或for-of循环中使用const时,方法与let一致：

 let obj = {
                name: '张三',
                age: 20
            }
            for(const i in obj){
                console.log(i)  //输出name、age
            }

            let arr = ['张三','李四','王五']
            for(const value of arr){
                console.log(value) //输出张三、李四、王五
            }

二、解构赋值

1、Spread / Rest 操作符：Spread / Rest 操作符指的是 '...'，具体是 Spread 还是 Rest 需要看上下文语境。

(1)当被用于迭代器中时，它是一个 Spread 操作符：迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制

function foo(x,y,z) {
              console.log(x,y,z);
            }
             
            let arr = [1,2,3];
            foo(...arr); // 1 2 3

(2)当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
              console.log(args);
            }
            foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

2、数组的解构

(1)在ES5标准中赋值多个变量采用的方法是：

ES6提供了更简洁的解构赋值来实现上述变量的定义：
let [a,b,c] = [10,20,30];
console.log(a);
console.log(b);
console.log(c);
等号右边的值会按照顺序依次赋值给左边的变量。

(2)非一一对应关系的赋值

let [a,b] = [10,20,30]
            console.log(a,b); //输出10,20

            let [a,b,c] = [10,20]
            console.log(a); //10
            console.log(b); //20
            console.log(c); //undefined

(3)也可以通过"..."把特定的元素放在变量里

 let [a,...arr] = [10,20,30]
            console.log(a); //10
            console.log(arr); //20,30

(4)在ES6中可以通过解构赋值来互换变量

  let a = 10;
            let b = 20;
            [a,b] = [b,a];
            console.log(a,b)

3、对象的解构：

(1)对象解构的写法与数组解构类似

let obj = {
                name: '张三',
                age: 20,
                height: '178com'
            }

            let { name,age,height } = obj; //变量的名称必须和对象的属性名相同
            console.log(name,age,height);

(2)也可以解构多层对象

 let person = {
                name: '张三',
                age: 20,
                family: {
                    father: '张武',
                    mother: '李燕'
                }
            }
            let { name,age,family: {father,mother }} = person
            console.log(name,father)

(3)在解构对象时也可以自定义变量名称：

 let obj = {
                name: '张三',
                age: 20
            }
            let { name:myname,age:myage } = obj;
            console.log(myname,myage);

4、解构的默认值和参数的解构：

(1)不管是数组的解构赋值,还是对象的解构赋值都可以添加默认参数。如下：

 let obj = {
                name: '李四',
                age: 20
            }

            let { name,age,height="178com" } = obj;
            console.log(height); //178com

(2)在函数参数中使用解构,参数解构也可以给默认参数

  function fun({name,age,height="178com"} = {}){
                console.log(name,age); //张三,20
            }
            let obj = {
                name: '张三',
                age: 20
            }
            fun(obj)

三、模板字符串
ES5标准中一般输出模板是通过字符串拼接的方式进行的。在ES6中可以通过模板字符串简化字符串的拼接,模板字符串通过反引号来表示"``",如果要嵌入变量通过"${ 变量名 }"来实现：

  let arr = [
               {
                   name: '张三',
                   age: 20
               },
               {
                   name: '李四',
                   age: 23
               },
               {
                   name: '王五',
                   age: 25
               }
           ]
           let str = "";
           for(let i=0;i<arr.length;i++){
               str += `姓名是：${ arr[i].name },年龄是：${ arr[i].age }`;
           }
           console.log(str)