JavaScript基础

最新推荐文章于 2024-11-13 17:27:29 发布

大饼咔滋咔滋

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量1.7k

点赞数 29

本文链接：https://blog.csdn.net/m0_51710046/article/details/142850065

版权

JavaScript基础

JavaScript 是 Web 的编程语言,网页开发中HTML 定义了网页的内容和结构，CSS 描述了网页的布局，JavaScript 实现业务逻辑和页面控制（功能）。

一、浏览器执行JS

js —— 翻译器（浏览器） —— 机器语言

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用于解析HTML与CSS，俗称内核

JS引擎：JS解释器，读取网页中的JavaScript代码

浏览器本身不会执行JS代码，通过内置的JS引擎来执行JS代码。JS引擎会逐行解释每一句代码（转换为机器语言），然后由计算机执行。

二、JS的组成

DOM：页面文档对象，提供给JS很多操作页面中元素的属性和方法

BOM：浏览器对象模型，提供很多操作浏览器的属性和方法，比如：弹出框、获取分辨率等 window

三、书写位置

HTML 中的 Javascript 脚本代码必须位于标签之间。

Javascript 脚本代码可被放置在 HTML 页面的和部分中。

1、行内：直接写元素内部

2、内嵌：

alert(“hello world!”);

</script>

3、外部

四、注释

单行注释：// ctrl + /

多行注释：/* */ shift + alt + a

五、JS输入输出语句

alert(msg);--------------浏览器弹出警示框

console.log(msg)--------------浏览器控制台打印输出信息，程序员测试使用

prompt(info)----------------浏览器弹出输入框，用户可以输入

六、变量

1、命名规范

可包含字母、数字、下划线、和美元符号

名称必须以字母开头 aaaBbbCccDdd aaaBbbCccDDd

名称也可以以$和_开头

名称对大小写敏感

保留字、关键字不能作为变量的名称

2、声明提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

JavaScript 中，只有声明的变量会提升，初始化的不会。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x：5 和 y：undefined

var y = 7; // 初始化 y

严格模式： “use strict” 指令只允许出现在脚本或函数的开头。

七、数据类型

值类型(基本类型)：Number、String、Boolean、Undefined、Null、Symbol

引用数据类型（对象类型）：object、array、function

Number: 数字型，包含整型值和浮点型值，1 0.1
- console.log(‘你好’ - 1) // NaN Not A Number
- isNaN()用来判断是否是数字，是数字返回false，不是数字返回true
Boolean：布尔值，true和false，等价1和0
String：字符串类型，用引号””或’’
- 字符串转义符------反斜杠\，包含在引号里面
  
  \n 换行符
  
  \\ 斜杠
  
  \’ 单引号
  
  \” 双引号
- length属性获取字符串的长度
- 字符串的拼接：使用+号，与其他类型拼接，结果还是字符串类型
- 变量和字符串
```
var age = 18;
console.log('我今年' + age + '岁');
```
Undefined：变量没有赋值
Null：空值
Symbol:原始数据类型，表示独一无二的值
Object：对象的属性以名称和值对的形式 (name : value) 来定义
Array：var arr = [“0”,“1”,“2”]
Function: Function name(){}

注：undefined和null的区别

null表示没有对象，即不应该有值，经常用作函数的参数，或作为原型链的重点。

undefined表示缺少值，即应该有值，但是还没有赋予（变量提升时默认会赋值为undefined，函数参数未提供默认为undefined，函数的返回值默认为undefined）

（1）undefined不是关键字，而null是关键字;

（2）undefined和null被转换为布尔值的时候，两者都为false;

（3）undefined在和null进行==比较时两者相等，===比较时两者不等；

（4）Number（undefined）=NaN，Number（null）=0；

（5）undefined本质上是window的一个属性，而null是一个对象；

typeof检测数据类型：console.log(typeof 变量名)； ——但是判断数组、对象和null时都返回object

instanceof可以判断变量是数组还是对象：console.log(arr instanceof Array); //true

八、数据类型转换

1、转换字符串型

toString()
String()强制转换
**+**号拼接空字符串，隐式转换（字符串跟任何类型拼接都是字符串，所以可以先拼接一个空字符串）

2、转换数字型

