点晴MIS问题教程区 加入收藏
问题搜索
 您的位置:知识管理交流『 技术文档交流 』浏览当前教程  
  

  网站搜索
  搜索范围: 搜索方式: 关键词(可用空格分开)  

  作者及文章信息: 本文热度:26 % 
freeflydom

积分:4131
等级:网站管理员
文数:120
注册:2017-2-28

 信息       

楼 顶 

 [转帖]分享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.展开运算符

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

语法(...);

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

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 继承

使用ES6class 语法来改写之前寄生组合式继承的代码(使用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

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

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

  1. 最后再把这个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 模块的设计思想是尽量的静态化,使得编译时 就能确定模块的依赖关系,以及输入和输出的变量CommonJSAMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。

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

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

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


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



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

  离 线  2023/5/25 17:20:50 
  本文章共有 0 页, 0 张回文,每页有 10 张回文 >> [ ]
页码:  
Copyright 2010-2023 ClickSun All Rights Reserved