ES6 ES6详细介绍，const和相关解析赋值，模板字符串，箭头函数应用和实例 【详解加实例】(一)

最新推荐文章于 2022-06-14 12:23:57 发布
最新推荐文章于 2022-06-14 12:23:57 发布
阅读量400 收藏 4
点赞数 2
分类专栏： JavaScript 文章标签： es6 es6/es7 js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_Holmes/article/details/118208403
版权

文章目录

1. ES6 介绍

ECMASript(European Computer Manufacturers Association，欧洲计算机制造商协会)，就是ES的全称。

在这里插入图片描述

2. ES6 Let 声明变量

let作用就是声明变量。

注意事项：

1. let声明后的变量不能重复声明。var是可以重复声明。
2.块级作用域，在块级作用域内定义的let，不能在全局中使用，而var可以使用。
3.let变量不存在变量提升，向下面这样：

在这里插入图片描述

解释一下变量提升哪个：

let 不存在变量提升，var 会变量提升:

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。

变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。

3. ES6 const 定义常量

const 是用来定义常量的。

注意事项：

1. const 定义必须赋予初始值！
2.一般常量使用大写（潜规则）。
3.定义后的常量值不能修改。
4.和let一，有块级作用域。
5.const定义的数组或者对象，这里数组或对象修改是不会报错的。因为数组本身的地址没有发生变化！数组或对象内部被删除或者增加都不会报错的！

4. ES6 解析赋值

4.1 数组 解析赋值

例如：

<script>
    const a = ['sdf','x','csdf'];
    let [name1,name2,name3] = a;
    console.log(name1);
    console.log(name2);
    console.log(name3);
</script>

上面对数组一一对应，就能打印出对应值。

4.2 对象 解析赋值

例如：

<script> const a = {
     name:'zhangsan',
     age:'18',
     fun:function(){
         console.log("wo jiao zhangsan .")
     }
 }

 let {name,age,fun} = a;
 console.log(name);
 console.log(age);
 console.log(fun);
 //直接调用let声明的fun函数就行了
 fun();
</script>

5. ES6 模板字符串

之前咱们使用单引号或者双引号来进行定义字符串。但是ES6引入了新的声明字符串的方式（` `）。

这个符号有很多好处如下：

1. 内容中可以直接回车换行(可以有换行符)。在单引号或双引号定义的字符串就不可以！
2. 变量拼接，通过使用：${变量名} 。

6. ES6 简化对象写法

ES6对象的简化写法，很好理解。
例如：
1.定义的name，change，就可以直接在对象中引用。
2.在对象中定义的函数还可以忽略" :function "。

<script>
    let name = `hehe`;
    let change = function(){
        console.log(`你呵呵什么？`);
    }
    const table = {
        name,
        change,
        improve(){
            console.log("省略了:funciton!")
        }
        //improve:function(){console.log("省略了:funciton!")}相比较上面简化了好多。
    };
    console.log(table);
</script>

7. ES6 箭头函数

箭头函数，其实就是简化，在其它语言中也会有这样的表达简化。

使用 ( => ) 来表示箭头函数。

箭头函数注意事项：

1. 箭头函数的this是静态的，箭头函数的this始终指向函数声明时所在作用域下的this的值；对象中的箭头函数中的this指向，当前对象外的作用域。。下面是this一些解释。

在这里插入图片描述

2. 使用箭头函数后，不能作为构造函数来实例化对象。
3. 使用函数箭头后，不能使用arguments 变量。
4. 箭头函数，在形参只有一个时，可以省略小括号；在代码块中只有一条语句时，可以省略花括号。

测试箭头函数的this作用域：

注意下面的call方法使用：call方法
语法：call(thisobj,[argq,arg2])
定义：调用一个对象的一个方法，以另一个对象替换当前对象

<script>
    function putong() {
        console.log(this.name);//这里的this指向全局
    }
    let jiantou = () => {
        console.log(this.name);//这里指向被调用的作用域
    }
    //定义window的name属性。
    window.name = '全局名字';
    const ceshi = {
        name:"测试箭头作用域"
    }
    //直接调用的话，这面两个作用域刚好就是全局。
    putong();
    jiantou();

    putong.call(ceshi);//这里作用域就变成了ceshi对象下的作用域。
    jiantou.call(ceshi);//而箭头函数this是静态，不会改变，依然指向全局。

</script>

测试能否作为构造函数来实例化对象：

<script>
     let person = (name,age) => {
         this.name = name;
         this.age = age;
     }

     let me = new person('zhangsna',18);
     console.log(me);
 </script>

报错：
在这里插入图片描述

测试能否使用arguments 变量：

<script>
    let fn = () => {
        console.log(arguments);
    }
    fn(1,2,3);
</script>

js的arguments对象，Arguments对象能够模拟重载。
Javascript中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[ ]"引用arguments的元素。

8. ES6 箭头函数的应用

8.1 this 应用场景

