浅谈ES6新特性

最新推荐文章于 2024-10-01 17:46:23 发布
最新推荐文章于 2024-10-01 17:46:23 发布
阅读量184 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darlingmi/article/details/120492125
版权

一、let及const

1、ES6新增的两种新的声明格式

       let 和const 用于补全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在使用过程中如果声明的是对象,需要注意可以修改对象的属性值,但不允许修改已经声明的对象。

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

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

(2)Object.freeze函数

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

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

       通过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、数组的解构

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

   var a = 10;
   var b = 20;
   var c = 30;

       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)

2、对象的解构

       (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);

3、解构的默认值和参数的解构

        (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)

四、Symbol

       ES5中提供了6种数据类型分别是：undefined、null、boolean、string、number、object。ES6中新增了一种数据类型Symbol来表示唯一的值,每个创建的Symbol都是唯一的,这样在实际运用中可以创建一些唯一的属性及定义私有变量。例如：

let s1 = Symbol; //直接创建
   let s2 = Symbol('mySymbol'); //传入字符串创建

1、目前前端项目都会采用模块化构建,为了防止对象属性名被覆盖,可以通过symbol来定义属性名;例如：

 //a.js
    const NAME = Symbol('name')
    let obj = {
        [NAME]:'张三',
        age: 20
    }
    export default obj;

//b.js
import Obj from './a.js'
const NAME = Symbol('name');
obj[NAME] = '李四';
console.log(obj); //{age:20,Symbol():'张三',Symbol():'李四'}

       2、利用Symbol作为属性名,属性名不会被Object.keys()、Object.getOwnPropertyNames()、for…in循环返回。例如：

   let obj = {
            [Symbol()]:'张三',
            age: 20,
            height:'178com'       
        }
        for(let key in obj){
            console.log(key);
        }
        let keys = Objects.keys(obj);
        console.log(keys); //输出：'age','height'
        console.log(Object.getOwnPropertyNames(obj)); //输出：'age','height'

        3、可以在类里利用Symbol来定义私有属性及方法。例如：

  let People = (function(){
            let name = Symbol("name");
            class People {
                constructor(yourName) { //构造函数
                    this[name] = yourName
                }
                sayName() {
                    console.log(this[name])
                }
            }
            return People;
        })();
        let zhangsan = new People("张三");
        console.log(zhangsan[Symbol("name")]); //undefined
        zhangsan.sayName(); //张三

五、函数

1、函数形参的默认值

       在很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中一般会这样写：

  function fun(name,age,cb){
        name = typeof(name !== 'undefined')?name: '张三'
        age = typeof(age !== 'undefined')?age: 20
        cb = typeof(cb !== 'undefined')?cb:function(){}
        console.log(name,age);
    }
    fun("李四",0)

2、函数形参不定参数

       在很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5标准中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments中。例如：

function fun() {
    console.log(arguments);
    console.log(arguments[0]); //第一个参数
    console.log(arguments[1]); //第二个参数
    console.log(arguments[2]); //第三个参数
}
fun('张三',20,'178com')

3、箭头函数

       箭头语法最大的特点是有箭头"=>"符号,当然箭头语法有很多变式写法

(1)没有参数,用括号代替

let fun = ()=> "张三"

(2)一个参数,括号可以省略

   let fun = arg=> "李四"

(3)多个参数

   let fun = (arg1,arg2)=> arg1 + arg2
    console.log(fun(1,3))

       利用箭头语法里隐式返还的时候需要注意对象的情况,需要注意如下错误情况：

let fun = () => {
    name: '张三',
    age: 20
}

       这个代码初步感觉是返还一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错

let fun = () => ({
    name: '张三',
    age: 20
})
console.log(fun());

(4)this指向

        箭头函数里没有this绑定,如下代码，this指向对象本身

let obj = {
        id: 2,
        fun: function() {
            console.log(this.id); // 输出：2
        }
    }
    obj.fun()

       上面代码可以打印出id为2,this指向了obj,所以this.id可以取得obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下：

 let obj = {
     id: 2,
     fun: ()=>{
         console.log(this.id); //输出：undefined
     }
 }
 obj.fun()

       这里发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是window,所以最终取不到this.id

(5)参数arguments的绑定

      使用箭头语法的时候没有隐藏参数arguments的绑定,代码如下：

   let fun = (arg1,arg2) => {
            console.log(arguments); // arguments is not defined
            return arg1 + arg2
        }
        fun()

六、类(class)

