ECMAScript与javascript的关系

   ECMA是是一个国际标准化的一个组织,规定了浏览器脚本的语言标准,在上个实际,javascript公司Netscape把javascript托付给ECMA,让其为javascript设置标准,经常见到到版本ES5就是在ES6的上一代标准。

  let

     什么是let?

   狭义理解let是更完美的var,也就是说 他是用来声明变量,方法与var类似,但是优于var,那它的优点是什么呢,下面将详述

   let声明的变量只在该变量的代码块中有效
{
var a = 1;
let b = 2 ;
}  
console.log(a); //
console.log(b); //undefined
   var声名的变量是全局有效的,输出的值是全局变量 
for (var i= 0;i<5;i++){
//do something
}
console.log(i) //

   此时i随着变量提升,已经变成一个全局变量,此时i的值是5

        for (let i= 0;i<5;i++){
//do something
}
console.log(i) //undefined

   如果用let 显示i的值是 undefined

   下面的两个例子就更加清楚的说明了let声明的变量和var声明的变量的区别了

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

   var 声明的i是全局变量,循环因子一直是i,只是每次循环i的值发生改变,当访问i时,访问的是全局变量i,所以值就是5

   而let声明的变量是局部变量,每一次循环都要重新声明i,导致当你传入i的时,返回的值就是当前i,所以值就是4

    暂时性死区

     let有一个语法要求,就是let声明之前不能使用var声明变量,否则会产生语法错误

      

   暂时性死区(TDZ:temporal dead zone),在下述代码中就是在let声明命令之前都是变量的死区

        //TDZ起始点
var tmp = 21;
//dosomething
let tmp = 22;
//TDZ结束点
   还有一些不易发现的TDZ
        function tdz( x=y,y=2){
//dosomething
}
tdz() //error y undefined function tdz( x=2,y=x){
//dosomething
}
tdz() //success

     在第一个例子中 ,此时y还没有声明,y就是一个暂时性死区,而在第二个例子中x已经声明了,当第二个形参的值等于已经声明的值,所以不存在暂时性死区 

   let不允许重复声明

    

   let是不允许重复声明一个变量的,但var是可以的,可以这样理解,var声明变量存在变量提升的效果与功能,但是let是不存在变量提升的,这点是let声明变量的特色之一,声明参数必须要咋局部环境中声明,写JS都知道,一是要减少DOM操作,二是不要过多使用全局变量,污染环境。

   块级作用域

     外层代码不受内层代码的影响,有了块级作用域,就不用使用立即执行函数,让外层代码不受内层代码的影响

        function fn(){
var a = 10;
{
var a=20;
}
console.log(a);
}
fn() //
        function fn(){
var a = 10;
{
let a=20;
}
console.log(a);
}
fn() //

    显然let的块级作用域,在函数内部的一个局部作用域中用let声明一个变量,这个局部作用域声明的变量不影响函数内部的变量,当然块级作用域是允许多层嵌套的  

  const

   const是一个只读常量,一旦声明就不能再次声明,常量的值不会再改变

const c=1;
var c= 2
//error

const与let命令相同,只在声明的块级作用域有效,const也不能重复声明

    const本质上,const声明的变量不是值不能改变,而是变量所指的内存地址不能改动,变量是指向一段地址,这个地址有一个变量,并且这个变量存在一个值

ES6声明变量的方法

    var let const import class

变量的解构

    从数组和对象中提取值,对变量进行赋值,这被称为解构

   数组的解构

        let [a1,b1,c1]=[1,2,3];
console.log(a1); //1
console.log(b1); //2
console.log(c1); //3

对象的解构

        let {a2,b2,c2}={a2:123,b2:456,c3:789}
console.log(a2); //123
console.log(b2); //456
console.log(c2); //789

嵌套解构

        var obj={
p:[
{per1:123},
{per2:456}
]
}
let {p:[{per1},{per2}]}=obj;
console.log(per1); //
console.log(per2); //

字符串解构

        const [a,b,c] = "123";
console.log(a) //
console.log(b) //
console.log(c) //

扩展方法

把类数组对象转成数组

  [].slice.call()

silce(start,end)

start:数组片段开始处的数组下标。

end:数组片段结束处的数组下标。

ES5使用的是[].slice.call() 将类数组转成真正的数组 

而ES6给了一个语法糖,仅仅使用Array.from()就可以将类数组转成数组

        let obj2 ={
"0" : "123",
"1" : "456",
length:2
}
var _a=Array.from(obj2)
var _b=[].slice.call(obj2)
console.log(_a) //["123","456"]
console.log(_b) //["123","456"]
  Array.of 是将一组值转换成数组,比较简单
