ES6学习总结一（变量；箭头函数；解构赋值）
一、变量
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学习总结一（变量；箭头函数；解构赋值）的更多相关文章
- ES6 （一）变量声明方法 & 解构赋值
就是最新的JavaScript 原来的是var,要求不严格,不能限制修改,函数级 es6要求严格 1.防止重复声明 let 变量=var const 常量 2.控制修改 const常量不能修 ...
- 001-es6变量声明、解构赋值、解构赋值主要用途
一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...
- 【ES6】对象的新功能与解构赋值
ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
- JS变量作用域与解构赋值
用var变量是有作用域的 变量在函数内部声明时,那么该变量只属于整个函数体,函数外不可调用 当两个不同的函数里,使用了用一个相同的变量名,二者不互相影响,相互独立 遇到嵌套函数时,外部函数不可调用内部 ...
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...
- ES6知识整理（2）--变量的解构赋值
最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 上一篇是一个试水,现在接上. 变量提升 看了下朋友回复 ...
- ES6 学习笔记（二）解构赋值
一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...
- ES6学习-5 解构赋值（2）对象的解构赋值
啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...
- ES6-变量的解构赋值复习+学习
ES6------变量的解构赋值 由于之前学过ES6的解构赋值,但是只是略看了一点网上的视频,所以今天就看了看ES6对这一部分的详细介绍,然后做一个总结的笔记. 首先,先大概说一下什么是变量的解构赋值 ...
随机推荐
- Java基础(含思维导图)
很早之前整理的Java基础的一些知识点,思维导图: 1.'别名现象' 对一个对象赋值另一个对象,会指向新的对象引用,赋值前的对象引用会由于不再被引用而被gc回收: 而基本类型则不同.基本类型存储了实际 ...
- iptables转发备忘
iptables -F sysctl net.ipv4.ip_forward=1 iptables -t nat -A PREROUTING -p tcp -i eth0 --dport 8766 - ...
- jstl c标签 ”test does not support runtime expressions“
将jstl 的uri <%@ taglib prefix="c" uri="http://Java.sun.com/jstl/core" %>(没有 ...
- jdbc 报错解决办法
刚刚看到一个童鞋出现了这个问题 其实这个问题很好解决 在工程中创建一个lib目录: 然后讲mysql包复制进去 然后对着包点击右键 build path就可以了 最后面再次运行就可以了 jar包地址下 ...
- Asp.Net Core2.0 基于QuartzNet任务管理系统
Quartz.NET官网地址:https://www.quartz-scheduler.net/ Quartz.NET文档地址:https://www.quartz-scheduler.net/doc ...
- 高通ASOC中的codec驱动
ASOC的出现是为了让codec独立于CPU,减少和CPU之间的耦合,这样同一个codec驱动就无需修改就可以匹配任何一款平台. 在Machine中已经知道,snd_soc_dai_link结构就指明 ...
- hdu1425 哈希技术
常用的技巧,把每个数字分别对应数组的下标,如果存在小于零的数字,就统一加一个数使得都能映射到一个下标上去. AC代码: #include<cstdio> #include<cstri ...
- nyoj358 取石子(五） 斐波那契博弈
我写代码找的规律:如果这个n是斐波那契数,那么它是P态,如2,3,5,8..... 找规律的代码: #include <cstdio> #include <cmath> #in ...
- php程序员的成长之路
第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟练(核心是安装配置基本操作) 目标:能够完成基本的LNMP系统安装,简单配置维护:能够做基本的简单系统的php开发:能够在PHP中型系统中支 ...
- The required anti-forgery form field "__RequestVerificationToken" is not present.
@using (Html.BeginForm()) { @Html.AntiForgeryToken() }