ES6新特性（上）

ES6 新特性
现在使用主流的前端框架中，如ReactJS、Vue.js、angularjs等，都会使用到ES6的新特性，作为一名高级工程师而言，ES6也就成为了必修课
1.1、了解ES6
ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，己于 2015 年 6 月正式发 布。
它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言
1.1.1.什么是ECMAScript？
来看下前端的发展历程：
web1.0时代：
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可
web2.0时代：
1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript 标准
所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现
ES6介绍到这里，有兴趣的小伙伴可以百度看一下发展历史和演变，接下里演示功能
let 和 const 命令
let个var都是定义变量的，我们先来看看var和let有啥区别
代码：

<script>

        for ( var i = 0; i < 5 ; i++) {
            console.log(i);//打印i的日志

        }
         console.log("循环外面的数字----->>>"+i);//循环外面打印i的日志
         </script>

结果:

可以看到var定义的变量在for循环里面但是for循环外面还能能获取到i到值的所以断定var定义的变量是全局的接下来看let的效果
代码：

<script>

        for ( let i = 0; i < 5 ; i++) {
            console.log(i);//打印i的日志

        }
         console.log("循环外面的数字----->>>"+i);//循环外面打印i的日志
         </script>

结果：

可以看到页面直接报错显示这个变量未定义到这里小伙伴就能看清楚var和let的区别啦

var和const的区别
代码：

 var  a = 1;
        console.log(a);
        a = 2;//重新赋值
        console.log("重新赋值以后的a------>>"+a);//打印重新赋值以后的a

结果：

可以看到var的变量到下面被重新赋值了但是const就不一样了，看效果
代码：

const   a = 1;//定义a为常量和java里面的fina比较像
        console.log("a" +a);
        a = 2;
        console.log("重新赋值的a》》》》"+a);

结果：

可以看到用const 定义的变量不能被修改是不是和java里面的fina很像？？

1.3、字符串扩展

• includes() ：返回布尔值，表示是否找到了参数字符串。
• startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

代码：

 let  str  = "Hello heima";
        console.log(str,"中是否包括了heima =>",str.includes("heima"))
        console.log(str,"中是否包括了heima =>",str.includes("beima"))
        //startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部
        console.log(str,"中是否以H开头 =>",str.startsWith("H"))
        console.log(str,"中是否以h开头 =>",str.startsWith("h"))
        //endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部
        console.log(str,"中是尾部是否a结束 =>",str.endsWith("a"))
        console.log(str,"中是尾部是否a结束  =>",str.endsWith("b"))

结果：

字符串模板
ES6中提供了`来作为字符串模板标记。我们可以这么玩：

代码：

 //以了`来为标记
        let str = `Hello
                   aa
                    bb`;
        console.log(str)

结果：

可以看到代码中我们并没有用什么特殊字符来进行换行，但是ES6新特性中的字符串可以帮我们进行换行，这功能还是不错的，在两个`之间的部分都会被作为字符串的值，可以任意换行。

1.3、解构表达式
什么是解构？ – ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (Destructuring)。
1.3.1、数组解构
代码：

       //解构
        //比如有这么一个数组
        let arr = [1,2,3];
        //之前想获取这个数组里面的值只能靠下标，现在我们可以这样
        const  [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
        //打印
        console.log(x,y,z)
        const  [a] = arr;//只匹配一个参数
        console.log(a);
        

结果：

1.3.2、对象解构
例如有个person对象：

const  person = {
            name : '熊大',
            age : '26',
            sex :  ['男','女','人妖']
        }
        

我们可以这么做：
const {name ，age ，sex } = person;
console.log(name);
console.log(age);
console.log(sex);
结果：

如过想要用其它变量接收，需要额外指定别名：
{name:n} ：name是person中的属性名，冒号后面
{name:n} ：name是person中的属性名，冒号后面的n是解构后要赋值给的变量

函数优化
在ES6中，对函数的操作做了优化，使得我们在操作函数时更加的便捷。
1.4.1、函数参数默认值
在没有ES6新特性之前我们对方法里面的参数是这样进行默认值的
代码：

        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
        function  acc(a,b) {
            b = b || 1;
            return a + b;
        }
        console.log(acc(10)+"旧特性结果")//传入一个参数
        

结果：

然后ES6新特性出来了可以这样写
代码：

 //给参数设置默认值
        function  add(a, b = 6) {

            return a + b;
        }
        console.log(add(10)+"新特性结果")

结果：

可以看到在参数里面直接写入默认值这方法是可行的
时间不早了，睡觉了明天继续更新，还在学习的小伙伴的记得要早点睡觉哦
未完待续。