ES6语法总结笔记

于 2022-07-25 13:20:22 发布
阅读量518 收藏
点赞数
分类专栏： ES6 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LQlove1/article/details/125878724
版权

一、为什么要使用ES6语法

1. 是下一代javscript语言的下一代标准，企业都在使用ES6开发

二、var关键字，let关键字和const关键字

请添加图片描述

三、模板字符串

1. 如果说需要在ul标签中添加li标签再添加内容，使用innerHtml加上字符串拼接的方法就太麻烦了，这个时候就可以用模板字符串的方法直接在ul中添加我们想要的东西

代码演示：

<!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>
</head>
<body>
    <ul>
        
    </ul>
    <script>
        // 第一步：获取ul元素
        let ul = document.querySelector('ul');
        // 第二步：声明一个name
        let name = '刘备';
        // 第三步：给ul添加值，使用模板字符串的方式
        // 第四步：使用${}添加内容
        ul.innerHTML = `
        <li>
            <p>${name}</p>
        </li>
        `
    </script>
</body>
</html>

结果演示：
请添加图片描述

四、剩余参数

1. 如果说有一个对象person，要用一个pick()方法摘取person对象 里面的属性，在ES5中用arguments就很复杂，可以直接用ES6中的剩余参数（…keys）=(三个点后面加上具名参数或者keys)。这样就解决了arguments的问题

代码演示：

<script>
        // 第一步：首先声明一个对象
        let person = {
            name : '刘备',
            sex : '男',
            age : '22',
            like : '管理'
        }
        
        // 第三步：用剩余参数的方法写出pick函数方法
        let pick = (obj,...like) => {
        // 第四步：遍历...like
        // 第五步：声明一个新对象用来存放person里的属性  
        let res = {};
            for(let i = 0 ; i < like.length ; i++){
                res[like[i]] = obj[like[i]]; 
            }
            console.log(res);
        }
        // 第六步：用pick方法取出里面你想要的值
        pick(person , 'name','sex', 'age');
    </script>

结果展示：
请添加图片描述

2. 对比一下arguments和剩余参数…keys的区别

代码演示：

// arguments和...keys的差别
        // ...key arguments
        function conpare (...keys){
            console.log(keys);
            console.log(arguments);
        }
        conpare('1','2','3');

结果展示：
请添加图片描述

五、扩展运算符与剩余运算符

1. 扩展运算符就是把一个数组里的元素分割成单个，然后这些元素单个的传给方法函数,例如Math.Max(…keys)
2. 剩余运算符就是函数参数部分的…keys

代码演示：

	<script>
        // 第一步：声明一个数组
        var num = [1,2,3,5,677,3,2,1,5,6,32];
        // 第二步：用扩展运算符得出数组中的最大值
        var numMax = Math.max(...num);
        console.log(numMax);
    </script>

六、箭头函数

1. 用=>来定义，语法格式为：（）=> { }
2. function(){} 等同于 （）=> {}
3. 有两个参数时（value1，value2）=> { return value1 + value2;} ---- 大括号可以省略
4. 只有一个参数时 value1 => return value1 ---- 参数的括号可以省略；
5.返回值为对象的时候要加上（）

代码演示：

<script>
        let fn  = (value1 , value2)=>{
            return value1 + value2;
        }
        console.log(fn(2,3));
    </script>

七、箭头函数this指向的问题

1. 箭头函数内部没有作用域链，所以没有arguments的用法
2. 箭头函数没有this指向，只有通过查找外层作用域链来确定
3. 箭头函数不能实例化对象

代码演示：

<script>
        let person = {
            name:'诸葛亮',
            method :function(){
                document.addEventListener('click', ()=>{
                    // 这里的this指向的不是method，而是document
                    console.log(this);
                    // 这里要调用person里面的fire方法
                    this.fire();
                })
            },
            fire:function(e){
                console.log('诸葛亮火烧联营');
            }
        }
        
        person.method();
    </script>

展示结果：
请添加图片描述
解决方法：
点击事件后面使用箭头函数的方法就可以改变这类情况：
代码演示：

<script>
        let person = {
            name:'诸葛亮',
            method :function(){
                document.addEventListener('click', ()=>{
                    // 这里的this指向的不是document
                    // 箭头函数没有指向，只有通过外层作用域来确定
                    // 所以就找到了person对象的整个作用域
                    console.log(this);
                    // 这里要调用person里面的fire方法
                    this.fire();
                })
            },
            fire:function(e){
                console.log('诸葛亮火烧联营');
            }
        }
        
        person.method();
    </script>

结果展示：
请添加图片描述

八、解构赋值（对象 ，数组）

1. 操作对象语法格式：let { 属性名1 ， 属性名2 ， 属性名3} = 对象名

