05 ES6

1.ES6 简介

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

年份 	    版本 
2015年6月 ES2015 
2016年6月 ES2016 
2017年6月 ES2017 
2018年6月 ES2018 

ES6 实际上是一个泛指,泛指 ES2015 及后续的版本。

1.1 为什么ES6

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

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

2. ES6的新增语法

2.1 let

let ES6新增用于声明变量的关键字

  • let声明的变量只在所处于的块级有效

演示

<body>
    <script>
        // let a = 10
        // console.log(a);
        // 在一个大括号中,使用let关键字声明才具有块级作用域
        // var 关键字不具备这个特点
        // 防止循环变量变成全局变量
        if (true) {
            let b = 20;
            console.log(b);
        }
        // console.log(b); 无效

        // 防止循环变量变成全局变量
        for (let i = 0; i < 2; i++) {

        }
        console.log(i); //也访问不到
    </script>
</body>

注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。

  • 不存在变量提升

  • 暂时性死区

演示

<body>
    <script>
        // let a = 10
        // console.log(a);
        // 在一个大括号中,使用let关键字声明才具有块级作用域
        // var 关键字不具备这个特点
        // 防止循环变量变成全局变量
        // if (true) {
        //     let b = 20;
        //     console.log(b);
        // }
        // console.log(b); 无效

        // 防止循环变量变成全局变量
        // for (let i = 0; i < 2; i++) {
        // }
        // console.log(i); //也访问不到

        // 没有变量提升
        // console.log(a);
        // let a = 100

        // 使用let关键字声明的变量具有暂时性死区
        var num = 10
        if (true) {
            console.log(num); // 读取不到全局变量
            let num = 20 
        }
    </script>
</body> 

2.2 const

const 作用:声明常量,常量就是值(内存地址)不能变化的量

  • 具有块级作用域

  • 使用const关键字声明变量必须赋值

  • 声明常量,常量就是值(内存地址)不能变化的量

演示

<body>
    <script>
        // const 声明的变量 具有块级作用域
        // if (true) {
        //     const a = 10
        //     if (true) {
        //         const a = 20
        //         console.log(a);
        //     }
        //     console.log(a);
        // }
        // console.log(a);

        // 使用const关键字声明变量必须赋值
        // const PI

        // 声明常量,常量就是值(内存地址)不能变化的量
        const PI = 3.14
            // PI = 100 // 值无法修改

        const ary = [100, 101]
        ary[0] = 123 // 复杂数据内部可以修改
        ary = [1, 2] //重新赋值不行 
        console.log(ary);
    </script>
</body>

2.3 let const var的区别

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。

  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。

  3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。

     var 		 let 			const 
     函数级作用域  块级作用域 		块级作用域 
     变量提升     不存在变量提升 	不存在变量提升 
     值可更改 	值可更改 		值不可更改 
    

2.4 解构赋值

ES6中允许从数组中提取值按照对应位置,对变量赋值,对象也可以实现解构

数组解构

<body>
    <script>
        // 数组解构 一一对应取值
        let ary = [1, 2, 3]
        let [a, b, c, d] = ary
        let [a1, b1] = ary
        console.log(a, b, c);
        console.log(d); // 没有数据 undefined
        console.log(a1, b1); 
    </script>
</body>

对象解构

<body>
    <script>
        // 对象解构允许我们使用变量名字匹配对象属性,匹配成功则赋值
        let person = {
            name: '水井',
            age: 18
        }
        let {
            name,
            age
        } = person
        console.log(name, age);

        // 第二种写法 
        let {
            name: myname,// myname myage 属于别名
            age: myage
        } = person
        console.log(myname, myage);
    </script>
</body>

2.5 箭头函数

ES6 中新增的定义函数的方式,简化函数定义语法

()=>{}
  • 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

  • 如果形参只有一个,可以省略小括号

  • 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

演示

<body>
    <script>
        // 箭头函数
        const fn = () => {
            console.log(123);
        }
        fn()
            // 只有一句执行代码 可以省略{}  且直接是作为返回值
        const fn1 = (n1, n2) => n1 + n2
        const res = fn1(1, 2)
        console.log(res);

        // 形参只有一个,可以省略小括号
        const fn2 = n1 => n1 + 2
        const res1 = fn2(1)
        console.log(res1);

        // 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
        function fn3() {
            console.log(this);
            return () => {
                console.log(this);
            }
        }
        const obj = {
            name: "水井"
        }
        const resFn = fn3.call(obj)
        resFn()
    </script>
