一、变量

var 

1 可以重复声明（var a=1;var a=7;）（一开始用着会觉得限制很少，但是在大型项目会麻烦，人多嘴杂的时候定义重复了就容易出问题还不好找）

2 无法限制修改

3 没有块级作用域(块指{}以外就不能访问)

function(){

    var a=10;

}

alert(a); //

ES6的变量：

let:

不能重复声明（重复声明会报错:a已经声明过了，const也是）；

let a=0;

let a=1;

let是变量，可以修改；

let a=0;

a=1;
alert(a); //1

有块级作用域；（const同理）

if(true){

    let a=0;

}

alert(a);//报错：a 没定义（a只在语法块起作用）

const:不能重复声明；const是常量，不能修改；有块级作用域；

const a=0;

a=1;
alert(a); //报错

下面来看一个经典的运用场景：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用闭包来解决的问题:利用函数垫了一层作用域</title>

</head>

<body>

    <input type="button" value="按钮1">

    <input type="button" value="按钮2">

    <input type="button" value="按钮3">

</body>

<script>

    // window.onload=function(){

    //     var aBtn=document.getElementsByTagName('input');

    //     for(var i=0;i<aBtn.length;i++){

    //         aBtn[i].onclick=function(){

    //             alert(i);//3 3 3

    //         };

    //     }

    // }

    window.onload=function(){

        var aBtn=document.getElementsByTagName('input');

        for(var i=0;i<aBtn.length;i++){

            (function(i){

                aBtn[i].onclick=function(){

                    alert(i);//0 1 2

                };

            })(i);

        }

    }

</script>

</html>

但是如果用有块级作用域的let声明i，就直接可以打印出想要的结果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>let</title>

</head>

<body>

    <input type="button" value="按钮1">

    <input type="button" value="按钮2">

    <input type="button" value="按钮3">

</body>

<script>

    window.onload=function(){

         var aBtn=document.getElementsByTagName('input');

         for(let i=0;i<aBtn.length;i++){

            aBtn[i].onclick=function(){

                 alert(i);//0 1 2

             };

         }

     }

</script>

</html>

二、箭头函数

之前函数写法：

function 名字(){}

ES6写法：

()=>{}

总结：

就是把名字省略，()后增加一个箭头；是之前函数的一种简写，就像var a=new Array()可以简写成var a=[]一样。

如果只有一个参数，()可以省；

如果只有一个return，{}可以省；(注意没有或者多余一个return都不能省)

举例1：

let show=function(a,b){

     alert(a+b);

}

let show=(a,b)=>{

     alert(a+b);

}

举例2：

let arr=[2,5,1,9,4];

//arr.sort(function(n1,n2){

//    return n1-n2;

//});

//arr.sort((n1,n2)=>{

 //   return n1-n2;

//});

arr.sort((n1,n2)=>return n1-n2);

alert(arr);

三、解构赋值

1. 左右两边结构必须一样

2. 右边必须是个东西

3. 声明和赋值不能分开（必须在一句话里完成）

例如：

// 数组
let[a,c,x]=[1,2,3];

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

let{a,b,c}={a:1,b:2,c:3};

console.log(a,b,c);// 1 2 3
// 复杂一点的

let [{a,b},[n1,n2,n3],num,str]=[{a:12,b:5},[1,3,5],9,'lmx'];

console.log(a,b,n1,n2,n3,num,str);

// 粒度根据实际可更改
let [json,arr,num,str]=[{a:12,b:5},[1,3,5],9,'lmx']; 
console.log(json,arr,num,str);

错误写法：

// 左右两边结构不一样

let {a,b}=[1,2];

console.log(a,b);
// 右边不是个东西

let {a,b}={1,2};

console.log(a,b);//Uncaught SyntaxError: Unexpected token ,
// 解构赋值是同步的 不能拆分

let [a,b];//这样定义是不标准的

[a,b]=[1,2];

