前端JavaScript学习笔记

本文主要是介绍前端JavaScript学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端JavaScript学习笔记

1、认识JavaScript

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript的组成部分

ECMAScript，描述了该语言的语法和基本对象
文档对象模型(DOM)，描述处理网页内容的方法和接口
浏览器对象模型(BOM)，描述与浏览器进行交互的方法和接口

2、JavaScript组成

1、ECMAScript

注释 //、/**/

变量 var let const

操作符

流程控制语句

数组

对象

函数

正则表达式

…

2、DOM：Document Object Model文档对象模型

js操作html的api

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

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

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

dom.οnclick=function(){}

js语言：基础语言、基础库、扩展库(jQuery DOM库)

3、BOM:Borwser Object Model浏览器对象模型

js操作浏览器的api

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

alert()/prompt()/confirm()

setInterval(),setTimeout()

XMLHttpRequest(用于在后台与服务器交换数据)

Ajax

4、js的特点

1、解释型语言

js->nodejs(js解释器)

2、弱类型语言

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

3、顺序解释执行自上而下

4、既可以作为前端脚本语言，也可以作为后端语言，去决议应用平台(浏览器/操作系统)和使用的框架(dom、jquery/http、mysql、flie)

5、在网页上使用JavaScript

内部JavaScript

编写好HTML，在标签体中添加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

外部JavaScript

单独新建一个后缀名为.js的js文件，编写好HTML文件，在标签体内添加元素，使用script标签的src属性将js文件导入进来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

6、在body和head中使用JavaScript的区别

在body部分中的JavaScript会在页面加载的时候被执行，在head部分中的JavaScript会在被调用的时候才执行

因为浏览器解析html是自上而下的，如果把JavaScript放在head里的话，则先被解析，但这时候body还没解析，所以会返回空值，一般都会绑定一个监听，当全部的html文档解析完之后在执行代码

windows.onload = function(){
	// 这里放执行的代码
}

这就说明了，如果我们想定义一个全局对象，而且这个对象是页面中的某个按钮时，我们必须将其放在body中，道理很明显：如果放入head，当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefined。一般习惯将JaveScirpt放在body的后面。

3、关键字和保留字