代码演示：

<script>
        let person = {
            name: '周瑜',
            age : '22岁',
            method: '火烧连营'
        }
        // 如果要把对象里的属性赋值给一个变量有两种办法
        // 第一种：直接赋值
        let name = person.name;
        let age = person.age;
        let method = person.method;
        console.log(name , age , method);
        // 第二种：解构赋值
        let {name1 , age2 , method3 } = person;
        console.log(name , age , method);
    </script>

结果演示：

请添加图片描述

2. 操作数组语法格式：let [ 元素1 ， 元素2 ， 元素3 ] = 元素名

代码演示：

<script>
        // 如果要把数组里的元素赋值给一个变量
        let arr = [1 , 2 , 4];
        let [a , b , c] = arr;
        console.log(a , b , c);
    </script>

结果展示：
请添加图片描述

九、扩展的对象方法

1. is( )方法 ，语法结构 Object.is( 3 , 3 ) ，作用相当于 ===
2. assign( ) ，语法结构Object.assign( target ， obj1 ，obj2 ，…) , 把target后面的对象的属性值，全部转移到target对象当中

代码演示1：

<script>
        let br = Object.is(2 , 2);
        // 全等所以结果是true
        console.log(br);
    </script>

代码演示2：

<script>
        let target = {};
        let liubeiName = {
            name : '刘备'
        }
        let liubeiAge = {
            age : 22
        }
        let person = Object.assign(target, liubeiName , liubeiAge);
        console.log(person);
    </script>

展示结果：
请添加图片描述

十、Symbol类型

1. 新的数据类型
2. Symbol声明的值表示独一无二的值，语法格式Symbol（‘value’）
3. 一般用来定义对象的私有变量
4. 用Symbol声明的私有变量不能用 . 来进行获取要用 [ ] 进行获取
5. Symbol定义的东西不能进行遍历
6. 通过Object.getOwnPropertySymbol( obj ) 获取对象值
7. 可以通过反射获取Reflect.ownKeys( obj ) 获取

代码演示：

<script>
        // 1. 新的数据类型
        // 2. Symbol声明的值表示独一无二的值，语法格式Symbol（'value'）
        let num0 = Symbol('2');
        let num1 = Symbol('2');
        console.log(Object.is(num0 , num1)); //结果为false
        // 3. 一般用来定义对象的私有变量
        let name = Symbol('name');
        let obj = {
            [name]:'刘备'
        } ;
        console.log(obj.name);//undefined
        // 4. 用Symbol声明的私有变量不能用.来进行获取要用[]  进行获取
        console.log(obj[name]);//刘备
        // 5. Symbol定义的东西不能进行遍历
        for(let key in obj){
            console.log(key);// 没有效果
        }
        // 6. 通过Object.getOwnPropertySymbol(obj) 获取对象值
        let method = Object.getOwnPropertySymbols(obj);
        console.log(method);
        // 7. 可以通过反射获取Reflect.ownKeys(obj) 获取 
        let reflect = Reflect.ownKeys(obj);
        console.log(reflect);
    </script>

结果展示：
请添加图片描述

十一、Set集合数据类型

1. 集合：表示一个无重复值的一个集合
2. set.add( 可以是对象，数组，字符串，数值，布尔)
3. set.delete( 要删除的东西 )
4. set.has(判断是否在set有某个值)
5. set.size( set ) 集合的长度
6. set.forEach( ) 遍历
7. 将set转换为数组 let arr = [ …set ]
8. set中的对象无法被释放 无法obj = null
9. WeakSet里的对象可以被释放，不能传入非对象类型的参数，不可迭代没有遍历方法

代码简单演示：

<script>
        let set = new Set();
        set.add([1,2,3,4,5]);
        set.add('刘备');
        set.add({name:'guanyu'});
        console.log(set);
    </script>

十二、Map数据类型

1. Map类型是键值对的有序列表，键值是任意类型
2. 有一个WeakMap

提供的方法：
请添加图片描述

代码简单演示：

<script>
        let map = new Map();
        map.set('name' , '张飞');
        map.set('age' , 22);
        console.log(map);
    </script>

十三、数组的扩展方法

1. from（ ） ---- 将伪数组转换为真数组
2. of（ ） ---- 将一组值，转换为数组
3. copywithin( ) ---- 将数组中定制的位置复制到其他位置 ----（ 0 ， 4）表示把索引为4以后的所有值赋值到以0开始的位置
4. find（ ） ---- 找到第一个满足条件的数组成员
5. findIndex（） ---- 找到第一个符合数组成员的索引
6. keys（ ） ---- 返回一个遍历器 ，对键遍历
7. entries （） ---- 返回一个遍历器，对键值对遍历
8. value（） ---- 返回一个遍历器 ，对值遍历
9. includes（） ---- 表示判断一个数组是否有给定的值，返回一个布尔值

