JavaScript基础语法学习笔记

 

目录

一、JavaScript认识阶段

1. JavaScript的组成

2. JavaScript书写位置

3. 注释

4. JavaScript输入输出语句

二、变量

1. 变量概述

1.1 变量介绍

1.2 变量在内存中的存储

2. 变量的使用

3. 变量的语法拓展

4. 变量命名规范

三、数据类型

1. 数据类型简介

1.1 为什么需要数据类型

1.2 变量的数据类型

1.3 数据类型的分类

2. 简单数据类型

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

2.2 数字型Number

2.3 字符串类型String

2.4 布尔型Boolean

2.5 Undefined和Null

3. 获取变量数据类型

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

3.2 字面量

4. 数据类型的转换

4.1 转换为字符串

4.2 转换为数字型(重点)

4.3 转换为布尔型

四、解释型语言和编译型语言

1. 概述

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

1. 标识符

2. 关键字

3. 保留字

五、JavaScript运算符

1. 运算符

2. 算术运算符

2.1 算术运算符概述

2.2 浮点数的精度问题

2.4 表达式和返回值

3. 递增和递减运算符

3.1 概述

3.2 递增运算符

4. 比较运算符

4.1 比较运算符概述

4.2 =小结

5. 逻辑运算符

5.1 概述

5.2 短路运算(逻辑中断)

6. 赋值运算符

7. 运算符优先级

六、JavaScript流程控制-分支

1. 流程控制

2. 顺序流程控制

3. 分支流程控制if语句

3.1 分支结构

3.2 if语句

3.3 if else语句(双分支语句)

3.4 if else if 语句(多分支语句)

4. 三元表达式

1. 语法结构

2.执行思路

5.分支流程控制switch语句

5.1 语法结构

5.2 switch 语句和if esle if 语句的区别

七、JavaScript流程控制-循环

1. 循环

1. 循环目的

2. JS中的循环

2. for 循环

2.1 语法结构

2.2 执行过程

2.3 断点调试

3. 双重for 循环

3.1 概述

3.2 双重for 循环语法结构

4. while 循环

4.1 语法结构

4.2 执行过程

5. do while 循环

1. 语法结构

6. continue break

6.1 continue 关键字

6.2 break 关键字

八、JavaScript 函数

1. 函数的概念

2. 函数的使用

2.1 声明函数

2.2 调用函数

2.3 函数的封装

3. 函数的参数

3.1 形参和实参

3.2 函数参数传递过程

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

4. 函数的返回值

4.1 return 语句

4.2 return 终止函数

4.3 return 的返回值

4.4 函数没有return 返回 undefined

4.5 break,continue,return 的区别

5. arguments 的使用

6. 函数的两种声明方式

6.1 自定义函数方式(命名函数)

6.2 函数表达式方式(匿名函数)

九、JavaScript对象

1. 对象

1.1 概述

1.2 为什么需要对象

2. 创建对象的三种方式

2.1 利用字面量创建对象

2.2 利用new Object 创建对象

2.3 利用构造函数创建对象

2.4 构造函数和对象

3. new 关键字

4. 遍历对象属性

十、JavaScript 内置对象

1. 内置对象

2. 查文档

2.1 MDN

3. Math 对象

3.1 Math 概述

3.2 随机数方法 random()

4. 日期对象

4.1 Date 概述

4.2 Date()方法的使用

4.3 日期格式化

4.4 获取日期总的毫秒形式

5. 数组对象

5.1 数组对象的创建

5.2 检测是否为数组

5.3 添加删除数组元素的方法

5.4 数组排序

5.5 数组索引方法

5.6 数组转化为字符串

5.7 课下查询

6. 字符串对象

6.1 基本包装类型

6.2 字符串不可变

6.3 根据字符返回位置

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

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

6.6 replace()方法

6.7 split()方法

6.8 课下查阅

十一、JavaScript 简单类型与复杂类型

1. 简单类型与复杂类型

2. 堆和栈

3. 内存分配

4. 传参


一、JavaScript认识阶段

1. JavaScript的组成

JavaScript由三部分组成:ECMAScript+DOM+BOM

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

(JSapi)DOM:页面文档对象模型

(JSapi)BOM:浏览器对象模型

2. JavaScript书写位置

JS中用单引号

1、行内式

直接写在HTML标签事件中

2、内嵌式

写在<script></script>标签中

3、外部式

写在js文件中,将js文件引入html文件<script src=“”></script>

3. 注释

