未掌握的基础知识之JavaScript

JS 转换函数

parseFloat 解析一个字符串，并返回一个浮点数
toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字
Math.round 把一个数字舍入为最接近的整数
toPrecision 把数字格式化为指定的长度

JavaScript中的数据类型

字符串（string）、数字（number）、布尔（Boolean）、数组（array）、对象（object）、Null、Undefined

js中数组常用方法总结

1.Array.map()

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组

2.Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分

let arr = [1, 2, 3, 4, 5]
   num.forEach(x => x*2)
   // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分

3.Array.filter()

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]
    const isBigEnough => value => value >= 3
    let newArr = arr.filter(isBigEnough )
    //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

4.Array.every()

此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

let arr = [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //false
    arr.every(isLessThan6 ) //true

5.Array.some()

此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：

let arr= [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value > 6
    arr.some(isLessThan4 ) //true
    arr.some(isLessThan6 ) //false

6.Array.reduce()

此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add)
   //sum = 15  相当于累加的效果
   与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

7.Array.push()

此方法是在数组的后面添加新加元素，此方法改变了数组的长度：

8.Array.pop()

此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：

let arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4

9.Array.shift()

此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：

let arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr) //[2, 3, 4, 5]
    console.log(arr.length) //4

10.Array.unshift()

此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：

let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 2, 3, 4, 5]
    console.log(arr.length) //7 

11.Array.isArray()

判断一个对象是不是数组，返回的是布尔值

12.Array.concat()

此方法是一个可以将多个数组拼接成一个数组：

let arr1 = [1, 2, 3]
      arr2 = [4, 5]
  let arr = arr1.concat(arr2)
  console.log(arr)//[1, 2, 3, 4, 5]

13.Array.toString()

此方法将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
   let str = arr.toString()
   console.log(str)// 1,2,3,4,5

14.Array.join()

此方法也是将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
   let str1 = arr.toString()
   let str2 = arr.toString(',')
   let str3 = arr.toString('##')
   console.log(str1)// 12345
   console.log(str2)// 1,2,3,4,5
   console.log(str3)// 1##2##3##4##5

Promise对象只有三种状态

异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）
这三种的状态的变化途径只有两种。

异步操作从“未完成”到“已完成”
异步操作从“未完成”到“失败”。
这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种。

异步操作成功，Promise对象传回一个值，状态变为resolved。
异步操作失败，Promise对象抛出一个错误，状态变为rejected。

css 的样式在 js 里形式

js里样式设置直接把css写法的的“-”去掉，再改写为驼峰写法即可。

作用域（scope）

通常来说一段程序代码中使用的变量和函数并不总是可用的，限定其可用性的范围即作用域，作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

作用域链（scope chain）

作用域链决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。
1.while的话只是在函数局部环境或者全局环境运行，并不会改变作用域链。
2.try catch红皮书第四章讲的清清楚楚：虽然执行环境的类型总共只有两种–全局和局部（函数），但还是有其他办法来延长作用域链。这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。在两种情况下回发生这种现象。具体来说，就是当执行流进入下列任何一个语句时，作用域链就会得到加强：
try catch语句的catch块；
with语句；
这两个语句都会在作用域链的前端添加一个变量对象。对WITH语句来说，将会指定的对象添加到作用域链中。对catch语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。
Example：

function builderUrl(){
     var qs="?debug=true";
     with(location){
     var url = href + qs;   
     }
    return url;
}

在此，with语句接受的是location对象，因此其变量对象中就包含了Location对象的所有属性和方法，而这个变量对象被添加到了作用域链的前端。builderUrl()函数中定义了一个变量qs。当在with语句中引用变量href时（实际引用的是location.href），可以在当前执行环境的变量对象中找到。当引用变量qs时，引用的则是在buildUrl()中定义的那个变量，而该变量位于函数环境的变量对象中。至于with语句内部，则定义了一个名为url的变量，因而url就成了函数执行环节的一个部分，所以可以作为函数的值被返回。

Ajax技术的工作原理：可以分成3步

