ES6入门到进阶(一):let、解构赋值、字符串模板、函数

一、简介

ES6 -> ECMA 规范

ES6 -> 2015年6月 ES6.0

每一年6月份,宣布一个版本

ES6环境:

webpack3.x

Traceur

二、let、const

2.1 关于定义(声明)变量

  1. var a=12; 之前
  2. let let a=12 相当于之前的 var
  3. const 常量, 定义好了不能转变

2.2 作用域:

  1. 全局作用域
  2. 函数作用域

2.3 let注重

1.没有预剖析不存在变量提拔

在代码块内,只需let定义变量,在之前运用,都是报错
先定义完,再运用
<script>
        let a = 12;
        function fn(){
            alert(a);  //TDZ最先  暂时性死区
            alert(b)
            let a = 5;  //TDZ 完毕
            let b = 12;
        }
        fn();
    </script>

2.同一个作用域里, 不能反复定义变量,能够赋值

3.for轮回,for轮回内里是父级作用域,内里又一个

for(let i = 0; i<3; i++){
           let i = 'abc';
           console.log(i);
       }

2.4 块级作用域:

    {
        //块级作用域
    }
    
    {{{{let a = 12}}}}

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

2.5 const: 特征和let一样

const定义变量不能修正

const定义完变量,必需有值,不能后赋值,不能修正,平常定义配置文件
然则对象是能够修正的,由于它是援用

凝结:Object.freeze(对象),就能够不被修正。

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


{
    //TODO
}

IIFE,马上实行匿名函数
(function(){
    //TODO
})()

发起:

    今后 就用 let  不要在运用var
    
    const http = require('http');

三、解构赋值(主要,经常使用)

*  异常有效,迥殊在做数据交互  ajax

3.1 花样

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

注重: 摆布双方,组织花样要保持一致

json:
    let {name,age, job} = {
        name:'Strive',
        age:18,
        job:'码畜'
    };

别号:

    let {name:n,age:g, job:a} = json;

3.2 解构时刻能够给默许值

    let [a,b, c="默许值"] = ['aaa','bbb'];

注重:null和undefined,null是一个对象,有值

let a = 12;
let b = 5;

    

import {a,b,c} from './mod'

四、字符串模板(经常使用)

4.1 字符串模板:

    长处: 能够随便换行
    `${变量名字}`

字符串衔接(之前用:+ ),要死人的。
如今:${变量名字}

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

4.2 关于字符串一些东西

字符串查找:

str.indexOf(要找的东西)   返回索引(位置) ,没找到返回-1
str.includes(要找的东西)   返回值  true/false

推断浏览器: includes

<script>
        if(navigator.userAgent.includes('Chrome')){
            alert('是chrome')
        }else{
            alert('!是chrome')
        }
    </script>

字符串是不是以谁开首:

        str.startsWith(检测东西)

        检测地点

字符串是不是以谁末端:

        str.endsWith(检测东西)

        .png

反复字符串:

        str.repeat(次数);

添补字符串:

    str.padStart(全部字符串长度, 添补东西)   往前添补
    str.padEnd(全部字符串长度, 添补东西)    今后添补

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

五、函数(主要)

5.1 函数变化

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()

5.2 扩大运算符、Rest运算符:

扩大运算符:...

睁开数组:

<script>
        let arr = ['apple','banana','orange'];

        console.log(arr);
        console.log(...arr);
    </script>
... :
    [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]

盈余参数: 必需放到末了

function show(a,b,...c){
    console.log(a,b);
    console.log(c);
}
show(1,2,3,4,5)

5.3 箭头函数:(主要,经常使用)

=>

let show = () => 1;

花样:

() => return东西

或许

() =>{
    语句
    return
}

例子:

var f = v => v;
//等同于
var f = function(v){
    return v;
}
var sum = (num1,num2) => num1 + num2;
//等同于

var sum = function(num1,num2){
    return num1 + num2;
}

[1,2,3].map(function (x) {
    return x * x;
});
//箭头函数写法
[1,2,3].map(x => x *x); //简约了很多

从例子我们能够看出,省略了function,花括号{}=>替代了。这类写法更简约了。

注重:

  1. this题目, ,不在是运行时地点的对象
  2. 箭头函数内里没有arguments, 用 ‘...
  3. 箭头函数不能当组织函数

下一篇:ES6入门到进阶(二):轮回、数组、对象

参考视频材料:ES6典范入门到进阶

    原文作者:唐成勇
    原文地址: https://segmentfault.com/a/1190000013322210
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