初学JavaScript

初学JavaScript

大千世界，奥妙无穷，我们穷一生仍不能学习其皮毛。✨

2.计算机基础

2.3数据存储单位

bit < byte < kb < GB < TB < …

  • 位(bit): 1bit可以保存一个0或者1(最小的存储单位)
  • 字节(Byte) : 1B= 8b
  • 千字节(KB):1KB= 1024B
  • 兆字节(MB):1MB= 1024KB
  • 吉字节(GB): 1GB= 1024MB
  • 太字节(TB): 1TB= 1024GB
  • …

1.初识JavaScript

1.1 JavaScript 历史

  • 布兰登·艾奇( Brendan Eich，1961年~)
  • 神奇的大哥在1995年利用10天完成JavaScript设计。
  • 网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript。

1.2 JavaScript是什么

  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言( Script是脚本的意思)
  • 脚本语言∶不需要编译，运行过程中由js解释器(js引擎）逐行来进行解释并执行
  • 现在也可以基于Node.js技术进行服务器端编程

1.3 JavaScript 的作用

  • 表单动态校验（密码强度检测)(JS产生最初的目的)
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

1.4 HTML/CSS/JS的关系

HTML / CSS 标记语言–描述类语言

  • HTML决定网页结构和内容(决定看到什么)，相当于人的身体
  • CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服、化妆

JS 脚本语言 –编程类语言

  • 相当实现业务逻辑和页面控制(决定功能)，相当于人的各种动作

1.4浏览器执行JS简介

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

  • 渲染引擎︰用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
  • JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JIS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript 语言归为脚本语言，会逐行解释执行。

1.5 JS 的组成

1.ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

2.DOM——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

3.BOM——浏览器对象模型

BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.6 JS 初体验

JS有3种书写位置，分别为行内、内嵌和外部。

  1. 行内式JS
1
<input type="button" value="点我试试" onclick="alert ('Hello world' ) " />
  • 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如：onclick
  • 注意单双引号的使用∶在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
  • 可读性差，在html中编写JS大量代码时，不方便阅读
  • 引号易错，引号多层嵌套匹配时，非常容易弄混
  • 特殊情况下使用
  1. 内嵌JS
1
2
3
<script>
	alert ( 'Hello world~! ' ) ;
</script>
  • 可以将多行JS代码写到<script>标签中
  • 内嵌JS是学习时常用的方式
  1. 外部JS文件
1
<script src="my.js"></ script>
  • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
  • 引用外部JS文件的script标签中间不可以写代码
  • 适合于JS代码量比较大的情况

3. JavaScript 输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下︰

说明 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

1. 变量概述

1.1. 什么是变量

白话: 变量就是一个装东西的盒子。

通俗∶变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。

2. 变量的使用

变量在使用时分为两步：1.声明变量⒉赋值

  1. 声明变量
1
2
//声明变量
var age; //声明一个名称为age的变量
  • var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
  • age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
  1. 赋值
1
age = 10;  //给age这个变量赋值为10
  • = 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

3. 变量的初始化

1
var age=18;  //声明变量同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化。

1.4变量语法扩展

3.声明变量特殊情况

情况 说明 结果
var age ; console.log (age); 只声明不赋值 undefined
console.log(age) 不声明不赋值 直接使用 报错
age = 10; console.log (age); 不声明只赋值 10

1. 数据类型简介

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

1
2
var age = 10;	//这是一个数字型
var areYouok = '是的';	//这是一个字符串

在代码运行时，变量的数据类型是由 JS 引擎 根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

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

1
2
var = 6;	//x为数字
var x = "Bill";	//x为字符串

1.3数据类型的分类

JS 把数据类型分为两类∶

  • 简单数据类型( Number, string,Boolean,Undefined,Nul1)
  • 复杂数据类型( object)

2.简单数据类型

2.1简单数据类型（基本数据类型)

JavaScript中的简单数据类型及其说明如下︰

