JavaScript基础知识点全集

文章内包含其他网站大佬们总结的知识，感谢各位大佬。

 

---

一、JS基础知识

1、ES是标准，JS是实现；

2、JS包含：ES、DOM和BOM；

3、JS特点：

• 解释型语言；

• 类似于C和JAVA的语法结构；

• 动态语言；

• 基于原型的面向对象。

4、标识符：变量名、函数名、属性名等都属于标识符

可以包含字母、数字、下划线、$，但是不能以数字开头，也不能是JS的关键字和保留字，一般用小驼峰命名。

---

二、JS的数据类型

1、共6种数据类型

String、Number、Boolean、Null、Undefined，5种基本(原始)数据类型；

Object，1种引用数据类型。

2、NaN和Infinity都属于Number类型；

3、JS进行浮点数的运算，得到的结果不精确；   

例子：0.1+0.2=0.3000000000004；

4、console.log(typeof null)                      返回object

---

三、栈内存和堆内存

1、栈内存(存储原始/基本数据类型)：

• 存储的值大小固定；
• 空间小，运行效率高；
• 可以直接操作它保存的变量；
• 由系统自动分配存储空间。

A).因为内存空间小，所以存储在其中的变量不可变。

var a = 'ljl';    
a += 'qianduan'    
//  返回'ljlqianduan'

B).实际是在栈内存中开辟了一块空间存储'ljlqianduan'，然后将变量a指向这块空间。

2、堆内存(存储引用数据类型)：

• 存储的值大小不定，可动态调整；
• 空间大，运行效率低；
• 无法直接操作它内部存储的数据，使用引用地址读取；
• 通过代码分配存储空间。

A).引用数据类型的值实际存储在堆内存中，在栈内存里面存储了一个固定长度的地址，地址指向堆内存中的值。

---

四、数据类型转换

1、转换为String

A).toString()方法：不会改变原变量，返回转换后的结果，转换null和undefined的时候，会报错；

B).String()函数：不会改变原变量，返回转换后的结果，可以转换null和undefined；

C).任意数据类型+""：不会改变原变量，返回转换后的结果，可以转换null和undefined。（隐式类型转换）

2、转换为Number

A).Number()函数；

B).任意数据类型 -0  或者  *1  或者  /1  来转换成Number（隐式类型转换）；

C).特殊情况：

        a).纯数字的字符串，直接转换为数字；

        b).字符串中有非数字，转成NaN；

        c).空串转成0；

        d).null转数字为0；

        e).undefined转数字为NaN；

D).取整数：

        a).parseInt()方法

E).取浮点数：

        a).parseFloat()方法

var a = '123px';	
a = parseInt(a);	
// 打印123


var b = '123.456px';    
b = parseFloat(b);	
// 打印123.456

这两个方法，都是先将被操作的数据的类型转换为字符串，然后再进行操作。

3、转换为Boolean

除了0、NaN、空字符串以及null和undefined为false，其他都是true；

---

五、算数运算符 (  + - * / %共5个  )

1、对非Number类型的值进行运算时，会将这些值转换为Number再进行运算；

2、任何值和NaN做运算，都返回NaN，其中undefined会转成NaN再运算，而null会转成0再进行运算（见本文章  四-2-C-d和e）；

3、+  运算符

A).任何值和字符串做加法运算，都会先转成字符串，再进行运算 ，只有加法运算才会转换为字符串，其他运算符都是转成数值进行计算的； ( 例：NaN+'1234' 返回 'NaN1234' )

B).两个字符串做加法运算，会拼串；

4、自增

A).a++ 或者 ++a都会使原变量的值增加1；

B).区别是：

        a++的值等于原变量的值（自增之前的值）；

        ++a的值等于新值（自增之后的值）。

var a = 1;
console.log(a++);	//	1
console.log(a);		//	2
-----------------------------		
var b = 1;
console.log(++b);	//	2
console.log(b);		//	2
-----------------------------
var c = 10;
c++;
console.log(c++);	//	11
-----------------------------
var d = 20;
console.log(d++ + ++d + d);		//	64
d++为20，但是此时d变成了21，++21为22，然后d变成了22，所以是20+22+22 = 64；
-----------------------------
var e = 20;
e = e++;
console.log(e);    //    20
/*
*  分解成 f = e++(20); e = f(20);
*  所以就是，e++是多少，返回就是多少
* */

5、自减

A).a-- 或者 --a都会使原变量的值减少1；

B).区别同自增的区别；

---

六、数组操作运算

• unshift前面添加；
• shift前面删除；
• push后面添加；
• pop后面删除。

数组转字符串arr.join(';') => '1;2;3'

1、数组排序：

var arr = [10,23,66,102,4003,56,21];
arr.sort(function(num1,num2){
    return num1-num2;
});

2、数组去重：

var arr = [1,2,3,1,2,3];
var newArr = [];

for(var i=0;i<arr.length;i++){
    if( newArr.indexOf(arr[i])<0 ){
        newArr.push(arr[i]);
    }
}

七、杂项

1、事件委托（事件代理）

通过给父级添加事件，而免去给每个子集添加事件，可以获取到每个子集。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul.onclick = function(event){
    console.log( event.target.innerHTML );
}
//    给ul添加事件，可以获取到li的内容。

