Modules

ES6 新特性二

ES6的扩展运算符与rest参数、新增数组和对象及字符串方法、模块modules、Map/Set等新特性快速使用

2018-06-07侠课岛    基础入门       

前端/前端必修/es6新特性体验 14     0     2445

扩展运算符与rest参数

扩展运算符和rest参数可以算是一对互为逆运算的好基友啦~它们两个的写法一样,都是三个点~都很适用于函数方法传参,所以这里把它们放在一起来总结,更方便理解和记忆哟~
扩展运算符的作用是把一个数组转化成逗号分隔开的参数序列,除了适用于传递参数,还有合并数组、拷贝数组、解构赋值等等应用场景,这里就简单列举几个,其他的使用主要看自己的需求啦~

//使用扩展运算符传递参数
function add(num1, num2, num3){
    return num1 + num2 + num3;
}
add([1, 2, 3]);  //6
Math.max(...[1, 6, 9]);   //9

//使用扩展运算符操作数组
let arr1 = [1, 2];  
let arr2 = [3, 4];  
let arr3 = [5, 6];
let newarr = [..arr1,...arr2,...arr3];   //[1, 2, 3, 4, 5, 6]

rest参数和扩展运算符正好相反,把遗传逗号分隔的参数序列转化为数组,它并不像之前的参数arguments,是类数组的格式,rest参数转化的数组是真正的数组,可以进行数组的一系列操作。

function add(...args){
    return args.reduce((total,item) => total + item)
}
add(1,2,3,4,5,6);    //21

新增的数组方法和对象方法,字符串方法

es6里面对于Javascript原生的数据类型和对象扩展了很多的API,我这边只总结一些常用的,更多细节可以参照阮大大的书籍《ECMAScript 6 入门》

新增数组方法

  • Array.from() - 将类数组的类型转化为数组类型,类数组类型常见的包括用选择器获取到的dom节点、还有ES6新增的Map和Set格式也可以使用这个方法来转化。

let h2s = document.getElementsByClassName('t-center');
Array.from(h2s).forEach((item,index)=>{
    item.style.color = '#fff';
})
  • 数组遍历查找的新方法find()和findIndex()
    这两个方法都可以用于遍历数组,用来找出第一个符合条件的数组成员,找到之后返回,如果没有符合条件的,返回undefined。

let arr1 = [1, 2, 3, 4, 5, 6];
arr1.find( item => item>3 );  //4 虽然有三个数字都大于3,但只要第一个符合条件之后,函数就返回了不会继续遍历
arr1.findIndex( item => item>3 );  //3 这个方法返回的是符合条件的数组成员的索引值
  • 数组实例的方法fill()
    这个方法正如它的名字所见,是用来填充数组的,不管数组里面的成员是undefined还是有数值,都会被覆盖成fill()传进来的参数。

let arr1 = new Array(3).fill('lol');
[1,2,,3].fill('lol');
console.log(arr1);  //['lol', 'lol', 'lol']
console.log(arr2); //['lol', 'lol', 'lol', 'lol']
  • 用于数组遍历的新方法entries(),keys() 和values()
    这三个方法都会返回一个遍历器对象,可以用于for..of..循环。区别是entries返回的是键值对,keys返回的是键值,values返回的是键名。

for (let index of [1, 2].keys()) {
  console.log(index);
}
// 0
// 1
for (let item of [1, 2].values()) {
  console.log(item);
}
// 1
// 2
for (let [index, item] of ['a', 'b'].entries()) {
  console.log(index, item);
}
// 0 1
// 1 2
  • 数组实例用于查找的方法includes()
    在没有includes之前,我们用的是indexOf方法,现在有个includes方法就更简单啦!而且includes支持NaN。

[1, 2, NaN, 4].includes(NaN);   //true
[1, 2, NaN, 4].includes(1);   //true
[1, 2, NaN, 4].includes(3);   //false

新增对象方法

  • 属性和方法的简洁写法
    在ES6里面允许直接书写变量做为属性和方法,在模块的输出和类的写法里面其实就已经用到这种写法啦~下面我们来巩固一下:

let name = '大侠';
let age = 2;
let obj = {
    name,
    age
};
console.log(obj);  //{name: "大侠", age: 2}

//模块输出的写法
export { name, age};

//等同于以下写法
export { name: name,age: age };

//对象方法的简写
let obj = {
    getName(){
        ...
    }
};
  • 动态属性名写法
    动态属性名写法即支持把字面量定义的变量或者表达式做为属性名写入,用[]括起来即可,有了这个写法,我们可以很方便的定义动态的对象属性和方法名字啦,感觉这个用处还是挺不错的~