关键字:(在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、标识符

指变量，函数，属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符：

1、字母，数字，下划线，$组成

2、只能以字母，下划线，$开头

3、不能将关键字作为标识符。

4、语句：每个语句以分号结尾，如果省略分号，有解析器确定语句的结尾

4、变量

变量是一个值的容器，该容器的值可以随时改变。ECMAScript的变量是弱类型(松散类型)，可以用来保存任何类型的数据，定义变量时使用var关键字。

变量的使用

变量的使用一般经过声明，初始化，使用三个步骤

// 变量声明
var a ;
// 变量初始化
a = 3;
// 变量调用
console.log(a);

js是弱类型语言

弱类型语言具有如下特点：

1、变量的数据类型在初始化的时候确定

2、变量的数据类型可以随时发生改变

3、类型细分不明显
var

1、变量可以重复声明

var a = b = c = 3;
var d = 10,e = 20,f,g;
//弱类型语言，变量容器可以混合使用
var a = "hello world";//变量的重复赋值（相同的数据类型、不同的数据类型）  
function a(){}

2、变量声明会被提升(函数的声明也会提升)

//console.log(b);//报错
console.log(a);//不会报错
var a = 3;
//等价于：
var a;//在所有代码执行之前，js解释器会将js中所有的var声明的变量提升。
console.log(a);
a=3;

3、var声明的变量的作用域

function foo(){
  if(true){
    var a = 3;  
    console.log("inner",a);//inner 3
  }
  console.log("outer",a);//outer 3  //没有块级作用域
}
foo();
console.log(a);//error!  函数作用域：局部作用域
// var 的变量声明提前知会提升到当前作用域的最前面

5、数据类型

JavaScript的基本数据类型：

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

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

注意：Symbol是ES6引入了一种新的原始数据类型，表示独一无二的值。

JavaScript拥有动态类型

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

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

字符串String

字符串是可以存储字符的变量

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

var carname="Volvo XC60";
var carname='Volvo XC60';

可以在字符中使用引号，只要不匹配包围字符串的引号即可：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

可以使用字符字面量，转义字符

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

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

数字Number

JavaScript 只有一种数字类型。数字有很多类型，按照数字精度可以分为整数(int),单精度(float),双精度(double )，按照数字的表示方法可以分为二进制(Binary)，八进制(Octal)，十进制(decimal system)，十六进制(Hexadecimal)。但是在js中，所有的数字统一使用Number来表示。

整数

十进制 55 由0~9组成

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

十六进制 0x11 首位为0x 其他位由0~9 A~F组成

浮点数

浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。浮点数的最高精度是17位小数。

普通浮点数 3.1415926

科学计数法 3.125e7 即31250000

非数值

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

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

布尔Boolean

布尔(逻辑) 只有两个值：true或false

Null

该类型的取值只有一个，即null。null可以表示一个空指针。

var a = null;

如果一个变量准备将来保存对象，可以将该变量初始化null而不是其他，这样可以通过检查null值就可以知道

相应的变量是否已经保存了一个对象的引用。

if(car !== null ){  //car对象执行某些操作}

undefined

undefined这个值表示变量不含有值。未定义的。

var a;
console.log(a,typeof a);//undefined 'undefined'
var a = undefined;
console.log(a,typeof a);//undefined 'undefined'

undefined和null关系

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

null与undefined用途不同，null可以用来表示一个空对象，但是没有必要把一个变量的值显式设置为undefined。

//null vs undefined
console.log(undefined == null); //true  //undefined派生自null
console.log(undefined === null);//false
if(null == undefined){console.log('相等的')}
if(null === undefined){console.log('完全相等')}
// ==， 等同  的意思， 两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等。 
// ===，恒等  的意思， 不做类型转换，类型不同的结果一定不等。
// "=="表示只要值相等即可为真，而"==="则要求不仅值相等，而且也要求类型相同。
// 建议：尽量使用严格运算符 ===。因为"=="不严谨，可能会带来一些违反直觉的后果。

引用数据类型

在js中除了以上的基本数据类型，其他的所有数据类型都可以归结为引用数据类型

对象Object

对象是模拟现实生活的对象，对象有键值对组成，通过使用大括号将所有的键值对括起来。

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

可以通过点语法获取对象的属性

dog.name; //momo
dog.age;	//age

数组Array

数组是一个特殊的对象，包含了多个值，值与值之间使用逗号隔开，所有的值通过中括号括起来。

var classArr = ['web2104','web2105','web2106']
var studentArr = ['zhangsan','lisi','wangwu']

可以通过数组下标获取对应的数据

classArr[0]; // web2104

函数Function

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

function sum(a, b) {
  return a + b;
}
//执行函数
sum(1,2); // 3

基本数据类型和引用数据类型在内存中如何存储

基本数据类型

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

例如：

var a = 123;
b = a;
a = 456;

1、var a=123;b=a;基本数据类型是在栈内存中存储的，如下图，b=a的时候，b直接把a的值存进去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWUGrkcz-1631098228215)(images/image-20210825185435874.png)]

2、a=456;会把a的值改为456，但对b没有任何影响，所以最后会输出a=456;b=123;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Om1AgEJ5-1631098228218)(images/image-20210825185626995.png)]

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

引入数据类型

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

var obj = {
  name: 'zhangsan'
}
var obj1 = obj; //将对象obj赋值给对象obj1
console.log(obj.name);  //zhangsan
console.log(obj1.name); //zhangsan

// 修改obj的name
// 当obj属性name变为"lisi"时，obj1属性name也变为"lisi"
obj.name = 'lisi';
console.log(obj.name);  //lisi
console.log(obj1.name); //lisi

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lfTofQJb-1631098228222)(images/image-20210825190249108.png)]

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

深拷贝与浅拷贝

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

实现深拷贝的方法

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

6、类型判断

typeof

使用typeof判断数据类型
返回该变量名所指向数据的类型
语法： 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

判断是否不是一个数字

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

isFinite

判断是否是一个有效值

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

据类型
返回该变量名所指向数据的类型
语法： 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

判断是否不是一个数字

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

isFinite

判断是否是一个有效值

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

这篇关于前端JavaScript学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！