ES6新特性

但盼风雨来能留你在此

已于 2022-10-15 15:18:24 修改

阅读量404

点赞数 1

分类专栏：其他技术文章标签： html5 html javascript

于 2021-10-03 16:13:42 首次发布

本文链接：https://blog.csdn.net/weixin_56697114/article/details/120585601

版权

其他技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、let 和 const 命令

问题：var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量

解决：通过 let 把变量的i的作用域控制在了循环内部。

const 声明的变量是常量，不能被修改，类似于java中final关键字。

2、字符串扩展

includes () ：返回布尔值，表示是否找到了参数字符串。
startsWith () ：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith () ：返回布尔值，表示参数字符串是否在原字符串的尾部。

ES6中提供了 ` 来作为字符串模板标记。

3、解构表达式

ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构

属性别名

4、函数优化

1、参数默认值

2、箭头函数

3、对象的函数属性简写

4、箭头函数结合解构表达式

5、map和reduce

map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

6、扩展运算符

扩展运算符(spread)是三个点(...)，将一个数组转为用逗号分隔的参数序列。

7、Promise

简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

8、set 和 map

Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。

map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：

object是 <string,object>集合
map是<object,object>集合

9、 class 的基本语法

继承：

10、Generator函数

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有两个特征:

一、是 function命令与函数名 之间有一个星号:

二、是函数体内部使用 yield吾句定义不同的内部状态。

通过for...of可以循环遍历Generator函数返回的迭代器。

11、修饰器

修饰器(Decorator)是一个函数，用来修改类的行为。 ES2017 引入了这项功能，目前 Babel 转码器己经支持。

        @T
        class User{
            constructor(name, age = 20){
                this.name = name;
                this.age = age;
            }
        }

        function T(target){
            console.log(target);
            target.country = "中国";
        }

        console.log(User.country);

12、转码器

可以将 ES6 代码转为 ES5 代码，从而在浏览器或其他环境执行。

#通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
tyarn init -y

#通过umi命令创建index.js文件
umi g page index  #可以看到在pages下创建好了index.js和index.css文件

#将下面内存拷贝到index.js文件中进行测试
 @T //通过@符号进行引用该方法，类似java中的注解
 class User {
   constructor(name, age = 20){
     this.name = name;
     this.age = age;
   }
 }
 
  function T(target) { //定义一个普通的方法
   console.log(target); //target对象为修饰的目标对象，这里是User对象
   target.country = "中国"; //为User类添加一个静态属性country
 }
 console.log(User.country); //打印出country属性值

#通过命令行启动umi的后台服务,用于本地开发
umi dev
#通过浏览器进行访问：http://localhost:8000/，查看效果
#值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务