一、变量

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. Xcode intellisense meaning of letters in colored boxes like f,T,C,M,P,C,K,# etc

    in Xcode this is called "Code Sense". And these icons also exist in Xcode 3. Red: macros # ...

  2. C/C++语言简介之语法结构

    一.顺序结构    顺序结构的程序设计是最简单的,只要按照解决问题的顺序写出相应的语句就行,它的执行顺序是自上而下,依次执行.    例如:a = 3,b = 5,现交换a,b的值,这个问题就好像交换 ...

  3. 关于eclipse安装springide的记录

    近些天,又开始学习springmvc,使用eclipse进行开发,由于很多快捷键时候需要安装springide插件才能出来,我遇到配置DispatcherServlet,结果alt+/出不来Dispa ...

  4. Xen的虚拟化详解

    最近在看Xen在2003年发表在sosp上的论文<Xen and the Art of Virtualization>,中途遇到一些不理解的技术点,在网络上查找相关资料,发现大多数人都只是 ...

  5. Entity Framework——配置文件设置

    可以使用配置文件或代码(EF6起)配置EF框架. 一.使用配置文件 安装Entity Framework自动生成的配置 当使用VS的NuGet自动安装Entity Framework(本文使用6.2. ...

  6. 五子棋的斜对角方向上的规则 -- java编程(简单粗暴版)

    五子棋判断输赢规则 --- 斜对角线方向上 一.左上右下方向上 1.分析图 2.代码 /**判断左上右下方向上是否有连续五颗相同颜色的棋子 * 全部遍历法 */ int loop = 0; boole ...

  7. nyoj234 吃土豆 01背包

    思路:假设我们先只考虑一行,规则就是取了i处的土豆,每一个土豆有两种选择,拿与不拿,那么i-1和i+1处的土豆都不能再取,那么要求某一行的最大取值就用一次动态规划即可,dp(i)表示前i个土豆能取得的 ...

  8. java的mac自动化-自动运行java程序

    本文旨在帮助读者介绍,如果一个测试工程师拿到了mac本,该如何在本地自动运行java代码 首先如图所示写下如下一段代码 package zlr;import org.junit.Test;public ...

  9. 快速掌握Shell编程

    作者原创作品,转载请注明出处 (一)Shell编程概述 1.1 shell简述 Shell编程和JavaScript非常相似,Shell和JavaScript都是弱类型语言,同时也都是解释型语言.解释 ...

  10. H3C单臂路由配置

    Route配置 int g0/0.1 ip add 192.168.10.1 255.255.255.0 vlan-type dot1q vid 10 #子接口封装dot1q并分配给VLAN 10 q ...