sb前端 迷一样

Promise封装ajax：

下面是一个用 Promise 对象实现的 Ajax 操作的例子。

function ajax(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest(); 
        req.open('GET', URL, true);
        req.onload = function () {
        if (req.status === 200) { 
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            } 
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send(); 
    });
}
var URL = "/try/ajax/testpromise.php"; 
ajax(URL).then(function onFulfilled(value){
    document.write('内容是：' + value); 
}).catch(function onRejected(error){
    document.write('错误：' + error); 
});

上面代码中，resolve 方法和 reject 方法调用时，都带有参数。它们的参数会被传递给回调函数。reject 方法的参数通常是 Error 对象的实例，而 resolve 方法的参数除了正常的值以外，还可能是另一个 Promise 实例，比如像下面这样。

var p1 = new Promise(function(resolve, reject){
  // ... some code
});
 
var p2 = new Promise(function(resolve, reject){
  // ... some code
  resolve(p1);
})

上面代码中，p1 和 p2 都是 Promise 的实例，但是 p2 的 resolve 方法将 p1 作为参数，这时 p1 的状态就会传递给 p2。如果调用的时候，p1 的状态是 pending，那么 p2 的回调函数就会等待 p1 的状态改变；如果 p1 的状态已经是 fulfilled 或者 rejected，那么 p2 的回调函数将会立刻执行。

JS中的六大数据类型

js中有六种数据类型，
包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,
和一种复杂数据类型（Object）。
由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，
也就是typeof关键字。
typeof 123　　 //Number
typeof ‘abc’　　//String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
typeof console.log() //Function
typeof NaN // Number
null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。
console.log(undefined instanceof Object) // false

转型函数-Number()/Booean()/String()

• Boolean()：返回值：true/false
  Boolean(‘abc’/123/非空对象) = true
  Boolean([]) = true
  Boolean({}) = true
  Boolean(空字符串/0/null/undefined/NaN) = false

• Number()：返回值：数字/NaN/正负Infinity
  Number(“0123”/123/true/false/null/空字符串) = 数字
  Number(NaN/undefined/0除以0) = NaN
  Number(正负Infinity) = 正负Infinity
  Number(null) = 0

• String()：返回字符串，
  String(有toString()方法的对象，无入参) = “字符串”;
  String(null) = “null”; String(undefined) = “undefined”;

其他：
xx.toString()：返回字符串
字符串.toString()：返回该字符串的一个副本
数值.toString(args)：args是基数，返回指定基数的数值
注：只有Number、Object、Boolean、String有toString()方法，Null和Undefined没有

• isNaN()：返回值：true/false
  isNaN(“abc”/“NaN”/undefined) = true
  isNaN(“123”/空字符串/null/Infinity) = false

NaN:是一个值，不是函数
Infinity*0 = NaN;
0\0 = NaN;
注：NaN和本身不相等

• parseInt()：返回整数/NaN
  parseInt(“123cdv”/22.5/023) = 整数
  parseInt(“a2”/null/undefined/空串/NaN/Infinity) = NaN
  parseInt(“0xAF”/“AF”,16)=175 十六进制

• parseFloat()：返回数字/NaN
  parseInt(“a12”/null/undefined/空串/NaN) = NaN
  parseFloat(“12.34.5”/12.34abc) = 12.34
  parseFloat(Infinity) = Ifinity

最大数：Number.MAX_VALUE
最小数：Number.MIN_VALUE
isFinite()：true/false，判断数是否在最大和最小范围

隐式类型转换
隐式转换

console.log (1+“2”+“3”); // 123
console.log (1+ +“2”+“3”); // 33
console.log (“A”-“B”+“3”); // NaN3
console.log (“A”-“B”+3); // NaN
???
console.log (1+ +“2”); //3
console.log (1+ +2); //3
console.log (“1”+ +2); //12
console.log (“1”+ +“2”); //12
console.log (+ +1); //1
console.log (+ +“1”); //1

相等和不相等——先转换再比较 ==
全等和不全等——仅比较而不转换 ===

js真值和假值

数值类型 转换成布尔值
undefined： false
null： false
布尔值： true是true ,false是false
数字： 0 和NaN是false,其他是true
字符串： 空字符串为false,其他为true
对象： true

判断数组类型

instanceof

var ary = [1,2,3,4];
console.log(ary instanceof Array); //输出true

原型链

var ary = [1,2,3,4];
console.log(ary.__proto__.constructor==Array);  //输出true
console.log(ary.constructor==Array)  //输出true 

完美方法

