2020年必须要掌握的ES6

一.学习ES6(ECMAScript 2015) 前要搞明白两个问题， 什么是ES6， 为什么要学习ES6

1. 什么是ES 6： ES6是JavaScript语言的新一代标准， 加入了很多新的功能和语法。 现在React、 Vue项目一般都是用ES6语法来写， 这也是官方推荐

2.为什么要学习ES6， ES6已经在 2015 年 6 月正式发布了。 它的目标， 是使得 JavaScript 语言可以用来编写复杂的大型应用程序， 成为企业级开发语言

二.ES6新增的内容如下:

1. 声明变量和常量的关键字：let和const

相同点及优点：都具有块级作作用域，不允许重复声明，不存在变量提升

不同点：const初始化时必须赋值,值是不可以修改的(对象除外，对象的属性可以修改)，而let不必

2. .数据解构和赋值

ES 6允许按照一定模式从数组和对象中提取值， 对变量进行赋值，即称为解构。例如：

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

console.log(a, b, c) //1 2 3

let name = 'lee'

let age = 3

let person = {name, age}

person // Object {name: 'lee', age: 3}

// 反过来也是一样的

let person // Object {name: 'lee', age: 3}

let {name, age} = person

name // 'lee'

age // 3

// 函数参数解构赋值

function sum([x, y]) {

  return x + y;

}

sum([1, 2]); // 3

// 对象参数解构赋值

function sum({x, y}) {

  return x + y;

}

sum({1, 2})  // 3

// 嵌套解构赋值

// 数组嵌套

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

a // 1

b // 2

c // 3

// 对象嵌套

let {person: {name, age}, foo} = {person: {name: 'lee', age: 3}, foo: 'foo'}

name // 'lee'

age // 3

3. 模板字符串用反引号 ` ` 标识字符串。除了可以当做普通字符串使用外，还可以在字符串中插入变量

// 普通字符串

`Hello React!`;

// 字符串嵌入变量

let text = 'Vue'

let name = `Hello,${text}`;

console.log(name);//Hello,Vue

4. 对象的简写，方式具体方法如下:

const name = "Jack";

const age = 25;

const sex = "女";

const studentES6 = {

            name, // 同名的属性可以省略不写

            age,

            sex,

            getName() {

                // 可以省略方法中的 : function

                return this.name;

            },

};

  console.log(studentES6.age); //25

  console.log(studentES6.getName()); //Jack

5. 箭头函数

基本形式：

1) let func = num => num; //只有一个形参可以‘=’后面写形参名

2) let func = () => num;//如果有多个形参，在‘=’后面写‘（）’把形参写在（）里面

3) let sum = (num1, num2) => num1 + num2;//如果只有1条执行语句，直接在‘=>’后面写执行语句即可，默认会返回执行结果

4) 如果有多条语句必须写{},将代码写在{}里面，重新指定返回值

注意事项：

1) 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，建议在箭头函数外部再嵌套一层函数以便于控制里面的this

2) 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3) 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

不可以使用yield命令，因此箭头函数不能用作 Generator 函数（后面有具体介绍）。

6. 扩展运算符

扩展运算符是三个点（...），它将一个数组专为用逗号分隔的参数序列， 类似于rest参数的逆运算。例如：

function sum(a, b, c) {

            num = a + b + c;

            console.log(num); //6

        }

        let numbers = [1, 2, 3]

        sum(...numbers)

扩展运算符通常还可以用于合并数组以及解构赋值使用。例如：

let a = [1, 2]

let b = [3, 4]

[...a, ...b] // [1, 2, 3, 4]

let [x, ...rest] = ['a', 'b', 'c']

rest // ['b', 'c']

注意：解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、

那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

7. ES 6引入reset参数

（形式为...变量名）用于获取函数的多余参数， 可以代替arguments对象的使用。rest参数是一个数组，

数组中的元素是多余的参数。注意：rest参数不能再有其他参数。 例如：

function languages(lang, ...types) {

            console.log(types); // ['java', 'python']；

        }

        languages('js', 'java', 'python');

