javascript学习笔记--更新

1. 普通函数和闭包函数的区别，闭包携带了执行的环境

2. 宏任务和微任务的区别

    宏任务 由宿主环境API创建的任务 例如： setTimeout setInterval

    微任务 由执行环境创建的任务 例如： promise

3. 12.toString() 会报错 Uncaught SyntaxError: Invalid or unexpected token

    原因是这时候12. 会被当做省略了小数点后面部分的数字而看成一个整体，所以我们要想让点单独成为一个 token，就要加入空格，这样写：

12 .toString()

4. 零宽字符

var a = "\uFEFF", b = 'b', c = 'c', d = b + a + c;
console.log(d) // bc
console.log(d.length) // 3
console.log(d.indexOf(a)) // 1

5. var 变量提升与with作用域

var a = 1;

function foo() {
    var o= {a:3}
    with(o) {
        var a = 2;
    }
    console.log(o.a); // 2
    console.log(a); // undefined
}

foo();

在这个例子中，我们引入了 with 语句，我们用 with(o) 创建了一个作用域，并把 o 对象加入词法环境，在其中使用了var a = 2;语句。

在预处理阶段，只认var中声明的变量，所以同样为 foo 的作用域创建了 a 这个变量，但是没有赋值。

在执行阶段，当执行到var a = 2时，作用域变成了 with 语句内，这时候的 a 被认为访问到了对象 o 的属性 a，所以最终执行的结果，我们得到了 2 和 undefined 

6. 函数声明

console.log(foo); // 函数体
function foo(){

}

function 声明出现在 if 等语句中的情况有点复杂，它仍然作用于脚本、模块和函数体级别，在预处理阶段，仍然会产生变量，它不再被提前赋值 

console.log(foo); // undefined
if(true) {
    function foo(){

    }
}

7. 如何选中SVG元素中的a标签

<svg width="100" height="28" viewBox="0 0 100 28" version="1.1"     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <desc>Example link01 - a link on an ellipse  </desc>
<a xlink:href="http://www.w3.org">
   <text y="100%">name</text>
</a>
</svg>

svg|a {  stroke:blue;  stroke-width:1;}

8. 伪元素选择器

<div>
  <p id=a>First paragraph</p>
  <p>Second paragraph</p>
</div>

div>p#a {
    color:green;
}

div::first-line { 
    color:blue; 
}
这段代码最终结果第一行是蓝色，因为 p 是块级元素，所以伪元素出现在块级元素之内，所以内层的 color 覆盖了外层的 color 属性。

如果我们把 p 换成 span，结果就是相反的


<div>
  <span id=a>First paragraph</span><br/>
  <span>Second paragraph</span>
</div>

div>span#a {
    color:green;
}

div::first-line { 
    color:blue; 
}
这段代码的最终结果是绿色，这说明伪元素在 span 之外

9. area连接，可以实现点击图片不同的位置连接到不同的地址

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

10. iframe标签的使用

let elemEF = document.createElement("iframe");
elemEF.src = 'http://**.'
elemEF.style.display = 'none';
document.body.appendChild(elemEF);

11. 正则表达式match 和exec 的使用

const re_date = /(\d{4})-(\d{2})-(\d{2})/;

console.log(re_date.exec('1999-12-30'))
// ["1999-12-30", "1999", "12", "30", index: 0, input: "1999-12-30", groups: undefined]

'a1a2a3'.match(/a\d/gy)
// ["a1", "a2", "a3"]
'a1a2a3'.match(/a\d/g)
// ["a1", "a2", "a3"]

12. ES6扩展运算符的灵活运用方式 ... spread

let obj = {a: 1};
console.log({...obj, a: 2}) // {a: 2}

13. 获取body

document.body

14. 禁止页面滚动

document.body.style.overflow = 'hidden'

// 启用滚动
document.body.style.overflow = 'auto'

15. Object.create

let obj = {a: 1};
let obj1 = Object.create(obj);
console.log(obj1) {};
obj.a // 1
obj1__proto__ // {a: 1}

obj1的原型指向obj