代码演示:

<script>
        // 1.from()  ----  将伪数组转换为真数组
        function arr(){
            let tre = Array.from(arguments);
            console.log(arguments);
            console.log(tre);
        }
        arr(1,2,3);
        // 2. of（）    ----    将一组值，转换为数组
        console.log(Array.of(1,1,3,[2,3]));
        // 3. copywithin( )    ----    将数组中定制的位置复制到其他位置  ----（ 0  ， 4）表示把索引为4以后的所有值赋值到以0开始的位置
        console.log([1,2,3,4,5,6].copyWithin(0 ,3));
        // 4. find（ ）  ----    找到第一个满足条件的数组成员
        let arr0 = [1,2,3,4,5,6];
        let res = arr0.find(n => n >1 )
        console.log(res);
        // 5. findIndex（）  ----    找到第一个符合数组成员的索引
        let res0 = arr0.findIndex(n => n > 3);
        console.log(res0);
        // 6. keys（ ）  ----    返回一个遍历器 ，对键遍历
        let arr1 = ['a','b','c'];
        for(let index of arr1.keys()){
            console.log(index);
        }
        // 7. entries （）  ----    返回一个遍历器，对键值对遍历
        for(let [index , ele] of arr1.entries()){
            console.log([index , ele]);
        }
        // 8. value（）  ----   返回一个遍历器 ，对值遍历 
        for(let ele of arr1.values()){
            console.log(ele);
        }
        // 9. includes（）  ----    表示判断一个数组是否有给定的值，返回一个布尔值
        console.log(arr1.includes('a'));
    </script>

结果展示：
请添加图片描述

十五、迭代器interator

1. 是一种新的遍历机制
2. 是一个能快捷的访问数据的接口
3. 通过arrSymbol.Interator创建迭代器
4. arr.Symbol.Interator 有一个next（）方法
5. 返回一个值 ： value：“值” ， done：false
6. done:为false表示没有遍历完，true表示遍历完成了

代码演示：

<script>
        let arr = ['a' , 'b' , 'c'];
        // 创建迭代器
        let inter = arr[Symbol.iterator]();
        console.log(inter);
        // 第一次next() done：false
        console.log(inter.next()); 
        // 第二次next() done：false
        console.log(inter.next()); 
        // 第三次next() done：false
        console.log(inter.next()); 
        // 第四次next() done：true
        console.log(inter.next()); 
    </script>

结果展示：
请添加图片描述

十六、生成器Gnerator

  1. 通过yield关键字将函数挂起，不让函数继续执行
  2. 给异步编程提供方案

十七、

十八、

十九、

二十、