1、ES5中的‘类’

      在ES5标准中通过构造函数来模拟类的功能,一般会定义一个构造函数,把一类功能做封装,通过new运算符来调用。

function Person(name) {
    this.name = name;
    this.age = 20;
}
Person.prototype.fun = function() {
    console.log("fun...")
}

2、ES6中class关键字

      在ES6标准中提供class关键字来定义类,在写法上更简洁、语义化更强。如下：

class Person {
    constructor(name){
        this.name = name;
        this.age = 20;
    }
    fun() {
        console.log("fn...")
    }
}
let zhangsan = new Person("张三");
console.log("zhangsan.name");
zhangsan.fun()

3、set和get关键字

      ES6支持通过getter、setter在原型上定义属性。创建getter的时候需要用关键字get;创建setter的时候需要用关键字set。例如：

  class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        get age(){
            return 20;
        }
        set age(newValue){
           this.age = newValue
        }
    }

    let p = new Person('张三',20);
    console.log(p.age);

4、静态成员

(1)ES5

在ES5标准中的静态成员,可以通过如下方式实现：

function Person(name){
    this.name = name;
    this.age = 20;
}
Person.num = 10;  //静态属性
Person.fun = function() { //静态方法
    console.log("fun...")
}
(2)ES6

在ES6标准中提供static关键字类声明静态成员：

 class Person{
            static num = 20; //静态属性
            constructor(name){
                this.name = name;
                this.age = 20;
            }
            static fun() { //静态的成员方法
                console.log("fun...")
            }
        }

        let p = new Person('张三');
        Person.fun();
        console.log(Person.num);

5、类的继承

(1)ES5实现继承

      在ES5标准中可以通过call、apply、bind来实现构造函数的继承,实现方式如下：

   function Dad(name) {
            this.name = name;
            this.age = 20;
        }

        function Son(name) {
            Dad.call(this,name);
            //Dad.apply(this,[name]);
            //Dad.bind(this)(name);
            this.height = "178com";
        }

      上述方式可以实现构造函数的继承,但是如果有方法在Dad原型上实现,还需要考虑原型的继承,单纯的原型赋值继承还会涉及传址问题,所以实现起来比较繁琐。

(2)ES6标准中类的继承

通过extends关键字实现。

         class Dad {
              constructor(name){
                  this.name = name;
              }
              fun() {
                  console.log('fun...')
              }
          }
          class Son extends Dad {
              constructor() {
                  super();
              }
              hobby() {
                  console.log('喜欢篮球')
              }
          }
          let son = new Son();
          son.fun();

     在继承中需要调用**super()**方法继承父类的构造方法。super()在使用过程中需要注意以下两点：
A、在访问this之前一定要调用super().
B、如果不调用super(),可以让子类构造函数返还一个对象

