分享几个ES6常用的方法

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()的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量ab

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

4.展开运算符

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

语法: (...);

b010401470cb43cfb876264f1d9fd3b4~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1432&h=297&s=63878&e=png&b=252930

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

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的写法

ES6class可以看作是一个语法糖,它的绝大部分功能,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 文件就是一个模块。

模块功能主要由两个命令构成:importexport

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

8.1 语法一

导出/暴露:

export 要导出的内容1

export 要导出的内容2

export 要导出的内容3

导入:

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

步骤 :

  1. 先建立文件,两个为js,一个为HTML

9f2be14e06504cf1a6f83ccfe0b676b2~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1184&h=121&s=6669&e=png&b=23272e

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

f1a8f5352e1343369b1c9c522a863e6d~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1307&h=560&s=95705&e=png&b=22262d

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

fa9695eec3b54f798863773b90a6078c~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1219&h=259&s=34994&e=png&b=23272e

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

7dc7ba7e79ea48a6871e3a1478f5dd45~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1035&h=109&s=16595&e=png&b=242930

8.2 语法二

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

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

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

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

b654b3be2574477c9796687981f864e2~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1304&h=871&s=75430&e=png&b=24282f

0e6d1e6eb02044e792b07d2449f3405c~tplv-k3u1fbpfcp-jj-mark:1100:0:0:0:q75.image#?w=1118&h=260&s=27132&e=png&b=24282f

8.3 ES6 模块化的优势

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

静态加载,也叫编译时加载,它的好处是:

(1)编译时就能完成模块加载,加载效率要比运行时高得多;

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