ES6新增特性

ES6新增特性

【说明】ES5和ES6是javascript语法发展过程中的新增版本，对一些语法及功能性方法作了增加，因些，对于一些旧的浏览器来说，有很大的兼容性问题。因些，我们在做一些开发工作时，对一些浏览器的兼容有一定要求时，一定要慎用。

ES6新增数据类型

ES6中引入一第七种数据类型，Symbol类型

Symbol类型：一种新的原始数据类型，表示一个独一无二的值。

为何要引入？

        如果有一个对象obj,对象下有一个fn方法，有一天突然要对这个对象扩展一些新功能，一不小心又添加了一个fn方法，于是之前定义好的fn方法会被新添加的fn方法覆盖。为了解决这种现象，js就引入了Symbol这个独一无二的值，常常用于对象的属性中。

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符，让该属性具有唯一性和私密性；这是该数据类型仅有的目的

Symbol类型值的创建

let s = Symbol();

typeof s;//"symbol"

​

let s1 = Symbol();

console.log(s == s1);//false，是两个不同的值

【注】创建Symbol类型值，不能使用new关键字创建，因为Symbol是一个值，而不是一个对象。而new是创建一个对象。

Symbol的参数

//let s1 = Symbol('name');//name参数是这个Symbol原始类型值的名称,用于对这个值的描述，用来区分这个原始类型值是哪一个

​

var s1 = Symbol("name1");

var s2 = Symbol("name2");

console.log(s1);

console.log(s2);

在对象属性中的使用

        var a = Symbol("isa");

        var b = Symbol("isb");

        var obj = {

            name: "tom",

            age : 19,

            [a] : "a",

            [b] : "b"

        }

        obj.a = 2;//不会将obj中的[a]属性修改

        obj["a"] = 3;//不会将obj中的[a]属性修改

        console.log(obj);

在对象中不会被迭代

        var a = Symbol("isa");

        var b = Symbol("isb");

        var obj = {

            name: "tom",

            age : 19,

            [a] : "a",

            [b] : "b"

        }

        for(var key in obj){

            console.log(key);//name age

        }

        console.log(Object.keys(obj));//["name", "age"]

        console.log(Object.getOwnPropertyNames(obj));//["name", "age"]


        // 可以使用ES6中Object的新增API迭代

        console.log(Object.getOwnPropertySymbols(obj)[0]) //[Symbol(isa), Symbol(isb)]

新增变量声明方式let和const

let 和 const 的使用方式和 var 没有区别,但是声明出的变量，使用规则有所不同，let 和 const 多了一些对变量的限制

let和const声明变量的共同点：

1，不允许重复声明变量

2，有自己的块级作用域

3，没有变量提升

4，暂时性死区：作用域下，通过let声明的变量， 变量声明之前的区域，该变量不可用，这个区域就称作暂时性死区。

let声明变量

let a = 9;

const声明变量

1.const声明常量值

const q = 5;

2.const声明引用值

const arr = [1,2,3];

var,let,const的区别:

1、let声明的时候可以不赋值，const声明的时候必须赋值

2、let声明的变量，可以改变，const声明的变量，不可以改变（引用数据类型的地址不可变，数据可变）。

3、var声明的变量有变量提升，没有块级作用域，可以重复声明，let和const都相反

箭头函数

ES6中新增了书写函数的方式，值得注意的是：箭头函数只能在书写匿名函数的时候使用

this指向的总结

箭头函数的书写方式

var fn = () => {alert("ok")};fn();

只能在匿名函数上使用

box() => {};//语法错误：箭头函数参数列表格式错误：Uncaught SyntaxError: Malformed arrow function parameter list

所有匿名函数都可以写成前头函数

//自定义函数 var fn = () => {}; //定时器(回调函数) setTimeout(() => {}); //对象下 var obj = { fn : () => {}; } 事件 document.onclick = () => {} 回调函数 arr.forEach((ele,index,array) => {}); 自执行函数 (() => {})();

箭头函数的参数

1.正常传参

var fn = (a,b) => { alert(a+b); } fn(2,3); 

2.只有一个参数时可省略小括号

var fn = a => { alert(a); } fn(2);

函数体只有一行代码时可以省略大括号,并自带返回值

var fn = a => a + 5; var val = fn(2); alert("返回值：" + val);//7

剪头函数中没有自己的this,this来源于上一层的上下文(来自父级作用域);

var fn = () => {

    console.log(this); // window

}

document.onclick = () => {

    console.log(this); // window

}

var obj = {

    fn : () => {

        console.log(this); // window

    }

}

document.onclick = function(){

    var fn = () => {

        console.log(this); // document

    }

}

document.onclick = function(){

    var obj = {

        fn : () => {

            console.log(this); // document

        }

    }

}

document.onclick = function(){

    setTimeout(() => {

        console.log(this); // document

    })

}

​