var arr = [1,2,3,4];
console.log(Object.prototype.toString.call(arr))  //输出"[object Array]"

ES5定义了Array.isArray:

Array.isArray([]) //true

absolute定位

只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。
绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

noscript

所有浏览器都支持noscript 标签。如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。无法识别标签的浏览器会把标签的内容显示到页面上。

属性继承

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse

Promise状态

promise 有三种状态
Pending(进行中，初始状态，既不是成功，也不是失败状态。)、Resolved(已完成，又称 Fulfilled)、Rejected(已失败)这三种状态的变化途径只有2种：
异步操作从 未完成 pending => 已完成 resolved
异步操作从 未完成 pending => 失败 rejected
状态一旦改变，就无法再次改变状态，这也是它名字 promise-承诺 的由来，一个promise对象只能改变一次。

dl标签

dl>
dt>计算机/dt>
dd>用来计算的仪器 … …/dd>
dt>显示器/dt>
dd>以视觉方式显示信息的装置 … …/dd>
/dl>

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

箭头函数

箭头函数没有自己的this，arguments，super或 new.target。

• 箭头函数不能用作构造器，和 new一起用会抛出错误。
• 由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this）
• 箭头函数没有prototype属性。
• 使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) { 
 var f = (...args) => args[0]; 
  return f(arg); 
}
foo(1); // 1
function foo(arg1,arg2) { 
    var f = (...args) => args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2

函数的name 属性，返回该函数的函数名。

function foo() {}
console.log(foo.name); // "foo"

var func1 =  () => {};
// 只看ES6的情况
console.log(func1.name); // "func1"

// 构造函数实例
const name = (new Function).name;
console.log(name); // anonymous

需要注意的是， ES6对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量， ES5的name 属性，会返回空字符串，而ES6的name 属性会返回实际的函数名。
Function 构造函数返回的函数实例， name 属性的值为“anonymous”。

• bind 返回的函数， name 属性值会加上“bound ”前缀。

const name1 = foo.bind({}).name;
console.log(name1); // "bound foo"

const name2 = (function(){}).bind({}).name;
console.log(name2);  // "bound "

a标签target=”_blank”的安全问题

举个例子，在页面a.html中有这样一段代码：
a href=“b.html” target=“_blank”>跳转 /a>;
当我们点击页面a.html中的跳转链接时，浏览器会在新的窗口或标签页中打开b.html，假如这个时候b.html中有这样一段js代码：
if (window.opener) {
window.opener.location.href = ‘eval.html’;
}
当页面b.html被打开的同时原来打开a.html的标签页会被重定向到eval.html, eval.html可以是和原来域完全不相关的其它域的资源。
是不是突然有点后怕，其实也不用过分担心，出现这种情况的几率还是比较小的，首先我们自己站内的资源是受信的，能放到站内的其他网站基本也是站长自己加的，当然不排除被黑的情况，那么我们该如何防范呢？

如果需要限制window.opener的访问行为，我们只需要在原始页面每个使用了target="_blank"的链接中加上一个rel="noopener"属性。但是，火狐并不支持这个属性值，火狐浏览器里需要rel=“noreferrer”，所以我们可以将两个属性值合并写成rel="noopener noreferrer"来完整覆盖。这样子页面就再也访问不到父页面的句柄了。
当然，我们也可以通过js来控制来限制句柄的访问，代码如下：

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

alert 为同步代码

1 由于页面渲染是 DOM 操作，会被 JavaScript 引擎放入事件队列；
2 alert() 是 window 的内置函数，被认为是同步 CPU代码；
3 JavaScript 引擎会优先执行同步代码，alert 弹窗先出现；
4 alert 有特殊的阻塞性质，JavaScript 引擎的执行被阻塞住；
5 点击 alert 的“确定”，JavaScript 没有了阻塞，执行完同步代码后，又读取事件队列里的 DOM 操作，页面渲染完成。

js里的所有对象都有原型吗?

不是的, 用Object.create(null)创建的对象没有原型:

var emObj = Object.create(null);
console.log(emObj);
console.log([]);
console.log({});

• Object
  No properties
• Array(0)
  length: 0
  [[Prototype]]: Array(0)
• Object
  [[Prototype]]: Object

空对象都有原型, 但Object.create(null)没有.
因为Object.create(null)没有继承任何原型方法，也就是说它的原型链没有上一层。
猜想是堆内存里并没有放内容,而只是在栈内存里放了这个指针, 然后告诉内存分配空间.

CSS： opacity:0 触发click，visibility:hidden不触发click

设为visibility:hidden后，元素现在是不可以选择的,不能触发click

跨域jsonp

<script>
    window.callback = function (data) {//定义全局函数，在另跨域js文件里调用
        console.log(data)
    }
</script>
<script src="http://localhost:8001/index.js"></script>

index.js //被跨域访问

callback({
    name: 'hh'
})

jsonp插件

jsonp('url', (err, res) => {
    console.log('res', res);
});

jsonp只支持get请求

1.拼接一个script标签，，从而触发对指定地址的GET请求
2.那服务器端对这个GET请求进行处理，并返回字符串 “myCallback(‘response value’)”
3.那前端script加载完之后，其实就是在script中执行myCallback(‘response value’)
4.是不是就完成了跨域的请求，
5.是不是就是只能用GET

页面的load事件会在DOMContentLoaded被触发之后才触发。

当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片，音频，视频等其他资源加载完成。网页上所有资源（图片，音频，视频等）被加载后才会触发load事件。

[1,2,3].map(parseInt)结果：[1, NaN, NaN]

[‘1’,‘2’,‘3’].map(parseInt)即
parseInt(‘1’,0);radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；
parseInt(‘2’,1);radix 为 1，超出区间范围，所以结果为 NaN；
parseInt(‘3’,2);radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。

js运行结果：

var logger = {
    log: setInterval(()=>{
        console.log("hh")
    },1000)
}
logger = null

结果：每隔一秒输出一次hh

var obj = {
    count:10,
    getCount: function(){
        return this.count;
    }
}
var f1 = obj.getCount; //对象里的取不到，直接定义的函数可取到
var f2 = obj.getCount();
console.log(f1());
console.log(f2);

结果：

undefined
10

function fun(m,p){
    console.log(p);
    return {
        fun:function(n){
            return fun(n,m)
        }
    }
}
fun(1).fun(3).fun(5).fun(8)

结果：

undefined
1
3
5

console.log(111)
p()
  .then(result => {
    console.log(`p result:${result}`)
  })
  .catch(err => {
    console.log(`p err :${err}`)
  })
p1()
  .then(result => {
    console.log(`p1 result:${result}`)
  })
  .catch(err => {
    console.log(`p1 err :${err}`)
  })
p2()
  .then(result => {
    console.log(`p2 result:${result}`)
  })
  .catch(err => {
    console.log(`p2 err :${err.message}`)
  })
function p() {
  return new Promise((resolve, reject) => {
    console.log(222)
    setTimeout(() => {
      console.log('async in p')
      reject('err in p')
      console.log('content after p reject')
    }, 200)
  })
}
function p1() {
  return new Promise((resolve, reject) => {
    console.log(333)
    setTimeout(() => {
      console.log('async in p1')
      resolve('resolev in p1')
      console.log('content after p1 resolve')
    }, 250)
  })
}
function p2() {
  return new Promise((resoleve, reject) => {
    console.log(444)
    setTimeout(() => {
      console.log('async in p2')
      return reject(new Error('p2error'))
      console.log('content after p2 return')
    }, 300)
  })
}

结果：

111
222
333
444
async in p
content after p reject
p err :err in p
async in p1
content after p1 resolve
p1 result:resolev in p1
async in p2
p2 err :p2error

map()和forEach()的区别

forEach()，不改变原数组，不会返回一个新的数组，没有返回值

const arr = [1,2,3];
const arrnew = [];
arr.forEach(cur => {arrnew.push(cur*3)})
console.log(arr)
console.log(arrnew)

[ 1, 2, 3 ]
[ 3, 6, 9 ]

map()，不会改变原数组，会返回一个新的数组

const arr = [1,2,3];
const arrnew = arr.map(cur => cur*3)
console.log(arr)
console.log(arrnew)

[ 1, 2, 3 ]
[ 3, 6, 9 ]

const arr = [1,2,3];
const arrnew = [];
arr.map(cur => {arrnew.push(cur*3)})
console.log(arr)
console.log(arrnew)

[ 1, 2, 3 ]
[ 3, 6, 9 ]

跨域请求服务器会收到

同源策略应该是浏览器在接收加载资源之前对其来源进行了检查，然后限制加载。

Object.prototype.hasOwnProperty()

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true
console.log(object1.hasOwnProperty('toString'));
// expected output: false
console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。
即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。

o = new Object();
o.propOne = null;
o.hasOwnProperty('propOne'); // 返回 true
o.propTwo = undefined;
o.hasOwnProperty('propTwo'); // 返回 true