let classes = {};
[3,5,8].map(item=>{
    classes[item+'班'] = {}
})    
console.log(classes);   //{3班: {}, 5班: {}, 8班: {}}
  • Object.assign() - 合并对象方法 使用这个方法,会把几个对象的所有可枚举属性合并在一起,返回一个新的对象,如果有重名的属性,写在后面的那个属性会覆盖前面那个。此外还有一点需要注意,assign方法是对对象进行的浅拷贝,任何在引用对象上做出的修改,也会应用到这个对象上。

let obj1 = { id: 1,name: '大侠'};
let obj2 = { id: 2,age: '2'};
let obj3 = Object.assign(obj1,obj2);
console.log(obj3);   //{id: 2, name: "大侠", age: "2"}
  • Object.is() - 判断是否绝对相等 在这个方法之前,我们一般使用===来表示绝对相等,is方法除了关于NaN、-0的判断不一样之外,其他的是一样的。

+0 === -0      //true
NaN === NaN   // false
Object.is(+0, -0)      // false
Object.is(NaN, NaN)   // true

新增字符串方法

字符串也新增了很多方法,这里俺只列举几个比较常用的或者觉得比较有趣的操作字符串的方法吧~

  • includes(), startsWith(), endsWith()
    从名字上也可以看出来这些方法是干啥了啦,判断字符有没有在字符串之内的,就不多介绍了,返回的都是布尔值。这三个方法都支持第二个参数,表示开始搜索的位置。

let s = 'Welcome to 侠课岛!';
s.startsWith('world') // false
s.endsWith('!') // true
s.includes('岛') // true
  • repeat() - 重复字符串
    这个方法表示把字符串重复n遍,传入的数字不能是负数,如果是小数,会转化成整数。

let str = '哟!切克闹!'; 
str.repeat(3);    //'哟!切克闹!哟!切克闹!哟!切克闹!'

新增数字对象的方法

  • Number.isInteger() - 判断是否是整数
    这个方法返回布尔值,用来判断是否是整数,如果传入的不是数字也会返回布尔值。但是这个方法在精度上面是有缺陷的,所以只能用作粗略判断啦~

Number.isInteger(101)                   //true
Number.isInteger(10.00)                 //true
Number.isInteger('2333')               // false
Number.isInteger(3.0000000000000002)  // true
  • Number.parseInt(), Number.parseFloat()
    这两个方法跟全局的方法一样,用法完全一样,只是可以用Number来调用了,就记住一下还有这么个写法吧~

除了上面介绍的这些,还有一些新增的Math方法等等,有兴趣的可以去仔细翻翻书了解一下~毕竟一下记那么多新的方法,平时还不一定用得上,有点费脑容量不是~所以大家还是按需自取吧~

模块modules

Javascript在设计之初就是一门灵活松散的语言,也一直没有模块化的体系,而我们在项目的开发中,如何将功能拆分细化,以模块化的方式引入是非常重要的,以往也有CommonJS和AMD来解决这一问题。所以,在ES6中,就引入了模块的功能。
ES6中模块功能包括两个关键字,export和import,分别代表模块输出和输入。在我们构建项目的时候,一个文件就是一个单独的模块,我们使用export来输出这个模块的变量和方法,在需要引用的地方用import的方式引入进来。尤其是模块配合类的使用,就能达到完美的模块化编程啦~

 improt与export

// module1.js
const name = "大侠";
const type = "cat";
function sayName(){
    return name;
}
export { name, type, sayName };

//main.js
import { name, type, sayName} from './module1.js';

*与default、module

如果模块输出的变量需要手动一个个添加声明和引入,在输出变量很多的时候,未免显得太不人性化,所以我们可以选择将模块整体输出。
在引入的时候,使用*表示整体引入,后面接上as+自定义变量名,这样你就可以使用这个自定义的变量名来访问module1.js里面输出的方法和属性。

const name = "大侠";
const type = "cat";
function sayName(){
    return name;
}
export { name, type, sayName };

//main.js
import * as module1 from './module1.js';  //将module1整体引入 命名为module1 
console.log(module1.name);

另外一种方式是使用default语法,我个人最常用的方式是配合类的写法,在引入的时候创建新的类的实例。

//Class1.js
export default class Class1{
    ...
}

//main.js
import Class1 from 'Class1.js';
let myClass = new Class1();

此外,需要注意的是ES6模块是输出的值的引用,也就是说当引用之后调用值发生变化,模块本身的值也会变化。而CommonJS输出的是值的拷贝,引入之后的值发生变化不会引起模块内值的变化。

//module1.js
export let id = 1;
export function add(){
    return id++;
}

//main.js
import { id, add } from 'module1.js';
console.log(id);  //1
add();
console.log(id);  //2

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

14

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?