自学前端js基础笔记

JavaScript的组成

自学前端js基础笔记

ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript体验

  • 写在行类
<input type="button" value="按钮" onclick="alert('Hello World')" />
  • 写在script标签中
<head>
  <script>
    alert('Hello World!');
  </script>
</head>
  • 写在外部js文件中，在页面引入
<script src="main.js"></script>
  • 注意点
    引用外部js文件的script标签中不可以写JavaScript代码

计算机组成

软件

  • 应用软件:浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
  • 系统软件: Windows、Linux、mac OSX

硬件

  • 三大件:CPU、内存、硬盘 – 主板
  • 输入设备: 鼠标 键盘 手写板 摄像头等
  • 输出设备: 显示器 打印器 投影仪

变量

  • 什么是变量
    变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
  • 为什么要使用变量
    使用变量可以方便的获取或者修改内存中的数据

如何使用变量

  • 声明变量
    var age;
  • 变量的赋值
    var age;
age = 18;
  • 同时声明多个变量并赋值
    var age =10 ,name = 'zsw'

变量在内存中的储存

var age = 18;
var name ='zsw';

自学前端js基础笔记

变量的命名规则和规范

  • 规则 - 必须遵守的，不遵守会报错
    • 由字母、数字、下划线、$符号组成，不能以数字开头
    • 不能是关键字和保留字，例如：for、while。
    • 区分大小写

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类型

  • 数值字面量：数值的固定值的表示法
    110 1024 60.5
  • 进制
十进制  
var num = 9
进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值
十六进制
var num = 0xA;
   数字序列范围：0~9以及A~F
   八进制
   var num1 = 07;   // 对应十进制的7
   var num2 = 019;  // 对应十进制的19
   var num3 = 08;   // 对应十进制的8
   数字序列范围：0~7
   如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
  • 浮点数
    • 浮点数的精度问题
	var n = 5e-324;   // 科学计数法  5乘以10的-324次方  
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判断两个浮点数是否相等
  • 数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
  • 数值判断
- NaN：not a number
  - NaN 与任何值都不相等，包括他本身
- isNaN: is not a number

String类型

  • 转义符
    自学前端js基础笔记
  • 字符串长度
    length属性用来获取字符串的长度
var str = 'Hello World';
console.log(str.length);
  • 字符串拼接用加好表示

Boolean类型

  • Boolean字面量： true和false，区分大小写
  • 计算机内部存储：true为1，false为0

Undefined和Null

  1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
  2. null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

object

获取变量的类型

typeof

var age = 10;
console.log(typeof age ) //'number'

字面量

在源代码中一个固定值的表示法。
数值字面量：8, 9, 10
布尔字面量：true，false
字符串字面量：“大前端webniubi”

数据类型转换

  • toString
var num = 8;
console,log()
  • String
String()函数存在的意义：
有些值没有toString()，这个时候可以使用String()。比如：undefined和null
  • 拼接字符串
    num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

  • Number()
    Number()可以把任意值转换成数值，
如果要转换的字符串中有一个不是数值的字符，返回NaN
  • parseInt()
var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
  • parseFloat()
	parseFloat()把字符串转换成浮点数
	parseFloat()和parseInt非常相似，不同之处在与
	parseFloat会解析第一个. 遇到第二个.或者非数字结束
	如果解析的内容里只有整数，解析成整数
  • +, -0等运算
var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型

  • boolean()
0  ''(空字符串) null undefined NaN 会转换成false  其它都会转换成true

操作符

运算符 operator

5 + 6

表达式 组成 操作数和操作符，会有一个结果

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符 二元运算符

++ 自身加1

– 自身减1

  • 前置++
var num1 = 5;
++ num1; 
var num2 = 6;
console.log(num1 + ++ num2);//13
  • 后置++
	var num1 = 5;
	num1 ++;    
	var num2 = 6 
	console.log(num1 + num2 ++);//12

	// var a = 1; var b = ++a + ++a; console.log(b);//5
    // var a = 1; var b = a++ + ++a; console.log(b);//4
    //var a = 1; var b = a++ + a++; console.log(b);//3
    //var a = 1; var b = ++a + a++; console.log(b);//4

总结
前置++：先加1，后参与运算
后置++：先参与运算，后加1
上面两个理解后，下面两个自通
前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1

逻辑运算符

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! 非 取反

运算符的优先级

优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ – !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符

调试

  • 过去调试JavaScript的方式
    alert()
    console.log()
  • 断点调试
    断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下
  • 调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
  • 调试中的相关步骤
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。
  • tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。
  1. 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
  2. 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

作用域

定义 : 变量可以起作用的范围

全局变量和局部变量

  • 全局变量
    ​在任何地方都可以访问到的变量就是全局变量，对应全局作用域
  • 局部变量
    ​只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

作用域链

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

// 案例1：
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

自学前端js基础笔记

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象

JavaScript的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
对象的行为和特征
特征—属性
行为—方法

对象创建方式

  • 对象字面量创建
var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};
  • new Object()创建对象
var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';在这里插入图片描述
  person.sayHi = function(){
  console.log('Hello,everyBody');
}
  • 工厂函数创建对象
function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('张三', 22, 'actor');
  • 自定义构造函数
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
  	console.log('Hello,everyBody');
  }
}
var p1 = new Person('张三', 22, 'actor');

new 关键字

  1. 构造函数用于创建一类对象，首字母要大写。
  2. 构造函数要和new一起使用才有意义。
  3. new 在执行的时候会做的四件事情
new会在内存中创建一个新的空对象
new 会让this指向这个新的对象
执行构造函数  目的：给这个新对象加属性和方法
new会返回这个新对象

this的特点

	1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
	2. 一般函数直接执行，内部this指向全局window
	3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
	4. 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

简单类型和复杂类型的区别

基本类型又叫做值类型，复杂类型又叫做引用类型

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型

  • 堆和栈
堆栈空间分配区别：
　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
　　2、堆（操作系统）： 存储复杂类型(对象)，一般由程序员分配释放， 若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

MDN

Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

MDN

Math

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值
Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

Data 对象

创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

	// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.valueOf());	// 获取距1970年1月1日（世界标准时间）起的毫秒数

Date构造函数的参数
1. 毫秒数 1498099000356		new Date(1498099000356)
2. 日期格式字符串  '2015-5-1'	 new Date('2015-5-1')
3. 年、月、日……				  new Date(2015, 4, 1)   // 月份从0开始
  • 获取日期的毫秒形式
var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())	

// HTML5中提供的方法，有兼容性问题
var now = Date.now();	

// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date();			// 调用 Date对象的valueOf()
  • 日期格式化方法
toString()		// 转换成字符串
valueOf()		// 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
  • 获取日期指定部分

getTime() // 返回毫秒数和valueOf()结果一样，valueOf()内部调用的getTime()
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，从0开始
getFullYear() //返回4位的年份 如 2016

  • 格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
  //如果date不是日期对象，返回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
  • 计算时间差 返回相差的天 时 分 秒
function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

数组

  • 数组的常用方法
// 1 栈操作(先进后出)
push()
pop() 		//取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift()		//取出数组中的第一个元素，修改length属性
unshift() 	//在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()	//翻转数组
sort(); 	//即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()  	//把参数拼接到当前数组
slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode