es6学习

ES全称EcmaScript,是脚本语言的规范,而平时经常编写的JavaScript,

        是EcmaScript的一种实现,所以ES新特性其实指的就是JavaScript的新特性

      1、语法简洁,功能丰富。

      2、框架开发应用

      3、前端开发职位要求

谁在维护ECMA-262

        TC39是推进EcmaScript发展的委员会。其会员都是公司(其中主要是浏览器厂商,有苹果、谷歌、微软、因特尔等)。TC39定期召开会议，

          会议由会员公司的代表与特邀专家出席。

为什么要学习ES6

        ES6的版本变动内容最多,具有里程碑意义

        ES6加入许多新的语法特性,编程实现更简单、高效

        ES6是前端发展趋势,就业必备技能。

1、let的使用

        let a,b,c,d

        1、变量不能重复声明。(var可以重复声明)

        2、块儿级作用域(let有这个概念、var没有)。 全局、函数、eval

        3、不存在变量提升

          console.log(song)  var song = "hhaha"   不报错

          console.log(song)  let song = "hhaha"   报错

        4、不影响作用域链

          {

            let school = "hahah"

            function fn () {

              console.log(school)

            }

            fn();

          }

2、const的使用

        //声明常量

        1、一定要赋初始值

          const A;  报错

        2、一般常量使用大写(潜规则)

          const a = 100;

        3、常量的值不能修改

          SCHOOL = 'ATGUIGU'

        4、块儿级作用域

        5、对应数组和对象的元素修改，不算做对常量的修改,不会报错

3、ES允许按照一定模式从数组和对象中提取值，对变量进行赋值。

        这被称为解构赋值

        1、数组的解构

          const F4 = ['小沈阳','刘能','赵四','宋小宝'];

          let [xiao,liu,zhao,song] = F4;

          console.log(xiao)

        2、对象的解构

          const zhao = {

            name: '赵本山',

            age: '不详',

            xiaopin: function() {

              console.log("我可以")

            }

          }

          let {name,age,xiaopin} = zhao;

          console.log(name);

          xiaopin()

4、ES6引入新的声明字符串的方式 [``] '' ""

        1、声明

          let str = `我也是一个字符串喔！`;

        2、内容中可以直接出现换行符,以前用''必须用+进行拼接。

        3、变量拼接

          let lovest = '魏翔';

          let out = `${lovest}是我的偶像`

          console.log(out)

5、ES6允许在大括号里面,直接写入变量和函数,作为对象的方法。

        //这样的书写根据简洁

        let name = '哈哈哈';

        let change = function() {

          console.log('我们可以改变你!!');

        }

        const school = {

          name,

          change,

        }

6、ES6允许使用[箭头] (=>) 定义函数

        声明一个函数

        let fn = function() {

        }

        let fn = (a,b) => {

          return a + b;

        }

        fn(1，2)

        1、this是静态的，this始终指向函数声明时所在作用域下的this的值

          function getName() {

            console.log(this.name)

          }

          let getName2 = () => {

            console.log(this.name);

          }

          //设置window对象的name属性

          window.name = '哈哈哈';

          const school = {

            name: '哈哈哈'

          }

          //直接调用

          getName();

          getName2();

          //call方法调用

          getName.call(school);

          getName2.call(school);

        

        2、不能作为构造函数实例化对象

          let Person = (name, age) => {

            this.name = name;

            this.age = age;

          }

          let me = new Person('Xiao',30);

          console.log(me);

        

        3、不能使用arguments 变量

          let fn = () => {

            console.log(arguments);

          }

          fn(1,2,3)

        4、箭头函数的简写

          1、省略小括号,当形参有且只有一个的时候

            let add = n => {

              return n + n

            }

            console.log(add(9))

          2、省略花括号,当代码体只有一条语句的时候,此时return必须省略。

            而且语句的执行结果就是函数的返回值

            let pow = (n) => n * n;

            console.log(pow(8))

        箭头函数适合与this无关的回调,定时器,数组的方法回调

        箭头函数不适合与this有关的回调, 事件回调,对象的方法

7、ES6允许给函数参数赋值初始值

        1、行参初始值 具有默认值的参数,一般位置要靠后(潜规则)

          function add(a,c=10,b) {

            return a + b + c

          }

          let result = add(1,2)

          console.log(result);

        2、与结构赋值结合

          function connect({host="127.0.0.1",username,password,port}) {

            console.log(host)

          }

          connect({

            username: 'root',

            password: 'root',

            port: 3306

          })

8、rest参数：ES6引入rest参数，用于获取函数的实参,用来代替arguments

        注意：rest参数必须要放到参数最后

        ES5获取实参的方式(获取的是一个对象)

          function date(){

            console.log(arguments)

          }

          date('柏芝','生活','小店')

        rest参数(获取的是一个数组)可以使用filter、some、every、map、

          function date(...args) {

            console.log(args);  

          }

          date('柏芝','生活','小店');

9、[...]扩展运算符能将[数组]转换为逗号分隔的[参数序列]

        //声明一个数组

        const tfboys = ['小明','小张','小二'];

        //声明一个函数

        function chunwan() {

          console.log(arguments);

        }

        chunwan(...tfboys);

          使用场景：

          1、数组的合并

            const kuaizi = ['小明','小儿','哈哈哈'];

            const b = ['生活','小店']

            const c = [...kuaizi,...b]

          2、数组的克隆

            const sanzhihua = ['a','b','c']

            const D = [...sanzhihua];

          3、将伪数组转为真正的数组

10、Symbol 基本使用;ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,它是JavaScript语言的第七种数据类型，

          是一种类似于字符串的数据类型

          Symbol特点：1、Symbol的值是唯一的,用来解决命名冲突的问题。2、Symbol值不能与其他数据进行运算。3、Symbol定义的对象属性不能使用

            for...in循环遍历,但是可以使用RellecLownKeys来获取对象的所以键名。

          USONB  you are so niubility 

            u undefined

            s string symbol

            o object

            n null number

            b boolean

11、迭代器是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,

          就可以完成遍历操作。

          1、ES6创造了一种新的遍历命令for...of循环,iterator接口主要供for...of消费

          2、原生具备iterator接口的数据(可用for of遍历)

            //声明一个数组

            const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

            //使用for...of 遍历数组(键值)  使用for...in 遍历数组(键名)

            for(let v in xiyou) {

              console.log(v)

            }

          3、工作原理

            a、创建一个指针对象,指向当前数据结构的起始位置。

            b、第一次调用对象的next方法,指针自动指向数据结构的第一个成员

            c、接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员

            d、每调用next方法返回一个包含value和done属性的对象。

          注意：需要自定义遍历数据的时候,要想到迭代器。

          let iterator = xiyou[Symbol.iterator]();

          //调用对象的next方法

          console.log(iterator.next());

          案例

          const banji = {

            name: "终极一班",

            stus: [

              'xiaoming',

              'xiaohua',

              'xiaotian',

              'knight'

            ],

            [Symbol.iterator]() {

              //索引变量

              let index = 0;

              let _this = this;

              return {

                next: function() {

                  if(index < _this.stus.length) {

                    const result = {value: _this.stus[index],done:false}

                    //下标自增

                    index++;

                    //返回结果

                    return result;

                  }else {

                    return {value: undefined, done: true};

                  }

                }

              }

            }

          }