[转帖]分享ES6 常用的几个方法

freeflydom

2023年5月25日 17:20 本文热度 513

1.什么是ES6 ？

ESMAscript 6.0(以下简称ES6)是 Javascript 语言的下一代标准，已在2015年6月正式发布。它的目标：是使Javascript语言可以编写复杂且大型应用，成为企业级开发语言。ES6既是一个历史名词，也是一个泛指，泛指涵盖了ES2015、ES2016、ES2017等的下一代Javascript语言标准。 标准委员会规定每年6月正式发布一次标准，作为当年的正式版本。

2.了解Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5，从而在老版本的浏览器中执行。不过现在的开发当中几乎不会用到了；所以说：你可以使用ES6的方式编写程序，也不用担心现有的环境是否支持。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function(item){
return item + 1;
})

上面的原始代码用了箭头函数，Babel将其转为普通函数，就能在不支持箭头函数的 Javascript环境执行了。目前各大技术栈（React/Vue/Angular）的脚手架项目都在使用babel作为默认的语言标准转码工具，可以在.babelrc文件中进行更多的自定义配置。

我们也可以通过官方提供的REPL在线编译器来体验Babel转码。

3.变量的解构赋值

ES6允许按照一定模式，从不同类型数据中提取值，然后对变量进行赋值，并且快读从对象或者数组里面获取一些数据，这杯称为：解构赋值

3.1 数组的解构赋值

在之前；我们给变量赋值只能直接指定一个变量值

let a = 12;
let b = 11;
let c = 10;

在ES6之后，就可以写成这样的

let [a, b, c] = [1, 2, 3];

上面的代码表示，可以从数组中提取数值，按照对应的位置，对变量赋值。本质上，这种写法属于"匹配模式"，只要等号两边的模式相同，左边的变量就会被赋予对应的值，而解构赋值允许指定的默认值。

3.2 对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值：

语法：let {key1, key2, ...} = {键值对1, 键值对2, ...}

 const JsonData = {
      name: "小彭",
      id: 727,
      status: "OK",
      data: [867, 5309],
      otherData1: 18,
      otherData2: ['www', 'itsource', 'cn'],
      otherData3: {
        a: 1
  }
}
console.log(JsonData.name,JsonData.id);

3.3 函数参数的解构赋值

函数的参数也可以使用解构赋值；并且也一样可以使用默认值。函数sum()的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量a和b。

function sum([a,b]){
  return a + b;
}
sum([1,7]);

4.展开运算符

展开运算符也叫扩展运算符。

语法： (...);

除此之外，扩展运算符也可以展开数组和对象；并且可以对数组和对象进行浅拷贝、合并的功能；也可以将伪数组转换为真数组。

5.模板字符串

对于传统的Javascript语言，输出一个模板字符串通常是这样写的。（此次用了jQuery的方法）

$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);

这种写法相当的繁琐，所以在ES6引入了模板字符串来解决繁琐等的诸多问题。

$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);

模板字符串是增强版的字符串，用反引号(``)标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串，可以换行，也可以在字符串中直接输出变量。

6.对象的简洁写法

ES6中对象的属性和方法都有简写形式。 它的写法就是如果键名和键值的属性名是一样时，可以只写一个。对于函数来说；可以省略冒号（:）和function。

let name = "小彭";
let age = 22;
let gender = "male";

let person = {
    name,
    age,
    gender,
    // 省略 冒号(:)和function
    hobby () {
          console.log("爱好和平");
   },
    color () {
          console.log("蓝色");
    }
}
console.log(person);

7.class

7.1 class的由来

在ES5中如果想要写一个类，传统的写法就是使用构造函数。另外可以定义静态方法。但是这种写法跟传统的面向对象语言的差异很大，很容易让初学者感到困惑；由此ES6提供更接近传统语言的写法，引入了class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

// 类(构造函数)
function Person(name, age){
// 定义实例属性
   this.name = name;
   this.age = age;
}
// 添加原型方法
Person.prototype.show = function () {
       console.log("我是原型方法");
 }
// 创建实例对象
let per = new Person("花开富贵", 22);
// 添加静态方法。静态方法是属于类自己的，实例对象调用不了。
 Person.say = function (){
     console.log("我是静态方法");
 }

7.2 class的写法

ES6的class可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class类的命名规则是大驼峰，并且class类里面有一个构造器，等价于构造函数；如果没有构造器，在实例化的时候会自动创建一个空的构造器。

class Test{
// 一般固定的属性会放在外层
  eye = 2;
  leg = 2;

constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

    show () {
        console.log("原型方法");
}
// 静态方法
    static () {
        console.log("静态方法");
}
}
// 实例化对象
let obj = new Test("小彭", 22, "male");
console.log(obj);

7.3 class 继承

使用ES6 ，class 语法来改写之前寄生组合式继承的代码（使用extends关键字）；其中，super是父类构造函数，ES6规定，子类构造函数中必须执行一次super函数。

继承中的属性或者方法查找原则：就近原则；先看自身有没有这个属性或者方法，有则用；如果没有，则查找父类，若有，则用。

// 狗狗继承动物
class Animal {
//构造器
eye = 2;
constructor(name, age){
     this.name = name;
     this.age = age;
}
        
color () {
     console.log("毛发细润呈白");
}

static hobby() {
     console.log("躺平");
  }
}
        
class Dog extends Animal {
    // 构造器
    // ES6 要求，子类的构造函数必须执行一次super函数。
    constructor(name,age) {
        super(name,age);
   }
 }

let dogs = new Dog("富贵", 2);
console.log(dogs);

8.ES6 模块化

什么是模块化？一个 JS 文件就是一个模块。

模块功能主要由两个命令构成：import和export

import命令用于导入其他模块提供的功能
export命令用于规定模块的对外接口

8.1 语法一

导出/暴露：

export 要导出的内容1

export 要导出的内容2

export 要导出的内容3

导入：

import{导入的内容1, 导入的内容2, 导入的内容3，....} from '文件模块路径'

步骤：

先建立文件，两个为js，一个为HTML

将要写或者要用的js代码放在其中一个文件中，我是放在了index.js中。并且要在导出的代码块前面加上export

将index.js文件引入到另外一个js文件中，导入的时候路径和文件后缀名不能省略，更不能本地打开，要通过live Serve打开。

最后再把这个b.js文件引入到html中，但是在script标签类型必须是module，否则会报错。

8.2 语法二

语法二的引用过程和语法是一模一样的。

导出：export default{ 要导出的内容 }

导入：import 变量 from '文件模块路径'

使用export default命令是为了给模块指定默认的导出，import时可以为其任意命名（一般导出和导入的命名保持相同）。显然，一个模块只能有一个默认导出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

8.3 ES6 模块化的优势

写法之外，相较于ES5时代的模块化方案，ES6模块化有着诸多优势。其中最主要的优势是「静态加载」。ES6 模块的设计思想是尽量的静态化，使得编译时 就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。比如，CommonJS模块就是对象，输入时必须查找对象属性。

静态加载，也叫编译时加载，它的好处是：

（1）编译时就能完成模块加载，加载效率要比运行时高得多；

（2）使得「静态分析」成为可能。有了它，就能进一步拓宽 Javascript 的语法，比如引入「宏」和「类型检验」这些只能靠静态分析实现的功能。

—————————————————————————
原文链接：https://juejin.cn/post/7236672410626375735

该文章在 2023/5/25 17:24:34 编辑过

关键字查询

常用

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。