本文章根据b站狂神说javascript视频教程以及其中一篇笔记整理
文章链接：https://blog.csdn.net/pan_h1995/article/details/105974385
视频链接：https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867

因为javascript还算比较熟悉，所以暂且把整理过程当作一次复习，系统性的重新学习一下，整理时会根据自己的知识进行补充和删除

0、前端知识体系

0.1、HTML

太简单，略

0.2、CSS

主要缺陷：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

什么是CSS预处理器

CSS预处理器就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些

SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。

0.3、JavaScript

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

JavaScript框架

JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice、layUI：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

0.4、三端同一

混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）

1、什么是Javascript

javaScript是一门世界上最流行的脚本语言

ECMAScript它可以理解为JavaScript的一个标准，最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5代码上！

2、快速入门

2.1、引入JavaScript

内部标签

<script> 
	//....
<script>

外部引入

<script src="js/hj.js"></script>
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript" src="js/hj.js"></script>

2.2、浏览器必备调试须知

在这里插入图片描述
Elements

用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。

Console

控制台：用于打印和输出相关的命令信息，比如报错，打印console.log信息等

Sources

js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件

Network

网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

2.3、数据类型

简单数据类型

//变量
var a

//数字
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity // 表示无限大

//字符串
'abc', "abc"

//布尔值
true，false

//逻辑运算
&& //两个都为真，结果为真
|| //一个为真，结果为真
! 	//真即假，假即真

//比较运算符
== //等于（类型不一样，值一样，也会判断为true）
=== //绝对等于（类型一样，值一样，结果为true）

null//空
undefined//未定义

js不区分小数和整数
== 和 === 的区别
NaN === NaN，这个与所有的数值都不相等，包括自己，只能通过isNaN（NaN）来判断这个数是否是NaN

精度问题

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

数组

Java的数组必须是相同类型的对象，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');

取数字下标：如果越界了，就会报undefined

对象

对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);
var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

2.4、严格检查格式

在这里插入图片描述

‘use strict’;严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！
局部变量建议都使用let去定义

    <script>
        'use strict';
        //全局变量
         let i=1
        //ES6 let
    </script>

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

3、多行字符串编写

        var msg =
            `hello
            world
            你好呀
            nihao
            `

用tab键上面 esc键下面的那个引号，可以编写多行字符串

4、模板字符串

let name = 'Tom';
let age = 3;
var msg = `你好，${name}`//引号：tab 上面 esc下面

5、字符串的可变性，不可变，不能通过下标去赋值

6、其他方法

//长度
student.length
//大小写转换
student.toUpperCase();
student.toLowerCase();
//取下标
student.indexof('t')
//取字串
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3];//通过下标取值和赋值
//长度
arr.length

注意：假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失


arr.indexOf(2)//indexOf，通过元素获得下标索引

arr.slice(1,3)//slice() 截取Array的一部分，返回的一个新数组，类似于String中substring

arr.push(2)//压入到尾部
arr.pop()//弹出尾部的一个元素

arr.unshift(2)//压入到头部
arr.shift()//弹出头部的一个元素

arr.sort()//排序

arr.reverse()//元素反转
var arr2=['A','B','C']
arr.concat(arr2)//[1,2,3,'A','B','C']

arr2.join('-')//"A-B-C"

注意：concat()并没有修改数组，只是会返回一个新的数组

3.3、对象

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Tom",
	age:3,
	email:"123456798@QQ.com",
	score:66
}

Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！

1、对象赋值

person.name="qingjiang"

2、使用一个不存在的对象属性，不会报错！但会显示undefined

person.hh//undefined

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性值是否在这个对象中！xxx in xxx

'age' in person //true
'toString' in person //true，继承关系

继承关系，age有toString方法

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')//false,这不是自身的属性
person.hasOwnProperty('age')//true

3.4、流程控制

forEach循环

var age=[1,2,3,4,5,6,7,8,9]
age.forEach(function (value){
	console.log(value)
})

for …in

var age=[1,2,3,4,5,6,7,8,9]
for(var index in age){//不是值，是下标
	console.log(age[index])
}

3.5、Map和Set(ES6的新特性)

Map

var map=new Map([['Tom',100],['Jack',90],['Alice',80]]);
var name=map.get('Tom');//通过key值获得value
map.set('Bob',60);//新增或修改
map.delete('Tom');//删除

Set

