JavaScript的简单介绍和应用

最新推荐文章于 2023-09-23 05:06:13 发布

昔西西西

最新推荐文章于 2023-09-23 05:06:13 发布

阅读量194

点赞数

分类专栏：前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/xy25408/article/details/120024256

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.JavaScript的组成部分（面试题）

1.1 ECMAScript

描述了该语言的语法和基本对象，JS的核心语法标准

其中，包含注释 // ，/**/、变量、操作符、流程控制语句、数组、对象、函数、正则表达式…

所有的js解释器都可以兼容ECMAScript

变量：var、let、const

var用于声明一个变量，let、const在ES6中新增，在es6中，可以通过let声明一个变量，通过const声明一个常量

var、let、const变量的区别

var 声明全局变量，作用域为全局

let 只在其代码块内有效，存在于暂时性死区，即变量会绑定某个区域，不熟外部影响

const 声明常量，不可更改，同样存在于暂时性死区

如果在函数中定义变量没有加var，该变量为全局变量

var 存在声明变量(函数)提升，var声明的变量可在声明前使用，在此时，值为undefined

var可重复定义一个变量，let不允许重复声明，const一旦声明不可更改

var 可重复定义和赋值

let不可重复定义，但可重复赋值

const不可重复定义和重复赋值

1.2 文档对象模型（DOM）

Document Object Model，描述处理网页内容的方法和接口

Js操作Html的API

是针对XML但经过扩展用于HTML的应用程序编程接口，DOM将整个页面映射成一个多节点结构

例如：

var dom=document.getElementsByTagName(“input”);

var dom=document.getElementById(“input_name”);

dom.οnclick=function(){}

js语言：基础语法、基础库、扩展库（jQuery DOM库）

1.3 浏览器对象模型（BOM）

Browser Object Model，描述与浏览器进行交互的方法和接口

Js操作浏览器的API

作用：

开发人员可以使用BOM控制浏览器显示的页面以外的部分
弹出新浏览器窗口
移动，缩放，关闭浏览器的功能
提供浏览器详细信息的navigator对象
提供浏览器所加载页面的详细信息的location对象
提供用户显示器分辨率详细信息的screen对象
对cookies的支持
支持XMLHttpRequest，IE中的ActiveXObject自定义对象

包含：

警告框 alert()、提示用户进行输入的对话框 prompt()、确认框 confirm()

setInterval(),setTimeout()

XMLHttpRequest

Ajax——内置XMLHttpRequest对象（用于在后台与服务器交换参数）

作用

不重新加载页面时，更新网页（局部刷新）
页面加载完成后，从服务器请求数据
页面加载完成后，从服务器接收数据
在后台向服务器发送数据

注意

只有ECMAScript是标准，也就是在绝大多数浏览器以及js解析器（node）中运行效果相同，但是DOM与BOM是各大浏览器厂商自己提供的API，在使用上大同小异，但是也可能会出现少许不兼容的情况

2.JavaScript的特点

2.1 解释型语言

通过解释器，将js解析出来，js -> js解释器：nodejs、relp(网页中，点击检查后，进入控制台)

2.2 弱类型语言

特点

变量的数据类型在初始化的时候确定
变量的数据类型可以随时发生改变
类型细分不明显

变量的数据类型取决于值的数据类型

例如：

var a ;
a = 2;		// a的数据类型为number
a = true;	// a的数据类型为boolean

2.3 顺序解释执行，自上而下

2.4

既可以作为前端脚本语言，也可以作为后端语言，取决于应用平台（浏览器/操作系统）和使用的框架（dom、jquery/http、mysql、file）

3.使用JavaScript的方式

3.1 在内部直接使用

在<head>标签体中添加<script>标签，在标签中编写js代码

在<body>标签体中添加<script>标签，在标签中编写js代码

区别

在body标签体中的JavaScript代码在页面加载的时候被执行
在head标签体中的JavaScript代码在被调用的时候才执行
因此为避免获取到的值为undefined，建议将JavaScript代码写在body标签体的最后面

3.2 引入外部Js文件

在<head>标签体中添加<script>标签，在script标签中使用src属性，引入外部文件

4.关键字和保留字

关键字:(在js中有特殊功能)

break do try typeof
case else new var
catch finally return void
continue for switch while
debugger this function with
default if throw instanceof
delete in

保留字：(将来可能成为关键字)

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public

特点

1.区分大小写

typeof 关键字， typeOf 非关键字

