ES6十分钟速通

ES6十分钟速通

提问：为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

一.基础语法

1.经典案例

body部分

    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">

JavaScript部分

    let btns = document.querySelectorAll('input')
        console.log(btns)
        for (let i = 0; i < btns.length; i++) {
            const btn = btns[i];
            btn.onclick = function () {
                alert(this.value)
            }
        }

此案例为经典的绑定事件利用for循环实现单击选择

小结

• let关键字就是用来声明变量的
• 使用let关键字声明的变量具有块级作用域
• 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
• 防止循环变量变成全局变量
• 使用let关键字声明的变量没有变量提升
• 使用let关键字声明的变量具有暂时性死区特性

2.常量const

   <script>
        // 1.常量不可以被更改
        const a = 100
        // a = 200;
        console.log(a)
        // 2.定义的时候必须赋值
        let str;//先定义
        str = 'abc'//在赋值
        const STR;
        STR = 'xyz'//常量STR不解析当前行
        console.log(STR)
        // 3.命名：如果是一个大自然存在的常量，我们习惯用大写
        const PI = 3.14
    </script>

小结

• const声明的变量是一个常量
• 既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值
• 声明 const时候必须要给定值

*拓展 *

let、const、var 的区别

• 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
• 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
• 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

3.解构（★★★）
数组的解构赋值

   let stus = ['小红帽', '大灰狼', '老奶奶']
   let xhm = stus[0]//访问数组数据
   console.log(xhm);//取到小红帽
   let [xhm, dhl, lnn] = stus
   console.log(xhm);//小红帽
   console.log(dhl);//大灰狼
   console.log(lnn);//老奶奶
   //如果解构不成功，变量的值为undefined

   let arr = ['a','b','c']
   let arr2 = [0,1,2]
   //解构数组
   //let [a,b,c] = arr
   //只解构第一个
   //let [a] = arr
   //let [,b,] = arr
   //alert(b)
   //合并数据：解构的反向使用
   //let longArr = [...arr,...arr2]
   //console.log(longArr);

   //解构2个并把剩余的放在一起：剩余参数rest
   let [a,b,...newArr] = arr
   //alert(b)
   //alert(newArr[0])

   //默认值
   let [n1,n2,n3,n4=8] = arr2
   alert(n4)

对象的解构赋值

   let xhmObj = {
       name: '小红帽',
       gender: '女',
       age: 18
    }
    //对象在进行解构操作的时候，变量必须与源对象属性一一对应，
    //但是可以为变量起另外的别名
    let { name:xhmName, gender, age } = xhmObj
    console.log(xhmName);
    //基本解构：重命名属性————如果重命名，原属性将失效

小结

• 解构赋值就是把数据结构分解，然后给变量进行赋值
• 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
• 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
• 利用解构赋值能够让我们方便的去取对象中的属性跟方法

二.箭头函数

ES6中新增的定义函数的方式。

() => {} //()：代表是函数；=>：必须要的符号， 指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn

1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
2. 如果形参只有一个，可以省略小括号
3. 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

   <script>
        //计算两个数组的和
        function sum(a,b){
            let c = a+b
            console.log(c);
        }
        sum(2,3)

        //箭头函数：参数，箭头， 语句，
        let numsum = (a,b) =>a+b
        console.log(numsum(2,5));
        //如果函数有返回值
        let result = n=>n*2//单句箭头函数默认返回结果
        console.log(result(5));
        //有返回值的函数
        let rs =function(n){
            return n*2
        }
        console.log(rs(3));
    </script>

三.新增方法

例：

forEach()	map
forEach()	map()
filter()	some()
startsWith()	endsWith()
trim()	includes()
find()	findIndex()

实例：

<script>
        //forEach方法是循环遍历数组的
        let arr = [0,2,5,8,34,55,35,236,557,56,88]
        //为每一项进行+10的操作
        // arr.forEach(function (item,index,a) {
        //     console.log(a);
        // })
        //arr.forEach(item => alert(item + 10))


        //map方法 有返回值 需要接收
        let result = arr.map(item => item + 10)
        console.log(result);

        //filter方法 过滤数组
        let newArray = arr.filter(item => item > 10)
        console.log(newArray);


        //some方法 有返回值 返回值为BOOlean类型 
        //数组中有至少一个元素通过回调函数的测试就会返回true；
        //所有元素都没有通过回调函数的测试返回值才会为false。
        let ssoo = arr.some(item => item > 10)
        console.log(ssoo);
        

        //trim方法 去掉字符串两端的空格  （字符串中间的不去除）
        let ms = '张 璐璐  是   靓仔'
        console.log(ms.trim());


        //startsWith方法 查看参数字符串是否在原字符串的头部，返回布尔值
        console.log(ms.startsWith('张',0));

        //endsWith方法 查看参数字符串是否在原字符串的尾部，返回布尔值
        console.log(ms.endsWith('仔'));


        //数组的三个方法：find  findIndex includes
         
        //find() 用于找出第一个符合条件的数组成员，如果没有找到返回undefined
        let array1 = [5, 12, 8, 130, 44]
        console.log(array1.find(item => item > 10))


        //findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
        console.log(array1.findIndex(item => item > 13))

        //includes() 判断某个数组是否包含给定的值，返回布尔值。
        console.log(array1.includes(12))
        
      </script>

