ES6入门到进阶（一）：let、解构赋值、字符串模板、函数

WalkerXu 发布于2019-08-26 11:47 / 1125人阅读

摘要：注意问题，不在是运行时所在的对象箭头函数里面没有用箭头函数不能当构造函数下一篇入门到进阶二循环数组对象参考视频资料经典入门到进阶

一、简介

ES6 -> ECMA 标准

ES6 -> 2015年6月 ES6.0

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

ES6环境:

webpack3.x

Traceur

二、let、const 2.1 关于定义(声明)变量

var a=12; 之前

let let a=12 相当于之前的 var

const 常量，定义好了不能改变

2.2 作用域:

全局作用域

函数作用域

2.3 let注意

1.没有预解析，不存在变量提升

在代码块内，只要let定义变量，在之前使用，都是报错
先定义完，再使用

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

字符串是否以谁开头:

        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运算符:

扩展运算符：...

展开数组：

... :
    [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，花括号{}用=>代替了。这种写法更简洁了。

注意：

this问题, ，不在是运行时所在的对象

箭头函数里面没有arguments, 用 ‘...’

箭头函数不能当构造函数

下一篇：ES6入门到进阶（二）：循环、数组、对象

参考视频资料：ES6经典入门到进阶

服务器托管 idc机房托管解构赋值解构函数 ES6入门 es6字符串扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107577.html

ES6入门到进阶（二）：循环、数组、对象

摘要：优点按需加载可以写中路径也可以动态加以后默认就是严格模式，默认严格模式完参考视频资料经典入门到进阶上一篇：ES6入门到进阶（一）：let、解构赋值、字符串模板、函数一、循环 ES5里面新增一些东西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

JerryZou 2019-08-26 11:47 评论0 收藏0
ES6知识拾遗，再读ES6入门书籍总汇

摘要：冻结对象未定义就声明的变量会默认为全局的变量，的变量都归所有，命令命令命令声明的全局变量，不属于顶层对象的属性即不会归所有总结的六种声明变量注意在浏览器环境指的是对象，在指的是对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 1.var,let,const区别答：(1).var有变量声明提升，let&&const没有，这样导致了let,const必须声明后才可以访问...

thekingisalwaysluc 2019-08-23 18:30 评论0 收藏0
es6快速入门

摘要：快速入门简介以下简称是语言的下一代标准，已经在年月正式发布了。而且声明后必须立即初始化赋值，不能后面赋值。方法默认返回实例对象即，可以指定返回另外一个对象。参数搭配的变量是一个数组，该变量将多余的参数放入数组中。 es6快速入门 showImg(https://segmentfault.com/img/remote/1460000008519223?w=560&h=314); ES6简...

liujs 2019-08-20 14:39 评论0 收藏0
ES6学习总结（1）

摘要：返回一个对象，遍历对象自身和继承的所有可枚举属性不含，与相同和在红宝书中就已经提到过属性，表示的是引用类型实例的一个内部指针，指向该实例的构造函数的原型对象。半个月前就决定要将ES6的学习总结一遍，结果拖延症一犯，半个月就过去了，现在补起来，惭愧惭愧。阮一峰的《ES6标准入门》这本书有300页左右，除了几个新的API和js语法的扩展,真正有价值的内容并不多。所谓存在即合理，每部分的...

happyfish 2019-08-20 15:38 评论0 收藏0
ES6

摘要：情况一情况二这两种情况，根据的规定都是非法的。的作用域与命令相同只在声明所在的块级作用域内有效。因此，将一个对象声明为常量必须非常小心。顶层对象的属性与全局变量挂钩，被认为时语言最大的设计败笔之一。这是ES6的入门篇教程的笔记，网址：链接描述，以下内容中粗体+斜体表示大标题，粗体是小标题，还有一些重点；斜体表示对于自身，还需要下功夫学习的内容。这里面有一些自己的见解，所以若是发现问题...

AZmake 2019-08-23 18:33 评论0 收藏0