【说明】箭头函数中没有自己的this指向，this来源于声明时所在父级作用域。

箭头函数中没有arguments

var fn = () => { console.log(arguments);//Uncaught ReferenceError: arguments is not defined } fn(1,2,3,4,5);

函数参数的默认值

我们在定义函数的时候，有的时候需要一个默认值出现，就是当我不传递参数的时候，使用默认值，传递参数了就使用传递的参数

1,原来函数参数默认值设置

function fn(a){

a = a || 10;

alert(a);

}

fn();//输出默认值10

fn(20);//输出传递的实参20

2,ES6默认参数设置

function fn(a = 10){

alert(a);

}

fn();//输出默认值10

fn(20);//输出传递的实参20

【注】箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）。

解构赋值

【概念】就是快速从对象或者数组中取出成员的一个语法方式

解构数组

函数中可以通过解构数组返回多个结果

解构对象

通过解构对象应用于函数的对象传参

轻松实现两个数的交换

【注】{}是专门解构对象的，[]是专门解构数组的，二者不能混用，字符也可以作为数组解析

var str = "1234";

var [a,b,c] = str;

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

模板字符串

普通字符串的使用

模板字符串的使用

1，基本使用：

2，变量解析：

展开运算符（扩展运算符）

ES6 里面号新添加了一个运算符 “... ”，叫做展开运算符

展开数组

合并数组

展开对象

合并对象

函数参数中的使用

ES6函数新增bind（val）方法

bind方法：可以实现函数内部this指向的强制改变，不会立即执行函数，而是返回一个已经改变了 this 指向的新函数。

bind()方法的使用

bind()方法与call和applay的区别

call和applay也能强制改变函数内部this指向，但与bind的使用有异同

1.相同之处

2.不同之处

【注】 箭头函数不能使用call apply bind

字符串新增ES6方法

var str = "cdef";

console.log(str.includes("de"));//true,字符串是否包含de

console.log(str.endsWith("ef"));//true,字符串是否以ef结尾

console.log(str.startsWith("cd"));//true,字符串是否以cd开头

console.log(str.repeat(3));//cdefcdefcdef,str重复拼接自身3次

console.log(str.padStart(9,"ab"));//ababacdef，str开头以ab补全9-4个字符，

console.log(str.padEnd(9,"ab"));//cdefababa，str结尾以ab补全9-4个字符，

ES6新增set集合和map集合

set集合和map集合都是ES6中新增的保存数据的方式，set中保存的数据可以是任意数据类型，map中的数据以键值对的方式存在，值可以是任意数据类型

set集合：特点是自动去重，同时提供了一些非常好用的方法

1，创建集合对象

var set = new Set();定义一个set空的集合对象

2，添加数据  (数据会被自动去重)

var set = new Set( [23,43,23] );//要用[ ]的方式添加数据

//错误用法：

var set = new Set( 23,43,23 );

//使用方法添加数据

var set = new Set()

set.add( 23 ).set.add( 43 ).set.add( 23 )...

//使用Array.from(set)方法可以将set集合转换为真正的数组

var brr = Array.from(new Set(arr));

console.log(brr);//转换成了数组，并完成了数组去重

//世上最短的数组去重

var brr = [...new Set(arr)];

console.log(brr);

3，size属性

console.log(set.size);//set数据长度

4，方法的使用

set.add();向集合中添加一个值，一次只参添加一个

set.delete(val);删除集合中的某个值

set.has(val);判断集合中是否有某个值

set.clear();清空集合

5，set遍历

set.forEach( ( item ) => { console.log( item ) } );

for(var item of set){console.log( item )};

map集合

1，创建集合对象

var map = new Map();

2，添加数据

map.set("name","tom").set("phone","120").set("email","110@qq.com");

3，size属性

console.log(map.size);//键值对的个数

4，方法的使用

map.set(key,val);//添加数据

console.log(map.get(key));//根据键获取值

console.log(map.has(key));//检测key字段在中是否存在

console.log(map.delete(key));//根据key删除对应的键值

map.clear();//清空数据

console.log(map);

5，map遍历

map.forEach(function(val,key,obj){

console.log(val,key,obj);

})

for(var arr of map){

console.log(arr[0] + "=" + arr[1]);

}

ES6补充

es5 数组新增遍历方式 for of

for ... of 遍历数组：遍历结果为值 但不能遍历JSON对象，会报错

es5新增方法Array.from();

1，Array.from(obj):

将一个含有length属性的对象、集合、类数组、伪数组 转成真正的数组

2，Array.from(obj，callBack):

callBack:参数是一个回调函数，功能与数组的map方法类似

3，一道面试题：定义一个函数，功能实现 生成m个n的数组  要求： 不利用循环

function fn(m,n){

      var newArr = Array.from( { length:m },() => {

          return n;

      });

      return newArr;

}

fn(6,3);

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