JavaScript篇笔记

  1. <html>、<head>、<body>在相应情况下可省略。而<title>是必须写的。

  2. 除了<div>、<span>其它标签都有默认样式。

  3. ★可以出现在<head>元素内的标签有<meta>、<link>、<title>、<style>、<script>、<noscript>、<base>。

  4. ★<noscript>如果用户浏览器不支持<script>则会显示<noscript>的内容来替代。

  5. ★CSS可替换元素的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。典型的可替换元素有 <img>、 <object>、 <video>和 表单元素，如<textarea>、 <input> 。某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象被称作匿名可替换元素（anonymous replaced elements）。

  6. ★HTML中的空元素：<area>、<base>、<br>、<col>、<colgroup>(when span is parent)、<command>、<embed>、<hr>、<img>、<input>、<keygen>、<link>、<meta>、<param>、<source>、<track>、<wbr>，在极少数的情况下，空元素被错误地称为“无效元素”(void element)

  7. body标签的默认margin是8像素。

  8. button和input设置按钮时的区别：input为空元素，里面不能加东西，button里面可以添加东西！

  9. 当你在加载图片的时候会把加载的图片放在原来img的地方替换它。

  10. ★可替换元素自带宽高，可以设置属性覆盖，还可以设置CSS覆盖属性。

  11. 全局属性contenteditable是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修元素的部件(widget)以允许编辑。该属性必须为下面的值之一：
    ----- true或空字符串，表示元素是可编辑的
    ----- false，表示元素是不可编辑的
    如果没有设置该属性，其默认值继承自父元素
    该属性是一个枚举属性，而非布尔属性，这意味着必须显式设置其值为true、false或空字符串中的一个，并且不允许简写为<label contenteditable>Ex</label>(注：这在大部分浏览器中是有效的)，正确的用法是<label contenteditable="true">Ex</label>

  12. a标签里面的target属性：

    • _black：在空白页打开，相当于打开新页面
    • _self：在本窗口打开
    • _parent：在父窗口打开
    • _top：在最上层窗口打开，例如爷孙三代就在爷爷页面打开

  13. a标签的download属性：文件没有download也能下载，那是为什么？由http响应决定，如果你将http的content-type设置为content-type:application/octec-stream，则表示任意二进制保存;若没有那个，而是text/html，则可以用download属性。

  14. ★http-server -c -1 不要缓存

  15. a标签的href：

    • "#"表示锚点会在页面内的跳转，不发请求
    • "?name=ex"会在页面发起GET请求并在路径后面加上参数?name=ex
    • JS伪协议："javascript: ;"是可点击，但什么也不做的链接
    • ""会刷新页面
    • 无协议//……会根据本页面协议，相对路径

  16. a标签跳转页面是发GET请求，form标签跳转页面是发POST请求，form默认GET，form表单里必须有提交按钮

  17. file协议不支持POST

  18. GET会默认让数据出现在查询参数中，会在地址栏中看到，可通过给action传值让POST也有查询参数

  19. form标签的target与a标签一样

  20. 1⃣️一个form中如果button标签的type属性未设置submit值，且为空，则它会自动升级为submit值可提交，若type设置为button则不会改变值类型
    2⃣️input则不会有以上问题，type设置什么就是什么
    3⃣️input标签：一：checkbox中若希望点击文字也可以勾选checkbox选项则：<input type="checkbox" id="yourId"><label for="yourId">选择</label>,老司机写法：不用id和for，直接用label把input包起来；二：checkbox默认未选中不显示，选中值为on，可通过value进行更改；三：radio同名时只能有一个被选中。

  21. select下拉菜单：

    <select name="nameA">
  <option value="分组"></option>
  <option value="1" disabled>不能选</option>
  <option value="2" selected>默认选中</option>