四.class

class类就是构造函数的语法糖
语法：

class MyClassName{
            constructor(参数){
            }
            method1(){}
            method2(){}
            method2(){}
        }

实例：

<script>
        //创建对象
        let obj = {}
        //使用构造函数创建对象
        let obj2 = new Object();
        //构造函数 可批量创建对象的函数 命名时首字母大写 必须使用new关键字执行
        function Animal(name,legs) {
            this.name = name
            this.legs = legs
            this.sayHi = function () {
                console.log(`${this.name}说：${this.legs}`)
            }
        }
        //实例化对象
        let dog = new  Animal('狗子','四条腿')
        let cat = new Animal('猫猫','四条腿')
        //console.log(dog);
        dog.sayHi()
        //class
        class AnimalClass{
            constructor(name,legs){
                this.name = name
                this.legs = legs
            }
        }
        let rabbit = new AnimalClass('兔子','四条腿')
        console.log(rabbit);
    </script>

创建一个基本类与方法

<!-- 创建一个基本类与方法 -->
    <script>
        class Hero{
            constructor(cname,ctype,cword){
                this.cname = cname
                this.ctype = ctype
                this.cword = cword
            }
            sayWord(){
                alert(`${this.cname}说${this.cword}`)
            }
        }

        //实例化创建
        /*let aql = new Hero('安琪拉','法师','知识就是力量')
          let yj = new Hero('虞姬','射手','明媚如风，轻盈似箭')
          let ak = new Hero('艾克','刺客','时间不在于我们拥有多少，而在于如何使用')
          aql.sayWord()
        */
        
        //细化类：创建子类 extends  super.调用父类的方法[作为对象]
        class Mage extends Hero{
            constructor(cname,ctype,cword,way){
                super(cname,ctype,cword)//使用this之前子类要调用super【作为方法使用】
                this.way = way
            }
        }

        let aql = new Mage('安琪拉','法师','知识就是力量') 
        console.log(aql);
        aql.sayWord()

        //css预处理器   sass  不用{} 不用： 不用；
        //div font-size 10px
    </script>

五.set数据解构

Set 数据结构：

• 它类似于数组，但是成员的值都是唯一的，没有重复的值。
• Set本身是一个构造函数，用来生成 Set 数据结构

<script>
        //定义一个数组
        let arr = new Array();
        arr = [1,2,3]
        //定义一个对象
        let obj = new Object();
        obj = {}


        //Set 数据结构
   
        let s = new Set([0,3,5,9,3,'abc'])
        s.add('acc').add(99)
        console.log(s);

        
        //set实例方法
        //add(value)：添加某个值，返回 Set 结构本身
        s.add(1).add(2)//向 set 结构中添加值

        // delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
        s.delete(2)// 删除 set 结构中的2值

        // has(value)：返回一个布尔值，表示该值是否为 Set 的成员
        s.has(1)// 查询 set 结构中是否有1这个值 有true 无false

        // clear()：清除所有成员，没有返回值 
        //s.clear() //删除的是元素的值，不是代表的索引

        //size: 当前数据解构的长度
        console.log(s.size);
    </script>

六.map

<script>
        let mapList = new Map([
            ["a","小红帽"],
            ["b","大灰狼"],
            ["c","老奶奶"],
        ]);//初始化数据类二维数组

        mapList.set('name','爱丽丝')//添加键值对
        let newVal = mapList.get('b')

        console.log(newVal);

        //将一个普通对象，转化成map数据解构
        let  zllObj = {
            name:'张璐璐',
            like:'干饭王'
        }
        let mapZll = new Map(Object.entries(zllObj))
        console.log(mapZll);
    </script>

♥此文章部分来源网络，侵删。感谢大家观看，么么叽！