因为箭头函数的this是静态的，只能指向当前作用域。通过这一特性可以来简化一些其他情况。

没有应用箭头函数，例如:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       #ad{
           width: 200px;
           height: 200px;
           background: blue;
       }
   </style>
</head>
<body>
   <div id="ad"></div>
   <script>
       let ad = document.getElementById('ad');
       //addEventListener事件，用于向指定元素添加事件句柄。
       ad.addEventListener("click",function(){
           let _this = this;
           setTimeout(function(){
               _this.style.background = 'pink';    
           },2000)
       });
   </script>
</body>
</html>

上面的案例看出，如果在setTimeout设定this，那么这个this指向的便是window窗口，所以要想this指向ad这个变量，就要声明一个_this。

应用了箭头函数，例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ad{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="ad"></div>
    <script>
        let ad = document.getElementById('ad');
        //addEventListener事件，用于向指定元素添加事件句柄。
        ad.addEventListener("click",function(){
            setTimeout(() =>{
                this.style.background = 'pink';    
            },2000)
        });
    </script>
</body>
</html>

因为箭头函数本省的this就是指向当前函数所在的作用域，所以就不用再定义别的变量了。

8.2 优化

看下面例子的优化：

<script>
    const arr = [1,23,4,5346,73,345,1234,88];
    // const result = arr.filter(function(item){
    //     if(item % 2 === 0)
    //         return true;
    //     else
    //         return false;
    // });
    //上面的就可以使用箭头函数来简化到下面的场景。
    const result = arr.filter(item => item % 2 === 0);
    console.log(result);
</script>

9. ES6 定义参数默认值

9.1 赋予默认值

ES6允许给函数参数赋予初始值。

需要注意的是：

一般有默认值的参数，都要放到后面位置(潜规则)。

9.2 与解构赋值结合

对于对象一些操作结合，很适合用默认值：

<script>
    //可以在这里赋予默认值。
    function connect({host="127.0.0.1",username="zhangsan",password="123",port="8080"}){
        console.log(host);
        console.log(username);
        console.log(password);
        console.log(port);
    }  
    connect({
        //没有传入host值，就会调用默认值。
        username:'root',
        password:'root',
        port:3306
    })
</script>
xupengboo
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
ES6知识整理（一）--- let/const/箭头函数
Creabine的博客
01-09 758
早在17年初就读了《ES6 标准入门》并在博客上做了笔记（《ES6 标准入门》读书笔记），工作中也有用到一些。一年后再回过头来看这些知识，又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够，所以在这里重新整理一波，夯实基础。 箭头函数 箭头函数主要有两个好处： 1. 减少代码量 2. 绑定函数定义时的作用域 对于1，这里记
ES6模板字符串和标签模板的应用实例分析
10-16
主要介绍了ES6模板字符串和标签模板的应用,结合实例形式分析了ES6模板字符串和标签模板的功能、原理、用法及相关操作注意事项,需要的朋友可以参考下
ES6：let、const、箭头函数
D_ps19990501的博客
02-23 261
ES6中的let与const 目前常用的几种定义方式是有以下的三种： var a = 100; let b = 99; const c = 98; var、let / const的区别 如果我们在控制台中直接输入以下两行代码，所出现的结果是不同的 console.log(y) var/let/const y = 100 var js中有预解析功能，它会提前的解析 var 和 function...
【ES6】var、const和箭头函数
liu_xiaoyang的博客
02-21 339
【ES6】var、const和箭头函数
es6语法 箭头函数
m0_60508194的博客
06-14 372
es6语法 箭头函数
es6-let-const-解构与赋值
yuxiaoc的博客
11-06 252
本文翻译之https://es6.ruanyifeng.com/#docs/有改动 let 块级变量 const 块级常量 特点： 1.只在代码块中有效 { let a = 3 } console.log(a); //a is not defined 不存在变量提升 3.暂时性死区 var b = 233; if (true) { b = 1 let b;//Cannot
详解JavaScript ES6中的模板字符串
12-10
在 ES6 中引入了一种新的字符串字面量 — 模板字符串，除了使用反引号 (`) 表示，它们看上去和普通的字符串没有什么区别。在最简单的情况下，他们就是普通的字符串： context.fillText(`Ceci n'est pas une cha?ne...
ES6基础之字符串和函数的拓展详解
10-16
主要介绍了ES6基础之字符串和函数的拓展,结合实例形式分析了ES6字符串与函数扩展的相关操作技巧与注意事项,需要的朋友可以参考下
ES6中的箭头函数实例详解
08-30
主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下
ES6中的let和const和解构赋值
qq_52168812的博客
03-22 2344
ES6中的let和const和解构赋值 什么是ES6? ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。 为什么要使用ES6? 每一次标准的诞生都意味着语言的完善，功能的加强。js语言本身也有一些令人不满的地方 1.变量提升特性增加了程序运行的不可预测性 。 变量提升可以简单看以下代码了解下: console.log(a); var a=1; //console.log(a)会输出undefined 这段代码也可以这样表示 var a; c
ES6中let，const，解构赋值的用法
qq_51562393的博客
03-08 231
ES6全称ESMAScript，由ECMA国际标准化组织，是一门脚本语言的标准化规范。 ES6新增用于声明变量关键字let、const。 1.let let声明变量只在所处于的块级有效，let不存在变量提升，let关键字声明的变量会由暂时性死区特性，在一个大括号中，使用let关键字声明的变量才具有块级作用域。 2.const const声明常量，常量指值（内存地址）不变化的量 ，常量具有块级作用域，声明常量时必须复制，常量一但赋值之后，值便不能修改，如果是基本数据类型，不能更改值，如果时复杂数据类
ES6 基础用法实例
shi860715的博客
05-20 242
ES6 语法 1、let 使用 在JavaScript中，var 定义的变量经常会出现作用域超范围的问题。 es6 中使用let的方式定义局部变量，在作用域内起效，超出则报错； 2 、const 在定义常量的过程中，如果修改常量，则报错。这里要注意常量的使用场景 3、 解构表达式 操作数据更加便利：取出数组中的前两个数据，并赋值给新的变量 之前： let arr = [1,2,3,5]; let x =arr[0],y=arr[1]; 之后： let arr = [1,2,3,5]; let [x,y]
Es6 赋值方法
ddsuuny的博客
04-26 1059
对象 赋值，对象中增加字段和值 let json1 = { id: 1, name: "小胡", }; let json2 = { ...json1, age: 14, }; json2 = { id: 1, name: "小胡", age: 14, }; 在对象中取对应的元素 let json1 = { id: 1, name: "小胡", age: "18", a.
ES6--（let、const、解构赋值和箭头函数）
qq_44983621的博客
11-16 432
let和 const let是声明变量的关键字，let只能声明一次，不存在变量提升。 const是声明常量的关键字，必须赋初值，而且不能改变。 两者都是在该代码块才能访问和使用。 暂时性死区： //了解即可 var PI = "a"; if(true){ console.log(PI); // ReferenceError: PI is not defined cons...
解构赋值和箭头函数
qq_41865885的博客
11-02 134
解构赋值 解构赋值：可以解构对象和数组。 demo： 先创建一个对象， let person={name：‘张三’，age：18}； 想输出张三可以是console.log(person.name)； 如果用解构赋值的话，就是let{name:name}=person；console.log(name)这个代码还可以简写为let{name}=person；console.log(name)这两个是一样的。 数组同理也是这样 箭头函数 箭头函数的this永远指向父级，而普通的function函数this指向的
JavaScript高级教程（25）——ES6
qq_41860287的博客
05-30 574
1.ES6简介 1.1什么是es6？ ES的全称是ECMAScript，它是由ECMA国际标准组织化制定的一项脚本语言的标准化规范。 1.2为什么使用ES6 每一次标准的诞生都意味着语言的完善，功能的增强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过于松散，实际相同的功能，不同的人可能会写出不同的代码 2.ES6的新增语法 2.1let ES6中新增的用于声明变量的关键字 let声明的变量只在所处于的块级有效 注意：使用let关键字声明
const注意点（对象赋值）
qq_43812504的博客
03-11 816
给const修饰的标识符被赋值后，不能修改； 在使用const定义标识符，必须进行赋值 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。 const obj = {//保存的是地址 name: 'why', age: 18, height: 1.88 } //不能写成obj={},相当于重新赋值，一个新的地址 console.log(obj); obj.name = 'kobe'; obj.age = 40;.
es6动态参数（rest）[...]
weixin_30856965的博客
05-12 610
let sum=(...m)=>{ console.log(m[0]); //经判断m为数组 console.log(m instanceof Array);}sum(1,2,3);//此时...为运算符将4和8进行拆解// var [x,y]=[4,8];console.log(...[4,8]);let arr1=[1,2],arr2=[4,8];//[1, 2, 4, 8]con...
ES6变量的解构赋值
m0_52858459的博客
05-12 114
数组的解构赋值 1.用法 首先es6是可以按照一定模式，从数组和对象中提取变量并进行赋值，这一 步骤称为解构。‘’ 相比较于学习es6之前，我们都是直接指定赋值的。如下： let a = 1; let b = 2; let c = 3; 在学习es6之后，我们可以用es6的方法去给变量赋值。 let [a, b, c] = [1, 2, 3]; 从数组中提取值，按照对应的位置，对变量赋值。 只要等号两边的模式相同，左边的变量就会被赋予对应的值。 以下是我使用嵌套数组进行解构的案例： let [foo,
es6模板字符串可以用回调函数
最新发布
06-12
ES6 模板字符串不支持直接使用回调函数。模板字符串是一种特殊的字符串，它可以包含表达式，这些表达式会被求值并替换成字符串的一部分。例如： ``` const name = "John"; const greeting = `Hello, ${name}!`; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xupengboo

你的鼓励将是我创作最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值