忧郁火龙果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
复习 - es6语法
weixin_43943583的博客
11-05 76
这几天电脑有点问题，一直在弄，而且论文也逼近了也在时间弄那个 ，前面node有一个大项目，已经做完了，我现在是准备把上次复习断下的继续复习一直到这个项目，然后就开始vue了。 1. 首先是函数的一个进阶，要明白函数也是对象，所以是可以通过new的方法来创建实例的。 然后是调用函数的三个方法：call可以改变this加调用、apply可以改变this但是传的参数是数组也可以调用、bind可以改变this传的参数也跟第一个call一样但是就是不会自己调用。 2. 今天的主打内容 闭包首先要知道严格模式，use
ES6语法学习笔记
weixin_40664306的博客
02-16 43
ES6语法学习笔记
Lodash中10个可被ES6替代的特性
theScoreONE的博客
08-06 6922
原文链接 1. Map, Filter, Reduce  搭配arrow箭头函数使用_.map([1, 2, 3], function(n) { return n * 3; }); // [3, 6, 9] _.reduce([1, 2, 3], function(total, n) { return total + n; }, 0); // 6 _.filter([1, 2, 3], fu
ES6常用数组方法
马优晨
02-01 7745
今天很高兴，连续收到 众安保险，阿里巴巴国际UED团队 和 阿里口碑的邀请。太激动了，放一张自己两年前的照片，压压惊~ 接来写几个我平时在项目使用的最常用的几个优化的方法~ 1- 数组去重 var arr = [1,2,3,4,3,4]; var arr2 = [...new Set(arr)]; 这个时候arr2就是去重后的数组~ 2- 交换两个变量
ES6 语法笔记
a411360945的专栏
04-06 178
ES6 Template String：模板字符串 是增强版的字符串，用反()标识，可以当作普通字符串使用，也可以用来定义多行字符串，或在字符串中嵌入变量。    eg:        `hello world${type}` ES6 promise语法：一个对象，可以获取到异步操作的消息，类似回调callback,但是比callback功能丰富一些 最常见的有三种状态:    pending（正...
ES6新增语法笔记，方便学习
03-25
最新ES6语法整理笔记，内涵各个部分小示例，方便理解和使用，记录了整个ES6新增语法部分，以及与之前版本的比较！
ES6核心语法整理笔记
05-16
主要总结了ES6的一些核心语法，整理成一个思维导图，能帮助快速复习回顾
es6笔记es6笔记es6笔记
04-03
在ES6之前，JavaScript虽然可以模拟实现类和对象的概念，但语法相对复杂。ES6引入了`class`关键字，使得创建类变得更加直观。类定义了对象的行为和属性，而对象是类的实例，包含了类定义的属性和方法。 ```...
ES6学习笔记 包含基础语法和简单项目
03-23
ES6 基础语法
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的一系列标准，特别是ECMA-262标准，定义了脚本语言的规范...
常用的es6语法总结(一)
lalao123_的博客
10-15 237
常用的es6语法总结 摘抄借鉴自阮一峰es6入门：http://es6.ruanyifeng.com/#docs/let 一、let和const 作用域问题 变量提升问题 顶层对象属性 a.作用域问题（var、let、const） var作用域为全局作用域 在全局范围内都有效，数组a的成员里面的 i，指向的都是同一个 i导致最后一轮i的值就是10 var a = []; for (var i ...
ES6语法基础总结
小糖豆
10-19 261
let var a = 1;全局变量,能重复声明,可以先使用，在声明 let a = 1 全局声明即全局变量，局部声明即局部变量,不能重复声明,必须先声明后使用 const a = 1 常量，常量只能在声明时赋值，并且一旦赋值不能修改，其他和let类似 解构赋值 对象的解构赋值 对象的解构赋值 let obj = { a: 1, b: 2, c: 3 }; let {a,c} = obj; console.log(a,c);//输出1 3 数组的解构赋值 let arr =
ES6中比较常见的语法总结
chaos_hf的博客
05-09 609
Es6语法总结（部分）
qq_44984407的博客
04-19 117
Es6量产含义 特指ECMAScript2015 泛指ES2015之后的新特性， ES2018 ES2019 let和const let和var的区别 不能重复定义 没有变量提示(var定义的变量是有变量提升的)，必须先定义在使用 全局变量不会附加到window对象的属性中 具有块级作用域 (除了对象字面量外其它的都是代码快) 单独的快作用域书写形式： { 这是块级作用域} 自...
ES6语法学习总结
o__o__o__o的博客
04-05 993
ES6语法学习总结 1.let和const 2.解构赋值 3.块级作用域 4.箭头函数 5. for...of vs for...in 6. 类
es6中Module 的语法总结
风里有诗句哈的博客
03-30 316
export // 报错 export 1; // 报错 var m = 1; export m; 以上写法都会报错，第一种写法直接输出1，第二种写法通过变量m，还是直接输出1。1只是一个值，不是接口 export导出时规定的是对外的接口，就是你导出的东西必须有一个名字，导入时才能找到这个名字，第二个方法之所以报错，是因为不用大括号括起来，在编译的时候m就变成了1，所以需要用{m}把m...
ES6这些就够了
weixin_34146986的博客
06-16 1044
刚开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以让我们快速起飞。 接下来我们就聊聊ES6那些可爱的新特性吧。 1.变量声明const和let 我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。...
JavaScriptES6语法小结
非鹭千里
10-14 5037
-ES6语法总结功能整理 回调函数： //ES6 array.forEach(v = > console.log(v)); 重写父类构造方法(功能复用)： //通过对象字面量创建对象 var human = { breathe() { console.log('breathing...'); } }; var worker = { __proto__: human, //设置
ES6 深入理解 ${ } 模版
超逸の学习技术博客
03-01 3252
写在开头 本文将带你深入理解ES6中 ${ } 模版 后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！ 推荐阅读：来自 菜鸟 的 前端实习面经 大厂 春招实习生 ES 6专栏 -> 传送门 如果想更多了解ES6，请参考之前写过的一些文章： ES6 一文弄懂 var let const 三剑客区别 吊打面试题 ES6 面试题：你能说出浏览器上到此支持多少...
写一篇ES6 对象拓展笔记 附带代码
最新发布
07-10
ES6 允许我们在对象字面量中使用简写语法来定义属性和方法。例如，如果属性名和变量名相同，我们可以省略冒号和变量名，只写属性名即可。 ```javascript const name = "John"; const age = 30; const person = { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

忧郁火龙果

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

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

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

打赏作者

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

抵扣说明：

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

余额充值