无序不重复的集合，可以去重

var set=new Set([1,1,2,2,3,3])//[1,2,3]
set.add(5);
set.delete(1);
set.has(3);//是否包含某个元素

3.6、iterator

遍历数组

var arr=[1,2,3,4,5]
for(let x of arr){
	console.log(x)
}

for of 是遍历值，for in是遍历下标

遍历Map

var map=new Map([['Tom',100],['Jack',90],['Alice',80]]);
for(let x of map){
	console.log(x)
}

遍历set

var set=new Set([1,1,2,2,3,3])//[1,2,3]
for(let x of set){
	console.log(x)
}

4、函数

4.1、定义函数

定义方式

function abs(x){}
var abs=function(x){}

function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

参数问题：javaScript可以传任意个参数，也可以不传递参数，参数多或少都不报错

arguments

arguments是一个JS免费赠送的关键字；代表，传递进来的所有参数，是一个数组！

arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数

rest

以前：

if(arguments.length>2){
	for(var i=2;i<arguments.length;i++){
	//......
	}
}

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

function aaa(a,b,...rest){
	console.log("a:"+a);
	console.log("b:"+b);
	console.log(rest);
}

rest参数只能写在最后面，必须用…标识。

4.2、变量的作用域

作用域

在javascript中，var定义变量实际是有作用域的。

假设在函数体内声明，则在函数体外不可以使用（闭包）
内部函数可以访问外部函数的成员，反之则不行
假设，内部函数变量和外部函数变量，重名！

在JavaScript中，函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj(){
	var x="x"+y;
	console.log(x);
	var y='y';
}

结果：x undefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

相当于

function qj(){
	var y;
	var x="x"+y;
	console.log(x);
	y='y';
}

这个是在javascript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function qj(){
	var y=1,
		y=x+1,
		z,i,a;//undefined
	//之后随意用
}

全局变量

'use strict'
var x=1;
function f(){
	console.log(x);
}
f();//1
console.log(x);//1

x尽量加上var声明，且加上’use strict’

全局对象window

var x='xxx';
alert(x)//xxx
alert(window.x)//xxx,默认所有的全局变量都会绑定到window上

//alert() 这个函数本身也是一个window的变量；
window.alert(x);//xxx
var old_alert=window.alert;
old_alert(x);//xxx

window.alert=function(){};
window.alert(123);//发现alert失效了

window.alert=old_alert;
window.alert(456);//456

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错Refrence

由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突，如何减少这样的冲突 ----> 把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题

局部作用域

function aaa(){
	for(var i=0;i<100;i++){
		console.log(i);
	}
	console.log(i+1);//101
}

问题：i出了这个作用域还可以使用

function aaa(){
	for(let i=0;i<100;i++){
		console.log(i);
	}
	console.log(i+1);//i is not defined
}

ES6的let关键字，解决了局部作用域冲突的问题！建议大家都用let去定义局部作用域的变量；

常量

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。

在ES6引入了常量关键字 const

var PI='3.14';
PI='213'//可以修改

const PI='3.14';
PI='213'// 会报错

4.3、方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var kuang={
	name:'qingjiang',
	birth:2000,
	//方法
	age:getAge
}
function getAge(){
	var now=new Date().getFullYear();
	return now-this.birth;//this是无法指向的，是默认指向调用它的那个对象的；
}
//属性
kuang.name
//方法
kuang.age()

getAge()//NAN

apply

getAge.apply(kuang,[])//this指向了kuang，参数为空

5、内部对象

5.1、标准对象

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

5.2、Date

var date=new Date();//Sat Jan 04 2020 10:47:06 GMT+0800（中国标准时间）
date.setTime(1);//以毫秒数设置日期，这常常会改变整个日期对象
date.setFullYear(2012);//设置年份
date.setMonth(0);//设置月份
date.setDate(11);//设置月份中的天数

date.getFullYear();//年份
date.getMonth();//月份（0-11）
date.getDate();//天数（1-31）
date.getDay();//星期几（0-6）
date.getHours();//小时（0-23）
date.getMinutes();//分钟（0到59）
date.getSeconds();//秒（0-59）

date.getTime()//时间戳，全世界统一，从1970 1.1 0：00：00开始到现在的毫秒数

console.log(new Date(1578106175991))//时间戳转为时间

5.3、JSON

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示，JSON格式如下：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和js对象转化

