ES6特性第一部分

2019-09-26 本文已影响0人 Aniugel

一、常用特性图解

image.png

二、ECMA介绍、名称、版本

ES6   ->  ECMA  标准
|实现
js

ES7  ES8.....(一般大改动才会用这种版本，但是很多人这么命名就通俗化了)
ES5.x
ECMA-262    ->   ES1.0
--------------------------------------------
ES2015
ES6  ->   2015年6月    ES6.0

每年6月份，发布一个版本

2016年6月    ES6.1    ES7     ES2016
2017年6月    ES6.2(async await)   ES8     ES2017

ESnext
---------------------------------------------
ESnext  '下一代 js'语言
----------------------------------------------
任何人都可以向 标准委员会 (TC39), 要求更改语言标准

**提案变成标准，经历5个阶段**
Stage 0 展示阶段
Stage 1 征求意见阶段
Stage 2 草案阶段
Stage 3 候选阶段
Stage 4 定案阶段(标准)

babel
----------------------------------------------
https://github.com/tc39/ecma262
----------------------------------------------

react， vue, angularJs， angular
chrome,    对新的语法支持，速度还挺猛
----------------------------------------------
ES6环境:
webpack3.x
Traceur

三、let const 详解

关于定义(声明)变量:
之前: var a=12;=>作用域:全局，函数作用域
现在： let a=12;=>相当于之前的 var
常量: const => 定义好了不能改变

let注意:
1. 没有预解析，不存在变量提升，在代码块内，只要let定义变量，在之前使用，都是报错先定义完，再使用
2. 同一个作用域里，不能重复定义变量
3. for循环，for循环里面是父级作用域，里面又一个

//块级作用域:
{
    //块级作用域
}
        
{{{{let a = 12}}}}//多层大括号

if(){xx}
for(){}
while(){}

var 存在预解析

    var a = 12;
    function fn() {
        console.log(a)//undefined 函数预解析  变量提升
        var a = 10;//等于下面

        // var a;
        // console.log(a)//undefined
        // a = 5;
    }
    fn()

let 不存在函数预解析变量提升

    let a = 12;
    function fn() {
        // console.log(a)//let 不存在函数预解析  变量提升 TDZ开始 暂时死区
        // let a = 5;//报错 TDZ 暂时死区结束

        let a = 5;//要先声明赋值 再使用
        console.log(a)//let 不存在函数预解析  变量提升
    }
    fn()

let 同一个作用域里，不能重复定义变量

    var a = 5;//直接在window中
    console.log(a in window)//false
    console.log('a' in window)//true
    // var a = 10;//var 可以再次定义会覆盖

    let b = 10;
    console.log('b' in window)//false
    // let b=12;//报错 let同一个块级作用域不能重复声明
    {
        let b = 5;
        b = 1000;//给b赋值
        console.log(b)//1000  这样可以
    }
    console.log(b)//10  外面的b


    // 关于全局变量 in 
    window.a = 1;

    a in window;   //返回false
    'a' in window;  //返回true


    //这个貌似是正常的，和我们理解的一样
    var xx = 1;
    console.log(xx in window);   //false
    console.log('xx' in window); //true 


    //但是这个就有点奇怪了，只声明变量，结果两种情况返回的的都是true，
    var x;
    console.log(x in window);    //true
    console.log('x' in window);  //true
    console.log(x); //undefined    我们打印下X 发现X其实就是undefined
 // 所以其实  x in window 等价于  undefined in window 所以为true