parseInt(string)：取整，得到的是整数
parseFloat(string)：小数，浮点数
Number()
隐式转换 - * /

3、转换布尔型

Boolean()：代表空、否定的值会被转为false，如’’ 0 NaN null undefined，其余会被转为true

九、运算符（操作符）

用于实现赋值、比较和执行算数运算等功能的符号

1、算数运算符

+（加） -（减） *（乘） /（除） %（取余）

2、递增递减运算符

++ : 自增1

– ：自减1

前置：自增1 ++a
后置：先进行赋值运算，再自增1 a++

3、比较运算符

两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值作为比较结果

< ：小于号 1<2 true

> : 大于号 1>2 false

<= : 小于等于号 3<=2 false

>= : 大于等于号 2>=2 true

== ：判等号（会转型） 37 == 37 true

!= ：不等号 37 != 37 false

=== ：全等（要求值和数据类型都一致） 37===‘37’ false

!== 全不等

4、逻辑运算符

&& ：逻辑与，简称“与” and true&&false 同时为真才为真 true&&true——ture （全1为1，有0为0）

||：逻辑或，简称"或" or true || false ，只要有一个为true，结果为true true || false——ture （有1为1，全0为0）

! ：逻辑非，简称“非”,取反符 not !true

逻辑与短路运算：表达式1 && 表达式2 && 表达式3…&& 表达式n，如果表达式1的运算结果为false，则整个表达式的结果为false，同时不会再对后面的表达式2、表达式3到表达式n进行运算判断。如果表达式1的运算结果为true，则根据表达式2的运算结果继续判断

逻辑或短路运算：表达式1 || 表达式2 || 表达式3…|| 表达式n，如果表达式1的运算结果为true，则整个表达式的结果为true，同时不会再对后面的表达式2、表达式3到表达式n进行运算判断。如果表达式1的运算结果为false，则根据表达式2的运算结果继续判断

5、运算符优先级

小括号（）

一元运算符 ++ – ！

算数运算符先* / % 后 + -

关系运算符 > >= < <=

相等运算符 == != === !==

逻辑运算符先&&后||

十、流程控制

1、顺序结构

按照代码的先后顺序依次执行

2、分支结构

根据不同的条件，执行不同的路径代码，从而得到不同的结果

if(条件表达式) {

//执行代码

}

思路：如果条件表达式的结果为真，则执行大括号里面的代码，如果条件表达式的结果为假，则不执行大括号里面的代码，直接跳过

双分支语句

if(条件表达式) {
    //如果条件表达式成立，执行代码
} else {
    //否则，执行的代码
}

多分支语句

if(条件表达式1) {
    //如果条件表达式1成立，执行代码
} else if(条件表达式2){
    //如果条件表达式2成立，执行代码
} else {
    //否则，执行的代码
}

三元表达式：可以做一些简单的条件选择

语法：条件表达式？表达式1：表达式2

思路：如果条件表达式成立则返回表达式1的值，否则返回表达式2的值
switch语句
也是多分支语句，用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch语句。

switch(表达式) {
     case value1: 
     执行语句1；
     break；

     case value2: 
     执行语句2；
     break；
     ...
     default：
     没匹配上执行的代码块
 }

注：switch与if else的区别
在区间条件判断的时候，if else 比较合适，switch难实现
进行固定值条件判断的时候，switch会更好，性能更为优良

3、循环结构

在程序中要完成有规律的重复操作需要重复执行某些语句。

for(初始化变量;条件表达式;操作表达式){

//循环体

}

初始化变量：就是用var 初始化一个普通变量

条件表达式：用来决定每一次循环是否继续执行，就是终止的条件

操作表达式：每次循环最后执行的代码

continue关键字：终止本次循环，继续执行下一次循环，本次循环continue后的代码不会执行

break关键字：立即跳出循环

// 当…的时候
while(条件表达式) {
// 循环体
}
思路：当条件表达式为true的时候，执行循环体，否则退出循环
var num = 1;
while(num <= 100) {
console.log(‘11111’);
num ++;
}
do… while 先执行一次代码块，然后判断条件，当条件表达式为true的时候，执行循环体，否则退出循环
至少会执行一次循环体
do {
// 循环体
} while (条件表达式)

