1.解构(ES6的语法)

我个人理解就是有一个对象,对象里有几个属性,然后在定义新的变量的时候可以直接指定为和对象里属性名一样的名字,然后就可以关联到新的变量上来。下面看一个小测试例子:

//解构
let obj = {
fullName: 'Xiao Ming',
gender: 'male',
role: 'admin'
}; let arr = ['elem1', 1, 30, 'arratElem3']; let {fullName, role} = obj;
let [elem1, elem2] = arr;

我们声明了两个集合对象obj和arr,各自都有一些属性,然后我们定义变量对象分别指向两个集合对象。

下面看运行结果,橙黄色部分为实时的运行结果:

下面我们再来看下他最终编译成的样子:

其实说白了就是let{fullName,role} = obj;这一句就是如果你声明一个匿名的字典变量属性必须写和和指向对象一样的属性名字,有点键值对应的意思,而let[elem1,elem2]=arr;这句就是相当于一个匿名数组,通过下标的顺序来对应变量,elem1和elem2你可以只当做一个站位的名字不必和属性名字相同,有点索引的意思。

2.e.target和e.currrentTarget的区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

 1     <div id="outer" style="background:#099">  
2 click outer
3 <p id="inner" style="background:#9C0">click inner</p>
4 <br>
5 </div>
6
7 <script type="text/javascript">
8 function G(id){
9 return document.getElementById(id);
10 }
11 function addEvent(obj, ev, handler){
12 if(window.attachEvent){
13 obj.attachEvent("on" + ev, handler);
14 }else if(window.addEventListener){
15 obj.addEventListener(ev, handler, false);
16 }
17 }
18 function test(e){
19 alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
20 }
21 var outer = G("outer");
22 var inner = G("inner");
23 //addEvent(inner, "click", test);
24 addEvent(outer, "click", test);
25 </script>

上面的示例中,当在outer上点击时,e.target与e.currentTarget是一样的,都是div;当在inner上点击时,e.target是p,而e.currentTarget则是父级标签div。

JS一些语法的更多相关文章

  1. ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取.这 ...

  2. js基本语法汇总

    1.分类 ECMAScript js基本语法与标准 DOM Document Object Model文档对象模型 BOM Browser Object Model浏览器对象模型 tips:DOM和B ...

  3. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  4. ExtJs对js基本语法扩展支持

    ExtJs对js基本语法扩展支持 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引用加载 ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可 ...

  5. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  6. JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  7. [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...

  8. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  9. 【JS基础语法】---学习roadmap---6 parts

    JS基础语法---roadmap Part 1 - 2: Part 3 - 4:   Part 5 - 6

  10. JS基本语法---while循环---练习

    JS基本语法---while循环---练习 练习1: 求6的阶乘 var ji = 1;//存储最终的阶乘的结果 var i = 1;//开始的数字 while (i <= 6) { ji *= ...

随机推荐

  1. Japan

    Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...

  2. web 项目 布在tomcat服务器上出现的问题小记

    1.mysql  安装前需要安装.net framework 框架 mysql  无法安装  最后一布,start server 服务起不来. 原因,为上一次mysql没有删除,干净,导入无法安装. ...

  3. iOS 应用有用户评论功能 因为潜在色情信息被退回解决方案

    应用的每一次退回都是一次很好的学习机会 这次是说我的应用没有对色情的内容进行监管或屏蔽的管理机制 这里我主要是 评论页面 违法 如下 以下提供几种解决方案: 1.按照苹果给的建议  我们添加协议进去 ...

  4. [SEO] 网站标题分隔符

    标题用什么分隔符对SEO最有利 我们在看同行的朋友对网站标题优化时,关键词分按照主次的顺序进行分布,在网站标题或者是关键词之间都会有一个符号,俗话来讲就称为关键词分隔符,网站标 题分隔符分为“-”(横 ...

  5. Photoshop笔记一

    Photoshop界面认识 Photoshop界面认识 区域划分 工作 (快捷键) 功能键 常用键: 新建图层 剪切并原位粘贴 建立图层组合 合并图层 课程练习讲解 区域划分

  6. 【阿里云产品公测】高大上的搜索服务OpenSearch,你值得拥有!

    [阿里云产品公测]高大上的搜索服务OpenSearch,你值得拥有! 作者:阿里云用户trcher ​ 一.前言: 在OpenSearch没出来之前,就一直想给网站做个搜索功能,虽然网站本身自带搜索功 ...

  7. Linux_内存查询

    查询磁盘使用情况: [root@css-management ~]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Moun ...

  8. VS2008/MVC2 项目迁移到 VS2013/MVC4

    第1步.MVC2 => MVC3 手动处理可以参考这个: http://www.asp.net/whitepapers/mvc3-release-notes#upgrading 使用工具 ASP ...

  9. org.springframework.dao.InvalidDataAccessApiUsageException:The given object has a null identifi的解决方案

    异常信息: org.springframework.dao.InvalidDataAccessApiUsageException: The given object has a null identi ...

  10. jQuery源码dom ready分析

    一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前 ...