单行注释 //

多行注释/*         */

4. JavaScript输入输出语句

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

二、变量

1. 变量概述

1.1 变量介绍

装数据的容器成为变量,我们可以通过变量名获取数据。

1.2 变量在内存中的存储

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

2. 变量的使用

两步1声明变量 2赋值

1.声明变量

var age; //声明一个名称为age的变量

2.赋值

age = 10; //给age这个变量赋值10

3.变量的初始化 

声明变量并赋值

3. 变量的语法拓展

1.更新变量

一个变量被重新赋值后,原有的值会被覆盖

2.同时声明多个变量

多个变量名之间用逗号隔开

var age = 24,
    name = 'w',
    sex = 1;

3.声明变量的特殊情况

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

4. 变量命名规范

  • 由字母、数字、下划线(_)、美元符号($)组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字、保留字 例如:var、for、while
  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写,后面单词的首字母大写。如myHeat

三、数据类型

1. 数据类型简介

1.1 为什么需要数据类型

不同是数据所需存储空间不同,所有定义了不同的数据类型。

1.2 变量的数据类型

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

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

1.3 数据类型的分类

JS把数据类型分为两大类

  • 简单数据类型(Number,String,Boolean,Undefined,Null)
  • 复杂数据类型(Object)

2. 简单数据类型

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

简单数据类型说明默认值
Number数字型,包含整型值和浮点型值,如21、0.210
Boolean布尔值类型false
String字符串类型“”
Undefinedvar a;声明了变量a但是没有给a赋值undefined
Nullvar a = null;声明了变量a为空值null

2.2 数字型Number

1、数字型进制

八进制:在数字前面加0;

十六进制:在数字前面加0x

2、数字型范围

JavaScript中数值的最大和最小值

Number.MAX_VALUE; //最大值 1.7976931348623157e+308
Number.MIN_VALUE; //最小值 5e-324

3、数字型三个特殊值

  • Infinite,无穷大
  • -Infinite,无穷小
  • NaN,(Not a number),代表一个非数值

4、isNaN()

用来判断一个变量是否是非数字类型,返回ture或false

2.3 字符串类型String

1、字符串引号嵌套

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

2、字符串转义符

转义符都是以\开头的,常用转义符如下:

转义符解释说明
\n换行符,n是newline
\\斜杠\
\'‘单引号
\\""双引号
\ttab缩进
\b空格,b是blank

3、字符串长度

通过字符串的length来获取整个字符串的长度

4、字符串拼接

  • 多个字符串之间用+进行拼接,拼接方式为 字符串+任何类型=拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转化为字符串,在拼接为一个新的字符串

5、字符串拼接加强

  • 字符串和变量来拼接
  • 变量不能添加引号,添加后会变成字符串
  • 如果变量两侧都有字符串拼接,口诀“引引加加”,在完整字符串中删掉数字''++然后再加号中输入变量

2.4 布尔型Boolean

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

2.5 Undefined和Null

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

  • 字符串+undefined=字符串undefined
  • 数字+undefined=NaN
  • 布尔值+undefined=NaN

一个声明变量给null值,里面存的值为空

  • 字符串+null=字符串null
  • 数字+null=数字
  • 布尔值+null=布尔值

3. 获取变量数据类型

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

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

可以验证得prompt取过来的值是字符型的

通过控制台的颜色可以分辨变量类型:黑色字符型、深蓝色数字型、蓝色布尔型、灰色是Undefined和Null

3.2 字面量

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

一眼看上去就知道是什么数据类型

4. 数据类型的转换

4.1 转换为字符串

方式说明案例
toString()转成字符串var num = 1; alert(num.toString());
String()强制转换转成字符串var num = 1; alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num+“”);

4.2 转换为数字型(重点)

方式说明案例
parseInt(string)函数将string类型转换成整数数值型parseInt('6')
parseFloat(string)函数将string类型转换成浮点数数值型parseInt('6.6')
Number()强制转换函数将string类型转换成数值型Number(6)
js隐式转换(- * /)利用算术运算隐式转换为数值型'12' - 0
  • 注意大小写
  • 隐式转换是在运算的时候,JS自动转换了数据类型

4.3 转换为布尔型

方式说明案例
Boolean()函数其他类型转换成布尔值Boolean('ture');
  • 代表空、否定的值会被转换为false,如‘’、0、NaN、null、undefined
  • 其余值会转换为ture

四、解释型语言和编译型语言

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等。

