Javascript总结

最新推荐文章于 2024-01-30 09:48:39 发布

paterl

最新推荐文章于 2024-01-30 09:48:39 发布

阅读量286

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/paterl/article/details/125192284

版权

1.cookie

不能超过4kb，主要用途是保存登录信息

登录页面常使用cookie

设置cookic常用语法：document.cookie = ``;

max-age = 变量；设置cookie的保质期

2.localstorage（本地存储）格式跟临时存储一样

是HTML5中新加入的技术

除非被清除，否则永久保存

一般为5MB

仅在客户端（即浏览器）中保存，不参与和服务器的通信

本地存储使用的是key value数据结构

注意：value值只能是字符串无法存储对象

本机持续化存储，没有过期时间

如果要存储对象要将对象转化为字符串

可使用JSON.stringify()将javascript对象转换为json字符串

清空存储的值：

localStorage.removeItem("key");

3.sessionstorage（临时存储）

临时存储使用的是key value数据结构

注意：value值只能是字符串无法存储对象

如果要存储对象要将对象转化为字符串

可使用JSON.stringify()将javascript对象转换为json字符串

// 将对象转为字符串

let personString = JSON.stringify(person);

// 将字符串存储在sessionStorage中

sessionStorage.setItem("persons", personString);

// 获取值

let person = sessionStorage.getItem("persons");

4.onchange

当元素的值发生改变时，会发生onchange事件

对于单选框和复选框，在被选择的状态改变时，发生onchange事件

5.作用域链

只要是代码，就至少有一个作用域
写在函数内部的叫局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

6.var与let的区别

在let出来之前，var的作用范围只有函数和全局作用域，在let后出现了块级作用域，

var：

1.使用var声明的函数、变量会造成变量提升，即在函数声明前也可访问该变量和函数，

2.用var声明的变量，{}限定不了var的访问范围，即在{}内声明的变量也可在{}外进行访问。

3.var变量可以重复声明

let:

1.let声明的变量只能在声明后才能被访问，否则会报Uncaught ReferenceError错误

2.let变量不能重复声明，let不允许在相同作用域内，重复声明同一个变量。否则报错：Uncaught SyntaxError: Identifier 'XXX' has already been declared

var与let在for循环中的区别

用var声明i

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点： JS的事件循环机制，setTimeout的机制等

用let声明i

// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9

7.js的加载过程

JS加载时，首先会优先加载function，但仅限于function xxx(){}这种声明方式的，像var b = function(){};又或者匿名函数等是不会优先加载的(注意匿名函数是什么时候用，什么时候加载，和懒加载有得一拼)，这是第一步。其次会加载script元素，按照script中的标签从上往下执行，当遇到错误时会返回，结束当前标签的执行，执行下一个script。

js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面

普通函数在调用时可以放在任意位置，而匿名函数的调用必须写在声明之后

因为普通函数在浏览器加载js文件时会将函数的声明提到最前面，称为函数提升

8.arguments

用来获取函数中有多少个参数传递，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参

9.new关键字

new在执行时会做四件事

在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数里面不需要return）

10.改变元素内容

innerText：不识别html标签，去除空格和换行

innerHTML：识别html标签，保留空格和换行

11.自定义属性

获取自定义属性

element.getAttribute('属性');

设置自定义属性的值

element.setAttribute('属性','值');

移除属性

element.removeAttribute('属性');

12.操作节点

parentNode：返回某节点的父节点，如果没有父节点返回null

childNodes：返回包含指定节点的子节点，返回值包含了所有的子节点，包括元素节点、文本节点等

firstChild：返回第一个子节点，找不到则返回null，也包含了所有的节点

lastChild：返回最后一个子节点，找不到则返回null，同样，也是包含所有的节点

nextSibling`返回当前元素的下一个兄弟元素节点，找不到则返回null，同样，也是包含所有的节点

previousSibling`返回当前元素上一个兄弟元素节点，找不到则返回null，同样，也是包含所有的节点

13.窗口加载事件

onload是等页面内容完全加载完毕，再去执行处理函数

window.onload使用传统的注册事件方式，只能写一次，如果有多个，会以最后一个为准

如果使用addEventListeren则没有限制

load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等
DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

14.调整窗口大小事件

onresize是调整窗口大小加载事件，当触发时就调用的处理函数

只要窗口大小发生像素变化，就会触发这个事件

15.获取窗口的宽高

window.innerWidth获取当前屏幕的宽

window.innerHight获取当前屏幕的高

16.定时器

1.setTimeout

用于设置一个定时器，该定时器在定时器到期后执行调用函数

clearTimeout()取消先前通过调用setTimeout建立的定时器

2.setInterval

重复调用一个函数，每隔这个时间，就去调用一次回调函数

clearInterval取消了先前通过调用setInterval()建立的定时器

17.同步和异步

同步：前一个任务结束后再执行后一个任务

异步：在做这件事的同时，你还可以处理其他事情

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

先执行执行栈中的同步任务
异步任务(回调函数)放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

18.location

window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

location.reload()重新加载页面，相当于刷新按钮或者f5，如果参数为true，强制刷新ctrl+f5

19.原型

构造函数通过原型分配的函数是所有对象所共享的，这样就解决了内存浪费的问题

每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

什么是原型？

一个对象，我们也称为prototype为原型对象

原型的作用是什么？

共享方法

之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有_proto_原型的存在。

原型链查找规则

当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性如果没有就查找它的原型(也就是proto指向的prototype原型对象) 如果还没有就查找原型对象的原型(Object的原型对象) 依次类推一直找到Object为止(null) __ proto __对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

20.改变函数内部this指向

call apply bind 总结：

相同点

都可以改变函数内部的 this指向区别点：

call和apply会调用函数，并且改变函数内部的this指向 call和apply传递的参数不一样，call 传递参数，apply 必须数组形式 bind不会调用函数，可以改变函数内部this指向主要应用场景

call经常做继承 apply经常跟数组有关系，比如借助于数学对线实现数组最大值与最小值 bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

21.闭包

闭包指有权访问另一个函数作用域中的变量的函数

简单理解：一个作用域可以访问另外一个函数内部的局部变量

闭包的作用

延伸变量的作用范围

22.正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等

22.1.正则表达式的创建

1.通过RegExp对象的构造函数创建

var 变量名 = new RegExp(/表达式/);

2.通过字面量创建

var 变量名 = /表达式/;

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

// 边界符 ^ $
var rg = /abc/;   //正则表达式里面不需要加引号，不管是数字型还是字符串型
// /abc/只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));

var reg = /^abc/;
console.log(reg.test('abc'));   //true
console.log(reg.test('abcd'));	// true
console.log(reg.test('aabcd')); // false

var reg1 = /^abc$/
// 以abc开头，以abc结尾，必须是abc

括号总结

大括号量词符里面面表示重复次数
中括号字符集合匹配方括号中的任意字符
小括号表示优先级

// 中括号 字符集合 匹配方括号中的任意字符
var reg = /^[abc]$/;
// a || b || c
// 大括号 量词符 里面表示重复次数
var reg = /^abc{3}$/;   // 它只是让c 重复3次 abccc
// 小括号 表示优先级
var reg = /^(abc){3}$/;  //它是让 abc 重复3次

23.函数表达式

函数表达式（function expression）非常类似于函数声明（function statement）并且两者拥有几乎相同的语法。函数表达式与函数声明的最主要区别是函数名称（function name），在函数表达式中可省略它，从而创建匿名函数（anonymous functions）