ES6 你母鸡啦的事

0.前言

首先，先祝大家圣诞节快乐，接下来森哥又来开车了啊!!!想上车的尽快买票啊!!!今天想和大家聊一聊我对ES6的新特性理解，那么，不懂得编程的人，心里是不是在想这TM是啥，那好我来告诉你这TM是什么。

</br>

1.简介

ES6是ECMAScript6.0版本的简称，因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

详细请点击这里

2.说说我对ES6新特性的认识

  1. let和const
  1. 解构赋值
  2. 箭头函数 ()=>{}
  3. 展开运算符
  4. includes
  5. class
  6. Set()和Map()

3.代码实现

3.1 let
let 命令定义变量的
{
          {
            // console.log(b);//undefined
            // console.log(a);//没有声明的提升  报错
            let a = 10;//块级作用域变量
            var b = "abc";//全局作用域变量
            console.log(a);//10
            console.log(b);//abc
            var b = true;
            console.log(b);//true
            // let a = "aaa"; //报错
            // let b = "bbb";//报错
          }
            // console.log(a);//报错!
}
        // console.log(a);//报错!
        console.log(b);//true
这些报错的是为什么呢？那么继续看下去吧！！！

</br>

ES5
1.var 全局作用域 函数作用域
2."声明提升"可以在声明之前或者声明之后来使用这个变量
ES6 新增
let 声明块级作用域变量
** 注意**

  1. let没有声明提升，必须先声明后使用。
  2. let声明的变量不能与前面let var const声明的变量重名
3.1.2 const
const 命令用来声明常量(常量不能修改，也可以说成是只读变量)
const PI = 3.1415926;//只读变量
        // PI = 200 // 报错 const声明的变量必须初始化 一旦初始化完毕就不允许更改
        {
            const VERSION = "1.0.1";
            console.log(VERSION);
        }
        // console.log(VERSION);//报错
这又是为啥呢，怎么又会报错了呢！因为...

</br>

const 是常量修饰符
注意

  1. const声明的变量，必须在声明的同时进行赋值
  2. const声明的变量也是一个块级作用域常量；
  3. const声明的变量没有声明提升，必须先声明后使用
  4. const声明的变量不能与前面let var const声明的变量重名

3.2解构赋值

解构赋值:对某种结构进行解析，然后将解析出来的值赋值给相关的变量
3.2.1 数组解构赋值
1.
var [a,b,c] = [11,12,13];
console.log(a,b,c);//输出11,12,13
2.赋值要结构一样，要不然就会......
var [e,f,g,k] = [[1,[2,3],5]];
console.log(e,f,g,k);//输出[1, Array[2], 5] undefined undefined undefined
3.正确的赋值
var [e,f,g,k] = [1,2,3,5];
console.log(e,f,g,k);//输出1,2,3,5
3.2.2 对象解构赋值
var {name,age} = {name:"张三",age:"20"}
console.log(name,age);//输出 张三，20
3.2.3 字符串解构赋值
var [a, b] = "str";
console.log(a,b);//输出a:s b:t
3.2.4 解析json数据
var jsonData = {"name":"tom","age":20,"sex":"男"};
var {name,age,sex} = jsonData;
console.log(name,age,sex);输出//tom 20 男
3.2.5 应用
//应用
var f1 = 88;
var f2 = 99;
[f1,f2] = [f2,f1];
这里是把f1的值赋给f2，f2的值赋给f1.
console.log(f1,f2);//输出99,88

3.3箭头函数

ES6可以使用“箭头”（=>）定义函数
3.3.1 具有一个参数的简单函数
var func1 = a => a
console.log(func1("hello, world")) //输出 hello, world
3.3.2 没有参数的函数
//没有参数的函数
var func2 = ()=>{console.log("没有参数");};//输出 没有参数
func2();
3.3.3 多个参数
//多个参数的函数
var func3 = (a,b)=>{console.log(a,b);};//输出 1000,100
fun3(1000,100);
3.3.4 应用
//打印计算1+2+....+100和
 var fun4 = (sum)=>{
    var sum = 0;
    for(var i = 0; i <= 100; i ++){
        sum += i; 
    }
    console.log(sum);//输出 5050
}
fun4();

3.4展开运算符

展开运算符就是三个点(...)，可以将数组转为用逗号分隔的参数序列
3.4.1 关于数组展开运算符
// 关于数组 展开运算符 ...
var arr = [1,2,3,4,5];
正常打印结果
console.log(arr);//输出 [1, 2, 3, 4, 5]
加上展开运算符之后打印的结果
console.log(...arr);//输出 1 2 3 4 5
3.4.2函数中传参(传递数组)的时候
function fun5(a,b,c,d,e,f){
    console.log(a,b,c,d,e,f);
}
正常打印结果
fun5([1,2,3,4,5,6]);//输出 [1, 2, 3, 4, 5, 6] undefined undefined undefined undefined undefined
加上展开运算符之后打印的结果
fun5(...[11,22,33,44,55,66]);//输出 11 22 33 44 55 66
至于为什么是undefined那么你就要去看看前面的解构赋值了，那么我在这里就不做解释了。

</br>

3.5 includes

includes是用来表示某个数组是否包含给定的值
3.5.1 在数组中
var str1 = [1,2,3,4];
console.log(str1.includes(1));//输出 true
3.5.2 在字符串中
var str2 = "hello";
console.log(str2.includes("e"));//输出 true
var str3 = "hello";
console.log(str3.includes("e",3));//输出 false