十一、数组

数组是指一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素。

1、创建数组的两种方式

var arr = new Array();

var arr = [1,2,3,‘4’,true] // 使用逗号隔开

2、获取数组中的元素

（1）数组的索引：用来访问数组元素的序号（数组的索引下标从0开始）

（2）获取数组中的元素格式：数组名[索引]

3、遍历数组

var arr = ['red','green','blue'];
for(var i=0; i<arr.length; i++){
    console.log(arr[i])
}

4、修改数组中的值

语法结构：数组名[索引] = ‘修改值’

十二、对象

1、定义

万物皆对象，对象是一个具体事物，对象是拥有属性（特征）和方法（行为）的数据。

2、创建对象的三种方式

利用字面量，花括号{}

var obj = {}; // 创建了一个空对象
var obj = {
    name: ‘张三’,
    age:18,
    sex:’男’,
    sayHello: function() {
        console.log(‘hello’)
    }
}
属性和方法采用键值对的形式-----键（属性名）：值（属性值）

对象的使用：

对象名.属性名或者对象名[‘属性名’] obj.name或者obj[‘name’]

调用对象的方法，对象名.方法名()

利用new Object

var obj = new Object() // 创建了一个空对象
obj.name = '张三'
obj.age = 18
obj.sex = '男'
obj.sayHello = function() {
	console.log('hello')
}

利用构造函数

构造函数是一种特殊的函数，主要用来初始化对象
```
function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function () {
        alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
console.log(bigbai.name);
bigbai.sayHi();
```
注意：构造函数名首字母要大写

不需要return就可以返回结果

调用必须使用new

3、遍历对象

for(变量 in 对象) {

console.log(变量)

consoel.log(obj[变量])

}

4、内置对象

javaScript对象分为三种：自定义对象、内置对象、浏览器对象

（1）内置对象

JS语言自带的一种对象，供开发者使用，并提供一些常用的、基本的属性和方法，有利于帮助我们快速开发。例如：Math、Date、Array、String等
- 数学对象Math
  
  Math.PI // 圆周率
  
  Math.abs() //绝对值
  
  Math.floor() // 向下取整
  
  Math.round() // 四舍五入
  
  Math.ceil() //向上取整
  
  Math.max(),Math.min() // 最大值，最小值
  
  Math.random() // 随机数
- 日期对象Date
  
  是构造函数，需要使用new
  
  var date = new Date()
  
  getFullYear() // 年份
  
  getMonth() // 月份 0~11
  
  getDate() // 当天日期
  
  getDay() // 星期几 0~6
  
  getHours() // 小时
  
  getMinutes() // 分钟
  
  getSeconds() // 秒
  
  getTime() // 返回1970年1月1日至今的毫秒数
- 字符串对象String
  
  charAt() // 返回在指定位置的字符。通过下标str[index]
  
  indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置。
  
  lastIndexOf() // 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
  
  includes() // 查找字符串中是否包含指定的子字符串。
  
  replace() // 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
  
  split() // 把字符串分割为字符串数组。
  
  substring() // 提取字符串中两个指定的索引号之间的字符。
  
  substr() // 从起始索引号提取字符串中指定数目的字符。
- 数组对象Array
  
  push() // 向数组的末尾添加一个或更多元素，并返回新的长度。
  
  pop() // 删除数组的最后一个元素并返回删除的元素
  
  reverse() // 反转数组的元素顺序
  
  sort() // 对数组的元素进行排序
  
  (1)升序
  var points = [40, 100, 1, 5, 25, 10];
  points.sort(function(a, b){return a - b});
  (2)降序
  var points = [40, 100, 1, 5, 25, 10];
  points.sort(function(a, b){return b - a});
  
  indexOf() // 搜索数组中的元素，并返回它所在的位置(第一个)。
  
  lastIndexOf() // 搜索数组中的元素，并返回它所在的位置(最后一个)。
  
  join() // 把数组的所有元素放入一个字符串。
  
  forEach() // 数组每个元素都执行一次回调函数。
  
  includes() // 判断一个数组是否包含一个指定的值。
  
  splice() // 从数组中添加或删除元素。