for中的let

    {
        let a = 11;
        {
            let a = 12;
            console.log(a)//12
        }
        console.log(a)//11

    }
    // for中的 var
    for (var i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log(i)//5

    // 等于下面的代码
    // var i = 0;
    // for (; i < 5; i++) {
    //     console.log(i)
    // }
    // console.log(i)//5

    // for中的 let

    for (let i = 0; i < 5; i++) {
        console.log(i)
    }
    console.log(i)//报错 for就是个块级作用域

    var arr = []
    for (var i = 0; i < 5; i++) {

        arr[i] = function () {
            console.log(i)
        }

    }
    arr[4]()//5

    var arr = []
    for (let i = 0; i < 5; i++) {

        arr[i] = function () {
            console.log(i)//let可以缓存变量  就可以不用闭包了
        }

    }
    arr[4]()//4
<body>
    <input type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
    <script>
        var aInput = document.querySelectorAll('input');
        for (let i = 0; i < aInput.length; i++) {
            aInput[i].onclick = function () {
                console.log(i)//let可以缓存变量  就可以不用闭包了
            }
        }
        // 闭包方法
        for (var i = 0; i < aInput.length; i++) {
            (function (i) {
                aInput[i].onclick = function () {
                    console.log(i)//let可以缓存变量  就可以不用闭包了
                }
            }(i))
        }
    </script>
</body>

const: 特性和let一样
1.const定义变量不能修改
2.const定义完变量，必须有值，不能后赋值，不能修改
3.Object.freeze(对象)

        const a = 13;
        // a = 12;//此处不能赋值 因为常量不能赋值
        console.log(a)//13
        function fn() {
            // var a;
            // console.log(a)//12
            // a = 12

            // let a;
            // console.log(a)//undefined
            // a = 12

            // const a;
            // console.log(a)//报错
            // a = 12

            const a = 5; //必须先声明赋值再使用
            console.log(a)//5
        }
        fn()

        // const arr 数组可以赋值
        const arr = ['apple', 'banana']
        arr.push('orange')
        console.log(arr)//["apple", "banana", "orange"]

const config={
    host:
    username:
    password:
    version:
}       
{
    //TODO
}

IIFE //即时函数（立即执行函数）
(function(){
    //TODO
})()

建议:
以后就用 let 不要在使用var
const http = require('http');

四、解构赋值:

非常有用，特别在做数据交互 ajax

let [a,b,c] =[12,5, 6];

注意: 左右两边，结构格式要保持一致

        // let [a, b, c] = [12, 3, 'k']
        // console.log(a, b, c)//12 3 "k"

        // 属性名称要一一对应
        // let { name, age, job, f, arr } = {
        //     name: 'Strive',
        //     age: 18,
        //     job: '码畜',
        //     arr: [
        //         { name: 'liu' },
        //         { name: 'zhao' }
        //     ]
        // };
        // console.log(name, age, job, f)//Strive 18 码畜 undefined
        // console.log(name, age, job, arr)//Strive 18 码畜 (2) [{…}, {…}]

        // let json = {
        //     name: 'Strive',
        //     age: 18,
        //     job: '码畜',
        //     arr: [
        //         { name: 'liu' },
        //         { name: 'zhao' }
        //     ]
        // };
        // let { name: n, age: g, job: f, arr } = json;
        // console.log(n, g, f, arr)//Strive 18 码畜 (2) [{…}, {…}]

        // let [a, b, c] = ['a', 'b']
        // console.log(a, b, c)//a b undefined

        // 传undefined和上面不传参数是一样的 传null和‘’都是有值
        // let [a, b, c] = ['a', 'b', undefined]
        // console.log(a, b, c)//a b undefined

        // let [a, b, c = 'no-data'] = ['a', 'b']
        // console.log(a, b, c)//a b no-data

        // let a;
        // //先用let定义没有赋值  要用小括号括起来  不然大括号直接暴露在外面  会起到块级作用域的
        // ({ a } = { a: 'apple', b: 'banana' });
        // console.log(a)

        // a,b相互赋值 不用找中间值
        // let a = 12;
        // let b = 10;
        // [a, b] = [b, a]
        // console.log(a)//10

        // function fn() {
        //     return {
        //         leftVal: 10,
        //         topVal: 20
        //     }
        // }

        // let { leftVal, topVal: t } = fn();
        // console.log(leftVal, t)//10 20

        function fn({ a, b = '默认值' }) {
            console.log(a)//1
        }
        fn({
            a: 1,
            b: undefined
        })

五、字符串模板:

字符串模板：
优点: 可以随意换行
    `  ${变量名字}`

let name ='Strive';
let age = 18;
let str = `这个人叫${name}, 年龄是 ${age}岁`;

关于字符串一些东西:
字符串查找:
        str.indexOf(要找的东西)   返回索引(位置) ，没找到返回-1
        str.includes(要找的东西)   返回值  true/false

        判断浏览器:  includes

        http://www.xxx.xx

        字符串是否以谁开头:
            str.startsWith(检测东西)

            检测地址
        字符串是否以谁结尾:
            str.endsWith(检测东西)

            .png

        重复字符串:
            str.repeat(次数);
填充字符串:
        str.padStart(整个字符串长度, 填充东西)   往前填充
        str.padEnd(整个字符串长度, 填充东西)    往后填充

        str.padStart(str.length+padStr.length, padStr)

        // if (navigator.userAgent.indexOf('Chrome')) {
        //     console.log('是chrome')
        //     console.log(navigator.userAgent)
        // } else {
        //     console.log('不是chrome')
        // }
        // let str = "https://www.baidu.com"
        // let str1 = "demo.png"
        // let str2 = "开始了"
        // console.log(str.startsWith('http'))//字符串以什么开始
        // console.log(str1.endsWith('png'))////字符串以什么结束
        // console.log(str2.repeat(1))//重复次数不能是负数 0次为空支付串
        // console.log('a'.padStart(5, 'x'))
        // console.log('a'.padEnd(1, 'x'))//a
        // console.log('a'.padEnd(0, 'x'))//a
        let str = 'a'
        let padStr = 'xxx'
        console.log(str.padStart(str.length + padStr.length, padStr))

六、默认函数、箭头函数、剩余函数

    1. 函数默认参数
        function show({x=0,y=0}={}){
            console.log(x,y);
        }
        show()
    2. 函数参数默认已经定义了，不能再使用let，const声明
        function show(a=18){
            let a = 101;  //错误
            console.log(a);
        }
        show()

扩展运算符、Reset运算符:
    ...

    展开数组

    ... :
        [1,2,3,4]  -> ... [1,2,3,4]  ->  1,2,3,4,5
    ...:
        1,2,3,4,5  -> ...1,2,3,4,5  ->  [1,2,3,4,5]

    剩余参数: 必须放到最后

箭头函数:
    =>

    let show = () => 1;

    () => return东西

    () =>{
        语句
        return
    }

    注意:
        1. this问题, 定义函数所在的对象，不在是运行时所在的对象
        2. 箭头函数里面没有arguments, 用  ‘...’
        3. 箭头函数不能当构造函数

        // function fn(a, b) {
        //     a = a || '欢迎';
        //     b = b || '光临';
        //     console.log(a, b)
        // }
        // fn('hello', 'world')//hello world
        // fn('hello')//hello 光临
        // fn('', undefined)//欢迎 光临
        // fn(null, undefined)//欢迎 光临
        // // fn(, undefined)//第一个参数不传报错

        // function fn(a = '默认1', b = '默认2') {
        //     console.log(a, b)
        // }
        // fn(false)


        // function fn({ x, y }) {
        //     console.log(x, y)
        // }
        // fn({ x: 1 })//1 undefined

        // function fn({ x = 0, y = 0 } = {}) {
        //     console.log(x, y)
        // }
        // fn()//0 0

        // 函数参数默认已经定义了，不能再使用let，const声明
        // function fn(a = 18) {
        //     let a = 101;//报错
        //     console.log(a)
        // }
        // fn()

        // 三个点

        // let arr = ['apple', 'banana', 'orange']
        // let arr1 = arr
        // console.log(arr)//["apple", "banana", "orange"]
        // console.log(arr1 === arr)//true
        // console.log(...arr)//apple banana orange
        // // console.log(typeof (...arr))//报错
        // console.log([...arr] === arr) //false 复制一个数组方法一

        // 复制一个数组方法二
        // let arr = [1, 2, 3, 4]
        // arr2 = Array.from(arr)
        // console.log(arr, arr2)
        // console.log(arr === arr2)


        // 方法1
        // function fn(...a) {
        //     console.log(a)//变成数组
        // }
        // fn(1, 2, 3, 4)

        // function fn() {
        //     console.log(Array.prototype.slice.call(arguments))//数组
        // }
        // fn(1, 2, 3, 4)

        // function fn(a, b, c) {
        //     console.log(a, b, c)// 1 2 3 
        // }
        // fn(...[1, 2, 3])

        // function fn(a, b, ...c) {
        //     console.log(a, b, c)// 1 2 [3]
        //     console.log(c)// [3]
        // }
        // fn(...[1, 2, 3])

        // function fn(a, b, c, d, e) {
        //     console.log(a, b, c, d, e)// 1 2 3 4 undefined
        // }
        // fn(1, 2, 3, 4)

        // let json = {
        //     a: 1,
        //     b: 2,
        //     c: 3
        // }
        // console.log(...json)//报错
        // let arr = Array.from(json)
        // console.log(arr)//[]


        // let str = 'a-b-c';
        // // let arr = Array.from(str)
        // let arr = str.split('')//和上面一样
        // console.log(arr)


        // var id = 10; //用var 定义一个全局变量 属于window let const不同
        // let json = {
        //     id: 1,
        //     show: function () {
        //         console.log(this.id)//1
        //         setTimeout(() => {
        //             console.log(this.id)//10
        //         }, 1)
        //     }
        // }
        // json.show()

        // function fn() {
        //     console.log(arguments)
        //     console.log(Array.prototype.slice.call(arguments))
        // }

        // fn(1, 2, 3)

        // let fn = (...args) => {
        //     console.log(args)
        // }
        // fn(1, 2, 3)
        function fn(a, b, c, ) {
            console.log(a, b, c)//最后逗号可以有了
        }

        fn(1, 2, 3)


        var id = 10; //用var 定义一个全局变量 属于window let const不同
        let json = {
            id: 1,
            show: () => {
                console.log(this.id)//10  构造函数的this指向外面
            }
        }
        json.show()