注意:如果将保留字用作变量名或函数名。当浏览器实现了该保留字,该单词将被看作关键字,如此将出现关键字错误。

五、JavaScript运算符

1. 运算符

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

JavaScript中常用的运算符有:

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

2. 算术运算符

2.1 算术运算符概述

概念:算术运算使用的符号

运算符描述
+
-
*
/
%取余数(取模)

2.2 浮点数的精度问题

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

不要直接判断两个浮点数是否相等

2.4 表达式和返回值

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

表达式最终都会有一个结果,结果就是返回值

3. 递增和递减运算符

3.1 概述

反复给数字变量加1或减1,递增(++)和递减(--)运算符完成

运算符放在变量前面是前置运算符,后面是后置运算符

注意:运算符必须和变量配合使用

3.2 递增运算符

1. 前置递增运算符

先自加,后返回值运算

2. 后置递增运算符(常用)

先返回原值运算,后自加

4. 比较运算符

4.1 比较运算符概述

比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后会返回一个布尔值作为结果

运算符名称说明
<小于号
>大于
>=大于或等于
<=小于或等于
==判等号(会转型)
!=不等号
=== !==全等,要求值和数据类型都一致

4.2 =小结

符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等(此时有隐式转换)
===全等判断两边的值和数据类型是否完全相同

5. 逻辑运算符

5.1 概述

逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值

逻辑运算符说明
&&“逻辑与”,简称“与”and
||“逻辑或”,简称“或”or
“逻辑非”,简称“非”not

5.2 短路运算(逻辑中断)

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

1、逻辑与

  • 语法:表达式1&&表达式2
  • 如果表达式1的值为真,则返回表达式2
  • 如果表达式1的值为假,则返回表达式1

2、逻辑或

  • 语法:表达式1||表达式2
  • 如果表达式1的值为真,则返回表达式1
  • 如果表达式1的值为假,则返回表达式2

6. 赋值运算符

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

赋值运算符说明
=直接赋值
+=、-=

加、减一个数后再赋值

*=、/=、%=乘、除、取模后再赋值

7. 运算符优先级

优先级运算符顺序
1小括号()
2一元运算符

++ -- !

3算术运算符先* / %再+ -

4

关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先&&后||
7赋值运算符=
8逗号运算符
  • 一元运算符中的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

六、JavaScript流程控制-分支

1. 流程控制

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

2. 顺序流程控制

顺序结构没有特定的语法结构,程序会按照代码的先后顺序依次执行。

3. 分支流程控制if语句

3.1 分支结构

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

3.2 if语句

1、语法结构

if(条件表达式){

        //条件成立执行的代码语句

}

3.3 if else语句(双分支语句)

1、语法结构

if(条件表达式1){

        语句1;

} else if(条件表达式2){

        语句2;

} else if(条件表达式3){

        语句3

} else {

        //上述条件都不成立执行此处代码

}

3.4 if else if 语句(多分支语句)

1、语法结构

if(条件表达式1){

        语句1;

} else if(条件表达式2){

        语句2;

} else if(条件表达式3){

        语句3

} else {

        //上述条件都不成立执行此处代码

}

4. 三元表达式

1. 语法结构

表达式1 ? 表达式2 表达式3;

2.执行思路

如果表达式1为ture则返回表达式2的值;如果表达式1为false则返回表达式3的值

5.分支流程控制switch语句

5.1 语法结构

switch(表达式){
    case value1:
        // 表达式 等于value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个value 时要执行的代码
}
  • 关键字switch后面的括号内可以是表达式或值,通常是一个变量
  • 关键字case后跟一个选项的表达式或值,后面跟一个冒号
  • switch表达式的值会与结构中case的值作比较
  • 如果存在匹配全等(===),则与该case关联的代码块会被执行,并在遇到break时停止。
  • 如果所有的case的值都与表达式的值不匹配则执行default里的代码
  • 执行的case里面的语句时,如果没有break则继续执行下一个case里面的语句

5.2 switch 语句和if esle if 语句的区别

  • switch…case语句通常处理case为比较确定的值的情况,if…else…语句更加灵活,常用于范围判断
  • switch进行条件判断后直接执行到程序的条件语句,效率更高。而if…else语句有几种条件就得判断几次
  • 当分支少时,if…else执行效率更高
  • 当分支多时,switch执行效率更高且结构更清晰

七、JavaScript流程控制-循环

1. 循环

1. 循环目的

完成具有规律性的重复操作