2、如何避免回流和重绘？

• 读取或写入DOM要放在一起；
• 改变样式要一次性改变；
• 使用documentFragment文档碎片；
• 使用动画的时候，要脱离文档流（absolute和fixed）；
• 使用requestAnimationFrame定时器，不立即执行。

3、原型链

• 浏览器给函数的属性prototype(对象数据类型)开辟一个堆内存，在这个堆内存中，有一个属性constructor，它存储的值是当前类的本身；
• 原型链就是将函数的属性或方法变为公有的。

function Person(name,age){
    this.name = name;
    this.age = age;
}

Person.prototype.showName = function(){
    console.log( this.name +','+ this.age );
}

var per01 = new Person('ljl',20);
var per02 = new Person('zwj',18);

per01.showName();
per02.showName();

4、call方法改变this的指向：

call方法

var obj = {n:456};
function fn(a,b){
    console.log(this.n);
    console.log(a+b);
}
fn.call(obj,10,10);    //    将this指向obj
打印结果为456和20.


apply方法

var arr = [10,22,456,8];
console.log( Math.max.apply(this,arr) );    //    获取数组中的最大值

5、闭包（函数嵌套函数）

闭包中的this指向window；

闭包可以读取函数内部的变量；避免污染全局变量，而且还可以使变量的值一直保存在内存中，不会被垃圾回收机制回收。

缺点是内存消耗过大，因为会一直贮存在内存中。

function father(){
    var i = 100;
    function son(){
        return i;
    }
    return son;
}
console.log( father() );    //    打印结果为100.

6、数据存储

存储的时候，key是不能重复的！！！

• cookie：服务器保存在浏览器的一小段文本信息；大小在4KB左右。
• sessionStorage 窗口关闭数据清空

sessionStorage.setItem('key',value);

sessionStorage.getItem('key');

• localStorage 不主动清除他会一直存在

localStorage.setItem('key',value);

localStorage.getItem('key');

清除方法： 单个清除removeItem('key'); 全部清除clear();

 

7、面相对象的三个特征：继承、封装和多态。

//    继承！！！

function Parent(num){
    this.num = num;
}

Parent.prototype.chanYe = function(){
    console.log('子承父业');
}

function Son(){}

Son.prototype = new Parent();

var showSon = new Son();

showSon.chanYe();

8、javascript中的this指向？

1. 在自执行函数和闭包中，this指向window；
2. DOM中的this指向调用的元素；
3. 使用call和apply可以改变this的指向；
4. 在函数中，谁调用，this就指向谁；
5. 在构造函数中，指向当前类的实例对象。

9、HTTP协议

• HTTP协议

它是客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”；

• HTTP协议特点？

1、支持客户/服务器模式；2、简单快速；3、灵活；4、无连接；5、无状态；

• 它里面有那些请求方式？

GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器

POST:用于传输信息给服务器,主要功能与GET方法类似,但一般推荐使用POST方式

PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置

HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效

DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件

OPTIONS:查询响应URI支持的HTTP方法

• HTTP 1.0和1.1区别？

1.0中，当建立连接后，客户端发送一个请求，服务器端返回一个信息后就关闭连接，当浏览器下次请求的时候又要建立连接。    1.1即为持久连接。

• GET和POST请求的区别？

GET：参数放在URL上，不安全，且参数大小有限制；

POST：参数封装传递，安全，且参数大小无限制。

• HTTP和HTTPS比较？

1).通信使用明文不加密,内容可能被窃听,也就是被抓包分析;

2).不验证通信方身份,可能遭到伪装;

3).无法验证报文完整性,可能被篡改;

4).HTTPS就是HTTP加上加密处理。

• HTTP状态码

1xx：指示信息-表示请求已接收，继续处理

2xx：（成功）-表示请求已被成功接收

3xx：（读取缓存）重定向-要完成请求必须进行更进一步的操作

4xx：（客户端错误）-请求有语法错误或请求无法实现

5xx：（服务器错误）-服务器未能实现合法的请求

10、AJAX！！！

• AJAX的步骤？

1. 创建AJAX对象；
2. 发送HTTP请求；
3. 接收服务器回传的数据；
4. 更新页面数据。

• 同步和异步的区别？

有多个请求的情况下，异步可以开辟多个路径同时执行；而同步只能一个一个的执行。

• AJAX的readyState状态？

0：对象已经存在，但是还未配置信息；        unsent
1：信息配置完成，但是还未发送；            opened
2：发送成功；                            headers_received
3：正在接收返回的数据；                    loading
4：数据接收完成或者请求失败。              done

• 跨域（js同源策略限制）产生原因？

域名不同（baidu.com）、端口不同（8080）、二级域名不同、协议不同（http、https）、域名和ip不同（一个是localhost一个是ip地址）。

• 如何解决跨域？

1、jsonp（伪造script标签，覆写一个回调函数）；

2、服务器端处理，直接加上允许跨域的请求头；

3、porxy代理，它是通过nginx代理，将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

 

11、垃圾回收机制

1、垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

2、方法有标记清除和引用计数。

12、内存泄漏？

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

几种情况？

• 1、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }

• 2、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

 

 

目录

一、JS基础知识

二、JS的数据类型

三、栈内存和堆内存

四、数据类型转换

五、算数运算符

---