关于ES6

  1. 块级作用域

    任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域

  2. let

    let 是ES6新增的声明变量的一种方法,与 var 最明显的区别是

    1. 不存在变量提升

    2. 产生新的作用域(块级作用域)

    3. 在一个作用域中 不允许重复声明

    4. 暂时性死区 在一个块级作用域的任何地方 声明过 就不会再访问外面的了

      var c = 123;

      if(true) {
      console.log(c);
      let c;
      } // c is not defined   程序会报错 区别于var 它不会预解析 也不会向外找  
  3. const 关键字

    1. const 用于声明常量(通常大家习惯将常量定义成大写),  
    2. 必须初始化
    3. 而常量一旦赋值就不允许被更改,其他属性与let一样

  4. 变量的解构赋值

    按照某种模式,从数组和对象中提取值,对变量进行赋值这被称为解构。

    1. 数组的解构赋值

      //1.左右对等 左侧对变量进行了声明 右侧是一个标准的数据类型(数组)
      var [a, b, c] = [1, 2, 3];

      console.log(a, b, c);   // 1 2 3

      //2. 左右两侧不对等
      let [name, age] = ['小明', 16, '男'];

      console.log(name, age);   //小明   16

      let [name, age, gender, home] = ['小明', 16, '男'];

      console.log(name, age, gender, home); //小明 16 男 undefined

      // 3. 允许嵌套
      let [name, [age], gender] = ['小红', [16], '女'];

      console.log(name, age, gender); //小红 16 女

      // 4. rest 运算符
      // ES6 新增了运算符 ...
      let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8];

      console.log(a); //1
      console.log(b); //2
      console.log(c); //3
      console.log(d); //[4,5,6,7,8]
    2. 对象的解构赋值

      //1.左右对等 左侧对变量进行了声明 右侧是一个标准的数据类型(对象)
      let {name: name1, age: age1} = {name: '小明', age: 16};
      console.log(name1); //可以简写如下:
      let {name, age} = {age: 16, name: '小明'};

      console.log(name, age);
      //注意:然后根据属性名来对应 没有顺序的要求

      // 2.左右不对等
      // let {name, age} = {name: '小明', age: 16, gender: '男'};

      // let {name, age, gender, home} = {name: '小明', age: 16, gender: '男'};

      // console.log(name, age, gender, home); //home 为 undefinded

      // 3.也是支持嵌套
      let {name, child: {childname}, age} = {
      name: '小红',
      age: 16,
      child: {
      childname: '小小红'
      }
      };
      console.log(name, childname, age);
  5. string的扩展

    1. str.includes("i") //str是否包含 i 返回布尔

    2. str.startsWith('my') //str 是不是以 my 开头的 布尔

    3. str.endWith('my') //str 是不是以 my 结尾的 布尔

    4. no.padStart(6, '0') //希望长度固定为 6 位,不够在开始位置 以 0 补充

    5. no.padEnd(6, '0') //希望长度固定为 6 位,不够在结尾位置 以 0 补充

  6. 数组的扩展

    1. Array.of方法创建数组

    // 创建一个若干单元的数组
    let users = new Array(1, 2, 3);   //等价于 let users = [1, 2, 3]

    let nums = new Array(3);         // 创建一个长度为 3 的数组   存在歧义
       
    // ES6 可以通过 Array.of 方法创建数组  

    let users = Array.of(1, 2, 3);   //等价于 let users = [1, 2, 3]

    let nums = Array.of(1);         // 等价于 let users = [1]   没有歧义 统一了
    1. 还提供了数组的检索功能 返回布尔

    var courses = ['html', 'javascript', 'css'];

    console.log(courses.includes('php')); //flase

    console.log(courses.includes('html')); //true
    1. 在数组中检索第1个满足条件的项, 条件当成回调函数的返回值

    var bs = [1, 3, 4, 7, 16];

    var res = bs.find(function (item, key, arrs) {
    // 第1个参数为数组单元值
    // console.log(item);
    // 第2个为索引值
    // console.log(key);
    // 第3个参数为数组本身
    // console.log(arrs);
    return val > 4;
    });
    // console.log(res); //   根据情况 这个函数执行了4次 满足条件 结束返回 7
    同样:find 换为 findIndex   用法一样 返回索引
  7. 一般函数的拓展
    1.  给函数添加默认参数

      function foo(name="小明"){
        console.log(name);
      }
      foo("小华") //"小华";
      foo() //小明""

        

    2. 不确定个数的参数传递 接收

      function fn(...abc){
      console.log(abc) //传入参数后 可以在函数中 通过 abc[0] abc[1] .... 分别拿到第一个 第二个 ...参数
      } fn(1); //[1]
      fn(1,2);  //[1,2]    
  8.  箭头函数

    // 以往定义函数的方式

    function foo(a) {
    return a;
    }

    var bar = function (b) {
    return b;
    }

    // ES6 新增定义函数的方法

    // () => {
    // console.log('定义了一个函数');
    // }

    // 一个函数是由以下几部分构成
    // a) 名称
    // b) 参数
    // c) 函数体
    // d) 返回值

    // let fn(函数名称) = (这里写参数) => {这里函数体,返回值可以写在这里}

    let sayHi = (name) => {
    console.log(`你好 ${name}`);
    }

    // sayHi('小虹');

    // 还有一些特殊写法

    // 比如 只有一个参数,可以省略 参数的括号
    // let 名称 = 参数 => {}

    // let sayHello = name => {
    // console.log(`你好 ${name}`);
    // }

    // sayHello('小米');

    // 比如 没有参数,只写空的括号
    // let 名称 = () => {}

    // 比如 函数体中只有一行逻辑,可以省略 函数体的括号
    // let 名称 = () => console.log('只有一行逻辑')

    // let sayHello = (name) => console.log(`你好 ${name}`);

    // sayHello('小刚');

    // 比如 只有一个参数和只有一行逻辑
    // let sayHello = name => console.log(`你好 ${name}`);

    // sayHello('小则');

    // 如果只有一行逻辑,这个结果自动的返回

    let getName = name => name;

    let getName = (name) => {
    return name;
    }

    let a = getName('诠诠');

    console.log(a);