8. 形参默认值

ES6中提供了一个新的函数默认值的方式，外界传入的参数会依次赋值给函数中的参数

function sum (a = 10, b = 5) {

    return a + b;

}

console.log(sum(1, 2)); // 3

console.log(sum(5)); // 10

console.log(sum()); // 15

console.log(sum(0, 10)); // 10

// 当需要第一个参数使用默认值，而指定第二个参数时，需要显式指定第一个参数值为undefined

// 需要注意，当显式指定参数为null时，是不会使用默认值的

9.ES6 关于字符串的扩展方法

１. //includes(),判断是否包含指定的字符串 返回布尔值true或者说false

let str1 = 'aabbcc';

        let str2 = str1.includes('bb')

        console.log(str2); //true

２. //判断是否以指定字符串开头  返回布尔值true或者说false

let str3 = 'abcd';

console.log(str3.startsWith("a"));//true

３. //判断是否以指定字符串结尾  返回布尔值true或者说false

let str4 = 'eeddff';

console.log(str4.endsWith('f'));//true;

４. //repeat(count) : 重复指定次数 会返回一个字符串

let str5 = 'ab';

console.log(str5.repeat(5));//ababababab

10. ES6数值扩展方法

1.isFinite //判断是否为无限大的数

console.log(Number.isFinite(123)); //true

console.log(Number.isFinite(Infinity)); //false

2. Number.isNAN //判断是是否为NAN

console.log(Number.isNaN(NaN));//true

console.log(Number.isNaN(123)); //false;

3. Number.isInteger(i) : 判断是否是整数

console.log(Number.isInteger(123)); //true

console.log(Number.isInteger(123.0)); //true

console.log(Number.isInteger(12.6)); //false

4.Number.parseInt(str) : 将字符串转换为对应的数值

console.log(Number.parseInt('123abc')); //123

console.log(Number.parseInt('a123')); //NAN

5.Math.trunc(i) : 直接去除小数部分

console.log(Math.trunc(123.111)); //123

11. 数组扩展方法

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组

    let obj4 = {

      0: '888',

      length: 1

    };

    console.log(Array.from(obj4));//[888]

2. Array.of(v1, v2, v3) : 将一系列值转换成数组

console.log(Array.of(123, true, false, 'string', 'number'));// [123, true, false, "string", "number"]

3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素

  let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];

    console.log(arr.find(function (item, key, value) {

      return item > 1

    }));

    //打印结果为1

4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

    let arr = [2, 3, 4, 5, 6, 7, 8, 9, 10];

    console.log(arr.findIndex(function (item, key, value) {

      return item > 1

    }));

12. ES6对象的扩展方法

１. Object.is判断两个值是否完全相等 (底层原理是转换成字字符串进行对比)

console.log(0 == -0) //ES5 true;

        console.log(NaN == NaN) // ES5 false;

        console.log(Object.is(0 == -0)); //ES6 false;

        console.log(Object.is(NaN == NaN)); // ES6 false;

２.  Object.assign(target, source1, source2..)

  * 将源对象的属性复制到目标对象上

    let obj = {};

    let obj1 = {

      a: 'a',

      b: 'b',

    };

    let obj2 = {

      c: "c",

      d: 'd',

    };

    Object.assign(obj, obj1, obj2);

    console.log(obj);

３. 直接操作 __proto__ 属性

    let obj3 = {};

    let obj4 = {

      money: 5000000,

    };

    obj3.__proto__ = obj4;

    console.log(obj4); //{}

    console.log(obj4.money); //5000000

13. ES6 Set

set是ES6中新增的类型，和数组类似，唯一不同在于该类型不会有重复的数据，一般常用来对数据进行去重操作

1、创建set集合并添加元素

let set = new Set();

console.log(typeof set)    //object

set.add('a');    //add()方法添加元素

set.add('b');

set.add('c');

console.log(set);    //{a,b,c}

２. Set的size属性可以获取set的长度

３. 3、Set不能添加重复元素

set.add('a');    //重复,所以添加失败,这个地方并不保存

