web前端总结Javascript篇

最新推荐文章于 2022-10-24 08:17:29 发布

LewisXXXX

最新推荐文章于 2022-10-24 08:17:29 发布

阅读量398

点赞数

分类专栏： html 文章标签： html javascript jquery

本文链接：https://blog.csdn.net/OStriueO/article/details/88717877

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.闭包的理解，javascript的作用域

就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。

例子（使用闭包）：

var test=(function(){
  var a=0;
  return function(){
    ++a
    console.info(a);
}
})()
test();//  1
test();//  2
test();//  3

作用域

简单的说，作用域是针对变量的，比如我们创建一个函数a1，函数里面又包了一个子函数a2。此时就存在三个作用域：

全局作用域－a1作用域－a2作用域；即全局作用域包含了a1的作用域，a2的作用域包含了a1的作用域。

当a1在查找变量的时候会先从自身的作用域区查找，找不到再到上一级a2的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。

avascript中一切皆对象，每个对象都有一个__proto_ 属性（由浏览器自动创建），该属性指向它原型。当一个对象在查找一个属性的时，自身没有就会根据__proto__ 向它的原型进行查找，如果都没有，直到查到Object.prototype._proto_为nul，这样也就形成了原型链。

那我们知道可以通过构造函数来创造一个类，prototype的作用就是，让类的属性可以被继承。所以只有构造函数才会有prototype这个属性。

下面直接用代码来验证下：

function Foo(){
  this.name='xiaoming'
}
var foo=new Foo();
foo.age="22"

console.info(foo.name)//xiaoming ; foo集成了Foo的name属性
console.info(foo.__proto__)//object() ; 指向了她的原型Foo.prototype
console.info(foo.__proto__ === Foo.prototype)//true
console.info(foo.prototype)//undefine ; 只有构造函数才有prototype属性
console.info(foo.constructor)//function Foo(){……} ; 其实foo并没有constructor属性，他只是继承了原型中的consturctor属性
console.info(foo.constructor === Foo.prototype.constructor)//true

2.AJAX的跨域问题和缓存问题？同步与异步的区别？

解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

1. 开启代理

2.JSONP 只支持GET

3.使用CORS方式（跨域资源共享）
需要在请求的网站中设置：Access-Control-Allow-Origin
header('Access-Control-Allow-Origin:允许的网站完整域名');
header('Access-Control-Allow-Origin:*'); //允许所有网站来请求

缓存问题可以用

1、在ajax发送请求前加
xhr.setRequestHeader("If-Modified-Since","0");

2、在服务器端加
header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");

3、在 Ajax 的 URL 参数后加

?timestamp=" + new Date().getTime();

异步请求，在同一个时间点可以执行多个进程；
同步请求，在同一个时间点，只能进行一个操作，其他操作只能等待。

3.数组的增删查找

数组的增加

ary.push() 向数组末尾添加元素，返回的是添加后新数组的长度，原有数组改变
ary.unshift() 向数组开头添加元素，返回的是添加后新数组的长度，原有数组改变

 var ary=[1,2,3,4];
   var res=ary.unshift(6);
   console.log(res); ---->5   返回的是新数组的长度

ary.splice(n,m,x)从索引n开始删除m个元素，把新增的元素X放在索引n的前面，把删除的元素当成一个新数组返回，原有数组改变。
ary.splice(n,0,x)从索引n开始删除0个元素，把新增加的元素x放在索引n的前面，返回的是一个空数组，原有数组改变。
ary.splice(n,m)从索引n开始删除m个元素，把删除的内容当做新数组返回，原有数组改变
splice(0,0,x)----->unshift

数组的删除

ary.pop() 删除数组的最后一项，返回的是删除的那一项，原有数组改变
ary.shift() 删除数组的的第一项，返回的是删除的那一项，原有数组改变

var ary=[5,8,3,4,6];
var res=ary.shift();
console.dir(res);---->5 返回数组第一项

删除数组最后一项的内容 ary.splice(ary.length-1,1) //ary.length-1 数组最后一项的内容 ary.length-=1 ary.length--

    var ary=[5,8,3,4,6];
//     ary.splice(ary.length-1,1);
//     ary.length-=1;
      console.dir(ary);---->输出的是[5,8,3,4]

数组的查询和复制

slice(n,m)从索引n开始，找到索引m处，把找到的内容作为新的数组返回，原有数组不改变
slice(n-1,m)把数组的第n项到第m项提取出来
slice(n) 从索引n开始查找到数组末尾
slice(0) slice() 将原有数组复制一份属于数组克隆
concat() 也可以实现数组克隆
concat的本意是实现数组的拼接 ary.concat(ary2) 把两个数组进行拼接

4.DOM节点的创建、移动、复制、删除、查找

（1）创建新节点
      createDocumentFragment()    //创建一个DOM片段
      createElement()   //创建一个具体的元素
      createTextNode()   //创建一个文本节点
（2）添加、移除、替换、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore()
（3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    //通过元素的Name属性的值
      getElementById()    //通过元素Id，唯一性

5.SetTimeOut与SetInterVal区别

setTimeout()只执行函数一次,场景：倒计时

setInterval()会不停的调用函数，场景：文本滚动

6.面对对象编程：b怎么继承a

回头找书籍来看

7.编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

var url = "http://www.***.com/index.php?key0=0&key1=1&key2=2";
var obj = parseQueryString(url);
function parseQueryString(argu){
//以号问分割，取下标为1，得到key0=0&key1=1&key2=2
  var str = argu.split('?')[1];
//定义新对像，做返回
  var result = {};
//再以&做为分隔，进行遍历,得到[key0=0,key1=1,key2=2]
  var temp = str.split('&');
  for(var i=0; i<temp.length; i++)
  {
     //再以=做为分隔,把下标0和1赋值给新对像
     var temp2 = temp[i].split('=');
     result[temp2[0]] = temp2[1];
  }
  return result;
}

8.js关建字与保留字的选择：parent,class,void.main

9.AJAX属于Javascript?

js是语言, ajax是javascript的一种应用

10.var a='abc def ghi',把每三个字中的首字母转为大写

var a = "abc def ghi", b='';
var array1 = a.split(" ");

for(var i = 0 ; i<array1.length; i++){

if(b!='') {

b+= " ";

}

b+ = array1[i].substring(0,1).toUpperCase()+array1[i].substring(1);

}

11.AJax的执行过程

第一步创建ajax对象：

new XMLHttpRequest();

第二步填写请求信息:

xhr.open('method',url,Asynchronous)

method(请求方式):

1、get通常用来获取数据，偶尔也会携带一些数据

(1)发送的内容显示在浏览器地址栏上。

(2)因为浏览器地址栏长度有限制，而get是通过url向服务器发送数据的，所以发送的数据大小会被限制。

2、post通常用来向服务器发送数据，偶尔也会携带一些数据到客户端。

(1)显示在请求头信息。

(2)post传输数据理论来说是没有大小限制的,post的大小限制来自于服务器。

url：请求文件的地址

Asynchronous(是否异步):

异步：不会等待数据请求结束继续执行下边的代码，当数据请求成功的时候，在回去进行处理。

同步：必须等待前边的数据请求结束才可以执行下一行代码，可能会造成页面假死。

第三步监控请求结果

ajax对象下边有一个onload在数据拿到之后就会触发

xhr.responseText表示请求到的文本内容。

xhr.responseXML表示请求到的XML。

第四步发送请求

xhr.send(data)

data发送给服务器的数据

12.json与XML的区别？优缺点(偏后端，做接口对接时常用)

XML的优点
A.格式统一，符合标准；
B.容易与其他系统进行远程交互，数据共享比较方便。

XML的缺点
A.XML文件庞大，文件格式复杂，传输占带宽；
B.服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
C.客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
D.服务器端和客户端解析XML花费较多的资源和时间。

JSON的优点：
A.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
B.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
C.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
D.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
E.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

JSON的缺点
A.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
B.JSON格式目前在Web Service中推广还属于初级阶段。