es6简单介绍

let和const

原先声明变量的形式

var test = 5;  //全局变量
function a()
{var cc=3; //局部变量alert(test);
}
function b(){alert(test);}test = 5;//全局变量 
function a()
{aa=3; //全局变量alert(test);
}

在es6之前,作用域只有全局作用域和函数作用域,没有块级作用域,所以考虑如下代码

{ var a = 6;var a = 8}
console.log(a)  // 答案是8

我们本来想着用{}表示一块作用域,外面应该访问不到里面的变量,但是事实是var声明的变量泄漏到全局作用域了。所以引出let
let有三个个特点:

  • 不能重复赋值
  • 作用域是局部作用域
  • 不存在变量提升
{let a=10;let a=11}
Uncaught SyntaxError: Identifier 'a' has already been declared
{let a = 10}
a
Uncaught ReferenceError: a is not definedat <anonymous>:1:1

作用域是块级作用域

var a = [];
for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);};
}
a[0]();  // 10

因为var定义的是全局,所以在内存中只维护一块空间,每次+1的时候这块空间的值发生改变,而数组中的每个函数的引用都指向这一块空间,当最后调用的时候那块空间的值就是10了,所以结果就是10了

var a = [];
for (let i = 0; i < 10; i++) {a[i] = function () {console.log(i);};
}
a[0]();   // 0

let声明的是块级作用域,所以每一次循环的i其实都是一个新的变量,每次循环都会创建新的内存空间,每个放到数组中的函数都指向对应的内存空间的值,等调用的时候就调用指向的值。那么问题来了,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算

变量提升

console.log(foo); // undefined
var foo = 2;

在es6之前,变量使用在定义之前得到的结果是undefiend,这种现象叫做变量提升,这其实不符合正常的编程逻辑。
js引擎在解释的时候从上到下,先找定义的变量,也就是说下面代码其实是这样的

var foo;
console.log(foo); // undefined
foo = 2;

有了let之后

console.log(foo); // 报错
let foo = 2;   

块级作用域

内层变量可能会覆盖外层变量

var tmp = 5;function f() {console.log(tmp);if (false) {var tmp = 'hello world';}
}f(); // undefined

至于结果为啥是undefined参考变量提升的解释。在内部定义的var tmp = 'hello world';的在解释的时候在函数作用域内是先var tmp

用来计数的循环变量泄露为全局变量

for (var i = 0; i < 5; i++) {console.log(s[i]);
}console.log(i); // 5

变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

const

const定义的变量有两点需要注意:

  • 不能只用来声明,声明的时候就必须赋值
  • 不能修改

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

模板字符串