简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点型值，如21、0.21 0
Boolean 布尔值类型，如true 、 false，等价于1和0 false
String 字符串类型，如”张三”注意咱们js 里面，字符串都带引号 “”
Undefined var a;声明了变量a但是没有给值，此时a = undefined undefined
Null var a = null;声明了变量a 为空值 null

2.2数字型Number

1.数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

1
//1.八进制数字序列范围:0~7var numl = 07;	//对应十进制的7var num2 = 011;	//对应十进制的9var num3 = 08;	//对应＋进制的8//2.十六进制数字序列范围:0~9以及A~Fvar num = 0xA;	//对应十进制的10

现阶段我们只需要记住，在JS中 八进制前面 加0 ，十六进制前面 加0x

2. 数字型范围

JavaScript中数值的最大和最小值

1
alert(Number.MAX_VALUE); // 1.7976931348623157e+308alert(Number.MIN_VALUE); // 5e-324

3.数字型三个特殊值

1
alert (Infinity) ; // Infinityalert (-Infinity) ; // -Infinityalert (NaN) ;	// NaN
  • lnfinity ，代表无穷大，大于任何数值
  • -Infinity ，代表无穷小，小于任何数值
  • NaN ，Not a number，代表一个非数值

2.2数字型Number

4. isNaN( )

用来判断一个变量是否为非数字的类型，返回true或者false

1
var usrAge = 21;var isok = isNaN (userAge);console.log (isNum);	//false , 21不是一个非数字var usrName = "andy";console.log (isNaN (userName));	//true , "andy"是一个非数字

2.3字符串型 String

字符串型可以是引号中的任意文本，其语法为**双引号 “ “ **和 单引号 ‘ ‘

1
var strMsg ="我爱北京天安门~"; //使用双引号表示字符串var strMsg2 ='我爱吃猪蹄~';	//使用单引号表示字符串//常见错误var strMsg3 = 我爱大肘子;	//报错，没使用引号，会被认为是js代码，但js没有这些语法

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

1.字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

1
var strMsg ='我是"高帅富"程序猿';	//可以用''包含""var strMsg2 ="我是′高帅富'程序猿";	//也可以用""包含''//常见错误var badQuotes = 'what on earth?";	//报错，不能单双引号搭配

2.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是\开头的，常用的转义符及其说明如下：

转义符 解释说明
\n 换行符，n 是 newline 的意思
\\ 斜杠 \
\' ‘ 单引号
\" “ 双引号
\t tab 缩进
\b 空格，b是 blank 的意思

3.字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

1
var strMsg ="我是帅气多金的程序猿! ";alert(strMsg.length); //显示11

4.字符串拼接

  • 多个字符串之间可以使用＋进行拼接，其拼接方式为 字符串＋任何类型=拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
1
//1.1字符串"相加"alert ( 'hello' + '' + 'world' ) ;	//he1lo world;//1.2数值字符串"相加"alert ( '100' + '100 ' ) ;  //100100// 1.3数值字符串＋数值alert ( '11' + 12);	//'1112'

总结口诀:数值相加，字符相连

2.5布尔型Boolean

布尔类型有两个值:true和false ，其中true表示真(对），而false表示假（错)。

布尔型和数字型相加的时候，true的值为1 ，false的值为0。

1
console.log (true + 1); //2console.log (false + 1) ; //1

2.6 Undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)

1
var variable;console.log(variable) ;	//undefinedconsole.log ('你好'+ variable) ; //你好undefinedconsole.log(11 + variable) ;	//NaNconsole.log(true + variable) ;	//NaN

一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null)

1
var vari = null;console.log ( '你好'+ vari) ; //你好nullconsole.log(11 + vari) ;	// 11console.log(true + vari) ;	//1

3.1获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

3.2字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8,9,10
  • 字符串字面量：’黑马程序员’,”大前端”
  • 布尔字面量：true, false

4. 数据类型的转换

4.2转换为字符串

方式 说明 案例
toString() 转成字符串 var num= 1; alert(num.toString());
String()强制转换 转成字符串 var num = 1 ; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num+”我是字符串”);
  • toString)和String)使用方式不一样。
  • 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

