Es6学习指南-1-函数变量
本篇章我们简述的是 es6初级知识点,认识es6,以及es6变量和es5的变量和函数。
ECMAScript 6简介
ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript和JavaScript的关系
一个常见的问题是,ECMAScript和JavaScript到底是什么关系?
一个常见的问题是,ECMAScript和JavaScript到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
该标准从一开始就是针对JavaScript语言制定的,但是之所以不叫JavaScript,有两个原因。一是商标,Java是Sun公司的商标,根据授权协议,只有Netscape公司可以合法地使用JavaScript这个名字,且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA,不是Netscape,这样有利于保证这门语言的开放性和中立性。
因此,ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript方言还有Jscript和ActionScript)。日常场合,这两个词是可以互换的。
以上是对Es6和javaScript的了解,现在我们正式开始学习Es6
1.我们先了解es5的一些知识
1.变量
Es5声明变量的方式有哪些?
一共有三种:
第一是:var
第二是:function
第三是:我们需要注意 不能忽略函数的形参(形参也是变量它是函数的私有变量)
var 定义变量
var 有个功能是变量提升但是不能定义 给window 添加一个对应的属性。
声明和定义是两码事
定义是 = 号赋值
function 既可以提前声明,同时还定义了
什么是定义?
所谓定义就是给变量赋值了
作用域问题:
var 的作用域
怎么理解 域 这个词?
域是范围的意思
什么是全局作用域?:
在window下声明的变量或者在函数外声明的变量
什么是局部作用域?:
在函数内声明的变量
想学习作用域,必须了解浏览器执行的机制:
浏览器在执行时候会开辟一个大空间(window) ,window下面分两个模块,栈内存(执行模块,栈内存也叫作用域),堆内存(也叫存储模块)。栈内存用来存放变量的内存地址,堆内存主要存放代码块的,然后浏览器从上到下执行代码。
function 声明的变量
function 声明的变量也会给window添加一个属性 属性值是方法
下面我们说一下函数的归属问题:
1.函数归属谁跟它在哪调用无关,跟在那定义有关
//函数归谁,跟它在哪调用无关,跟它在哪定义有关。
var a=10;
function fn(){
var a=12
return function(){
console.log(a)
}
} //ff()是fn中的匿名函数
var ff=fn()
ff()//12
2.任何一个函数都有返回值,如果写了 return return返回什么就是什么,如果没有写return 得到的是undefined
//任何一个函数执行后都有一个返回值,如果写了return return的是什么就得到什么,
//如果没有return得到的是undefined
//如果是我把return a 给删掉 那么console.log(a)打印的是undefined
function fn(){
var a=20;
return a
}
console.log(fn())
对于变量来说 它的作用域只有 window和函数(函数执行时会开辟一个私有作用域)
3.函数在if中的特殊情况:
在if语句中定义的函数(很特殊),只声明不定义,当条件成立的时候,if模块中不管函数在哪声明的函数,都会第一步对这个函数定义,再去执行if里面的代码
//函数在if中的特殊情况
var a=12;
console.log(fn)//undefined
if(a){
console.log(fn)//打印出fn()
function fn(){
console.log("hrllo 1807b")
}
}
条件不成立:if里面的代码就不会执行,所以就不会打印函数fn()
//条件不成立
var a=12;
console.log(fn)//undefined
if(a==false){
console.log(fn)//
function fn(){
console.log("hrllo 1807b")
}
}
console.log(fn)//undefined
以上是小编对Es5变量已经函数作用域的基础知识,现在我们开始学习Es6
1.变量
Es6提供了四种定义变量?
第一种:let
第二种:cont
第三种:class
第四种:import
let:
let它是Es6提供的一种声明变量的方式
1.没有变量提升这个功能 在声明之前不能使用
2.不能重复的声明
3.不会给window添加属性
let块级作用域:
带 {} 的都是块级作用域,if(){} for(){} 对象{} 函数不是块级 作用域,因为函数本身就是个私有作用域
var 和function 没有块级作用域的这个概念,let和const有块级这个作用域
作用域是对于变量的
1.在块级作用域下 var和function 跟在window下一样,function很特殊,在块级作用域前,只会提前声明不会定义
console.log(a)//undefined
console.log(get)//undefined
{
console.log(get)//function(){}
var a=5
function get(){
console.log(111)
} }
console.log(a)//5
console.log(get)//function(){}
2.在块级作用域下 let和conts声明的变量是私有的,外面访问不到
{
let a=100
}
console.log(a)//Uncaught ReferenceError: a is not defined
3.在for循环下let 声明变量不会泄露
var list=document.querySelector("#list").querySelectorAll("li")
for(var i=0;i<list.length;i++){//length=3
list[i].onclick=function(){
alert(i)//3
}
}
事件是异步的,for循环结束后i是3并且i还是全局的,点击了 li 最后弹出i,i此时是3,所以都会弹出3
var list=document.querySelector("#list").querySelectorAll("li")
for(let i=0;i<list.length;i++){//length=3
list[i].onclick=function(){
alert(i)//3
}
}
4.块级作用域和对象的区别?
这个是块级作用域:
// 块级作用域
{
name:"zhangsan",
age:12
}
{} 如果想表示对象,不能放行首,就是前面不能没东西,如果{} 前面没有东西 就是块级作用域
console.log({
name:"zhangsan",
age:12
})
里面必须加一个() 因为如果不加就是个块级作用域,我们要把eval转成对象,对象前面不能没东西。
eval 是将字符串转js代码
eval('({name:"zhangsan",age:22})')
console.log(eval('({name:"zhangsan",age:22})'))
什么是暂时性死区?:
如果块级作用域内使用 let和const声明变量了,这个区域就会被这个变量强制绑定,凡是在声明这些变量都是不可用的,使用会报错,这就是暂时性死区
// 什么是暂时性死区?
var a=10;
{
//会报错 Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(a);
let a=20;
console.log(a)
}
console.log(a)
什么是暂时性死区的场景?:
// 暂时性死区的场景
function fn(a=b,b=2){
console.log(a,b)
}
fn()
使用变量b在定义b之前了,就出现了暂时性死区,a=b和b=2换下位置
1.写法上 有默认值的写后面,没有默认值的写前面
2.如果传对于的参数,就不要默认值了(就没有覆盖了),不是先赋默认值,然后再去实参去覆盖,如果没有参数在去
let a=a 报错,赋值运算从右往左,右边使用变量a结果发现a没有声明,而let语法规定不能在没定义之前使用变量,所以报错。
var a=a 不报错 因为var 有变量提升这个功能,在等会赋值时,从右往左,使用变量a此时a是undefined,赋值时候又把undefined覆给了a,所以a还是undefined
Es6学习指南-1-函数变量的更多相关文章
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
- es6 学习1 let表示变量 、const表示常量 与 var 变量的区别
一.let 1.看下代码,在函数中无论在哪里声明变量,都会自动提到函数顶部,这就是函数变量提升,它的作用于为当前函数中. function aa() { if(bool) { var test = ' ...
- ES6学习总结一(变量;箭头函数;解构赋值)
一.变量 var 1 可以重复声明(var a=1;var a=7;)(一开始用着会觉得限制很少,但是在大型项目会麻烦,人多嘴杂的时候定义重复了就容易出问题还不好找) 2 无法限制修改 3 没有块级 ...
- es6学习笔记-async函数
1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...
- ES6学习笔记(函数)
1.函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log(' ...
- es6学习笔记6--Generator 函数
基本概念 Generator函数有多种理解角度.从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历器对象,也就是说,Gen ...
- ES6 学习笔记之三 函数参数默认值
定义函数时为参数指定默认值的能力,是现代动态编程语言的标配.在ES6出现之前,JavaScript是没有这种能力的,框架为了实现参数默认值,用了很多技巧. ES6 的默认参数值功能,与其他语言的语法类 ...
- ES6学习之let声明变量的学习
1.let和var类似, (1)let与var不同的点:let没有预编译,变量提升这个过程,let声明的变量只能在当前作用域内访问到(一个{}可以看做是一个作用域),在全局var声明的变量属于wind ...
- ES6学习笔记(6)----函数的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 函数的扩展 函数的默认值 : ES6可以为函数指定默认值 (1)指定默认值的两种方式 a.函数参 ...
随机推荐
- 201871010110-李华《面向对象程序设计(java)》第十六周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- 接口八问 & 接口测试质量评估标准
接口八问 关于接口的具体信息,可以通过以下八个问题进行了解: 接口的请求地址? 接口的作用? 接口的请求方式? 接口是否是用户相关? 接口是否存在上送数据,上送数据是什么? 接口返回的报文头和编码? ...
- git 清空所有commit记录
说明:例如将代码提交到git仓库,将一些敏感信息提交,所以需要删除提交记录以彻底清除提交信息,以得到一个干净的仓库且代码不变 1.Checkout git checkout --orphan late ...
- win10 配置 hadoop-2.7.2
win10 配置 hadoop-2.7.2 1.下载 先在 http://acrchive.apache.org/dist/hadoop/common/hadoop-2.7.2/hadoop-2.7. ...
- VIJOS-P1325 桐桐的糖果计划
VIJOS-P1325 桐桐的糖果计划 JDOJ 1432 桐桐的糖果计划 https://neooj.com/oldoj/problem.php?id=1432 Description 桐桐很喜欢吃 ...
- string方法介绍
#_*_coding:utf-8_*_#作者:王佃元#日期:2019/12/9#string操作print('hello'*2) #乘法操作,输出对应次数print('helloworld'[2:]) ...
- [LeetCode] 113. Path Sum II 二叉树路径之和之二
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 本地手动一步步搭建WNMP环境(nginx+php+mysql) Windows平台
环境:Windows 10 x64 参考文章: WNMP完整教程 windows下PHP环境的搭建 我自定义安装后的目录结构: +WNMP ++MySQL_Server-8.0.13 ++n ...
- React Hooks 深入系列
本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客.同时欢迎关注基于 hooks 构建的 UI 组件库 -- snake-design. 在 class 已经融入 React 生态 ...
- Collection和Collections有什么区别?
本文链接:https://blog.csdn.net/xiangyuenacha/article/details/84237663 1.java.util.Collection 是一个集合接口 ...