整理JavaScript

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()也接收一个函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349