console.log(set.size);    // 3

console.log(set);    //{a,b,c}

// 数字5和字符5是不相等的，则可以添加进去

set.add(5)

set.add('5')

console.log(set.size)    //5

console.log(set);    {a,b,c,5,'5'}

４. 数组和Set可以相互转换，而Set不能添加重复元素，可以利用这一点实现数组去重。数组转化为set，只需要在创建set时将数组作为参数传递即可；把set转化为数组可以使用扩展运算符 …

//数组转换为Set数据类型并去重

let arrSet = [1,4,2,3,2,4,5];

let set = new Set(arrSet);

console.log(set);    //{1,4,2,3,5}

//Set数据类型转换为数组

let arr = [...set];

console.log(arr);    //[1,4,2,3,5]

另外一种数组去重 通过使用Array.from()方法 + new Set()

let arr1 = [1,1,2,2,3,3,4,4,5,5,6,6];

let result1 = Array.from(new Set(arr1));

console.log(result1);//[1,2,3,4,5,6];

５. Set的has()可以判断一个值是否在set中 返回一个布尔值

let arrSet = new Set([2,3,4])

console.log(arrSet.has(5)) //false

console.log(arrSet.has(2)) //true

６. 移除Set元素，delete(需要删除的值)；clear()  清空所有的值

let set = new Set([1,3,6]);

set.delete(3);

console.log(set);    //{1，6}

set.clear();

console.log(set);    //{}

７. Set的遍历

Set可以使用forEach遍历，forEach遍历时回调函数有三个参数

function(value,key,ownerSet) {

              函数体

}

参数1: 遍历到的元素的值

参数2: 对set集合来说,参数二的值与参数一相同

参数3: Set集合自身

let iSet = new Set([1,2,4,6,8])

    iSet.forEach(function(value){

    console.log(value);    //1 2 4 6 8

})

for...of也可以遍历set

let iSet = new Set([1,2,4,6,8])

for (val of iSet) {

    console.log(val);    //1 2 4 6 8

}

８. set是通过Object.is()来判断两个元素是否相等的 **但是判断+0和-0的时候是用 === 号判断的

set.add(+0)

set.add(-0)   // ===判断相等,添加不进去

console.log(set.size)//1

set.add(NaN)

set.add(NaN)  //Object.is()判断相等,添加不进去

console.log(set.size)//2

set.add([])

set.add([]) //两个空数组不相等(存放在堆中的数据虽然字面量相等但是并不指向同一片内存空间),所有可以添加

console.log(set.size)//4

set.add({})

set.add({}) // 空对象也不重复,也可以添加

console.log(set.size)

14. ES6新增的数据结构:Map

Map 是 ES6 中新增的数据结构，Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型…

Map 的用法和普通对象基本一致，先看一下它能用非字符串或者数字作为 key 的特性。

const map = new Map();

const obj = {p: 'Hello World'};

map.set(obj, 'OK')

map.get(obj) // "OK"

map.has(obj) // true

map.delete(obj) // true

map.has(obj) // false

需要使用new Map()初始化一个实例，下面代码中set get has delete顾名即可思义（下文也会演示）。其中，map.set(obj, 'OK')就是用对象作为的 key （不光可以是对象，任何数据类型都可以），并且后面通过map.get(obj)正确获取了。

Map 实例的属性和方法如下：

size：获取成员的数量

set：设置成员 key 和 value

get：获取成员属性值

has：判断成员是否存在

delete：删除成员

clear：清空所有

const map = new Map();

map.set('aaa', 100);

map.set('bbb', 200);

map.size // 2

map.get('aaa') // 100

map.has('aaa') // true

map.delete('aaa')

map.has('bbb') // true

map.clear()

可以遍历map实例的方法如下：

Map 实例的遍历方法有：

keys()：返回键名的遍历器。

values()：返回键值的遍历器。

entries()：返回所有成员的遍历器。

forEach()：遍历 Map 的所有成员。

const map = new Map();

map.set('aaa', 100);

map.set('bbb', 200);

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341