JavaScript 严格模式(use strict)
"use strict";
通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测，使用严格模式的好处是可以提早知道代码中的存在的错误，及时捕获一些可能导致编程错误的ECMAScript行为。在开发中使用严格模式能帮助我们早发现错误
设立"严格模式"的目的，主要有以下几个：错误检测、规范、效率、安全、面向未来
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫
添加或者删除节点
添加：
var para=document.createElement("p");
var node=document.createTextNode("这是新段落！");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
删除（引用父类）：
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
不引用父类删除：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
浮点运算
0.2 + 0.1 = 0.30000000000000004 并不精确等于0.3
一般浮点数运算：0.2*10 + 0.1*10 = 0.3（化为整数计算）
Math对象
Math.random() 取得介于 0 到 1 之间的一个随机数
Math.round(0.50) //1 0.49->0
Math.max(7,5)
Math.min(10,2)
RegExp 对象
RegExp 对象有 3 个方法：
test() 检索字符串中的指定值。返回值是 true 或 false
exec() 检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null
compile() 可以改变检索模式，也可以添加或删除第二个参数
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));//true
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
适合各种浏览器
解决ajax跨域问题
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
所谓的同源，指的是域名、协议、端口均相等
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域
js跨域 是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域
解决跨域问题，有如下三种方式：
1、使用jsonp
2、服务器代理
3、在服务端设置response header中Access-Control-Allow-Origin字段
使用jsonp
jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制的，我们可以在script标签中访问任何域名下的资源文件。利用这一特性，用script标签从服务器中请求数据，同时服务器返回一个带有方法和数据的js代码，请求完成，调用本地的js方法，来完成数据的处理。
对于jsonp这种方式，虽然没有破坏浏览器的安全策略，但只支持get方式的请求 有参数长度的限制
script引入
服务器端返回结果是 dosomething([a,b,c])
原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的
服务器代理
运用的就是服务器的反向代理技术，控制客户端和服务器的访问都从代理服务器经过，比如用nginx作为服务器代理，在nginx上配置客户端和第三方服务的反向代理，这样就可保证客户端、第三方是同源的了，同一个源，都来自代理服务器
Access-Control-Allow-Origin
在被请求的Response Header中加入如下代码：
// 指定允许其他域名访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型
response.setHeader("Access-Control-Allow-Methods", "POST");
// 响应头设置
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
缺点：
1、此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。
2、设置*，存在安全隐患
JavaScript 字符串操作
1. slice(index,end) 从第index+1个字符开始,截取到end个字符(end不存在时 截取到结尾)
'hello world'.slice(3,-4) //lo w
2. substring(index,end) 从第index+1个字符开始,截取到最后个字符(end不存在时 截取到结尾)
'hello world'.substring(3,-4) //hel
参考 [https://www.w3cschool.cn/ecmascript/oyik1q6l.html]
3. substr(index,len) 从第index+1个字符开始，截取len个字符
4. split() 使用一个指定的分隔符把一个字符串分割存储到数组
5. join() 使用分隔符将一个数组合并为一个字符串
6. indexOf() 返回字符串中匹配子串的第一个字符的下 标
7. parseInt() 从左到右依次查找有效数字字符 直到遇见非有效数字字符为止 '12px13'=>12
parseInt(string,radix)
=>radix可选,表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。
如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
8. parseFloat('12.6px') =>12.6
9. txt.big(), txt.small(), txt.bold(), txt.italics()（斜体）,
txt.blick(), txt.fixed(), txt.strike()(IE不可用),
txt.fontcolor('red'),txt.fontsize(16),
txt.toUpperCase(), txt.toLowerCase(), txt.sub(),
txt.sup(), txt.link('http://www.baidu.com')
10. str.indexOf() 来定位字符串中某一个指定的字符首次出现的位置 找不到返回-1
11. str.lastIndexOf() 从字符串的结尾开始检索子串 如果没有找不到子串，则返回-1
12. match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
13. str.concat() 把一个或多个字符串连接到String对象的原始值上
14. str.charAt(1) 指定位置处的字符的字符串
15. str.charCodeAt(1) 指定位置处的字符的字符串字符代码 ASCII码
16. str.localeCompare(str1) str>str1 返回1 等于返回0 小于返回-1
17. replace():
str.replace(/Microsoft/, "W3School") 执行一次匹配
str.replace(/Microsoft/g, "W3School") 全部替换
JavaScript 数组操作
1. slice 截取Array的部分元素
截取
2. push和pop
push()向Array的末尾添加若干元素
pop()则把Array的最后一个元素删除掉
3. unshift和shift
使用unshift()方法往Array的头部添加若干元素
shift()方法把Array的第一个元素删掉
4. sort 对当前Array进行排序
var arr = ['B','C','A']; arr.sort();
5. reverse()把整个Array的元素给掉个个
var arr = ['one','two','three']; arr.reverse();
6. splice
可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素
7. concat
concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array
8. join 把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串
JavaScript 对象
1. JavaScript的对象是动态类型，可以给一个对象添加或删除属性
2. 检测xiaoming是否拥有某一属性，可以用in操作符
如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的
要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法
3. for ... in 把一个对象的所有属性依次循环出来
hasOwnProperty过滤掉对象继承的属性
4. Map 是一组键值对的结构，具有极快的查找速度
var m =new Map([['Michael',95], ['Bob',75], ['Tracy',85]]); m.get('Michael'); // 95
初始化一个空Map
由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉
5. Set 一组key的集合，但不存储value 重复元素在Set中自动被过滤
var s1 =new Set();// 空 Set
var s2 =new Set([1,2,3]);// 含1, 2, 3
注意 数字3和字符串'3'是不同的元素
通过add(key)方法可以添加元素到Set中
通过delete(key)方法可以删除元素
Map和Set是ES6标准新增的数据类型
6. iterable
遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable 属于iterable类型
具有iterable类型的集合可以通过新的 for ... of 循环来遍历
iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数
JavaScript 函数
1. 匿名函数
变量abs就可以调用该函数
2. arguments参数
JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数
arguments类似Array但它不是一个Array
实际上arguments最常用于判断传入参数的个数
3. rest参数 获得额外的参数
rest参数只能写在最后，前面用...标识
rest = [3,4,5] rest默认是空数组
JavaScript引擎在行末会自动添加分号
JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找
JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部
4. 解构赋值
5. this that
6. apply 控制this的指向
apply方法，接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数
另一个与apply()类似的方法是call()，唯一区别是：
apply()把参数打包成Array再传入；
call()把参数按顺序传入
比如：Math.max.apply(null, [3,5,4]);// 5
Math.max.call(null,3,5,4);// 5
7. 高阶函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数
Map():map()方法定义在JavaScript的Array中，调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果
reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
filter 用于把Array的某些元素过滤掉，然后返回剩下的元素
Array的filter()也接收一个函数
网友评论