Darlingmi
关注
专栏目录
JavaScript ES6新特性
weixin_43930421的博客
05-21 2484
JavaScript ES6带来了新的语法和特性，使得代码更加的现代和可读。它包括许多重要功能，如箭头函数、模板字符串、解构赋值等等。 const 和 let const 是 ES6 中用于声明变量的新关键字。const 比 var 强大。一旦使用，变量就不能重新分配。换句话说，它声明的是一个只读的常量。 这对于定位选择器非常有用。例如，当我们有一个触发事件的按钮时，或者当您想在JavaScript中选择HTML元素时，请使用const而不是var。 // ES5 var btn = document.
浅谈es6中的元编程
01-18
「编写能改变语言语法特性或者运行时特性的程序」。换言之，一种语言本来做不到的事情，通过你编程来修改它，使得它可以做到了，这就是元编程。 meta-programming元编程中的 元 的概念可以理解为 程序 本身。”元...
es6的新特性
天心天地生的博客
07-26 290
一、背景介绍 1、es6 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2、ECMASCRIPT 和 JAVASCRIPT 的关系? 要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScri...
ES6有哪些新特性
最新发布
Love_evoL2的博客
10-01 1434
reduce()方法可以应用的场景特别多，循环遍历能做的，reduce都可以做，比如数组求和、数组求积、统计数组中元素出现的次数、数组去重等等。// 输出：[1, 5, 9, 3, 7, 10, 4, 2]let [n,,m] = arr //如果不想要某个值，可以省略，n='apple',m='happy'// 输出：['c', 'h', 'i', 'n', 'a']console.log(1, ...[2, 3, 4], 5);// 输出：[0, 1, 2, 3, 4, 5]
ES6 的新特性
weixin_50368372的博客
03-22 3504
ES6主要的新特性
ES6 新新特性
蜗牛速度额的博客
12-04 300
ES6的Object.keys().length 断对象是否为空对象  
ES6的新特性
qq_63543660的博客
07-28 682
es6的新特性
浅谈ECMAScript6新特性之let、const
08-29
ECMAScript 6，简称ES6，是JavaScript语言的一个重要版本更新，引入了许多新的特性和语法改进。本文将深入探讨其中两个关键特性：`let` 和 `const`。 `let` 是ES6中用于声明变量的新关键字，它解决了在ES5中`var`...
浅谈react+es6+webpack的基础配置
12-09
通过Webpack的模块打包，我们可以利用ES6的新特性写出更简洁、可读性更强的代码，同时React的组件化思想让应用结构更加清晰。正确配置好Webpack，可以实现代码的自动化构建、热更新等高级功能，极大地提高了开发效率...
浅谈目前可以使用ES10的5个新特性
10-16
ES2019标准包含了一系列的新特性，下面将详细探讨这些新特性中的五个，它们分别是Object.fromEntries()、trimStart()、trimEnd()、flat()、flatMap()以及Symbol对象的description属性。 1. Object.fromEntries()： ...
浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法
01-08
Set 和 Map 是 JavaScript 中 ES6 引入的两种新的数据结构，它们提供了更高效和便捷的方式来处理数据。本文将深入探讨这两个数据结构及其相关的 `Array.from` 方法。 首先，让我们来详细了解一下 Set 结构。Set ...
ES6 相关特性
weixin_32196893的博客
07-19 138
前端技术栈类比 javaScript es6, 7,8… 框架 JQuery, Vue, React 工具 webstrom, vscode 项目构建 webpack, gulp 依赖管理 npm java jdk8.9.10,11… 框架 Spring, SpringMVC 工具 idea, eclipse 项目构建 maven, gradle 依赖管理 maven ES6 简介：ECMAScript 6.0 简称ES6，是在 2015 年 6 月正式发布的 JavaScript 语言
三分钟带你了解ES6新特性！
weixin_52999343的博客
11-27 457
三分钟带你了解ES6新特性 变量和常量 解构赋值 箭头函数 新增方法 前言 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 一、变量和常量 定义变量：Let 定义常量：Const 代码如下（示例）： <script> //1.常量不可以被更改 const a =
es6新特性
qq_38779317的博客
08-07 102
(1) 新增 let, const 命令, 用来声明命令, 常量, 不存在变量提升, 不能重复声明同一变量名, 属于块级作用域,解决了闭包保存当前状态的问题. (2) 字符串遍历 for-of for (value of values) { console.log(value) } // value 代表的是值 (3) includes() // 判断字符串或者数组是否包含指定的字符串, 返回的是 boolean (4) startsWith(), endsWith() // 检测字符串是否以指定的子字
ES6新特性
seven_sevens的博客
07-16 995
通常情况下，当我们需要访问嵌套对象或数组的属性或方法时，需要对每个层级进行空值检查，以避免出现空指针错误,放置在对象的属性或数组的索引之前，对于存在的属性或索引进行访问，如果该属性或索引不存在，则表达式直接返回。.Promise的扩展方法：ES6对Promise对象进行了扩展，添加了许多实用的方法，如Promise.all()、Promise.race()等。.Rest参数是ES6引入的一项特性，它允许在函数定义时接收任意数量的参数，并将它们收集到一个数组中。，返回一个新的Promise。
谈谈ES6新增了哪些特性
祎祎的博客
11-10 7461
一、什么是ES6？ ES全称为ECMAScript，它是由国际标准化组织ECMA（全称：European Computer Manufacturers Association）欧洲计算机制造商协会制定的一项脚本语言的标准化规范。JavaScript就实现了这套标准。ES6中的6代表的是版本，从2015年6月份发布的版本及其后续版本统称为ES6，从2015年开始，每年的6月份都会发布新版本。目前各大浏览器产商也都已经支持ES6。 二、 ES6的新特性有哪些？ 1.新增了块级作用域（let，const） 2.提
ES6新特性：箭头函数示例解析
"这篇文章主要汇总了ECMAScript6（简称ES6或ES2015）的一些关键新特性，通过示例代码帮助读者快速理解JavaScript的新规范。" 在ECMAScript6中，开发者获得了许多增强的功能和语法改进，极大地提升了编程体验和效率...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值