includes("字符"，startIndex)查找可以输入参数也可以不输入参数，如果不输入参数，就默认从第0位下标处开始查找，如果你输入参数，就从你输入的startIndex下标开始查找，一开始输入的参数3，因为从下标3之后没有e这个字符，所以str3的输出结果是false

3.6 class

class是ES6创建对象的方式
3.6.1 ES5字面量法创建对象
var dog = {
    name:"毛毛",
    age:3,
    color:"yellow",
    bark:function(){
         console.log("汪汪汪");
    }
}
dog.bark();// 汪汪汪
console.log(dog.name);// 毛毛
3.6.2 ES5构造函数法创建对象
function Dog(name,age,color){
    this.name = name;
    this.age = age;
    this.color = color;
}
 Dog.prototype.bark = function(){
    console.log("汪汪汪汪");
 }
实例的对象
var d1 = new Dog("豆豆",2,"black");
console.log(d1);// 输出Dog {name: "豆豆", age: 2, color: "black"}
下面咱们看一下跟ES5做个比较，ES6是怎样创建对象的......
3.6.3 ES6的class命令创建对象
class Dog{
    constructor(name,age,color){
        //构造函数
        //给对象添加普通属性
        this.name = name;
        this.age = age;
        this.color = color;
    }
    //注意：如果不写构造函数，有一个默认的构造函数
    //constructor(){
         //对，如果你不写构造函数，我就是那个默认的构造函数
    //}
    bark(){
        console.log("汪汪汪");
    }
}

var d2 = new Dog("花花",1,"white");
console.log(d2);//输出 Dog {name: "花花", age: 1, color: "white"}
d3.bark();//输出 汪汪汪
这时有人该说那么还不懂怎么办，凉拌_那好，我把绝招也告诉你吧!
3.6.4 ES6创建对象的固定模式
//class创建一个类
class 类名 {
    constructor(){
        //在这里写它应有的属性
    }
    //在这下面写它应有的方法
    method(){

    }
    
}

3.7 Set()和Map()

</br>

3.7.1 Set()

</br>

Set()是 ES6新增的有序列表集合(set中的元素是没有重复的)

</br>
Set()可以调用 add()、has()、delete()、clear()等方法

add()

var s = new Set();
add()向set中添加元素
add(1) ;
console.log(s);// 输出 Set {1}  这样我就把1添加到了set这个对象中
console.log(s.size)//输出 1  size可以获取set集合中元素个数

has()

console.log(s.has(1));//输出 true  判断指定的值是否在set集合中 存在返回true 不存在返回false

delete()

//delete(value) 删除指定的元素
s.delete(1);
console.log(s); //输出  Set {}  就把Set里面的1元素删除了

clear()

//clear()清空集合
现在添加一个元素到set里，让它里面不是一个元素
s.add(2);
console.log(s);//输出 Set {1，2}
s.clear();
console.log(s);//输出 Set {}  就把Set里面的集合清空了
应用 数组去重
1.
var s2 = new Set([1,2,2,3,4,4,5]);
console.log(s2);//输出 Set {1, 2, 3, 4, 5}
2.
var arr = [1,1,2,2,2,3,4,4,5];
arr = Array.from(new Set(arr));
console.log(arr);//输出 [1, 2, 3, 4, 5]

</br>

3.7.2 Map()

</br>

Map()是 ES6新增的有序键值对集合，键值对是 key 和 value，通过设置 set(key, value) 方法为 Map().

Map()同样可以调用 add()、has()、delete()、clear()等方法

add()

var map = new Map();
//set(key,value) map是用来存放 键值对 key/value
map.set("name","张三");
map.set("age",20);
console.log(map);//输出 Map {"name" => "张三", "age" => 20}
//get(key) 获取key的值
console.log(map.get("name"));//输出 张三

has()

//has(key) 判断是否存在某个键值对
console.log(map.has("age"));//输出 true

detele()

//delete(key) 删除这个键，返回true则成功，false则不成功
map.delete("name");
console.log(map);//输出 true

clear()

//clear()清空map集合
map.clear();
console.log(map);//输出 Map {}

4.结束语

哎，经过我日夜奋斗，挑灯夜战，终于写完了，你什么表情啊！我就夸张一下，我现在可以体会到那些作家的不容易了，写作可以说一件很愉快的事情，但也挺累人的，总而言之，言而总之，希望我写的东西可以对你有所帮助，当然，如果你觉得我哪里写错了，请跟我联系！！！
最后，求分享，求点赞，求上热门，帅哥，美女们给力哦！！！

</br>
</br>

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

推荐阅读更多精彩内容

  • 你不懂JS：ES6与未来 第二章：语法（上）
    官方中文版原文链接 感谢社区中各位的大力支持，译者再次奉上一点点福利：阿里云产品券，享受所有官网优惠，并抽取幸运大...
    HetfieldJoe阅读 3,023评论 3赞 37
  • ES6的新特性
    一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6（亦称 ...
    一岁一枯荣_阅读 6,047评论 8赞 25
  • ES6 变量的解构赋值
    1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 ...
    卞卞村长L阅读 916评论 0赞 0
  • ES6 数组的解构赋值
    基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring...
    嘉奇呦_nice阅读 789评论 0赞 2
  • 两座城市
    你在遥远的那方， 我从没去过， 因为太遥远。 我在这座孤岛 时常盼着月亮， 可又觉得能再多一些星星就好了。 月亮也...
    幽幽淡墨痕阅读 194评论 1赞 3