2. JS中的循环

  • for 循环
  • while 循环
  • do…while 循环

2. for 循环

一组被重复执行的语句被称之为循环体,能否继续重复执行取决于终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句

2.1 语法结构

for 循环主要用于把某些代码循环若干次

for(初始化变量; 条件表达式; 操作表达式){
    //循环体
}
  • 初始化变量:通常被用于初始化一个计数器,该表达式可以使用var关键字声明新的变量,这个变量帮我们记录次数
  • 条件表达式:用于确定每一次循环能否被执行。如果是ture就继续循环否则退出循环
  • 操作表达式:每次循环的最后都要执行的表达式。通常用于更行或递增计数器变量。

2.2 执行过程

  1. 初始化变量。初始化操作在整个for循环中只会执行一次。
  2. 执行条件表达式时,如果为ture,则执行循环体语句,否则退出循环。
  3. 执行操作表达式,此时第一轮结束。
  4. 第二轮开始直接执行条件表达式,如果为ture,则执行循环体语句,否则退出循环。
  5. 继续执行操作表达式,第二轮结束。

2.3 断点调试

断点调试可以帮我们观察程序的运行过程

浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。
F11: 程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化

3. 双重for 循环

3.1 概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构。

3.2 双重for 循环语法结构

for (外循环的初始; 外循环的条件; 外循环的操作表达式){
    for (内循环的初始; 内循环的条件; 内循环的操作表达式){
        //需要循环的代码
    }
}

外层循环执行一次,内层循环要执行全部次数

4. while 循环

4.1 语法结构

while语句再条件表达式为真的前提下,执行指定的循环体代码,直到表达式不为真是结束循环。

while (条件表达式) {
    //循环体代码
}

4.2 执行过程

  1. 先执行条件表达式,如果为true,则执行循环体代码;如果为false,则退出循环,执行后面代码
  2. 执行循环体代码
  3. 循环体代码执行完毕后,程序会继续判断执行条件表达式,若仍为true,则会继续执行循环体,直到条件为false时,循环结束

注意:

必须有推出条件否则会变成死循环

5. do while 循环

1. 语法结构

该循环会先执行一次代码块,然后对条件表达式进行判断,如果为true则会重复执行循环体,否则退出循环

do {
    //循环体代码
} while (条件表达式);

2. 执行过程

  1. 先执行一次循环体代码
  2. 再执行条件表达式,如果为true,则继续执行循环体代码;如果为false,则退出循环,继续执行后面的代码

注意:先执行循环体再判断,do…while循环语句至少会执行一次循环体代码

6. continue break

6.1 continue 关键字

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

6.2 break 关键字

用于立即跳出整个循环(循环结束)

八、JavaScript 函数

1. 函数的概念

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

2. 函数的使用

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

2.1 声明函数

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

2.2 调用函数

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

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

2.3 函数的封装

把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

3. 函数的参数

3.1 形参和实参

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

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

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

// 带参数的函数声明
function 函数名(形参1,形参2, 形参3...) {    //可以定义任意多的参数,用逗号分隔
    //函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

3.2 函数参数传递过程

  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为:不用声明的变量
  3. 实参和形参的多个参数之间用逗号分隔

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

参数个数说明
实参个数=形参输出正确结果
实参个数>形参只取到形参个数
实参个数<形参多的形参定义为undefined,结果为NaN

注意:在JavaScript中,形参默认值为undefined

4. 函数的返回值

4.1 return 语句

return实现函数将值返回给调用者

return 语句的语法格式如下:

//声明函数
function 函数名() {
    ……
    return 需要返回的值;
}
//调用函数
函数名(); //此时调用的函数就可以得到函数体内return后面的值
  • 在使用return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return,返回的值是 undefined

4.2 return 终止函数

return 语句之后的代码不被执行

4.3 return 的返回值

return 只能返回一个值,如果用逗号隔开多个值,以最后一个为准

4.4 函数没有return 返回 undefined

函数都是有返回值的

  1. 如果有return 则返回return 后面的值
  2. 如果没有则返回undefined

4.5 break,continue,return 的区别

  • break:结束当前循环体
  • continue:跳出本次循环,继续执行下次循环
  • return:不仅可以退出循环,还能返回return语句中的值,同时还可以结束当前函数体内的代码

5. arguments 的使用

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

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

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

6. 函数的两种声明方式

6.1 自定义函数方式(命名函数)

利用函数关键字function自定义函数方式

//声明定义方式
function fn() {
    //调用
}
fn();
  • 因为有名字,所以也被称为命名函数
  • 调用函数的代码即可以放到声明函数的前面,也可以后面

6.2 函数表达式方式(匿名函数)

写法如下:

//函数表达式写法,匿名函数后面跟分号结束
var fn = function(){};
//调用的方式,函数调用必须写到函数体下面
fn();
  • 函数没有名字
  • fn里储存的是一个函数
  • 函数表达方式原理和声明变量方式相同
  • 函数调用必须在函数体后面

九、JavaScript对象

1. 对象

1.1 概述

对象是一个具体的事物

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

对象是由属性方法组成的

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

1.2 为什么需要对象

保存一个值时,可以使用变量,多个值可以使用数组。如果要保存一个人的完整信息时就需要使用对象了

2. 创建对象的三种方式

在JavaScript中,我们可以采用三种方式创建对象(object)

  • 字面量
  • new Object
  • 构造函数

2.1 利用字面量创建对象

对象字面量:就是{}里面包含了表达这个对象的属性和方法

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

  • 键:属性名
  • 值:属性值
var star = {
    name : 'whze',
    age : 22,
    sex : '男'
    sayHi : function(){
        alert('Hi');
    }
}

对象的调用

  • 属性调用:对象.属性名。.可以理解为“的”。
  • 属性另一种调用方式:对象['属性名'],方括号里属性必须加引号
  • 方法调用:对象.方法名(),方法名后面一定要加括号

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

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

2.2 利用new Object 创建对象

var andy = new Object();
andy.name = 'andy';
andi.sayHi = function(){
    alert('Hi');
}

2.3 利用构造函数创建对象

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

在JS中,使用构造函数要注意以下两点:

  • 构造函数用于创建某一类对象,其首字母要大写
  • 构造函数要和new一起使用才有意义
    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayHi = function() {
            alert('姓名' + this.name + '年龄:' + this.age + '性别:' + this.sex);
        }
    }
    var bigbai = new Person('大白', 66, '男');
    console.log(bigbai.name);

    注意:

  • 构造函数约定首字母大写

  • 函数内的属性和方法前需要添加this,表示当前对象的属性和方法

  • 构造函数中不需要return返回结果

  • 当我需要创建对象的时候,必须用new来调用构造函数

2.4 构造函数和对象

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

3. new 关键字

new 在执行时会做四件事

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

4. 遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作

for (变量 in 对象名字) {
    //在此执行代码
}

语法中的变量是自定义,它需要符合命名规范,通常我们会将这个变量写成为 k 或者 key。

for (var k in obj) {
    console.log(k);    //k是属性名
    console.log(obj[k]);//obj[k]是属性值
}

十、JavaScript 内置对象

1. 内置对象

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

2. 查文档

2.1 MDN

学习一个内置对象的使用,可以通过MDN/W3C 来查询

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

MDN:https://developer.mozilla.org/zh-CN/

2.2 如何学习对象中的方法

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

3. Math 对象

3.1 Math 概述

Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。

Math.PI        //圆周率
Math.floor()   //向下取整
Math.ceil()    //向上取整
Math.round()    //四舍五入版 就近取整 注意-3.5 结果是-3
Math.abs()    //绝对值
Math.max()/Math.min()     //求最大或最小值

3.2 随机数方法 random()

random() 方法可以随机返回一个小数,其取值范围是[0,1)

得到一个两数之间的随机整数,包括两个数在内

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

4. 日期对象

4.1 Date 概述

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

4.2 Date()方法的使用

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

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

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

  • 如果Date()不写参数,就返回当前时间
  • 如果Date()里面写参数,就返回括号里面输入的时间

4.3 日期格式化

方法名说明代码
getFullYear()获取当年dObj(new的对象名).getFullYear()
getMonth()获取当月(0-11)dObj.getMonth()
getDate()获取当天日期dObj.getDate()
getDay()获取星期几(周日0到周六6)dObj.getDay()
getHours()获取当前小时dObj.getHours()
getMinutes()获取当前分钟dObj.getMinutes()
getSeconds()获取当前秒钟dObj.getSeconds()

4.4 获取日期总的毫秒形式

Date 对象是基于1970年1月1日(世界标准时间)起的毫秒数

//实例化Date对象
var now = new Date();
//1.Date函数中的方法
console.log(now.valueof());
console.log(now.getTime());
//2.简单写可以这么做
var now = +new Date();    //+new Date()返回的就是总的毫秒数
//3.HTML5中提供的方法,有兼容性问题
var now = Date.now();

5. 数组对象

5.1 数组对象的创建

  • 字面量方式
    var arr = [1, 2, 3];
  • new Array()
    var arr = new Array(2);    //2为数组长度,里面有两个空的数组元素
    var arr = new Array(2,3);    //里面有两个数组元素2和3

5.2 检测是否为数组

  • instanceof运算符,可以判断一个对象是否属于某种类型
  • Array.isArray()用于判断一个对象是否为数组,isArray()是HTML5提供的方法

5.3 添加删除数组元素的方法

方法名说明返回值
push(参数1……)末尾添加一个或多个元素,注意修改原数组并返回新的长度
pop()删除数组最后一个元素,把数组长度减1,无参数、修改原数组返回它删除的元素的指
unshift(参数1……)向数组的开头添加一个或更多元素,注意修改原数组并返回新的长度
shift()删除数组的第一个元素,数组长度减1无参数、修改原数组

并返回第一个元素

的值

5.4 数组排序

方法名说明是否修改原数组
reverse()颠倒顺序,无参数改变原数组返回新数组
sort()排序改变原数组返回新数组

5.5 数组索引方法

方法名说明返回值
indexOf()数组中查找给定元素的第一个索引存在返回索引号,不存在返回-1
lastIndexOf()在数组中最后一个的索引存在返回索引号,不存在返回-1

5.6 数组转化为字符串

方法名说明返回值
toString()把数组转换为字符串,逗号分隔每一项返回一个字符串
join('分隔符')把数组中的所有元素转换为一个字符串返回一个字符串

5.7 课下查询

方法名说明返回值
concat()连接两个或多个数组,不影响原数组返回一个新的数组
slice()数组截取slice(begin,end)返回被截取项目的新数组
splice()数组删除splice(开始下标, 删除个数)返回被删除项目的新数组,会影响原数组

6. 字符串对象

6.1 基本包装类型

JS提供了三个特殊的引用类型:String、Number和Boolean

基本包装类型就是把简单数据类型包装成为负责数据类型,这样基本数据就有了属性和方法

var str = 'andy';
console.log(str.length)

按道理基本数据类型没有属性和方法,但是上面的代码可以执行

这是因为JS把简单数据类型包装为复杂数据类型,执行过程如下

//1.生成临时变量,包装
var temp = new String('andy');
//2.赋值给声明的字符变量
str = temp;
//3.销毁临时变量
temp = null;

6.2 字符串不可变

指字符串里的值不可变,内容改变是因为重新开辟了一个新的内存空间

6.3 根据字符返回位置

字符串所有的方法操作完成都会返回一个新的字符串(因为字符串不可变)

方法名说明
indexOf('要查找的字符', '开始的位置')返回指定内容在原字符串的位置,如果找不到返回-1,开始的位置是index索引号
lastindexOf()从后往前找,只招首个匹配的

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

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

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

方法名说明
concat(str1, str2, …)拼接字符串,等效于+, +更常用
substr(start, length)从start位置开始(索引号),length是取得个数
slice(start, end)从start开始,截取到end(end不取)
substring()start, end)从start开始,截取到end(end不取)基本和slice相同但是不接受负值

6.6 replace()方法

用于在字符串中一些字符替换另一些字符

​replace(被替换的字符串, 要替换的字符串);

6.7 split()方法

用于切分字符串,将字符串切分为数组。切分完毕后返回一个新的数组

var str = 'a, b, c, d';
console.log(string.split(','));    //返回的是一个数组[a, b, c, d]

6.8 课下查阅

  • toUpperCase()        //转换大写
  • toLowerCase()        //转换小写

十一、JavaScript 简单类型与复杂类型

1. 简单类型与复杂类型

简答类型又叫做基本数据类型或值类型,复杂类型又叫做引用类型

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

2. 堆和栈

空间分配区别:

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

JS中没有堆栈的概念

3. 内存分配

简单数据类型

  • 值类型(简单数据类型):string,number,boolean,undefined,null
  • 值类型变量的数据直接存放在变量(栈空间)中

复杂数据类型

  • 引用类型(复杂数据类型):通过new关键字创建的对象(系统对象、自定义对象)
  • 引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中

4. 传参

函数里的形参也可以看作是一个变量

当我们把一个值类型变量作为参数传给函数形参时,其实是把变量在栈空间里的值复制了一份给形参,在方法内部对形参做任何修改都不会影响到外部变量。

当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值