</body>

2.6 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum (first, ...args) { 
     console.log(first); // 10 
     console.log(args); // [20, 30]  
 } 
 sum(10, 20, 30) 

2.7 array的扩展方法

扩展运算法(展开语法)

  • 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

演示

<body>
    <script>
        // 将数组拆分成以逗号分隔的参数序列
        let s2 = [1, 2, 3]
            // array的扩展方法
        console.log(...s2); // 1 2 3
    </script>
</body>
  • 扩展运算符可以应用于合并数组。

演示

<body>
    <script>

        // 合并数组
        // 第一种方法
        let s1 = [4, 5, 6]
        let s3 = [...s2, ...s1]
        console.log(s3); // s3

        // 第二种方法
        console.log(s2.push(...s1));
    </script>
</body>
  • 将类数组或可遍历对象转换为真正的数组

演示

var oDivs = document.getElementsByTagName('div')
console.log(oDivs);
var ary = [...oDivs] // 转换之后才能调用数组的方法,如push
ary.push('a')
console.log(ary);
  • 构造函数方法 Array.from()

演示

let array = {
        '0': 1,
        '1': 2,
        length: 2
    }
let arr1 = Array.from(array)
console.log(arr1);
// 还可以接受第二个参数,作用类似于数组的map方法,用法对每个元素进行处理,然后放入返回的数组
let newAry = Array.from(array, item => item * 2)
console.log(newAry);
  • find()

用于找出第一个符合条件的数组成员,如果没有找到返回undefined

let aryfind = [{
        id: 1,
        name: 'sj'
    }, {
        id: 2,
        name: 'xj'
    }]
let target = aryfind.find((item, index) => item.id == 2)
console.log(target);
  • findIndex()

演示

// 用于找出第一个符合条件的数组成员的位置,没有返回-1
let aryfindIndex = [1, 2, 3, 10]
let index = aryfindIndex.findIndex(item => item > 9)
console.log(index);
  • includes()

表示某个数组是否包含给定的值,返回布尔值

let aryfindIndex = [1, 2, 3, 10]
console.log(aryfindIndex.includes(2)); // true

2.8 string 的 扩展方法

  • 模板字符串

ES6 新增的创建字符串的方式,使用反引号定义,可以解析变量

<script>
    let name = `水井`
    let sayHello = `你好,${name}`
    console.log(sayHello);
</script>

可以换行

let html = ` <div> 
        <span>${result.name}</span> 
        <span>${result.age}</span> 
        <span>${result.sex}</span> 
    </div> `;
console.log(html);
  • startsWith() 和 endsWith()

startsWith():表示参数字符串是否在原字符串的头部,返回布尔值

endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值

  • repeat()

repeat方法表示将原字符串重复n次,返回一个新字符串

2.9 Set数据结构

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set本身是一个构造函数,用来生成 Set 数据结构

实例方法

const s = new Set()

add(value):添加某个值,返回 Set 结构本身 

delete(value):删除某个值,返回一个布尔值,表示删除是否成功 

has(value):返回一个布尔值,表示该值是否为 Set 的成员 

clear():清除所有成员,没有返回值

遍历

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。

s.forEach(value => console.log(value)) 

演示

  <script>
    // 会自动过滤重复的值
    const s = new Set([1, 2, 2, 3])
    console.log(s.size);
    let ary = [...s]
    console.log(ary);

    // 向set结构里添加值,使用add方法
    s.add(1).add(4)
    console.log('增加', s, s.size);
    // 删除
    s.delete(2)
    console.log('删除', s, s.size);
    // 判断某个值是否存在
    const r = s.has(1)
    console.log(r);

    // clear 清空set数据结构
    s.clear()
    console.log('清空', s.size);

    const s1 = new Set([1, 2, 2, 3])
    s1.forEach(item => {
        console.log(item);
    })
</script>
posted @ 2020-06-11 09:31  xujing123  阅读(261)  评论(0编辑  收藏  举报