console.log(a,b);// Uncaught SyntaxError: Missing initializer in destructuring declaration

ES6学习总结一（变量；箭头函数；解构赋值）的更多相关文章

  1. ES6 （一）变量声明方法 & 解构赋值

    就是最新的JavaScript 原来的是var,要求不严格,不能限制修改,函数级 es6要求严格 1.防止重复声明 let      变量=var const 常量 2.控制修改 const常量不能修 ...

  2. 001-es6变量声明、解构赋值、解构赋值主要用途

    一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...

  3. 【ES6】对象的新功能与解构赋值

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...

  4. JS变量作用域与解构赋值

    用var变量是有作用域的 变量在函数内部声明时,那么该变量只属于整个函数体,函数外不可调用 当两个不同的函数里,使用了用一个相同的变量名,二者不互相影响,相互独立 遇到嵌套函数时,外部函数不可调用内部 ...

  5. ES6学习之变量的解构赋值

    前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...

  6. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  7. ES6知识整理（2）--变量的解构赋值

    最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 上一篇是一个试水,现在接上. 变量提升 看了下朋友回复 ...

  8. ES6 学习笔记（二）解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  9. ES6学习-5 解构赋值（2）对象的解构赋值

    啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...

  10. ES6-变量的解构赋值复习+学习

    ES6------变量的解构赋值 由于之前学过ES6的解构赋值,但是只是略看了一点网上的视频,所以今天就看了看ES6对这一部分的详细介绍,然后做一个总结的笔记. 首先,先大概说一下什么是变量的解构赋值 ...

随机推荐

  1. Redis 实践1- redis介绍和安装

    redis是一个key-value存储系统,官方站点 http://redis.io   和memcached类似,但支持数据持久化 支持更多value类型,除了和string外,还支持hash.li ...

  2. MyEclipse出现红色感叹号解决办法

    今天在做数据库连接练习的时候自己创建的工程突然出现了一个红色的感叹号,然后运行自己写的代码的时候出现找不到主类的错误!!! 我还以为是自己不小心写错了,然后让编译器自动生成代码也出现了一样的问题... ...

  3. Java经典编程题50道之三十九

    写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. public class Example39 {    public static void main(String[] a ...

  4. 新手最纠结的事。学什么语言最好？学什么语言有前途（or 钱途）？

    这篇文章是转载自王根的博客,源地址:http://www.yinwang.org/blog-cn/2017/07/06/master-pl ,虽然王根是一个备受争议的人,不过这篇文章写的很好,我对于编 ...

  5. 麻省理工18年春软件构造课程阅读02“Java基础”

    本文内容来自MIT_6.031_sp18: Software Construction课程的Readings部分,采用CC BY-SA 4.0协议. 由于我们学校(哈工大)大二软件构造课程的大部分素材 ...

  6. Qt Create or VS 2015 使用 Opencv330 相机静态库链接错误如何解决？

    查看链接库,添加 vfw32.lib 即可.

  7. 长整形的使用及cin加速

    _int64 和 long long 那么对ACMer来说,最为关心的就是在各个OJ上交题应分别使用哪种方式了.其实方式只有有限的几种: 如果服务器是linux系统,那么定义用long long,IO ...

  8. linux dhcp 设置路由及主机名

    自动获取ipDHCP方式获取ip:dhclient [网络接口]释放通过DHCP获取的ip地址:dhclient -r [网络接口]查看网络接口 ifconfig -a(列出所有接口含禁用的) eth ...

  9. 【Unity3D】Unity3D 摄像机带透明截图

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/CropCamera.html ↓↓↓下面的废话可以不看↓↓↓ 最近处理了一批我的游戏的图标,步骤特别繁琐, 需要先 ...

  10. Centos 6.5升级openssh漏洞

    CentOS 6.5下openssh升级 在有的企业中每年都会安全扫描,因为实现远程连接比较重要,如果openssh版本过低,就要对其升级,本文主要讲述openssh升级的步骤. openssh升级主 ...