let arr = Array.of(1,2,3)
console.log(arr) //[1,2,3]
copyWithin方法,在数组内部,将数组成员复制到其他位置处

copyWithin(target,start,end);

target:替换数组的位置处

start:从该位置读取数组。

end:该位置前(不包括该位置)停止读取数组的位置处

let newarr = [1,2,3,4,5].copyWithin(0,1,2)
console.log(newarr ); //[2,2,3,4,5]
find()找到首次符合条件的数组成员

array.find(function (){return })

    let result1 = [1,2,3,4,5].find(function (x){return (x%2)===0})  //方法1
let result2 = [1,2,3,4,5].find(x => (x%2)===0) //方法2
console.log(result1); //2
console.log(result2); //2

方法1和方法2是等价的,find方法和高阶函数map和filter一样回调函数返回的结果都是return 为true时

entires() keys() values() 遍历返回 entires返回的是键-值 keys是键 values返回的是值

    for (let x of [1,2,3].keys()){
console.log(x); // 0 1 2
} for (let x of [1,2,3].entries()){
console.log(x); // 1,2,3
}
for (let x of [1,2,3].values()){
console.log(x); [key,value]->[0,1] [1,2] [2,3]
}
箭头函数

箭头函数有一个最大的特点,就是解决了this的指向问题,this一般指向的是当前对象,但是箭头函数声明了一个变量_this=this,也就是指向函数定义生效时所在的对象

ES6允许 =>定义函数

    var fn = v =>v 等价于

    var fn=function (v){return v;}

箭头函数的this对象,就是在定义时所在的对象,而不是使用的时候所在的对象

     function Foo(){
this.v1=0;
this.v2=0;
setInterval(()=> this.v1++,1000);
setInterval(function (){this.v2++},1000);
}
var foo = new Foo();
setTimeout(() => console.log(foo.v1),3000); //
setTimeout(() => console.log(foo.v2),3000); //

    第一个定时器用的是箭头函数,当前定义所在的对象是构造函数,而第二个定时器当前定义所在的对象是this所指的作用域,所以结果是不更新的,永远是0

Object.assign用于对象的合并
var obj1={a:1}
var obj2={b:2}
var obj3={c:3}
Object.assign(obj1,obj2,obj3)
console.log(obj1) //{a:1,b:2,c:3}

set

set解构不会添加重复的值

      var s =new Set()

  //let newarr =new Set([array])

   array.forEach( x=>s.add(x));

    for(let x of s){

    console.log(x);

  }

   set下面有4个常用方法

     add()

   delete()  (返回值bool)

     has  (返回值bool)

   clear

let s = new Set();
s.add(1).add(2).add(3)

   Set可用于数组去重

[...new Set(array)]

Array.from(new Set(array));

...是一个扩展运算符,将一个数组转为以“,”分隔的参数序列

 map

map数据组构是键值对的集合,这个键可以是字符串

 map数组组构也有set get has 三个常用的方法

     var set1=new Map();
var str={p:'123'};
set1.set(str,"123");
set1.get(str);
console.log(set1);// Map(1) {Object {p: "123"} => "123"}

 结果是一个key-value的键值对,键是一个json对象,也可以是字符串

下面是一个将map数据组构转成json的一个事例

    function maptoobj(permate){
var obj= Object.create(null);
for([key,value] of permate){
obj[key]=value;
}
return obj;
}
function objtojson(permate){
return JSON.stringify(maptoobj(permate));
}
var mo =new Map().set("1","2").set("2","3");
console.log(objtojson(mo)); //{"1":"2","2":"3"}

    首先要建一个map mo ,将mo先要抓成对象,也就是 maptoobj函数,再将转成的对象JSON.stringify成字符串,也就是 objtojson函数

将json数据转成map

