JavaScript：基础知识

Posted 2022-02-17 前端e站

 1.javascript typeof返会的数据类型有哪些

string,number,boolean,undefined,function,object

基本数据类型：string,number,boolean,undefined,null

2. 列举三种强制类型转换和两种隐式类型转换

 parseInt(),parseFloat(),Number()
==,!!

 3. 判断是否为数组的方法

console.log(arr instanceof Array)

console.log(arr.construct === Array)

console.log(Array.isArray(arr))

 4.pop(),push(),unshift(),shift()

pop()尾部删除

push()尾部插入

unshift()头部插入

shift()头部删除

5.IE和DOM事件流的区别

执行顺序不一样

参数不一样 低版本ie没有回调函数，只能进行冒泡

第一个参数是否加"on",低版本IE不支持addEventListener(),支持attachEvent,第一个参数需要加"on"

this指向问题，IE指向windows,不指向触发的函数

 

6. IE标准下有哪些兼容性写法

var ev = ev||window.event

document.documentElement.clientWidth||document.body.clientWidth

var target = ev.srcElement||ev.target

7. call apply bind

改变this的指向，
其中call的写法

function add(a,b)  
  
    alert(a+b);  
  
function sub(a,b)  
  
    alert(a-b);  
  
  
add.call(sub,3,1);   

这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
apply写法

function add(a,b)  
  
    alert(a+b);  
  
function sub(a,b)  
  
    alert(a-b);  
  
add.apply(sub,[4,2]);　

不同就在于第二个参数，apply写成数组

bind写法

function add(a,b)  
  
    alert(a+b);  
  
function sub(a,b)  
  
    alert(a-b);  
  
add.bind(sub,[4,2])();　

bind是返回了一个改变上下文的一个函数，可以稍后调用，而apply，call是立即执行函数

8. 如何阻止事件冒泡和默认事件

cancelBubble(IE),

return false,

event.preventDefault,

event.stopPropagation()

9.添加 删除 替换 插入到某个DOM节点的方法

obj.appendChild()

obj.insertBefore()

obj.replace()

obj.remove()

10.window.onload和$(document).ready的区别

window.onload只能出现一次，$(document).ready能出现多次

window.onload需要等所有文件都加载完才开始加载，$(document).ready只需等文档结构加载完了就开始加载

11.哪些操作会造成内存泄露

内存泄露指任何对象在不再拥有或不再需要它之后依然存在

setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露

闭包

控制台日志

循环（两个对象彼此引用且彼此保留）

12.js垃圾回收方式

标记清除：这是js最常用的垃圾回收方法，当一个变量进入执行环境时，例如函数中声明一个变量，将其标记为进入环境，当变量离开环境时，（函数执行结束），标记为离开环境

引用计数: 跟踪记录每个值被引用的次数，声明一个变量，并将引用 类型赋值给这个变量，则这个值的引用次数+1，当变量的值变成了另一个，则这个值的引用次数-1，当值的引用次数为0的时候，就回收

13.this指向问题

普通函数调用，指向windows

window.value=1;
function getValue()
 console.log(this.value);

getValue();//输出1，此时的this指向window

对象的方法调用，指向对象

var Obj=
  value:2,
  getValue:function()
       console.log(this.value);//输出2,this指向Obj
     

构造器方法调用，指向构造函数实例出来的对象

function main(val)
  this.value=val;

main.prototype.getValue=function()
  console.log(this.value);


var fun=new main(3);
fun.getValue();
fun.value;//输出3，this指向main的实例对象fun

call,apply,bind可以自定义this指向第一个参数

function showValue()
  console.log(this.value);

var obj=
  value:4

showValue.call(obj)//输出4，this指向了obj对象

function showValue()
  console.log(this.value);

var obj=
  value:4

var showValue2=showValue.bind(obj);
showValue2()//输出4，this指向了obj对象

14.new操作符到底干了什么

创建一个新对象

将构造函数的作用域赋值给新对象（所以this指向了这个新对象）

执行构造函数的代码（为这个新对象添加属性）

返会新对象

15. js严格模式

"use strict"
消除js一些不合理的用法
消除代码运行的一些不安全之处
增加运行速度
为未来新版本js做铺垫

变量必须声明

对象不能出现重复属性名

arguments改变，不会影响函数参数

eval，arguments变为关键字，不能作为变量名

不允许使用with

不用call，apply，bind改变this指向，一般函数调用指向null

16.ajax请求

ajax请求四步

创建一个xhr对象 var xhr = new XmlHttpRequest()

判断就绪状态为4时执行代码

xhr.onreadystatechange = function()
    if(xhr.readyState == 4)
        console.log(responseText);
    

创建请求 xhr.open('get','url',true)

发送请求 xhr.send(null)

 17.ajax和json

ajax用于web页面中实现异步数据交互，实现页面局部内容刷新

优点：能够进行内容局部加载刷新，减少带宽，避免用户不断刷新以及页面跳转，提高用户体验

缺点：对搜索引擎不友好；浏览器不支持ajax的后退；

json是一种请求轻量级的数据交互格式

优点：轻量级，便于人的阅读理解，便于机器解析

18.http考点

常用的HTTP方法有哪些

GET:
POST:
PUT:
DELETE:

GET与POST方法的区别

get主要是从服务器获取资源，post主要是像服务器发送数据