</select>
<select name="group" multiple>可多选</select>

  22. textarea标签：用css设置其表现样式比较好

  23. table标签：

    • 允许的子标签：(1可选)<thead>(表头)、(0-more)<tbody>(表体)、(1可选)<tfoot>(表脚)、(1可选)<caption>、(0-more)<colgroup>、(1-more)<tr>
    • <tr>(表行table row)、<td>(表数据table data)、<th>表标题table header)
    • <colgroup><col width=100>控制每列宽度</colgroup>
    • 若<thead><tbody><tfoot>顺序错乱，但浏览器会自动纠正显示顺序，所以最后成像与四个标签顺序无关，若没有头、身体、尾，则会全部放在自动生成但<tbody>里，然后按照代码顺序一次排列
    • table的border默认有空间；可以使用border-collapse: collapse;去掉空隙

  24. @import url(./b.css);在css页面引用css

  25. 四种修改样式方法：1⃣️内联style属性；2⃣️style标签；3⃣️外部文件css link；4⃣️@import url(./b.css)

  26. 如何去除无序列表中小圆点的样式：在ul中使用list-style: none;

  27. 使元素并列可用float，用float就会有bug，就直接用.clearfix::after{}类来解决bug。

    .clearfix::after{
    content: '';
    display: block;
    clear: both;
}/*注：将此类加在所有浮动元素的爸爸身上*/

  28. .className>nav>ul {}：ul必须是nav的儿子，nav必须是.className的儿子

  29. 默认字体大小16rpx(计算出的样式，浏览器不同可能不同)

  30. 颜色最终由浏览器渲染得出，不一定是你代码的颜色

  31. text-decoration: none;无下划线 || underline wavy red;红色波浪下划线

  32. 为避免为之后元素加边框会影响元素变动，可在之前元素上加上相同大小的透明边框

  33. 如何解决儿子高度比父亲大？在子元素上加上display: block;

  34. color: inherit;继承父元素颜色

  35. 最后准确的指定标签的class

  36. line-height的值是多少像素，那么span所占的高度就是多少像素。line-height是可以确定内联元素高度的

  37. div的高度是由其内部文档流元素的高度总和决定

  38. 文档流：文档内元素的流动方向。内联元素从左到右，遇到宽度不够就换行；块级元素，每个块各占一行，从上往下。
    现象：1⃣️一个span不会被分成两块span，而是两部分；2⃣️但英文很长且连贯时，不会换行，可用word-break属性强制换行

  39. 内联元素但高由什么决定？

    • font-size: 100px;是指文中文字最高但一点到最低但一点但高度，例如haaag，中但h的最上面和g的最下面，没有hg也是这样。
    • span含有文字时，会自动适应高度，此高度为建议行高比font-size更高，各字体不一样。
    • 水平对齐：其实是基线对齐，而不是真的中线对齐

  40. position: fixed;脱离文档流，相对于 屏幕固定，原来有空隙的宽度会被省略掉，缩减到刚好包含有宽度的元素，可用width: 100%;恢复原状(但有bug)，再在外面加一个div影响样式最好

  41. max-width: 有自适应

  42. 如果你有一个div还有宽度，用margin-left: auto;margin-right: auto;就会自动居中

  43. 内联元素不接受宽高，可用display: inline-block(少用)

  44. 绝对定位脱离文档流：1⃣️在子元素上写position: absolute;2⃣️在父元素上写position: relative;

  45. 有时出现偏上方没有居中，可用vertical-align: top;一般是加了display: inline-block的bug

  46. position的取值：1⃣️sticky2⃣️absolute3⃣️fixed4⃣️relative5⃣️static

  47. line-height的默认值为normal，大家常理解normal相当于line-height的值是1或者1.2，当line-height的值为数字时(而非像素)，表示是font-size的倍数。chrome的默认line-height值是font-size的1.3倍

  48. css中width的默认值是auto

  49. 两种盒子模型尺寸基准：1⃣️content-box(默认)2⃣️border-box
    区别：content-box的width不包括padding和border的宽(高)度；而border-box的width包括

  50. ★HTML结构为div.parent > div.child，如果parent为{width: 1000px; padding: 100px;}那么div.child所占宽度为1000px

  51. 默认div中有::before和::after，div中输入的元素一般在其两者之间

  52. 伪元素不是元素，无法选中，复制

  53. 伪元素::before和::after默认不出现，可以加入内容{content: "";}就会显示效果

  54. 绝对定位就会自动变为display: block;

  55. 元素只能有一级伪元素，伪元素不能有伪元素之类

  56. 内联元素想居中，需要在其父元素上设置居中

  57. 可用box-sizing来改变盒模型的测量方案，来实现重新计算宽高

  58. 一个:是伪类，两个::是伪元素

  59. 最好只使用padding+border-box，margin在IE下有bug

  60. 结构化编程：1⃣️一行一行地执行2⃣️有条件控制语句if…else3⃣️有循环语句while…do

  61. 在input，button等可点击中使用outline: none;去掉点击出现等外边框

  62. css将所有小写字母变成大写字母：text-transform: uppercase;

  63. prompt：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
    result = window.prompt(text,value);result用来存储用户输入文字的字符串或null；text用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写，value文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。

  64. box-shadow：可扩展阴影效果

  65. background-size: cover;保证图片覆盖全屏

  66. 网页图标位置：根目录/favicon.ico

  67. display: flex居中定位：justify-content: center; align-items: center;

  68. canvas有宽高，不会因为修改inline-block而变

  69. canvas要先填充再画图，不然先画图再设置属性无作用

  70. ★canvas初始宽高不要用css控制，图会等比例变化

  71. ★使canvas全屏：

    window.onresize = function () {
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    canvasId.width = pageWidth;
    canvasId.height = pageHeight;
}

  72. parseInt('1000',2)：2表示二进制，不填默认是十进制

  73. ★parseFloat('3.14more non-digit')：值是3.14

  74. ""这个JS字符串的length是1，转移符不算

  75. "\u007A"这个JS字符串的length是1，转移符为一个字符

  76. JS七种数据类型：number,string,boolean,symbol,null,undefined,object

  77. 0b开头为二进制，0开头为八进制，0x开头为十六进制，e表示10，e2表示10^2

  78. var a = "123 \
       456"//多行字符串，不加"\"会报错

  79. ES6新特性：

    var a = `123
        456`//多行字符串包含回车

  80. 有一对象，不给值=>null=>var obj = null
    有一非对象=>undefined=>var obj

  81. 对象访问属性：person['name']，访问person里面name对应的值，若写成person[name]，则访问person里面name的值所对应的值

  82. 对象可设置空字符串属性，用person['']调用，属性也遵循标示符原则(不用引号时)

  83. 对象属性加引号功能强大，也可'a b',不加引号限制多

  84. 对象的点属性必须满足标示符原则，否则用[]访问

  85. person有属性name，无值：person.name=>undefined,'name' in person=>true
    person删除name，无值：person.name=>undefined,'name' in person=>false

  86. for(var key in person){
   console.log(key,person[key])//console.log(key,person.key)不能打印，因为key为字符串
}

  87. typeof null => 'object' 应为 'null'
    typeof function(某个函数) => 'function' 应为 'object'

  88. JavaScript引擎不能自动识别编号大于0xFFFF的Unicode字符

  89. 1⃣️全局函数atob()能将Base64编码转为原来的编码；2⃣️全局函数btoa()能将字符串转为Base64编码；3⃣️要将非Ascll码字符转为Base64编码，必须在中间插入一个转码环节

  90. 查看所有属性，可用object.keys方法

  91. ★快速转换其他类型为字符串，直接在前||后面添加''(空字符串)，功能相当于在变量后面加toString()，而null，undefined无该属性，而前一种方法也可以将其转化为字符串

  92. Boolean(NaN)、Boolean(0)、Boolean('')、Boolean(null)、Boolean(undefined)都为false，对象及其它均为true

  93. ★老司机用!!来取布尔值，而不用Boolean()

  94. 转Number？

    • Number('1') === 1
    • parseInt('1',10) === 1 (全局函数，10可省略，默认是10，表示10进制)
    • parseFloat('1.23') === 1.23
    • '1' - 0 === 1 (老司机用)
    • + '1' === 1、+ '-1' === -1、+ '.1' === 0.1、- '1' === -1、- (- '-1') === -1
      例如parseInt('S') === NaN，parseInt('1sb') === 1 (能转多少是多少)

  95. JS规定数字存64位，字符存16位(ES5)

  96. 当对简单值(如：var n=1),使用toString()时，(它本身无此方法)它会临时申请变量temp(temp = new Number(n);return temp.toString();)，此后被回收，用时又创建新的

  97. 1.toString()语法错误 | 1..toString() === '1'

  98. 滚动事件：onscroll
    window.scrollY：返回文档在垂直方向已滚动对像素值

  99. 有时x.target(不可靠)与x.currentTarget(不可靠)有可能不是同一个(在点击事件时)

  100. a.href是带http协议对浏览器加的；a.getAttribute('href')是用户写入的

  101. elementList = parentNode.querySelectorAll(selectors);返回一个静态NodeList，包含至少一个指定选择器匹配的元素的Element对象，或者没有匹配的空的NodeList
    注：如果selectors参数中包含 CSS伪元素，则返回的列表始终为空。

  102. setTimeout()只执行一次，而setInterval()能一直循环执行，给setInterval()取个ID名在其内部通过window.clearInterval(id)去掉它

  103. Object对象有无new都一样，都生成对象，根据给定的值返回不同类型对象：
    例：Object(1) => Number {[[PrimitiveValue]]: 1}
    Object('sss') => String {[[PrimitiveValue]]: 'sss'}
    以下不一样：String(1) => '1'(常量，字符串)
    new String(1) => String {[[PrimitiveValue]]: '1'}(对象)

  104. var a = Array(3)：会生成长度为3，三个数值都是undefined的数组
    var a = Array(3,3)：会生成长度为2，两个数值是3，3的数组
    加不加new都一样

  105. var f = new Function('a','b','return a+b')
    'a','b'以字符串形式传入参数，'return a+b'运行函数体
    如果是复杂对象，加不加new返回值一样
    如果是基本类型，加不加new返回不同值
    function(){}与Function()：function是关键字，Function是全局对象

  106. 数组是对象，故可以向数组中添加属性

  107. arguments构成伪数组

  108. forEach()接受一个函数 => forEach( function(x,y){})：x为"value"，y为"key"
    forEach()可以通过this获取到第一个参数，即"."前面的数，例：a.forEach ; this => a

  109. sort()排序是从小到大，可添加函数改变方向，函数必须接受两个参数，且有返回值
    a.sort( function (x,y) {return x-y})(内置快排)

  110. a = [1,2,3]; a.join('yk') => "1yk2yk3"(数组变字符串)；join不传参，默认','

  111. a = [1,2,3];b = [4,5,6];a + b => "1,2,34,5,6"
    a.concat(b) => "1,2,3,4,5,6"(原来的a和b不变)；concat返回一个新数组，故可用来复制数组
    1⃣️var b = a.concat([]) => a===b为false2⃣️var b = a => a===b为true

  112. map(映射)与forEach差不多，forEach无返回值，map有返回值
    a.map(value => value * 2) <==> a.map(function (value,key) { return value * 2 }) => [2,4,6](原来的a不变)

  113. 所有数组的方法中只有``sort()`会改变原数据的值(位置)

  114. a.filter与map差不多，过滤
    a = [1,2,7,8];a.filter(function (value,key) { return value >= 5 }) => [7,8](原来a不变)

  115. a.reduce(function (sum,n) { return sum + n },0) <==> a.reduce( (sum,n) => sum + n,0)
    sum：之前的结果；n：当前的数字；0：初始值

  116. map、filter、forEach都可用reduce实现

    //用reduce表示map
a.reduce( function (arr,n) { 
  arr.push(n*2);
  return arr;
},[])//[2,4,6]
//用reduce表示filter
a = [1,2,7,8];
a.reduce( function (arr,n) { 
  if(n >= 5) {
    arr.push(n);
    return arr;
  }
},[])//[7,8]

  117. reverse()可以使数组倒过来

  118. 函数的五种生命方式：

    • 1⃣️function () {}(浏览器会自动加上“return undefined”)匿名函数(必须赋值)
    • 2⃣️function x() {}具名函数，可用console.log()打印出x，作用域是全局
    • 3⃣️var x = function y() {}不可用console.log()打印出y，报错，作用域只在y内部
    • 4⃣️f = new Function ('x','y','return x + y')
    • 5⃣️f = (x,y) => {}箭头函数——若只有一句话，且不返回对象 (可变形成)=> f = (x,y) => x + y (return 与 {} 一起省略)；若只有一个参数 => f = n => n*n；箭头函数不能有名字

  119. 函数有个属性name：

    function f () {} | f.name => 'f'
var f2 = function () {} | f2.name => 'f2'
var f3 = function f4 () {} | f3.name => 'f4'
var f5 = new Function('x','y','return x + y') | f5.name => 'anonymous'

  120. f(1,2) <=> f.call(undefined,1,2)

  121. call的第一个参数可以用this得到；call后面的参数可以用arguments得到

  122. 面试题：

    var a = 1;
function f1() {
  f2.call();
  console.log(a);//undefined => 变量提升
  var a = 2;
}
var a = 1;
function f2() {
  console.log(a);
  var a = 2;
  f3.call();//看此函数的原作用域及其父作用域，寻找a，最后是全局作用域的a=1
}
function f3() {
  console.log(a);//1
}
f1.call();//undefined 1 undefined
console.log(a);//1

  123. 如果一个函数，使用了它范围外的变量，那么(这个函数+这个变量)就叫做闭包

  124. var a = console.log(1);//a的值是undefined

  125. var a = (1,console.log(2));//a的值是undefined
    var a = (1,2);//a的值是2

  126. function f1() {
  console.log(this);//{name: 'obj'}
  function f2() {
    console.log(this)//打印出Window对象
  }
  f2.call()
}
var obj = {name: 'obj'};
f1.call(obj)

  127. isEqualNode()是相同的，isSameNode()是同一个

  128. Dom通过querySelector/querySelectorAll查找的都是伪数组

  129. 常见节点的类型有7种：

    • ELEMENT_NODE:1
    • TEXT_NODE:3
    • PROCESSING_INSTRUCTION_NODE:7
    • COMMENT_NODE:8
    • DOCUMENT_NODE:9
    • DOCUMENT_TYPE_NODE:10
    • DOCUMENT_FRAGMENT_NODE:11

  130. Dom树的根节点是html

  131. HTMLCollection实例对象可以用id属性或 name属性引用节点元素，NodeList只能使用数字索引引用

  132. childNode接口的方向有：after(),before(),remove(),replaceWith()

  133. 最好在运用jQuery的变量前加上$，好识别

  134. <div id=parent></div>：如果有父窗口，就是父窗口；如果没有，就是当前窗口；window有parent的默认属性

  135. 立即执行函数，申请匿名函数，立即执行
    (function () {}()) 或 (function () {}.call()) || (function () {})() 或 (function () {}).call() || -function () {}() 或 -function () {}.call()
    等等等……+/!/~(二进制取反)

  136. { var parent = 1}//若用var，parent会成为全局变量，因为没有function阻止其变量提升
    { let parent = 1}//这样能实现局部变量parent，即立即执行函数，let不会让变量提升

  137. jQuery的one方法只监听一次，最近一次动画才有效

  138. 常用Dom Level2事件：

    • Dom L1 onclick = "要执行的代码"；x.onclick = print//不要执行，也不要结果
      HTML：onclick = "print()" || JS：x.onclick = print
    • Dom L2 onclick与addEventListener('click',function () {})的区别：
      1⃣️onclick是属性，只执行一次，易重复被覆盖(别人或自己)，唯一
      2⃣️addEventListener是队列模式，先绑定就先触发，非唯一
    • ★addEventListener('',function () {},?)：?处不填或者填6个false值表示冒泡事件，从小到大，若？处填true，则表示捕获事件，由大到小
    • 事件一定是先捕获后冒泡吗？不一定
      事件模型示例图.jpeg

      若在自己身上同时存在捕获冒泡事件，则按照事件代码书写顺序执行；若在父类或祖先类身上同时有捕获冒泡事件，则按照事件模型顺序：先捕获，后冒泡

  139. e.stopPropagation()阻止事件传播；e.preventDefault()阻止默认事件

  140. jQuery:$(wrapper).on('click',false) === $(wrapper).on('click', function (e) { e.preventDefault() } )

  141. 在点击事件中只用one事件来实现浮层的显隐，减少内存消耗

  142. setTimeout(function(){},0)会在原本事件完成那一瞬间执行

  143. jQuery中clone(false)不克隆子元素，clone(true)克隆该元素及其所有子元素

  144. 在实现无缝轮播时，有时切换会出现其它画面，可通过offset()清除掉
    例：$slide.hide().offset();$slide.css(…).show()

  145. 用img传值只能使用get方法

  146. 用script传值，必须将其放入body内才能传值，结束时用事件移除script——SRJ(server rendered javascript)方案

  147. JSON +(with) padding = JSONP (填充式JSON，参数式JSON)
    请求方：rose.com的前端程序员(浏览器)
    响应方：jack.com的后端程序员(服务器)

    • 1⃣️请求方创建script，src指向响应方，同时传一个查询参数?callbackName = xxx
    • 2⃣️响应方根据查询参数callbackName，构造形如：xxx.call(undefined,'你要的数据')或xxx,('你要的数据')这样的数据
    • 3⃣️浏览器接收到响应，就会执行xxx.call(undefined,'你要的数据')
    • 4⃣️那么请求方就知道了他要的数据

    约定：1.callbackName => callback; 2.xxx => 随机数(避免重复，用完即弃)

  148. 请求JSONP为什么不支持POST请求？
    a.因为JSONP是通过动态创建script实现的
    b.动态创建script时，只能用GET，没法用POST

  149. 手写AJAX：

    myButton.addEventListener('click', (e) => {
  let request = new XMLHttpRequest()
  request.open('get','http://baidu.com:8080/xxx')
  request.send()
  request.onreadystatechange = () => {
    if(request.readyStatus === 4) {
      if(request.status >= 200 && request.status < 300){
        let str = request.responseText
        let obj = window.JSON.parse(str)
      }
    }
  }
})

  150. 跨域资源共享(CORS—Cross-Origin Resource Sharing)

  151. Promise语法：return new Promise(function (resolve , reject)

  152. 监听Form的submit事件最好处理表单提交

  153. ★JavaScript的或(||)与且(&&)基本不可能是 true/false，一般都是truly/falsy(现取)
    1|| 2 => 1 ; 1 && 2 => 2
    1 && 0 && console.log(3) // 0 =>到0就 判断完了，不会执行console.log(3)语句，找到第一个假值，如果没有找到就是最后一个真值
    0 || undefined || null || 1 // 1 => 找到第一个真值，找到之后不再找

  154. <pre>标签是预览标签，可以看到任何细节

  155. setInterval()只看第一次传的时间间隔，以后都以此为准，setTimeout()每次都以time为准

  156. 刷新页面session失效

  157. ★Cache-Control：选择资源被缓存，例：max-age:30=> 30s内不要请求重新加载该文件(不会发送请求，直到30s之后)
    首页不要设置Cache-Control，否则用户永远无法加载更新最新页面
    尽量将一个版本缓存久一点，若想要更新，则修改以下url，它会自动加载新文件也可以在文件名中加入随机数更改如：main.ac45jbdc5.css

  158. Expires => 指定时间过期(本地时间难以控制) ('Expires','sun, 04 Feb 2018 14:40:05 GMT')

  159. Etag会请求，不加载第四部分，返回304(无修改) || 将原文件MD5给Etag，然后比对判断是否加载，下一次的头中带有"If-None-Match"字段比对之前的Etag携带的MD5

  160. Last-Modified：在第一次访问服务器200之后，得到请求内容，同时带有Last-Modified标记服务器最后一次被修改时间，在第二次访问服务器时会传送"If-Modified-Since"字段，询问最后更改时间，若一致，则返回304，若修改则重新加载。若"If-Modified-Since"时间比服务器当前时间还晚，则被认为是非法请求

  161. _.join(['Hello','webpack'],'');//Lodash是一个JS实用工具库，该方法由它提供
    => Hello webpack
    _.join(['a','b','c'],'~');//"a~b~c"

  162. axios是专注于AJAX的一个基于Promise的HTTP库(只有AJAX功能)

  163. axios拦截器：

  164. 占位符：

  165. ES6解构语法：

    let config = response.config
let { method,url,data } = config
//前两句相当于
let { config : { method,url,data }} = response

  166. 委托

  167. Object.assign批量修改

    var book = { name: 'a', name: 1, id: 1 }
Object.assign( book , { name: 'b' },{ num: 2 }) => book: { name: 'b', num: 2, id: 1 }
Object.assign( book , { id: 2 },{ id: 3 }) => book: { name: 'b', num: 2, id: 3 }

  168. mock

  169. 绑定this，使用bind()

  170. Vue的template只读取第一个标签(根元素)，之后不读；Vue会精准定位更新，Vue自带bindEvents

    var View = new Vue({
  data: {
    book: {}
  }
})
View.book(data相当于没用)

  171. 单项绑定：

  172. 双向绑定：

  173. 发布/订阅模式：解耦合

  174. ES6新语法：render( data = {} )：若data为空则为{}，否则为原值

  175. Object.assign ( this, data, {
  id: id,
  name: attributes.name,
  singer: attributes.singer,
  url: attributes.url
})//将第二个的值赋给第一个，属性、方法一起

  176. ES6新语法：如果key和value一样，则只用写一个，如：{ id: id } === { id }
    …Attributes === 将Attributes里的所有东西拷贝

  177. 传值时最好用新地址，即使用深拷贝

  178. array = search.split('&').filter((v => v))//通过v字符串判断及过滤掉空字符串(true保留，false舍弃)

  179. dom.getBoundingClientRect()//可获取与屏幕的距离

  180. ParentNode.prepend()//在第一个子节点之前插入一组Node对象或DomString对象(text文本)

  181. jQuery的.html(htmlstring)代替指定元素内容

  182. jQuery的$("").empty()//删除匹配的所有子节点

  183. 匿名函数的执行环境具有全局性，故它的this对象指向windows

  184. slice( begin, end )：都可选，提取从begin开始(包含begin)到end结束(不包含end)，正数就从头开数，负数就从尾开数

  185. 箭头函数：当只有一个参数时，()可选 => (e)=>{} === e => {}

  186. undefined + 1 = NaN

  187. 当一个函数被声明两次的时候，后一次声明覆盖前一次声明，且函数也有变量提升，故和var一样，会被提到开头

  188. setTimeout()不管加不加时间都会做异步处理，会被放在末尾加入队列，当文件执行完成后会去执行此段代码

  189. validator: validator <=> validator

  190. destroy()并不能在页面删掉自己，需用remove()

  191.  if(name === this.name){ this.active = true}else this.active = false
 简化 <=> this.active = name === this.name

  192. () => {} <=> function () {}.bind(this)

  193. ★x与x.bind()是两个函数，若在删除监听器时使用，则无法正确删除监听器，故用 let name = () => {}函数来解决
    x.bind()会返回一个新函数

  194.  function Man(name){
   Human.call(this.name)
   this.gender = '男'
 }
 Man.prototype.__proto__ = Human.prototype//IE不支持

    不想继承Fn自带属性，只要prototype，那就相当于空对象

    var f = function () {}
f.prototype = Human.prototype
Man.prototype = new f()//IE支持

    var obj = new Fn()中new的过程：

    • 1⃣️产生一个空对象
    • 2⃣️this = 空对象
    • 3⃣️this.__proto__ = Fn.prototype
    • 4⃣️执行Fn.call(this,x,y,…)
    • 5⃣️return 4⃣️的结果(this)

  195. prototype属性，只有一个功能，存放共有属性对象的地址
    var yk = new Man() =>


  196. ★Promise的一些小测验：

    let promise = new Promise( function(resolve,reject){
  console.log('promise1')//会立即执行，无异步，同步
  resolve()             //异步
})
console.log('promise2')
setTimeout(function () {
  promise.then(function () {
    console.log('promise3')
  })
  console.log('promise4')
})
console.log('promise5')
setTimeout(function () {
  console.log('promise6')
})
promise.then(function () {
  console.log('promise7')
})
setTimeout(function () {
  console.log('promise8')
})
promise.then(function () {
  console.log('promise9')
})
console.log('promise10')
输出结果：
//无异步
promise1
promise2
promise5
promise10
//promise
promise7
promise9
//setTimeout
promise4
promise3
promise6
promise8

    ★故：输出时间长度：setTimeout > Promise > 同步(处理顺序主要与“宏任务与微任务”有关)

  197. class的extends就是为了实现 Man.prototype.__proto__ = Human.prototype,像这样直接修改会很消耗性能(浏览器会检查一遍)

  198. 常见术语：
    1⃣️mixin—混入(把一个值的属性一个一个拷贝到另一个值上)，就是现在的Object.assign()

    var mixin = function (a,b) {
  for(let key in b){
    a[key] = b[key]
  }
}

    2⃣️currying—柯里化(把n个自变量的函数变成(n-1)个自变量的偏函数的过程)

    var cache = []
var add = function (n) {
  if(n === undefined){
    return cache.reduce((p,n) => p + n, 0)
  } else {
    cache.push(n)
    return add
  }
}
add(1)(2)(3)(4)() //10

    3⃣️HOC—高阶函数(接收一个或多个函数作为输入式或输出一个函数)

    function add(x,y) { return x + y }
var f = Function.prototype.bind.call(add, undefined, 1)
f(2) //3

  199. 并行下载，串行解析

  200. Web性能优化：
    1⃣️：减少DNS查询
    2⃣️：TCP连接复用：keep-alive
    3⃣️：减小Cookie，缓存文件，浏览器会同时请求多个文件
    4⃣️：Gzip压缩文件(会耗CPU，权衡一下)
    5⃣️：DOCTYPE不能不写且不能写错
    6⃣️：cdn(内容分布网络)加速
    7⃣️：css放head里，js放body最后(尽早下载样式)
    雅虎35条性能优化：1.引入JS，CSS而不是在页面写的好处是可缓存……

  201. ★MacroTask & MicroTask(宏任务与微任务)

    • setTimeout() ：属于宏任务         | 精确度不高，可能有延迟执行的情况发生，且因动用红黑树，所以消耗资源大
    • setImmediate()：属于宏任务       | 消耗资源小，不会造成阻塞，效率最低
    • process.nextTick()：属于微任务 | 效率最高，消耗资源小，会阻塞CPU的后续调用
      调用顺序：process.nextTick() > setImmediate() > setTimeout()
      宏任务与微任务.jpeg

      MacroTask优先级：script(主代码块) > setImmediate > MessageChannel(未实验过) > setTimeout/setInterval > I/O > UI rendering
      MicroTask优先级：rocess.nextTick > Promise > Object.observe(已废弃) > MutationObserver(不兼容，H5特性)

  202. str.charAt(index)—从一个字符串中返回指定到单个字符

  203. str.substr(start[,length])—返回一个字符串中从指定位置开始有指定长度个字符

  204. str.substring(start[,end])—返回一个字符串中从开始位置到结束位置(不包括)到字符

  205. 获取当前页面url：window.location.href

  206. 事件中的：

    • clientX：点击位置距离当前body可是区域X坐标
    • layerX：FireFox特有,不考虑
    • movementX：是只读属性，它提供了当前事件和上一个mousemove事件之间鼠标在水平方向上的移动值
    • offsetX：相对于带有定位的父盒子X
    • pageX：对整个页面来说，包括被卷去的body长度
    • screenX：当前电脑屏幕
    • x：于screen一样

  207. 模版字符串—反引号(``)来替代普通字符串中的双引号和单引号。模版字符串可以包含特定语法(${expression})的占位符。在模版字符串中使用反引号(`)时需在前面加转义符()
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    更新于2019-01-10
    这是自己平时书写的笔记，有很多漏洞，也有很多错误，还望大家多多指正，感谢🙏

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,406评论 1赞 45
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,072评论 0赞 3
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1赞 92
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,096评论 0赞 21
  • 止於前人步履的文化
    閱讀歷史是前人的智慧 文化是傳承 先人給予的輝煌成就 藝術創作 是開啟未知的領域 我們正在寫著新歷史 有些人卻步了...
    蔡振源阅读 350评论 0赞 1