2.标识符

指变量，函数，属性的名字或者函数的参数

命名规则：

只能由字母，数字，下划线，$组成
只能以字母，下划线，$开头，
不能将关键字作为标识符，命名采用驼峰式命名，即从第二个单词开始首字母大写
语句，每个语句以分号结尾

5.数据类型

5.1 基本数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值，Array、Function从Object中派生出来的

5.2 类型简介

JavaScript 拥有动态类型

JavaScript 拥有动态类型，这意味着相同的变量可用作不同的类型

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

5.2.1 值类型

1-字符串 String

字符串可以是引号中的任意文本，可以使用单引号或双引号

转义字符 ：

\n 换行 \t 制表 \b 退格 \r 回车 \ 斜杠 ’ 单引号 " 双引号

字符串长度可通过length属性获取字符长度

2-数字 Number

数字有很多种类型

按数字精度区分：整数(int),单精度(float),双精度(double )

按数字的表示方法区分：二进制(Binary)，八进制(Octal)，十进制(decimal system)，十六进制(Hexadecimal)

整数

十进制 55 由0~9组成

二进制 0b10 首位为0b，只能由0/1组成

八进制 070 首位为0，其他位有0~7组成

十六进制 0x11 首位为0x，其他位为0-9，A~F

浮点数

数值中包含小数点，至少有一位小数，最高精度为17位

普通浮点数 3.1415926

科学计数法 3.125e7 即31250000

非数值

该数值表示一个本来要返回数值的操作数未返回数据的情况

例如：

var a = 10/ "a";	// a为NaN

数值范围

由于内存的限制，ECMAScript不能保存世界上所有的数值。

Number.MIN_VALUE：最小数值

Number.MAX_VALUE：最大的数值

如果某次计算的结果超过了JavaScript数值范围，将会返回Infinity(正无穷)或者-Infinity(负无穷)

var a = 9/0;   // Infinity
Number.MIN_VALUE    5e-324
Number.MAX_VALUE   1.7976931348623157e+308

3-布尔 Boolean

布尔（逻辑）只有两个值：true 或 false

4-Null

值为null，可表示空对象的指针

5-Undefined

表示变量不含有值，未定义

undefined 与null关系

undefined继承null，所以undefined == null结果为true，但是null表示空对象，undefined表示未定义

5.2.2 引用数据类型

1-对象Object

对象由键值对组成，通过使用大括号将所有键值对括起来，通过点语法获取对象属性

var dog = {
	name: 'momo',
	age: 4
}
dog.name; //momo
dog.age;	//age

2-数组Array

数组是一个特殊的对象，包含了多个值，值与值之间使用逗号分隔开，所有的值通过中括号括起来，通过数组下标获取对应的数据,数组下标从0开始

var studentArr = ['zhangsan','lisi','wangwu',1,5,6];
studentArr[0];//zhangsan

3-函数Fuction

函数是代码执行单元，用于实现某些特殊的功能

5.3 储存

5.3.1 基本数据类型

基本数据类型变量都维护在栈区，基本数据类型的值保存在栈区

基本数据类型的值存在栈，值与值之间独立存在，修改一个值不会影响其他变量

5.3.2 引用数据类型

引用数据类型的引用地址保存在栈区，值保存在堆区

当栈存放引用类型时，值为对象的地址，var obj1 = obj; 此时obj与obj1指向同一个地址，所以当obj的name值变为“lisi”时，obj1也会发生变化

5.3.3 深拷贝与浅拷贝

主要针对于引用数据类型参数，浅拷贝表示仅拷贝引用地址，深拷贝表示对于对象的克隆。

实现深拷贝的方法

通过json对象实现深拷贝（JSON.stringify，JSON.parse）
Object.assign()拷贝
lodash函数库实现深拷贝
递归的方式实现深拷贝
等等

6.类型判断

typeof

返回值：“undefined” 未定义、
“boolean” 布尔类型、“string” 字符串、
“number” 数值、、“object” 对象、null数组、、“function” 函数

通过typeof可以判断一个变量的类型

var a = 3;
typeof a;  // number
if((typeof a) == "string"){}
if(a == "null"){}
if(a == null){}

非数值检测

isNaN，判断参数是否“不是数值”，当参数para不是数值的时候返回true

var a = 10/'a';
isNaN(a);	// true

数值范围检测

isFinite，判断参数是否在最大值和最小值之间，如果在，返回true

var a = isFinite(9/0);	// false