Ajax技术核心就是XMLHttpRequest对象。
1.创建Ajax对象：var xhr = new XMLHttpRequest();
2.xhr 发送请求：xhr.open(‘get’,‘test.html’,‘true’);
xhr.send();
3.xhr获取响应：
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){//请求的状态码
/*
0:请求还没有建立（open执行前）
1：请求建立了还没发送（执行了open）
2：请求正式发送（执行了send）
3：请求已受理，有部分数据可以用，但还没有处理完成
4：请求完全处理完成
*/
alert(xhr.responseText);//返回的数据
}
}
可以看到，send()前是open()

变量每次被重新赋值 JavaScript中 boolean 0 “” null undefined nan转化为 false

如何获取下面表单 select

<form name="a">
<select name="a" size="1" id=”obj”>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form> 

当前默认选中的是第一个，
console.log( obj.options[obj.selectedIndex].text ) 输出的是1,
console.log( obj.options[obj.selectedIndex].value ) 输出的是a

转为true 和 false 的值

数组属于对象类型，所以空的数组转换成布尔型是true
相同的是，空的对象转换成布尔型也是true

1. 空数组[]和空对象{}都是object类型，因此直接用于if判断条件时就会被转化为true。
2. 任意值与布尔值比较，都会将两边的值转化为Number。
   注意：
   如果将空数组[]与布尔值false比较，false转化为0，而空数组[]也转化为0，因此[] ==false的判断得到true。 如果将空对象{}与布尔值false比较，false转化为0，而空对象{}转化为NaN，由于NaN与任何数都不相等，因此{} false的判断得到false。

函数声明的方法

一.函数声明语法定义：function sum(num1,num2){return num1+num2}
二.函数表达式定义函数：1.var sum = function(num1,num2){return num1+num2};
2.var sum = new Function(“num1”,“num2”,“return num1+num2”);Function构造函数可以接受任意数量的参数，但最后一个参数始终被看成函数体，注意函数表达式定义函数的方法与声明其他变量时一样需要加分号。

ajax的事件

$.post(url)是ajax请求；
ajax的事件是：
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)
ajaxStart(callback)
ajaxStop(callback)
ajaxSuccess(callback)

flash和js通过什么类如何交互?

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

JavaScript 写在 HTML 代码中的不同地方想

js 在页面加载的时候自执行，script 就只能插入在 body 内
head 标签是设计用于一些静态资源的预加载，与“解析”没有任何关系，浏览器会先加载 head 标签内的静态资源（css 和 js），这时候的 js 并没有执行，而是被 UI 线程阻塞了，然后浏览器会开始构建 DOM Tree，然后开始构建 CSSOM Tree（即题目说的加载页面），最后才会执行 head 中加载的 js。
然后要注意的是，浏览器在解析 body 内的样式以及 script 标签的时候是串行的，就是说你的 script 标签内的代码会即时执行，然后再去解析下面标签的內联样式（这也是为什么內联样式的优先级会比引用的高）

以下代码执行后，array 的结果是？

var array = [-1,1,3,4,6,10];
array.sort((a,b)=>Math.abs(a-3)-Math.abs(b-3));

先总结排序函数的作用：根据所有数在数轴上与3的距离进行升序排列
然后观察数组： [-1,1,3,4,6,10]
显而易见其中的3离3最近，肯定排在第一个
结果是;[3, 4, 1, 6, -1, 10]

span标签的width和height分别为多少？

<div style=”width:400px;height:200px;”>
  <span style=”float:left;width:auto;height:100%;”>
           <i style=”position:absolute;float:left;width:100px;height:50px;”>hello</i>
  </span>
</div>

问题：span标签的width和height分别为多少？
解：首先span不是块级元素，是不支持宽高的，但是style中有了个float：left；就使得span变成了块级元素支持宽高，height:100%;即为，200，宽度由内容撑开。
但是内容中的 i 是绝对定位，脱离了文档流，所以不占父级空间，所以span的width=0

iframe的局限

1、创建比一般的 DOM 元素慢了 1-2 个数量级
iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）
2、阻塞页面加载
及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况
3、唯一的连接池
浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个
绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
4、不利于 SEO
搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。综上，iframe 应谨慎使用。