根据将map数据组构转成json的思想,逆向思考,给的是json字符串,先将其json.parse 将parse的结果在解析成map,是不是又要传到一个函数里面,这个函数的功能就是将对象解析成map,是不是又要使用map的set方法了?其中是不是用到for of语句

        function jsontomap(permate){
var m = new Map()
for(let x of Object.keys(permate)){
m.set(x,permate[x])
}
return m ;
}
function fn(permate){
return jsontomap(JSON.parse(permate));
}
console.log(JSON.parse('{"1":"2","2":"3"}'))
console.log(obj[2]);
console.log(fn('{"name":"2","sex":"3"}'))

    这里面补充一下 obeject.key与object[key]有什么区别

    有时候我们在写一个对象的时候

        var obj={
"name":"1",
"time":"2"
}
console.log(obj.time); //
console.log(obj.name); // var _obj={
"1":"1",
"2":"2"
}
console.log(_obj[1]); //
console.log(_obj[2]); //

    但是什么时候用这两个,根据网上查资料,object.key的方法是在没有使用for循环或者遍历,如果为for循环,涉及到依次遍历,则就需使用object[key]了

    就像上面的例子

for(let  x of Object.keys(permate)){
m.set(x,permate[x])
}

    具体的也可以参考一下  obeject.key与object[key]有什么区别

    

  学习总结

   这就是我学习ES6总结的一些知识点,写的不好,望轻喷~~

ECMAScript6入门学习--第一天的更多相关文章

  1. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...

  2. VHDL语法入门学习第一篇

    1. 现在先遇到一个VHDL的语法问题,以前没用过VHDL,现在要去研究下,进程(PROCESS) 进程内部经常使用IF,WAIT,CASE或LOOP语句.PROCESS具有敏感信号列表(sensit ...

  3. FPGA入门学习第一课:二分频器

    分频器还是比较简单的,一般的思路是:每数几个时钟就输出一个时钟.最简单的当数二分频器了,每当时钟上升沿(或下降沿)就把输出翻转一下.这样就刚好实现了二分频器了. 网上也搜到了最简实现”二分频最简单了, ...

  4. LAUNCHXL-28379D入门学习-第一篇

    1. 首先安装controlSUITE或者C2000ware软件,TI官网下载,安装后包括C2000的函数库和例程之类的,还可以和CCS搭配使用.controlSUITE安装完之后大约4个G,所以我安 ...

  5. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  6. opengl入门学习

    OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...

  7. Scala入门学习笔记三--数组使用

    前言 本篇主要讲Scala的Array.BufferArray.List,更多教程请参考:Scala教程 本篇知识点概括 若长度固定则使用Array,若长度可能有 变化则使用ArrayBuffer 提 ...

  8. Aho-Corasick算法、多模正则匹配、Snort入门学习

    希望解决的问题 . 在一些高流量.高IO的WAF中,是如何对规则库(POST.GET)中的字符串进行多正则匹配的,是单条轮询执行,还是多模式并发执行 . Snort是怎么组织.匹配高达上千条的正则规则 ...

  9. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

随机推荐

  1. C#分布式登录——jwt

    一.传统的session登录 在服务器存储一份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为cookie,以便下次请求时发送给我们的应用,这样我们的应用就能识别请求来自哪个用户了,这 ...

  2. JavaScript学习系列博客_29_JavaScript arguments

    arguments (封装实参的对象) 在调用函数时,浏览器每次都会传递进两个隐含的参数:1.函数的上下文对象 this2.封装实参的对象 arguments- arguments是一个类数组对象,它 ...

  3. Spring Security拦截器加载流程分析--练气中期

    写在前面 上回我们讲了spring security整合spring springmvc的流程,并且知道了spring security是通过过滤器链来进行认证授权操作的.今天我们来分析一下sprin ...

  4. 怎么给Ubuntu Server安装GUI桌面

    sudo apt update sudo apt upgrade sudo add-apt-repository universe sudo add-apt-repository multiverse ...

  5. 使用log4j将数据流入flume

    最近做了一个log抽取的项目,采用log4j+flume实现,在此分享记录一下. 准备 什么是flume? flume是一个提供高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统. flume ...

  6. Javascript循环和代码规范

    1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声 ...

  7. linux字符终端(控制台)的字体更改

    查看已安装的终端字体 ls /usr/share/consolefonts/ 设置终端字体 sudo dpkg-reconfigure console-setup 或者 sudo vim /etc/d ...

  8. Urule开源版系列4——Core包核心接口之规则解析过程

    Urule运行规则文件,是如何进行的,通过一个请求doTest来探一下 com.bstek.urule.console.servlet.respackage.PackageServletHandler ...

  9. C. News Distribution(并查集)

    In some social network, there are nn users communicating with each other in mm groups of friends. Le ...

  10. Google Kick Start 2020 Round C

    ac代码 A. Countdown for循环跑一跑,没啥好说的. B. Stable Wall 如果\(s_{i,j} \ne s_{i+1,j}\),那么说明\(s_{i+1,j}\)必须在\(s ...