```
//删除
var list = [1,2,3]
list.splice(0,1)  //从下标为0开始删除1个元素
console.log(list)  //[2,3]

//添加
list.splice(1,0,5); // 表示在下标为1处添加一项5
console.log(list);    // [1,5,2,3] 

//替换
list.splice(0,1,4); // 替换 -> 从下标为0开始,长度为1的数组元素替换成4
console.log(list);  // [4,2,3]
list.splice(0,2,4); // 替换 -> 从下标为0开始,长度为2的数组元素替换成4(即4,2整体替换成4)
console.log(list);  // [4,3]
```
  unshift() //在数组的开头添加新元素
  
  shift() //删除数组的第一个元素

十三、函数

函数封装了一段可被重复调用执行的代码块。

1、函数的使用

声明函数

function 函数名() {

//函数体

}

var fn = function() {}

function:声明函数的关键字

函数不调用，自己不会执行

调用函数

函数名()

2、函数的参数

可以利用函数的参数实现函数重复不同的代码

function 函数名(形参1,形参2…){ // 声明函数的小括号里面是形参（形式上的参数），使用逗号隔开

// 函数体

}

函数名(实参1,实参2,…) // 函数调用小括号里面是实参（实际的参数）

形参是用来接收实参的，类似一个变量

3、函数的返回值

return语句

函数将值返回给调用者，通过return语句实现,return 后面的语句不会执行

function 函数名() {

return 需要返回的结果;

}

十四、作用域

一段代码所用到的名字并不是总是有效的，这个名字的可用性范围就叫这个名字的作用域。作用域提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字的冲突性。

1、全局作用域

整个

2、局部作用域

在函数内部，这个名字只在函数内部起作用

3、全局变量和局部变量

1、2对应的就是全局变量和局部变量

全局变量在浏览器关闭时销毁，比较占内存

局部变量在程序运行完销毁，比较节约内存

4、预解析

javaScript解析器在运行javaScript代码的时候分两步：预解析和代码执行

Js引擎把js里面所有的var声明提升到当前作用域最顶部，（函数里的var提升到函数最顶部），也叫变量提升，赋值不会被提升

十五、闭包

闭包的作用:通过一系方法,将函数内部的变量**(局部变量)转化为全局变量。**

注： 函数内部声明变量的时候，一定要使用var命令。如果不用的话，实际上声明了一个全局变量！

function f1(){
    var n = 999;
    function f2(){
        alert(n); 
}
return  f2;
}

var result = f1();

result(); // 999
父对象的所有变量，对子对象都是可见的，反之则不成立。

在JavaScript中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"，在本质上，*闭包就是将函数内部和函数外部连接起来的一座桥梁*。

闭包的三个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

优点：

①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

缺点：

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

十六、DOM

1、定义

DOM全称 Document Object Model，是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

DOM把网页和脚本以及其他的编程语言联系了起来。

DOM在开发中主要用来操作元素。

2、获取元素

（1）根据ID获取

document.getElementById(“ID”)返回元素对象

（2）根据标签名获取

document.getElementsByTagName(“”)可以返回带有指定标签名的对象集合

（3）通过类名获取

document.getElementsByClassName(‘类名’) // 根据类名返回元素的对象集合

（4）通过选择器获取

document.querySelector(‘选择器’) //返回指定选择器的第一个对象

document.querySelectorAll(‘选择器’) // 返回指定选择器的所有对象

（5）特殊元素获取

获取body元素

document.body

获取html元素

document.documentElement

3、事件

事件由三部分组成：事件源、事件类型、事件处理程序

事件源：事件触发的对象谁按钮

事件类型：事件类型如何触发点击

事件处理程序：通过函数赋值的方式

this关键字：this 表示当前对象的一个引用，会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
特殊情况：在箭头函数中

https://blog.csdn.net/angry_rooster/article/details/117537539

4、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

（1）改变元素的内容（innerText、innerHTML）

innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。

innerText用来设置或获取标签内文本内容, 但它去除Html标签。在读取元素的时候，只会读取文本；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析Html标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。

（2）修改元素属性

element.属性名 = “ ”

（3）修改样式属性

修改元素的大小，颜色，位置等样式

element.style.样式属性 = “ ”

element.style 适合修改较少样式的时候使用

（4）使用className修改样式属性