关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}的更多相关文章

  1. ES6入门一:块级作用域(let&const)、spread展开、rest收集

    let声明 const声明 块级作用域 spread/rest 一.let声明与块作用域 在ES6之前,JavaScript中的作用域基本单元就是function.现在有了let就可以创建任意块的声明 ...

  2. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  3. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  4. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  5. ES6 - 基础学习(3): 变量的解构赋值

    解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...

  6. ES6——块级作用域

    前面的话 过去,javascript缺乏块级作用域,var声明时的声明提升.属性变量等行为让人困惑.ES6的新语法可以帮助我们更好地控制作用域.本文将详细介绍ES6新引入的块级作用域绑定机制.let和 ...

  7. ES6块级作用域及新变量声明(let)

    很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域.用var声明的变量具有变量提升(declaration hoist ...

  8. ES6块级作用域

    块级作用域的优点 避免变量冲突,比如程序中加载了多个第三方库的时候,如果没有妥善地将内部私有函数或变量隐藏起来,就很容易引发变量冲突: 可以方便的进行模块管理: 利于内存回收:(块级作用域里声明的变量 ...

  9. ES6 块级作用域

    作用域包括:全局作用域,函数作用域,块级作用域. 为什么要用块级作用域: 1.内层变量可能会覆盖外层变量. var name = "kevin"; function call() ...

随机推荐

  1. docker build

    nginx Docfile ----------------------- FROM centos   MAINTAINER daniel   RUN yum install -y wget RUN ...

  2. Docker环境搭建以及基本操作

    Docker环境搭建以及基本操作 Docker环境基本搭建: 基础环境:Centos 7.4        IP:192.168.30.117 [root@docker ~]# cat /etc/re ...

  3. 原生JS实现移动端的轮播效果

    首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动(无动画效果)然后松开手指后判断图片移动的位置 和某一个值进行比较 在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片 ...

  4. 【JavaWeb】从零实现用户登录

    1.数据库预备 1.1 SQL 创建数据库 create database db; 创建表 create table userInfo( id int primary key , name ), pa ...

  5. Yii2 yiisoft/mongodb 手动安装

    手动将yiisoft/mongodb下载到vendor/yiisoft目录(注意约束条件). 在vendor/yiisoft/extensions.php 中添加 'yiisoft/yii2-mong ...

  6. php bug 调试助手 debug_print_backtrace()

    debug_print_backtrace() 是一个很低调的函数,很少有人注意过它. 不过当我对着一个对象调用另一个对象再调用其它的对象和文件中的一个函数出错时,它也许正在一边笑呢 如果我们想知道某 ...

  7. Java学习笔记二十六:Java多态中的引用类型转换

    Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...

  8. sql server 获取当前日期前三十天的日期

    select convert(varchar(10),dateadd(dd,number,dateadd(month,-1,getdate())),120) as dtfrom master..spt ...

  9. jxls-1.x导出excel入门——基本操作

    请注意,一下内容均基于1.x版本,2.x版本将另开随笔记录 一.概述  JXLS是基于Jakarta POI API的Excel报表生成工具,可以生成精美的Excel格式报表.它采用标签的方式,类似J ...

  10. Windows 显示环境变量

    echo %% D:\>echo %python3% C:\Users\zy\AppData\Local\Programs\Python\Python36 D:\> 我的环境变量如下: