JavaScrpt基础知识(二)

浏览器、HTML、CSS、JS

浏览器

  1. IE，内核：Trident(IE内核)
  2. Goole，内核：webkit
  3. Firefox, 内核：Gecko

cookies，sessionStorage 和 localStorage

  1. 都是保存在浏览器端，用来存储数据。
  2. cookie可以在浏览器和服务器端来回传递，存储大小不能超高4k。
  3. sessionStorage 和 localStorage在浏览器端存储数据，数据仅在本地保存。存储数据可以很大，达到5M或更多
  4. localStorage可以永久在客户端存储数据，关闭浏览器，数据不会丢失。
  5. sessionStorage关闭浏览器，数据丢失。

谷歌浏览器控制台定义一个函数或者一个常量都会输出undefined

控制台输出的使计算后的结果，如果输入的是js语句或者没有返回值的函数（或表达式），都会输出undefined。

前端移动端适配

参考资料一
参考资料二

屏幕像素密度PPI

PPI:Pixels Per Inch（pixel：像素，per：每个、单独的，inch：英寸）,也就是每英寸长度里包含的像素点个数。这一指标代表了手机屏幕的像素密度，像素密度越高的屏幕一定程度看上去也就越细腻（注：屏幕的细腻程度是由PPI与像素排列方式二者共同决定的，单一的PPI很高也并不能说明问题）。
计算方法：
横向的分辨率/横向的长度（通过屏幕尺寸及屏幕的长宽比计算出来）=横向的PPI
纵向的分辨率/纵向的长度=纵向的PPI

RGB、HEX、RGBA、HSL、HSLA色彩空间

CSS2中色彩模式只有RGB模式和十六进制模式（HEX），为了能够支持透明opacity的Alpha值，CSS3又增加了RGBA色彩模式。但是不管是RGB模式还是十六进制模式都无法主管感受，所以CSS3又加入HSL颜色模式。

RGB:光的三元色，RGB表示红绿蓝三种颜色，通过将红绿蓝三原色的色光以不同的比例相加，从而产生多种多样的色光。三种颜色的取值范围是0-255,rgb(0,0,0)表示白色，rgb(255,255,255)表示黑色。

HEX:即十六进制颜色模式。

RGBA:代表Red、Green、Blue和Alpha的色彩空间。Alpha的取值范围在0-1之间，0表示完全透明，1表示完全不透明。与Opacity区别是，opacity能影响到其他子元素透明度，rgba不会。

HSL：H指hug(色相)、S指saturation(饱和度)、L指lightness(亮度)。通过这三个颜色通道的改变以及相互之间的叠加来获得各种颜色，H取值范围是0°到360°的圆心角，S和L取值范围都是0%到100%的值。

web标准 参考理解

web标准是一系列标准的集合，指的是html/css/javascript三者的分离，网页主要由结构、表现、行为组成。对应的标准也分为三方面：结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准语言主要包括对象模型(如W3C DOM)、ECMAScript等。

web标准的优点：代码的效率、易于维护、可访问性(视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听)、设备兼容性(纯html,换不同的样式可以在不同的设备上呈现不同的表现)、适用网络爬虫/搜索引擎。

可访问性

可访问性就是对所有人一视同仁，无论他们是否由残障。

HTML、XML、XHTML

  1. html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范;
  2. xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言;
  3. xml即是可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签;

网页编码从html>>xhtml>>xml这个过程发展

w3cschool上写的区别：

  1. XHTML必须被正确的嵌套
  2. XHTML元素必须被关闭
  3. XHTML标签名必须用小写字母
  4. XHTML文档必须要有根元素

区别:

  1. xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套。
  2. 对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，
  3. 和
  4. 是不同的标签。
  5. xhtml的属性值必须在引号之中。
  6. xhtml不支持属性最小化。<input checked="checked">和<input checked>
  7. 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

JSON与XML的区别

XML：可扩展标记语言，被设计用来传输和存储数据。
JSON：JavaScript对象表示法(JavaScript Object Notation),是存储和交换文本信息的语法，属于轻量级的数据交换格式。

区别：

  1. 可读性方面：基本相同，XML的可读性比较好
  2. 可扩展性方面：都具有良好的扩展性
  3. 编码难度方面：相对而言，JSON的编码比较容易
  4. 解码难度：JSON的解码难度基本为零，xml需要考虑子节点和父节点
  5. 数据体积方面：json相对xml来讲，数据体积小，占用带宽少，传递的速度比较快
  6. 数据描述方面：XML对数据描述性比较好
  7. 传输速度方面：json的速度远远快于xml

渐进增强和优雅降级

渐进增强: 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。由低版本到高版本

优雅降级: 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。由高版本到低版本

线程与进程的区别

一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

语义化的理解？

HTML的语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

好处:

  1. 去掉或样式丢失的时候能让页面呈现清晰的结构
  2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
  3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  4. 便于团队开发和维护。W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至 实现模块化开发。

为什么利用多个域名来提供网站资源会更有效？

参考理解

请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

  1. 减少http请求（合并文件、合并图片）
  2. 优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图，其真实尺寸有10M之巨…普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现。
  3. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方)
  4. 压缩Javascript、CSS代码
  5. 服务器启用gzip压缩功能：将要传输的文件压缩后传输到客户端再解压，在网络传输 数据量会大幅减小.
  6. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
  7. 网址后面加上“/”:对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

如果你参与到一个项目中，发现他们使用Tab来缩进代码，但是你喜欢空格，你会怎么做?

  1. 建议项目使用EditorConfig之类的规范
  2. 为了保持风格的一致性，保持项目原有的风格
  3. 直接使用vim里的retab命令将所有的tab转换成空格

请谈一下你对网页标准和标准制定机构重要性的理解。

w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

简述src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，srcd的内容是页面必不可少的一部分；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

你用过媒体查询，或针对移动端的布局/CSS吗？

媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

在书写高效 CSS 时会有哪些问题需要考虑？

  1. 样式是：浏览器是从右向左来解析一个选择器的
  2. ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
  3. 不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
  4. 后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
  5. 想清楚你为什么这样写
  6. CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
  7. 我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

解释下浏览器是如何判断元素是否匹配某个CSS选择器？

从后往前判断。

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

举个例子，有选择器：

1
body.ready #wrapper > .lol233

先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

解释一下你对盒模型的理解，以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局

盒模型：margin、border、padding、content

w3c标准盒模型：标签的宽高不包含border盒padding。

ie6之前的盒模型：标签的宽高包含border和padding。

在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题，css3中引入了一个新的属性：box-sizing，它具有“content-box”和”border-box“两个值。

1
box-sizing:content-box

当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括border和padding。

1
box-sizing:border-box

当我们设置box-sizing:border-box;时，浏览器对盒模型的解释与IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

doctype（文档类型）的作用是什么？

DOCTYPE描述了html文档的类型，对不同的DOCTYPE类型，浏览器会使用不同的方法来解析。主要是告知浏览器文档使用哪种HTML或XHTML规范来解析。

清除浮动的方式

  1. 在父元素内部添加一个不浮动无意义空元素，并设置样式clear:both。
  2. 设置父元素的样式：overflow:hidden，触发BFC（Block Formatting Context)。开启BFC的元素不能被浮动元素覆盖，可以包含浮动元素。

  3. 父元素使用伪类清楚浮动：给父元素添加一个clearfix类。

    1
    2
    3
    4
    5
    6
    .clearfix:after{
        content:"";//伪类必须还有content，这里设置为空的content
        height:0;
        display:block;
        clear:both;
    }

  4. 设置外部元素也浮动

什么是闭包，如何使用它，为什么要使用它？

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：

  1. 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
  2. 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
    （关于闭包，详细了解请看JavaScript之作用域与闭包详解）

AJAX的工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

ajax的优点：

  1. 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
  2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
  3. 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
  4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

请解释JSONP的工作原理，以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。
AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样。

”attribute”和”property”的区别是什么？

参考资料

==和===有什么不同

==表示equality等同，===表示identity恒等。==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。

JavaScript 本地对象、内置对象、宿主对象。参考

原生对象：也叫内部对象、本地对象、native object。
内置对象：Build-in object。
宿主对象：host object。

内容
原生对象：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、Global
内置对象：Global（全局对象）、Math
宿主对象：有宿主提供的对象，在浏览器中window对象以及其下边所有的子对象(如bom、dom等等)，在node中是globla及其子对象，也包含自定义的类对象。【何为“宿主对象”？ 在web中，ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。】
全局对象：一般全局对象会有两个，一个是ecma提供的Global对象，一个是宿主提供。如在浏览器中是window、在nodejs中是global。【所以啊，在浏览器中全局对象是Global+window】
通常情况下ecma提供的Global对象对是不存在的，没有具体的对象。

JavaScript中的同源策略

同源策略的含义：脚本只能读取和所属文档来源相同的窗口和文档的属性。

怎么判断是否同源：只有两个文档的具有相同的协议、相同的主机名、相同的端口号（三者缺一不可）时才能叫同源。

注意一点：脚本本身的来源并不作为判断是否同源的依据，而是将脚本所属文档的来源作为判断依据。

描述：文档A中通过script的src引用了一个外部脚本，这个脚本时google提供的，也是从google的主机上加载到文档A中的，那么这个脚本的所属文档是谁呢，答案是文档A。(JSONP实现跨域的原理 就是使用script的src)

将 JavaScript 代码包含在一个函数块中有神马意思呢？为什么要这么做？

立即执行函数表达式（Immediately-Invoked Function Expression）。

IIFE有两个经典的使用场景，一个类似于循环中*定时*输出数据项,二是类似Jquery/Node中的插件和模块开发。

循环中含有定时器输出项：

1
2
3
4
5
6
// 下面这段代码实际输出的是五个5,而我们希望输出的是0,1,2,3,4
for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

使用立即执行函数实现期待中的结果：

1
2
3
4
5
6
7
for(var i = 0; i < 5; i++) {
    (function(param){
        setTimeout(function(){
            console.log(param);
            },1000)
        })(i)
}

在 JQuery/Node 的插件和模块开发中，为避免全局变量污染，也是一个大大的 IIFE：

1
2
3
(function($) { 
        //代码
 } )(jQuery);

下面两个函数的返回值是一样的吗？为什么？

1
2
3
4
5
6
7
function foo1()
{
  return {
      bar: "hello"
  };
}
// 执行foo1()后返回对象{bar:'hello'}
1
2
3
4
5
6
7
8
function foo2()
{
  return
  {
      bar: "hello"
  };
}
// 执行foo2()后，返回undefined

两个函数的区别：foo1中return这一行后面紧跟的是花括号，foo2中return这一行后面没有东西。

在编程语言中，基本都是使用分号（;）将语句分隔开，这可以增加代码的可读性和整洁性。而在JS中，如若语句各占独立一行，通常可以省略语句间的分号（;），JS 解析器会根据能否正常编译来决定是否自动填充分号。
在上述情况下，为了正确解析代码，就不会自动填充分号了，但是对于 return 、break、continue 等语句，如果后面紧跟换行，解析器一定会自动在后面填充分号(;)，所以上面的第二个函数就变成了这样：

1
2
3
4
5
6
7
function foo2()
{
  return;
  {
      bar: "hello"
  };
}

神马是 NaN，它的类型是神马？怎么测试一个值是否等于 NaN?

NaN是not a number的简写。NaN的类型是number,可以通过isNaN(param) 来判断一个值是否是 NaN。

控制台打印下面的输出结果，看看有啥特别的！

1
2
console.log(0.1+0.2); // 输出0.30000000000000004
console.log(0.1+0.2==0.3); // 输出false

javascript的number类型是浮点型。由于采用二进制，javascript不能有限表示1/10、1/2。所以采用二进制运算小数会有误差。

写一个少于 80 字符的函数，判断一个字符串是不是回文字符串

1
2
3
4
function isPalindrome(str) {
    str = str.replace(/\W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));
}
1
2
3
4
5
6
7
8
9
function isPalindrome(line) {  
    line += "";  
    for(var i=0,j=line.length-1;i<j;i++,j--){  
        if(line.charAt(i) !== line.charAt(j)){  
            return false;  
        }  
    }  
    return true;  
}

写一个函数方法实现下面两种表达方式

1
2
console.log(sum(2,4))     //  输出6
console.log(sum(2)(4))    // 输出6
1
2
3
4
5
6
7
8
9
10
11
//  利用arguments来判断参数个数，以及返回函数来计算
        function sum() {
            var _temp = arguments[0];
            if (arguments.length === 2) {
                return arguments[0] + arguments[1];
            } else {
                return function sec(pr) {
                    return _temp + pr;
                }
            }
        }

解释下列代码的输出

1
2
3
4
console.log("0 || 1 = "+(0 || 1));                  // 1
console.log("1 || 2 = "+(1 || 2));                  // 1
console.log("0 && 1 = "+(0 && 1));        // 0
console.log("1 && 2 = "+(1 && 2));        // 2

逻辑与返回第一个是 false 的操作数 或者 最后一个是 true的操作数。如果某个操作数为 false，则该操作数之后的操作数都不会被计算。

逻辑或返回第一个是 true 的操作数 或者 最后一个是 false的操作数。如果某个操作数为 true，则该操作数之后的操作数都不会被计算。

如果逻辑与和逻辑或作混合运算，则逻辑与的优先级高：

1
2
3
console.log(1 && 2 || 0); //2
console.log(0 || 2 && 1); //1
console.log(0 && 2 || 1); //1

在 JavaScript，常见的 false 值：

1
0, '0', +0, -0, false, '',null,undefined,null,NaN

要注意空数组([])和空对象({}): 参考理解

1
2
3
4
console.log([] == false) //true
console.log({} == false) //false
console.log(Boolean([])) //true
console.log(Boolean({})) //true

在 if 中，[] 和 {} 都表现为 true。

控制台运行下列代码：

1
2
3
4
5
6
7
8
var a={},
    b={key:'b'},
    c={key:'c'};
 
a[b]=123;
a[c]=456;
 
console.log(a[b]);   // 456

因为键名称只能是字符串，b/c单作建会调用toString得到的都是[object Object]，a[b],a[c]都等价于a["[object Object]"]，那就是等于更新[object Object]这个键的值了。可以控制台打印出a这个对象看下。

函数声明和变量声明都会提前，但是函数声明提升优先级高于变量声明。类似题目

参考链接

1
2
3
4
5
6
7
var getName = function () {console.log(3)}; 
function getName (){console.log(4)};
getName()  //3 

function getName () {console.log(4)}; 
var getName = function (){console.log(3)}; 
getName() //依旧是3

变量声明提升只是变量声明提升，但是变量的赋值还是在原来的位置

JavaScript的浅拷贝和深拷贝

浅拷贝：浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响。
深拷贝：在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用不包含任何原有对象或对象上任何对象，拷贝后的对象与原来的对象完全隔离，互不影响。

浅拷贝和深拷贝是针对变量类型为引用类型来说的。其实质区别是是否真正的获取到要复制对象的实体。

javascript中的变量分为基本类型和引用类型，基本类型就是保存在栈内存中的简单数据段，引用类型指的是那些保存在堆内存中的对象。

栈内存：存放基本类型。堆内存：存放引用类型(在栈内存中存一个基本类型值保存对象在堆内存中的地址，用于引用这个存放在堆内存中的对象)

  1. 基本类型：undefined、null、boolean、number和string。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问。
  2. 引用类型：值的大小不固定，栈内存中存放的是地址来指向堆内存中的对象。是按引用访问的。栈内存中存放的只是该对象的访问地址，在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把他们保存到栈内存中，但由于内存地址大小是固定的，因此可以将内存地址保存到栈内存中。这样，当查询引用类型的变量时，先从栈中读取内存地址，然后再通过内存地址找到堆内存中的值。对于这种，我们叫做按引用访问。
  3. 基本类型在当前执行环境结束时销毁，而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时，这个对象才被垃圾回收机制回收。

一般来说深拷贝通过递归或循环来实现：资料参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var json1={"name":"鹏哥","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"李鹏"},{"job":"前端开发"}]};
var json2={};
function copy(obj1,obj2){
  var obj2=obj2||{}; //最初的时候给它一个初始值=它自己或者是一个json
  for(var name in obj1){
    if(typeof obj1[name] === "object"){ //先判断一下obj[name]是不是一个对象
      obj2[name]= (obj1[name].constructor===Array)?[]:{}; //我们让要复制的对象的name项=数组或者是json
      copy(obj1[name],obj2[name]); //然后来无限调用函数自己 递归思想
    }else{
      obj2[name]=obj1[name];  //如果不是对象，直接等于即可，不会发生引用。
    }
  }
  return obj2; //然后在把复制好的对象给return出去
}
json2=copy(json1,json2)
json1.arr1.push(6);
alert(json1.arr1);  //123456
alert(json2.arr1);  //12345
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>一直想要来个华丽的变身<br>谢谢大家