element.className

（5）HTML标签自定义属性

目的：为了保存数据并使用数据，有些数据可以保存在页面，不需要存在数据库

element.setAttribute() 设置属性

element.getAttribute() 获取属性

（6）改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容。

注：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

5、节点操作

每个HTML元素是元素节点，每个HTML属性是属性节点，HTML元素内的文本是文本节点。

（1）节点层级

父子兄层级关系

var box3 = document.getElementById(‘box3’)

// 获取离元素最近的父节点

console.log(box3.parentNode);

var ul1 = document.getElementById(‘ul1’)

// 所有的子节点，包括元素节点，文本节点等

console.log(ul1.childNodes);

// 所有的子元素节点

console.log(ul1.children);

// 获取第一个子元素节点

console.log(ul1.firstElementChild);

// 获取最后一个子元素节点

console.log(ul1.lastElementChild);

// 获取下一个兄弟元素

console.log(box3.nextElementSibling);

// 获取上一个兄弟元素

console.log(box3.previousElementSibling);

（2）创建节点

动态数据需要动态生成节点：document.createElement(‘tagName’)

（3）添加节点

node.appendChild(child)

将一个几点添加到指定父节点的子节点列表末尾

node.insertBefore(child,指定元素) // 添加到指定位置

（4）删除节点

node.removeChild(child) // 删除子节点，返回删除的节点

（5）复制节点/克隆节点

node.cloneNode(Boolean)

Boolean为true 则克隆整个节点，包括里面的内容 ——复制标签和内容

Boolean为false则克隆节点本身，不克隆里面的节点 ——只复制标签不复制内容

6、常用事件

https://www.w3school.com.cn/jsref/dom_obj_event.asp

十七、BOM

浏览器对象模型，提供了与浏览器窗口交互的对象，核心对象是window

alert()，prompt()都属于window对象方法

1、window对象的常见事件

（1）页面加载事件，当文档内容加载完执行该事件

window.onload = function() {}

或者

window.addEventListener(‘load’,function(){

})

有了这个事件就可以把js代码写在页面元素的上方

注：

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

可以使用 removeEventListener() 方法来移除事件的监听。

用法：element.addEventListener(“click”, myFunction);

（2）调整窗口大小事件

window.onresize = function() {}

或者

window.addEventListener(‘resize’,function(){

})

2、定时器

（1）setTimeout

延迟多少时间后执行

setTimeout(调用函数，延迟的毫秒数) ——setTimeout(function(){},1000)

（2）setInterval

间隔多少秒执行

setInterval(调用函数，间隔的毫秒数) ——setInterval(function(){},1000)

（3）回调函数

callback，类似定时器里面的调用函数

回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调。

//定义主函数，回调函数作为参数

function A(callback) {

callback(); 

console.log('我是主函数'); 

}

//定义回调函数

function B(){

setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作 

}
//调用主函数，将函数B传进去
A(B);    // 主函数-回调函数（2s后）

案例：倒计时关闭广告

（4）清除定时器

clearTimeout(timer)

clearInterval(timer)

（5）倒计时

时

分

秒

var time = '2019/11/06 20:00:00';

var hour = document.querySelector('.hour');

var minute = document.querySelector('.minute');

var second = document.querySelector('.second');


function countDown(time) {

    var nowTime = new Date(); // 当前毫秒数

    var downTime = new Date(time);// 时间总毫秒数

    var times = (downTime - nowTime) / 1000; // 剩余秒数

    var h = parseInt(times / 60 / 60 % 24);

    h = h < 10? '0' + h:h;

    var m = parseInt(times / 60 % 60);

    m = m < 10? '0' + m:m;

    var s = parseInt(times % 60);

    s = s < 10? '0' + s:s;

    hour.innerHTML = h;

    minute.innerHTML = m;

    second.innerHTML = s;

}

setInterval(function(){

    countDown(time);

},1000);

（6）同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排序是一致的、同步的。

异步：执行一个任务的时候，还可以同时处理其他的任务

console.log(1);

setTimeout(function(){

console.log(2);

}, 1000)

console.log(3);

注：如果把1000改成0，这时候的结果仍为132

同步任务：都在主线程上，形成一个执行栈