4.3转换为数字型（重点)

方式 说明 案例
parseInt(string)函数 将string类型转成整数数值型 parselnt(78’)
parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat(‘78.21’)
Number()强制转换函数 将string类型转换为数值型 Number(‘12’)
js隐式转换( - * /) 利用算术运算隐式转换为数值型 ‘12’- 0
  • 注意 parselnt 和 parseFloat 单词的大小写，这2个是重点

4.4转换为布尔型

方式 说明 案例
Boolean()函数 其他类型转成布尔值 Boolean(‘true’);
  • 代表空、否定的值会被转换为false，如”、0、NaN、null、undefined
  • 其余值都会被转换为true
1
console.log (Boolean ( '' )) ;  //falseconsole.log (Boolean (0) ) ;  //falseconsole.log ( Boolean (NaN) ) ;  //falseconsole.log(Boolean(null));  //falseconsole.log (Boolean (undefined)) ;   //falseconsole.log (Boolean ( '小白'));  //trueconsole.log( Boolean ( 12));   //true

1.解释型语言和编译型语言

1.概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

编程语言 -> 翻译器 -> 机器语言（二进制)

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译，生成中间代码文件
  • 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

2.标识符、关键字、保留字

1.标识符

标识(zhi)符︰就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

2.关键字

关键字︰是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括 : break、case、catch、continue、default、delete、do、else、finally、for、function、if、in.instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。

3.保留字

保留字︰实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括: boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、 short、static、super、synchronized、throws、transient、volatile等。

1.运算符

运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有:

  • 算数运算符
  • 递增和递减运算符比较运算符
  • 逻辑运算符
  • 赋值运算符

2.2浮点数的精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。

1
var result = 0.1+ 0.2; //结果不是0.3，而是∶0.30000000000000004console.log (0.07 * 100); //结果不是7，而是∶7.0000000ooo00001

所以∶不要直接判断两个浮点数是否相等!

2.4表达式和返回值

表达式∶是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解∶是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给我们，我们成为返回值

3.2 递增运算符

1.前置递增运算符

++num前置递增，就是自加1，类似于num = num + 1，但是++num写起来更简单。

使用口诀∶先自加，后返回值

2.后置递增运算符

**num++**后置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单。

使用口诀∶先返回原值，后自加

4.比较运算符

4.1比较运算符概述

概念︰比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。

运算符名称 说明 案例 结果
< 小于号 1<2 true
> 大于号 1>2 false
>= 大于等于号(大于或者等于) 2 >= 2 true
<= 小于等于号(小于或者等于) 3<= 2 false
== 判等号（会转型) 37 == 37 true
!= 不等号（会转型) 37 != 37 false
=== !== 全等要求值和数据类型都一致 37 === ‘37’ false

5.逻辑运算符

5.1逻辑运算符概述

概念︰逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符 说明 案例
&& “逻辑与”，简称”与” and true && false
` `
! “逻辑非”，简称”非”not ! true

5.4短路运算（逻辑中断)⭐⭐⭐

短路运算的原理∶当有多个表达式(值)时左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

1. 逻辑与

语法：表达式1 && 表达式2

  • 如果第一个表达式的值为真，则返回表达式2
  • 如果第一个表达式的值为假，则返回表达式1

2. 逻辑或

语法：表达式1 || 表达式2

  • 如果第一个表达式的值为真，则返回表达式1
  • 如果第一个表达式的值为假，则返回表达式2

逻辑中断•自我总结⭐⭐⭐

&& 进行逻辑中断时，如果前一个值为 true，就会去看下一个值，

直至遇到 false 把 false 的表达式输出，

或者 将最后一个表达式输出。

|| 进行逻辑中断时，如果前一个值为 false，就会去看下一个值，

直至遇到 true 把 true 的表达式输出，

或者 将最后一个表达式输出。

6.赋值运算符

概念∶用来把数据赋值给变量的运算符。

赋值运算符 说明 案例
= 直接赋值 var usrName = ‘我是值”;
+= 、 -= 加、减一个数后在赋值 var age = 10; age+=5; //15
*=、/=、%= 乘、除、取模后在赋值 var age = 2; age*=5; //10 
1
var age = 10;age += 5; //相当于age = age + 5;age -= 5; //相当于age = age - s;age *=10; //相当于age = age * 10;

7.运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算数运算符 先* / %后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 **先&&后`
7 赋值运算符 =
8 逗号运算符 ,

1.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解∶流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

  • 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

3.分支流程控制 if 语句

3.1分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码(执行代码多选一的过程），从而得到不同的结果

JS语言提供了两种分支结构语句

  • if 语句
  • switch 语句

3.3 if else语句（双分支语句）

3.4 if else if 多分支语句

1
if (...) {     ...} else if(...) {     ...} else if(...) {     ...} else {     ...}

3.5 三元表达式

1
条件表达式 ？ 表达式1 ： 表达式2；

3.6 switch 语句

1
switch(表达式) {    case value1:        执行语句1;        break;    case value:        执行语句2;        break;    default:        执行最后的语句；}

4. 循环结构

for 循环

1
for (初始化变量；条件表达式；操作表达式) {    循环体}

while 循环

1
while (条件表达式) {    循环体}

do while 循环

1
do {    循环体} while (条件表达式)// 先执行一次，在判断

continue 关键字

continue关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。

break 关键字

break关键字用于立即跳出整个循环（循环结束)。

1. 数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

1
//普通变量一次只能存储一个值var num = 10;//数组一次可以存储多个值var arr = [1,2,3,4,5];

2.1数组的创建方式

JS中创建数组有两种方式：

  • 利用new创建数组
1
var array = new Array(); // 创建一个空数组
  • 利用数组字面量创建数组
1
var array = []; // 创建了一个空数组var array = [1, 2, 3, 'pink', true]; // JS数组种可以放‘任意’数据类型！

3.获取数组元素

3.1数组的索引

**索引(下标)**∶用来访问数组元素的序号（数组下标从0开始）

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

这里的访问就是获取得到的意思

4.1数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度)。

5.数组中新增元素

可以通过修改length长度以及索引号增加数组元素

5.1通过修改length长度新增数组元素

  • 可以通过修改length长度来实现数组扩容的目的
  • length属性是可读写的
1
var arr = [  'red', 'green ' , ' blue ' , 'pink ' ];arr. length = 7;console.log (arr) ;console.log (arr[4]);console.log (arr[5] );console.log (arr[6]);

其中索引号是4，5，6的空间没有给值，就是声明变量未给值，默认值就是undefined。

5.2通过修改数组索引新增数组元素

  • 可以通过修改数组索引的方式追加数组元素

  • 不能直接给数组名赋值，否则会覆盖掉以前的数据

1
var arr = [ ' red' , 'green ' , 'blue ' , 'pink ' ];arr[4] = ' hotpink ';console.log(arr) ;

这种方式也是我们最常用的一种方式。

1.函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

函数∶就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.函数的使用

函数在使用时分为两步:声明函数和调用函数。

2.1 声明函数

1
function 函数名() {	//函数体代码}
  • function是声明函数的关键字,必须小写
  • 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum

2.2调用函数

1
//调用函数函数名(); //通过调用函数名来执行函数体代码
  • 调用的时候千万不要忘记添加小括号
  • 口诀:函数不调用，自己不执行。

注意:声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

2.3函数的封装

  • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
  • 简单理解︰封装类似于将电脑配件整合组装到机箱中(类似快递打包)

3.1形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数 说明
形参 形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参 实际上的参数函数调用的时候传递的参数实参是传递给形参的

参数的作用:在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

3.3函数形参和实参个数不匹配问题

参数个数 说明
实参个等于形参个数 输出正确结果
实参个数多于形参个数 只取到形参的个数
实参个数小于形参个数 多的形参定义为undefined 
1
function sum (num1,num2) {	console.log (num1 + num2) ;}sum ( 100,200);	//形参和实参个数相等，输出正确结果sum ( 100,400,500，700); //实参个数多于形参，只取到形参的个数sum (200);	//实参个数少于形参，多的形参定义为undefined，结果为NaN

注意:在JavaScript中，形参的默认值是undefined

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的push , pop等方法

JS 函数的两种声明方式

1
// 1. 命名函数function fn () {    ...}// 2. 匿名函数var fn2 = function () {    ...}; //注意这里的 引号，因为是变量赋初值，所以需要 引号

1.作用域

1.1作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.变量的作用域

2.1变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种:

  • 全局变量
  • 局部变量

2.2全局变量

在全局作用域下声明的变量叫做**全局变量(在函数外部定义的变量)**。

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下var声明的变量是全局变量
  • 特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)

2.2局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)

  • 局部变量只能在该函数内部使用
  • 在函数内部var声明的变量是局部变量
  • 函数的形参实际上就是局部变量

2.3全局变量和局部变量的区别

  • 全局变量︰在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量∶只在函数内部使用，当其所在的代码块被执行时，会被初始化;当代码块运行结束后，就会被销毁，因此更节省内存空间

1.对象

1.1什么是对象?

现实生活中∶万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

  • 属性︰事物的特征，在对象中用属性来表示(常用名词)
  • 方法∶事物的行为，在对象中用方法来表示(常用动词)

1.2为什么需要对象

JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下∶

1
//张三疯.姓名='张三疯';person.name = '张三疯';//张三疯.性别='男';person.sex = '男';//张三疯.年龄=128;person.age = 128;//张三疯.身高= 154 ;person.height = 154 ;

2.创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对象( object ) :

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

2.1利用字面量创建对象

对象字面量︰就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示

  • 键 : 相当于属性名
  • 值 : 相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等)
1
var star = {	name : 'pink ',	age : 18,	sex :男·，	sayHi : function ( ) {		alert('大家好啊~") ;	}};

对象的调用

  • 对象里面的属性调用 : 对象.属性名，这个小点.就理解为“的”
    对象里面属性的另一种调用方式:对象[ ‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
    对象里面的方法调用∶对象.方法名0，注意这个方法钵字后面一定加括号
1
console.log (star. name);	//调用名字属性console.log (star[ 'name']); //调用名字属性star.sayHi( );	//调用sayHi方法,注意，一定不要忘记带后面的括号

2.2 利用 new Object 创建对象

1
// 利用 new Object 创建对象var obj = new Object(); //创建了一个空的对象obj.uname = '张三疯';obj.age = 18;obj.sex = '男';obj.sayHi = function () {	console.log('hi~~!');}

2.3利用构造函数创建对象

构造函数︰是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

1
function Star(uname, age, sex) { // 函数名首字母需大写            this.uname = uname;            this.age = age;            this.sex = sex;            this.sing = function (sang) {                console.log(sang);            }        }        var ldh = new Star('刘德华', 18, '男'); // 调用构造函数必须使用 new        console.log(ldh.uname);        console.log(ldh['age']);        ldh.sing('冰雨');        var zxy = new Star('张学友', 19, '男');        console.log(zxy.uname);        console.log(zxy['age']);        zxy.sing('李香兰');

2.4构造函数和对象

  • 构造函数，如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
  • 创建对象，如new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化

3.new关键字

new在执行时会做四件事情:

  1. 在内存中创建一个新的空对象。
  2. 让 this指向这个新的对象。
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
  4. 返回这个新对象 (所以构造函数里面不需要return )。

变量、属性、函数、方法总结

  • 变量:单独声明赋值，单独存在
  • 属性:对象里面的变量称为属性，不需要声明，用来描述该对象的特征
  • 函数︰单独存在的，通过“函数名()”的方式就可以调用
  • 方法∶对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

1.内置对象

  • JavaScript中的对象分为3种∶自定义对象、内置对象、浏览器对象
  • 前面两种对象是JS基础内容，属于 ECMAScript; 第三个浏览器对象属于我们JS独有的，我们JS API讲解
  • 内置对象 就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)
  • 内置对象最大的优点就是帮助我们快速开发
  • JavaScript提供了多个内置对象:Math、Date . Array、string等

2.查文档

2.2如何学习对象中的方法

  1. 查阅该方法的功能
  2. 查看里面参数的意义和类型
  3. 查看返回值的意义和类型
  4. 通过demo进行测试

4.日期对象

4.1 Date概述

  • Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
  • Date 实例用来处理日期和时间

4.2 Date()方法的使用

1.获取当前时间必须实例化

1
var now = new Date ();console.log (now);

2.Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例旧期格式字符串为‘2019-5-1’，可以写成new Date(2019-5-1)或者new Date(2019/5/1)

4.3日期格式化

我们想要2019-8-8 8:8:8格式的日期，要怎么办?

需要获取日期指定的部分，所以我们要手动的得到这种格式。

方法名 说明 代码
getFullYear() 获取当年 dObj.getFullYear()
getMonth() 获取当月(0-11) dObj.getMonth()
getDate() 获取当天日期 dobj.getDate()
getDay) 获取星期几(周日0到周六6) dObj.getDay)
getHours() 获取当前小时 dobj.getHours()
getMinutes() 获取当前分钟 dObj.getMinutes()
getSeconds() 获取当前秒钟 dObj.getSeconds()
  1. 核心算法∶输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
  2. 用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
  3. 把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒)

转换公式如下:

  • d = parselnt(总秒数/60/60/24);//计算天数
  • h = parselnt(总秒数/60/60%24)//计算小时
  • m = parselnt(总秒数/60 %60);//计算分数
  • s = parselnt(总秒数%60);//计算当前秒数

5. 数组

5.6数组转换为字符串

方法名 说明 返回值
toString() 把数组转换成字符串，逗号分隔每一项 返回一个字符串
join(“‘分隔符) 方法用于把数组中的所有元素转换为一个字符串。 返回一个字符串
concat() 连接两个或多个数组不影响原数组 返回一个新的数组
slice() 数组截取slice(begin, end) begin<= x < end 返回被截取项目的新数组
splice() 数组删除splice(第几个开始,要删除个数,插入的元素) 返回被删除项目的新数组注意，这个会影响原数组

6.字符串对象

6.1基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

1
//下面代码有什么问题?var str = 'andy' ;console.log (str.length) ;

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下:

1
//1.生成临时变量，把简单类型包装为复杂数据类型var temp = new string ( 'andy' ) ;//2.赋值给我们声明的字符变量str = temp;//3.销毁临时变量temp = null;

6.2字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

1
var str = 'abc ';str = 'hello ';//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变//由于字符串的不可变，在大量拼接字符串的时候会有效率问题var str = '';for (var i = 0; i < 100000; i++) {	str t= i;}console.log (str); //这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

6.4根据位置返回字符（重点)

方法名 说明 使用
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(0)
charCodeAt(index) 获取指定位置处字符的ASCII码(index索引号) str.charCodeAt(0)
str[index] 获取指定位置处字符 HTML5，IE8+支持和charAt()等效

6.5字符串操作方法(重点)

方法名 说明
concat(str1,str2,str3…) concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start,length) 从start位置开始(索引号) , length 取的个数重点记住这个
slice(start, end) 从start位置开始，截取到end位置，end取不到(他们俩都是索引号)
substring(start, end) 从start位置开始，截取到end位置，end取不到基本和slice相同但是不接受负值

1.简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

  • 值类型︰简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number , boolean , undefined , null
  • 引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

2.堆和栈

堆栈空间分配区别∶

  1. 栈(操作系统）∶由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;
    简单数据类型存放到栈里面
  2. 堆(操作系统）︰存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

注意:JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行万式，便于将来学习具他语言

前端学习
JavaScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！