get传输数据通过url请求，利用k=v的形式放在url后面，用?连接，多个用&连接而post是存放在，ajax中的data中的，get传输的过程使用户可见 的，而post是对用户不可见的。

get传输的数据量小，因为受url的长度限制，但是效率高，post能上传的数据量大

post较get更安全一些

get方式传递的中文字符可能会乱码，post支持标准字符集，可以正确传递中文字符

http请求报文与响应报文格式

请求报文包含三部分：

请求行：包含请求方法、URI、http版本信息

请求首部字段

请求内容实体

响应报文包含三部分：

状态行：包含HTTP版本、状态码、状态码的原因短语

响应首部字段

响应内容实体

http状态码

100-199：成功接收请求，但需要进行下一步请求

200-299：成功接收请求，并完成整个处理过程

300-399：为完成全部请求，客户需近一步细化需求

400-499：客户端请求有错误，包括语法错误或不能正常执行

500-599：服务器端出现错误

http缺点与https

通信使用明文不加密，内容可能被窃听

不验证通信方身份，可能遭到伪装

无法验证报文完整性，可能被篡改

https就是加上加密处理（一般是SSL安全通信线路）+认证+完整性保护

常用：

200 正常，表示一切正常，返会的是正常请求结果

302/307 临时重定向，表示请求的文档，已被临时移动到别处

304 未修改，调用缓存的数据

403 服务器拒绝客户请求

404 服务器不存在客户想要找的资源

500 服务器内部错误

19.es6

let const

let相当于给js新增了块级作用域，声明的变量只在let命令所在的代码块内有效

const也是声明变量，它声明的变量，不能改变，可以用来声明第三方库变量的应用

class extends super

class定义一个类，其中有一个construct方法，construct方法中的this代表实例对象，construct以外还有其他的方法，construct内定义的方法属性是实例对象自己的，construct外的方法属性是所有实例对象共享的

class之间可以通过extends实现继承

super指代父类的实例，子类construct中必须先调用super()方法，因为子类没有自己的this对象，是继承父类的this对象

arrow function(箭头函数)

除了书写简洁了很多，最大的优点是this指向，使用箭头函数，函数内部的this就是定义时所在的对象。箭头函数根本没有自己的this，this是继承外面的，它内部的this就是外层代码块的this

template string(模板字符串)

ajax调用数据库，需要向文档中插入大段html的时候，传统的字符串拼接太麻烦，引入模板工具库会稍微好点，不过还是没有es6的template string简单，可以直接用反单引号包括代码块``,用$来引用变量，所有的空格缩进都会保留到输出中

destructuring(解构赋值)

es6按照一定模式，从数组和对象中提取值，对变量进行赋值，这就成为解构，也就是说，运用es5的方法，数组和对象中的变量需要，一个个进行赋值，而es6可以一步到位

default,rest(默认值，扩展语法)

当函数忘记传参的时候，给它一个默认值，传统方法是在函数中运用||，es6可以直接在参数中写上

function animal(type)
    type = type || 'cat'  
    console.log(type)

animal()

function animal(type = 'cat')
    console.log(type)

animal()

function animals(...types)
    console.log(types)

animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

20.数组去重的一种相对好理解的方法

利用indexOf方法的去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr)
    for(var i=0;i<arr.length;i++)
        if(nArr.indexOf(arr[i])==-1)
            nArr.push(arr[i]);
        
    
    return nArr;

console.log(removeItem(arr));

indexOf() 方法，请查阅：https://blog.csdn.net/qq_39606853/article/details/88828778

详解请移步：https://blog.csdn.net/qq_39606853/article/details/88852797 

21.判断一个字符串中出现次数最多的字符，并统计次数

•  hash table方式：

var arr = "abcabcabcddacd";      //定义一个数组；
var obj = ;                    //定义一个obj对象；
var maxn = -1;                   //定义一个初值；
var letter;                      //定义一个变量；

for(var i = 0; i<arr.length;i++)
    if(obj[arr[i]])        //obj[arr[i]]  把arr[i]取出的字符放入obj对象进行比较，如果有重；
        obj[arr[i]]++;
        if(obj[arr[i]] > maxn) //obj[arr[i]] 把arr[i]取出的字符放入obj对象进行比较，如果有重；
            maxn = obj[arr[i]]; //把出现的次数赋值给maxn，用作下次判断；
            letter = arr[i];    //把查询的字符传递出来；
        
    else 
        obj[arr[i]] = 1;         //字符第一次进到obj为undefind，此时赋值为1，走下一步；
        if(obj[arr[i]] > maxn)  
            maxn = obj[arr[i]];  //此时maxn为1，往上传递，再次判断出现的次数；
            letter = arr[i]      //输出letter；
        
    

• 正则方式：

var s = 'aaabbbcccaaabbbaaabbbbbbbbbb';
var a = s.split('');         // split() 方法用于把一个字符串分割成字符串数组，便于做下一步排序；
a.sort();                    //将a数组重新排序；
s = a.join('');              //join() 方法用于把数组中的所有元素放入一个字符串；
var pattern = /(\\w)\\1*/g;    //正则方法
var ans = s.match(pattern);  
//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配；
//该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置；
ans.sort(function(a, b)      //重新排序；
  return a.length < b.length;
);
// console.log(ans[0][0] + ': ' + ans[0].length);