在es6之前,我们拼接字符串都有+,这种方式是繁琐的,可以使用反引号(`)标识。
反引号主要有3个作用:

  1. 当作普通字符串
  2. 定义多行字符串(相当于python的三引号)
  3. 在字符串中嵌入变量
d
10
`iloce${d}`
"iloce10"

箭头函数

箭头函数就是函数的一种缩写形式

//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {return num1 + num2;
};

箭头函数有一点需要注意
在es6之前,函数体内的this对象,就是使用时所在的对象,而不是定义时所在的对象

 var person = {name:'jack',age:18,  fav:function(){        console.log(this)}}person.fav();

用了箭头函数之后,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

 var person2 = {name:'jack',age:18,fav: ()=>{// 当前this指向了定义时person2对象时所处的对象(window)console.log(this);}}person2.fav();

为了解决这个问题, 使用对象的单体模式:

 var person2 = {name:'jack',age:18,fav() {// 当前this指向了定义时person2对象时所处的对象(window)console.log(this);}}person2.fav();

面向对象

在es6之前创建对象是这样做的

function Animal(name,age){this.name = name;this.age = age;}Animal.prototype.showName = function(){console.log(this.name);console.log(this.age);}var a = new Animal('小黄',5);a.showName();

我们在python中通过class就能定义一个对象,在es6中也可以这样做

class People {// 类似python中的initconstructor(name,age){this.age = age;this.name = name;}eat(){console.log('111')}study() {console.log('1222')}
}

定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

转载于:https://www.cnblogs.com/longyunfeigu/p/9328357.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/389102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程方法学要素含义_日期时间数据的要素工程

软件工程方法学要素含义According to Wikipedia, feature engineering refers to the process of using domain knowledge to extract features from raw data via data mining techniques. These features can then be used to improve the performance of machine learning a…

洛谷P1605:迷宫(DFS)

题目背景 迷宫 【问题描述】 给定一个N*M方格的迷宫&#xff0c;迷宫里有T处障碍&#xff0c;障碍处不可通过。给定起点坐标和终点坐标&#xff0c;问: 每个方格最多经过1次&#xff0c;有多少种从起点坐标到终点坐标的方案。在迷宫中移动有上下左右四种方式&#xff0c;每次只…

vue图片压缩不失真_图片压缩会失真?快试试这几个无损压缩神器。

前端通常在做网页的时候 会出现图片加载慢的情况 在这里我通常会将图片进行压缩 但是通常情况下 观众会认为 图片压缩会出现失真的现象 在这里我会向大家推荐几款图片压缩的工具 基本上会实现无损压缩1.TinyPng地址&#xff1a;https://tinypng.comEnglish&#xff1f;不要慌&a…

remoteing2

此示例主要演示了net remoting,其中包含一个服务器程序Server.exe和一个客户端程序CAOClient.exe。客户端程序会通过http channel调用服务器端RemoteType.dll的对象和方法。服务器端的代码文件由下图所述&#xff1a;Server.cs源代码 :using System;using System.Runtime.Remot…

android 线程池

为什么用线程池 创建/销毁线程伴随着系统开销&#xff0c;过于频繁的创建/销毁线程&#xff0c;会很大程度上影响处理效率 例如&#xff1a; 记创建线程消耗时间T1&#xff0c;执行任务消耗时间T2&#xff0c;销毁线程消耗时间T3 如果T1T3>T2&#xff0c;那么是不是说开…

datatable转化泛型

public class ConvertHelper<T>where T:new() { /// <summary> /// 利用反射和泛型 /// </summary> /// <param name"dt"></param> /// <returns></returns> public static List<T> ConvertToList(DataTable dt) { …

【跃迁之路】【651天】程序员高效学习方法论探索系列(实验阶段408-2018.11.24)...

(收集箱&#xff08;每日一记&#xff0c;每周六整理&#xff09;)专栏 实验说明 从2017.10.6起&#xff0c;开启这个系列&#xff0c;目标只有一个&#xff1a;探索新的学习方法&#xff0c;实现跃迁式成长实验期2年&#xff08;2017.10.06 - 2019.10.06&#xff09;我将以自己…

更换mysql_Docker搭建MySQL主从复制

Docker搭建MySQL主从复制 主从服务器上分别安装Docker 1.1 Docker 要求 CentOS 系统的内核版本高于 3.10 [rootlocalhost ~]# uname -r 3.10.0-693.el7.x86_641.2 确保 yum 包更新到最新。 [rootlocalhost ~]# sudo yum update Loaded plugins: fastestmirror, langpacks Loadi…

dll文件的c++制作dll文件的c++制作

dll文件的c制作1、首先用vs2005建立一个c的dll动态链接库文件&#xff0c;这时&#xff0c;// DllTest.cpp : 定义 DLL 应用程序的入口点。//#include "stdafx.h"//#include "DllTest.h"#ifdef _MANAGED#pragma managed(push, off)#endifBOOL APIENTRY Dll…

理解ConstraintLayout 对性能的好处

自从在17年GoogleI/O大会宣布了Constraintlayout,我们持续提升了布局的稳定性和布局编辑的支持。我们还为ConstraintLayout添加了一些新特性支持创建不同类型的布局&#xff0c;添加这些新特性&#xff0c;可以明显的提升性能&#xff0c;在这里&#xff0c;我门将讨论Contrain…

数据湖 data lake_在Data Lake中高效更新TB级数据的模式

数据湖 data lakeGOAL: This post discusses SQL “UPDATE” statement equivalent for a data lake (object) storage using Apache Spark execution engine. To further clarify consider this, when you need to perform conditional updates to a massive table in a relat…

如何理解运维

运维工程师&#xff08;运营&#xff09;&#xff0c;负责维护并确保整个服务的高可用性&#xff0c;同时不断优化系统架构提升部署效率&#xff0c;优化资源利用率提高整体的投资回报率。运维工程师面对的最大挑战是大规模集群的管理问题&#xff0c;如何管理好几十万台服务器…

advanced installer更换程序id_好程序员web前端培训分享kbone高级-事件系统

好程序员web前端培训分享kbone高级-事件系统&#xff1a;1、用法&#xff0c;对于多页面的应用&#xff0c;在 Web 端可以直接通过 a 标签或者 location 对象进行跳转&#xff0c;但是在小程序中则行不通&#xff1b;同时 Web 端的页面 url 实现和小程序页面路由也是完全不一样…

ai对话机器人实现方案_显然地引入了AI —无代码机器学习解决方案

ai对话机器人实现方案A couple of folks from Obviously.ai contacted me a few days back to introduce their service — a completely no-code machine learning automation tool. I was a bit skeptical at first, as I always am with supposedly fully-automated solutio…

网络负载平衡的

网络负载平衡允许你将传入的请求传播到最多达32台的服务器上&#xff0c;即可以使用最多32台服务器共同分担对外的网络请求服务。网络负载平衡技术保证即使是在负载很重的情况下它们也能作出快速响应。 网络负载平衡对外只须提供一个IP地址&#xff08;或域名&#xff09;。 如…

透明状态栏导致windowSoftInputMode:adjustResize失效问题

当我们通过下面代码&#xff1a; getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); 设置状态栏透明&#xff0c;当界面存在EditText时&#xff0c;在activity里面设置windowSoftInputMode:…

[TimLinux] JavaScript 元素动态显示

1. css的opacity属性 这个属性用于&#xff1a;设置元素的不透明级别&#xff0c;取值范围&#xff1a;从 0.0 &#xff08;完全透明&#xff09;到 1.0&#xff08;完全不透明&#xff09;&#xff0c;元素所在的文本流还在。这个属性的动态变化可以用来设置元素的淡入淡出效果…

神经网络 CNN

# encodingutf-8import tensorflow as tfimport numpy as npfrom tensorflow.examples.tutorials.mnist import input_datamnist input_data.read_data_sets(MNIST_data, one_hotTrue)def weight_variable(shape): initial tf.truncated_normal(shape, stddev0.1) # 定义…

图片中的暖色或冷色滤色片是否会带来更多点击? —机器学习A / B测试

A/B test on ads is the art of choosing the best advertisement that optimizes your goal (number of clicks, likes, etc). For example, if you change a simple thing like a filter in your pictures you will drive more traffic to your links.广告的A / B测试是一种选…

3d制作中需要注意的问题_浅谈线路板制作时需要注意的问题

PCB电路板是电子设备重要的基础组装部件&#xff0c;在制作PCB电路板时&#xff0c;只有将各个方面都考虑清楚&#xff0c;才能保证电子设备在使用时不会出现问题。今天小编就与大家一起分享线路板制作时需要注意的问题&#xff0c;归纳一下几点&#xff1a;1、考虑制作类型电路…