var user={
	name:"Bob",
	age:3,
	sex:'man'
}

//user的js对象：{"name":"Bob","age":3,"sex","man"}
//js对象转化为json字符串
var jsonUser=JSON.stringfy(user);

//user的json对象：'{"name":"Bob","age":3,"sex","man"}'
//json字符串转化为js对象
var obj=JSON.parse('{"name":"Bob","age":3,"sex","man"}');

5.4、AJAX

写法：

原生的：xhr异步请求
jQuery封装好的：$(#name).ajax("")
axios请求

6、面向对象编程

6.1、原型对象

javascript、java、c#------面向对象；但是javascript有些区别！

类：模板
对象：具体实例

在javascript中，需要大家转换一下思维方式！
原型：

var user={
	name:"Bob",
	age:3,
	run:function(){
		console.log(this.name+"run....");
	}
}

var xiaoming={
	name:"xiaoming"
}
xiaoming.run();//不可以执行

//原来的做法：给xiaoming指定原型为user
xiaoming._proto_=user;
xiaoming.run();//可以执行

6.2、class继承

class关键字，是在ES6引入的，可能某些浏览器不支持

<script>
	//以前定义一个类
	function Student(name){
		this.name=name;
	}
	//给Student新增一个方法
	Student.prototype.hello=function(){
		alert("Hello");
	};
	//ES6之后========================
	//定义一个学生的类
	class Student{
		constructor(name){
			this.name = name;
		}
		hello(){
			alert('hello');
		}
	}
	class XiaoStudent extends Student{
		constructor(name,grade){
			super(name);
			this.grade = grade;
		}
		myGrade(){
			alert('我是一名小学生');
		}
	}

	var xiaoming = new Student("xiaoming");
	var xiaohong = new XiaoStudent("xiaohong",1);
</script>

6.3、原型链

可参考：原型与原型链
在这里插入图片描述

7、操作BOM（浏览器对象模型）对象

1. window

window代表浏览器窗口

window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth

2. Navigator（不建议使用）

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

Navigator封装了浏览器的信息，大多数时候，我们不会使用navigator对象，因为会被人为修改。不建议使用这些属性来判断和编写代码

3. screen

代表屏幕尺寸

screen.width
screen.height

4. location

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=48021271_11_hao_pg"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://www.taobao.com')

5. document（内容DOM）

document.title//网页标题
document.cookie

cookie容易被劫持，服务器端可以设置cookie为httpOnly，就可以防止劫持

6. history（不建议使用）

history.back()
history.forward()

8、操作DOM（文档对象模型）对象

用的太多了，已经很熟练了，不写了

9、操作表单

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <!--MD5加密工具类-->
        <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
        	
        </script>
    </head>
    <body>
        <!--表达绑定提交事件
			οnsubmit= 绑定一个提交检测的函数，true，false
			将这个结果返回给表单，使用onsubmit接收
		-->
        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
            <p>
            	<span>用户名：</span><input type="text" id = "username" name = "username"/>
        	</p>
            <p>
            	<span>密码：</span><input type="password" id = "password" />
        	</p>
            <input type = "hidden" id = "md5-password" name = "password"> 
            
            <!--绑定事件 onclick 被点击-->
            <button type = "submit">提交</button>
            
        </form>
        
        <script>
        	function aaa(){
                alert(1);
                var username = document.getElementById("username");
                var pwd = document.getElementById("password");
                var md5pwd = document.getElementById("md5-password");
                //pwd.value = md5(pwd,value);
                md5pwd.value = mad5(pwd.value);
                //可以校验判断表单内容，true就是通过提交，false就是阻止提交
                return false;
                
            }
        </script>
        
    </body>
</html>

10、JQuery

选择器

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

鼠标事件、键盘事件，其他事件

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏，：本质display:none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

总结

花了整整一天时间，重新刷了一遍狂神的视频，然后对照着重新捋了一遍，最大的收获就是巩固了基础的知识，了解了不少底层的原理，而真正实践性的东西，例如操作DOM、操作表单以及JQuery因为自己用的比较多反而觉得没有什么需要记录的。后面准备再用一天时间整理一下html和css的东西，巩固一下基础。

本文地址：https://blog.csdn.net/qq_37574623/article/details/109269761

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！


验证码：

[web] javascript学习笔记

2020年10月25日 | 移动技术网IT编程 | 我要评论