异步任务：通过回调函数实现的，放到任务队列

异步任务一般有一下三种类型：

1、普通事件：如click

2、资源加载：如load,error

3、定时器

执行机制：

先执行执行栈中的同步任务

异步任务放入任务队列中

执行栈的所有同步任务执行完毕，系统按照次序读取任务队列中的同步任务

3、location对象

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

URL的一般语法格式：协议：//主机（域名）[:端口号]/路径/[?参数]#片段（常见于链接、锚点）

http://localhost:8080/index/auth/?id=abc&psw=123

属性：

location.href 获取或者设置整个URL

location.host 返回主机（域名）

location.port 返回端口号

location.pathname 返回路径

location.search 返回参数

location.hash 返回片段

方法：

location.assign() 跟href一样，可以跳转页面（也称为重定向页面）

location.replace() 替代当前页面，因为不记录历史，所以不能后退

location.reload() 重新加载页面，相当于刷新按钮或者f5

4、navigator对象

navigator对象包含有关浏览器的信息，有很多属性，我们最常用的是userAgent，该属性可以返回由客户端发送服务端的user-agent（用户代理）头部的值。

判断用户是使用什么客户端打开的

if((navigator.userAgent.match(/(phone|pad|iPhone|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrower|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "phone.html"; // 手机
}else{
    window.location.href = "computer.html"; // 电脑
}

5、history对象

window的history对象，与浏览器历史进行交互，该对象包含用户（在浏览器窗口）访问过的URL

方法：

back() ——后退

forward() ——前进

go(参数) ——前进后退功能，参数是如果是1就前进一个页面，如果是-1就后退一个页面

6、本地储存

数据存储在用户浏览器

设置、读取方便，甚至页面刷新不消失

容量较大，sessionStorage约5M，localStorage约20M

只能存储字符串，可以将对象JSON.stringify编码后存储

JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了

（1）window.sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口（页面）数据可以共享

以键值对的形式存储使用

sessionStorage.setItem(key,value)

sessionStorage.getItem(‘uname’)

removeItem(‘uname’)

clear()

（2）window.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在

可以多窗口共享

以键值对的形式使用

存：

var obj = {"name":"Jack","age":"16"}

localStorage.setItem("userInfo",JSON.stringify(obj));

取：

var user = JSON.parse(localStorage.getItem("userInfo"))

删除：

localStorage.remove("userInfo);

清空：

localStorage.clear();

cookie、sessionStorage和localStorage的区别

（1）存储的时间有效期不同

cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
localStorage的有效期是在不进行手动删除的情况下是一直有效的

（2）存储的大小不同

cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

（3）与服务端的通信

cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

大饼咔滋咔滋

关注

29
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript基础

JavaScript基础

一、浏览器执行JS

二、JS的组成

三、书写位置

四、注释

五、JS输入输出语句

六、变量

1、命名规范

2、声明提升

七、数据类型

八、数据类型转换

1、转换字符串型

2、转换数字型

3、转换布尔型

九、运算符（操作符）

1、算数运算符

2、递增递减运算符

3、比较运算符

4、逻辑运算符

5、运算符优先级

十、流程控制

1、顺序结构

2、分支结构

3、循环结构

十一、数组

1、创建数组的两种方式

2、获取数组中的元素

3、遍历数组

4、修改数组中的值

十二、对象

1、定义

2、创建对象的三种方式

3、遍历对象

4、内置对象

（1）内置对象

数学对象Math

日期对象Date

字符串对象String

数组对象Array

十三、函数

1、函数的使用

2、函数的参数

3、函数的返回值

十四、作用域

1、全局作用域

2、局部作用域

3、全局变量和局部变量

4、预解析

十五、闭包

十六、DOM

1、定义

2、获取元素

3、事件

4、操作元素

5、节点操作

（1）节点层级

（2）创建节点

（3）添加节点

（4）删除节点

（5）复制节点/克隆节点

6、常用事件

十七、BOM

1、window对象的常见事件

2、定时器

（1）setTimeout

（2）setInterval

（3）回调函数

（4）清除定时器

（5）倒计时

（6）同步和异步

3、location对象

4、navigator对象

5、history对象

6、本地储存

（1）window.sessionStorage

（2）window.localStorage