JavaScript 系列笔记——目录(壹)

JavaScript 笔记:

初识 JavaScript

JavaScript 系列笔记——ECMAscript(壹)

JavaScript 系列笔记——DOM(贰)

JavaScript 系列笔记——BOM(叄)

初识 JavaScript 

目录

1. 什么是 JavaScript

2. JS的组成

3. JS书写位置

1. 什么是 JavaScriptavaScript 是一种本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。

2. JS的组成
2.1 ECMAscript

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

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

2.2 DOM ——文档对象模型

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

2.3 BOM ——浏览器对象模型

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

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

3.1 行内式 JS

<input type="button" value="你好" οnclick="alert('Hello World'))">
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号,JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
3.2 内嵌 JS

<script> 
    alert('Hello World~!'); 
</script>
可以将多行JS代码写到
内嵌 JS 是学习时常用的方式
3.3 外部 JS文件

<script src="my.js"></script>
利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

JavaScript 系列笔记——ECMAscript(壹) 

目录

变量

1. 变量的概述

 2. 变量的使用

3. 变量语法扩展

4. 变量命名规范

数据类型

1. 数据类型简介

2. 基本数据类型

3. 获取变量数据类型

4. 数据类型转换

运算符

1. 运算符

2. 算数运算符

3. 递增和递减运算符

4. 比较运算符

5. 逻辑运算符

6. 赋值运算符

7. 运算符优先级

流程控制

1. 流程控制

2. 顺序流程结构

3. 分支流程控制 if 语句

4. 三元表达式

5. 分支流程控制 switch 语句

流程控制-循环

1. 循环

2. for 循环

3. 双重 for 循环

4. wihile 循环

5. do wihile 循环

6. continue break

数组

1. 数组的概念

2. 创建数组

3. 获取数组中的元素

4. 遍历数组

5. 数组中新增元素

函数

1. 函数的概念

2. 函数的使用

3. 函数的参数

4. 函数的返回值

5. arguments 的使用

对象

1. 对象

2. 创建对象的三种方式

3. new 关键字

4. 遍历对象

小结

变量

1. 变量的概述

1.1 什么是变量

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

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

1.2 变量在内存中的存储

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

类似我们酒店的房间,一个房间就可以看做是一个变量。

2. 变量的使用

变量在使用是分为两步:1. 声明变量 2. 赋值

2.1 声明变量

JavaScript有三种声明方式。

var 声明一个变量,可选初始化一个值
let 声明一个块作用域的局部变量,可选初始化一个值。
const 声明一个块作用域的只读常量

let age    // 声明一个名称为age 的变量
  • let 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
  • age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间

2.2 赋值

age = 10    // 给age 这个变量赋值为 10
  • = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
  • 变量值是程序员保存到变量空间里的值

2.3 变量的初始化

let age = 18    // 声明变量同时赋值为 18

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

3. 变量语法扩展

3.1 更新变量

一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

let age = 18
age = 81    // 最后的结果就是81 因为 18被覆盖掉了

3.2 同时声明多个变量

同时声明多个变量时,只需要写一个let, 多个变量名之间使用英文逗号隔开。

let age = 10, name = 'FH', sex = 2;

3.3 声明变量特殊情况

情况

说明

结果

let age;console.log(age)

只声明 不赋值

undefined

console.log(age)

不声明 不赋值 直接使用

报错

age = 10;console.log(age)

不声明 只赋值

10

4. 变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。18age 是错误的
  • 不能 是关键字、保留字。例如:var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName

数据类型

1. 数据类型简介

1.1 为什么需要数据类型

在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利 用存储空间,于是定义了不同的数据类型。

简单来说,数据类型就是数据的类别型号。比如 姓名“张三”,年龄18,这些数据的类型是不一样的。

1.2 变量的数据类型

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

let age = 10            // 这是一个数字型
let areYouOK = '是的'   // 这是一个字符串

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

1.3 数据类型的分类

JS 把数据类型分为两类:

  • 基本数据类型(Number,String,Boolean,Undefined,Null)
  • 引入数据类型 (object)

2. 基本数据类型 

2.1 基本数据类型

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

JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。

let age = 21         // 整数
let Age = 21.3747    // 小数

2.3 字符串类型 String

字符串型可以是引号中的任意文本,其语法为 双引号"" 和 单引号''

let strMsg = "你好"       // 使用双引号表示字符串
let strMsg2 = '你也好'    // 使用单引号表示字符串
// 常见错误
let strMsg3 = 你好        // 报错,没使用引号,会被认为是js代码,但js没有这些语法

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

2.4 布尔型 Boolean

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

console.log(true + 1)        // 2 参与加法运算当1来看
console.log(false + 1)       // 1 参与加法运算当0来看

2.5 Undefined 和 Null

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

let variable
console.log(variable)			// undefined
console.log('你好' + variable)	// 你好undefined
console.log(11 + variable)		// NaN
console.log(true + variable)    // NaN

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

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

3. 获取变量数据类型

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

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

let num = 18
console.log(typeof num)	// 返回 number

3.2 字面量

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

  • 数字字面量:8,9,10
  • 字符串字面量:'程序员',"大前端"
  • 布尔字面量:true,false

4. 数据类型转换

4.1 什么是数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

  • 转换为字符串类型
  • 转换为数字型

4.2 转换为字符串

toString()

let num = 1
alert(num.toString())

String()强制转换

let num = 1
alert(String(num))

加号拼接字符串

let num = 1
alert(num + '我是字符串')
  • toString() 和 String() 使用方式不一样。
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式,这一种方式也称之为隐式转换。

4.3 转换为数字型

parselnt(string)函数,将string类型转成整数数值型

parselnt('78')

 parseFloat(string)函数,将string类型转成浮点数值型

parseFloat('78.21')

Number()强制转换函数,将string类型转成数值型

Number('12')

 js 隐式转换( - * / ),利用算术运算隐式转换为数值型

'12' - 0
  • 注意 parseInt 和 parseFloat 单词的大小写
  • 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型

 4.4 转换为布尔型

Boolean()函数,其他类型转成布尔值

Boolean('true')
  • 代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined
  • 其余值都会被转换为 true 
console.log(Boolean(''))    // false
console.log(Boolean(0))    // false
console.log(Boolean(NaN))    // false
console.log(Boolean(null))    // false
console.log(Boolean(undefined))    // false
console.log(Boolean(123))    // true
console.log(Boolean('你好吗'))    // true
console.log(Boolean('我很好'))    // true

运算符

1. 运算符

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

JavaScript 中常用的运算符有:

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

2. 算数运算符

2.1 算数运算符概述

概念:算数运算使用的符号,用于执行两个变量或值的算术运算。

运算符

描述

实例

+

10 + 20 = 30

-

10 - 20 = -10

*

10 * 20 = 200

/

10 / 20 = 0.5

%取余数(取模)

返回除法的余数 9 % 2 = 1

2.2 浮点数的精度问题

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

console.log(0.1 + 0.2)    // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100)   // 结果不是 0.7,而是:7.000000000000001

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

2.3 表达式和返回值

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

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

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

3. 递增和递减运算符

3.1 递增和递减运算符概述

如果需要反复给数字变量添加或减去1,可以使用递增(++)递减(--)运算符完成。

递增(++)递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,称为前置递增(递减)运算符,放在变量后面时,称为后置递增(递减)运算符。

注意:递增和递减运算符必须和变量配合使用。

3.2 递增运算符

1. 前置递增运算符

++num 前置递增,就是自加1,类似于 num = num + 1。

使用口诀:先自加,后返回原值

2. 后置递增运算符

num++ 后置递增,就是自加1,类似于 num = num + 1。

使用口诀:先返回原值,后自加

3.3 前置递增和后置递增小结

  • 前置递增和后置递增运算符可以简化代码的编写,让变量的值+ 1比以前写法更简单
  • 单独使用时,运行结果相同
  • 与其他代码联用时,执行结果会不同
  • 后置:先原值运算,后自加(先人后己)
  • 前置:先自加,后运算(先已后人)

4. 比较运算符

4.1 比较运算符概述

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

<

小于号

1 < 2

true

>

大于号

1 > 2

false

>=

大于等于号(大于或等于)

2 >= 2

true

<=

小于等于号(小于或等于)

3 <= 2

false

==

判等号(会转型)

37 == 37

true

!=

不等号

37 != 37

false

=== !==

全等 要求值和 数据类型都一致

37 === '37'

false

 4.2 =小结

符号

作用

用法

=

赋值

把右边给左边

==

判断

判断两边值是否相等(注意此时有隐式转换)

===

全等

判断两边的值和数据类型是否完全相同

console.log(18 == '18')     // true
console.log(18 === '18')	// false

5. 逻辑运算符

5.1 逻辑运算符概况

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

逻辑运算符

说明

案例

&&

“逻辑与”,简称 “与” and

true && false

||

“逻辑或”,简称 “或” or

true || false

!

“逻辑非”,简称 “非” not

! true

 5.2 逻辑与&&

两边都是 ture 才返回 true,否则返回 false

5.3 逻辑或||

两边都是 false 才返回 false,否则返回 true

 5.4 逻辑非!

逻辑非 ( ! ) 也叫取反符,用来去一个布尔值相反的值,如 true 的相反值是 false

let isOk = !true
console.log(isOk)	// false

 5.5 短路运算(逻辑中断)

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

1. 逻辑与

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

2. 逻辑或

  • 语法:表达式1 || 表达式2
  • 如果第一个表达式的值为真,则返回表达式1
  • 如果第一个表达式的值为假,则返回表达式2
console.log(123 || 456)			// 123
console.log(0 || 456)			// 456
console.log(123 || 456 || 789)	// 123

6. 赋值运算符

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

=

直接赋值

var usrName = '我是值';

+=、-=

加、减一个 数 后再赋值

var age = 10; age+=5; // 15

*=、/=、%=

乘、除、取模 后再赋值

var age = 2; age*=5; // 10

let age = 10
age += 5		// 相当于 age = age + 5
age -= 5		// 相当于 age = age - 5
age *= 10		// 相当于 age = age * 10

7. 运算符优先级

1

小括号

()

2

一元运算符

++ -- !

3

算数运算符

先 * / % 后 + -

4

关系运算符

> >= < <=

5

相等运算符

== != === !==

6

逻辑运算符

先 && 后 ||

7

赋值运算符

=

8

逗号运算符

,
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

流程控制

1. 流程控制

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

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

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

 

2. 顺序流程结构

它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。

 

3. 分支流程控制 if 语句

3.1 分支结构

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

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

  • if 语句
  • switch 语句

3.2 if 语句

1. 语法结构

// 条件成立执行代码,否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个语句。

2. 执行流程

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

1. 语法结构

// 条件成立 执行 if 里面代码,否则执行else里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码语句
} else {
    // [否则] 执行的代码
}

2. 执行流程

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

1. 语法结构

// 适合于检查多种条件。
if (条件表达式1) {
    语句1
} else if (条件表达式2) {
    语句2
} else if (条件表达式3) {
    语句3
    ...
} else {
    // 上述条件都不成立执行此处代码
}

2. 执行流程

4. 三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。

语法结构

// 条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式结果为真 则返回 表达式1的值 ,如果条件表达式结果为假,则返回 表达式2的值
let num = 10
let result = num >= 5 ? '是的' : '不是的' // 表达式是有返回值的    返回是的

5. 分支流程控制 switch 语句

5.1 语法结构

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项是,就可以使用 switch。

switch (表达式) {
    case value1:
        // 表达式 等于 valur1 时要执行的代码
        break
    case value2:
        // 表达式 等于 valur2 时要执行的代码
        break
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

注意事项 

1. 我们开发里面,表达式我们经常写成变量

2. 我们 表达式 的值 和 case 里面的值相匹配的时候是 全等,必须是值和数据类型一致才可以

3. break 如果当前的case里面没有break,则不会退出switch,会继续执行下一个case

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

  • 一般情况下,它们两个语句可以相互替换
  • switch...case 语句通常处理case为比较确定值的情况,而 if...else...语句更加灵活,常用于范围判断(大于、等于某个范围)
  • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if...else 语句有几种条件,就得判断多少次。
  • 当分支比较少时,if...else 语句的执行效率比 switch 语句高。
  • 当分支比较多时,switch 语句的执行效率比较高,而且结构更清晰。

流程控制-循环

1. 循环

循环的目的:可以重复执行某些代码

在 JS 中,主要有三种类型的循环语句:

  • for 循环
  • while 循环
  • do...while 循环

2. for 循环

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

2.1 语法结构

for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:

for (初始化变量; 条件表达式; 操作表达式) {
    // 循环体
}
// 1. 初始化变量 就是用let 声明的一个普通变量,通常用于作为计数器使用
// 2. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 3. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
for (let i = 1; i <= 100; i++) {
    console.log('你好')
}

3. 双重 for 循环

3.1 双重 for 循环概述

很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形、打印一个倒直角三角形等,此时就可以通过循环嵌套来实现。

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,例如在 for 循环语句中,可以再嵌套一个 for 循环,这样的 for 循环语句我们称之为双重for循环

3.2 语法结构

for (外层初始化变量; 外层条件表达式; 外层操作表达式) {
    // 执行语句;
    for (里层的初始化变量; 里层条件表达式; 里层操作表达式) {
    	// 执行语句;
}
// 1. 可以把里面的循环看做是外层循环的语句
// 2. 外层循环一次,里面的循环执行全部

4. wihile 循环

while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,知道表达式不为真时结束循环。

当条件表达式为true,则执行循环体,否则退出循环。

语法结构

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

5. do wihile 循环

do...while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

语法结构

do {
    // 循环体代码 —— 条件表达式为 true 时重复执行循环体代码
} while (条件表达式)

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

6. continue break

6.1 continue 关键字

continue 关键字用于立即跳出本次循环,继续下一次循环。

代码实现:

// continue 关键字 退出本次(当前次数的循环) 继续执行剩余次数循环
for (let i = 1; i <= 5; i++) {
    if (i == 3) {
    	continue	// continue退出本次循环 直接跳到 i++
    }
    console.log(i)    // 输出 1 2 4 5
}

6.2 break 关键字

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

 代码实现:

for (let i = 1; i <= 5; i++) {
    if (i == 3) {
    	break	// break 退出个循环
    }
    console.log(i)    // 输出 1 2
}

数组

1. 数组的概念

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

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

2. 创建数组

2.1 数组的创建方式

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

  • 利用 new 创建数组
  • 利用数组字面量创建数组

2.2 利用 new 创建数组

let 数组名 = new Array()
let arr = new Array()		// 创建一个新的数组

 2.3 利用数组字面量创建数组

// 1. 使用数组字面量方式创建空的数组
let 数组名 = []
// 2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['小白', '小黑', '大黄']
  • 数组的字面量是方括号 [ ]
  • 声明数组并赋值称为数组的初始化

2.4 数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

let arrStus = ['小白', 12, true, 1.1]

3. 获取数组中的元素

3.1 数组的索引

索引(下标):用来访问数组元素的序号(数组下标从0开始)。

let arr = ['小白', '小黑', '大黄']    // 对应着索引号:0,1,2 

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

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

// 定义数组
let arrStus = [1, 2, 3]
// 获取数组中第二个元素
alert(arrStus[1])

4. 遍历数组

遍历:就是把数组中的每个元素从头到尾都访问一次(类似我们每天早上学生的点名)。

let arr = ['red', 'green', 'blue']
    for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// i 是计数器,当索引号使用,arr[i] 是第 i 个数组元素

5. 数组中新增元素

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

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

  • 可以通过修改 length 长度来实现数组扩容的目的
  • length 属性是可读写的
let arr = ['red', 'green', 'blue']
arr.length = 5    // 把数组长度修改为5,里面应该有5个元素
console.log(arr)
console.log(arr[3])
console.log(arr[4])

 其中索引号是3,4的空间没有给值,就是声明变量为给值,默认值就是 undefined。

函数

1. 函数的概念

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

2. 函数的使用

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

2.1 声明函数

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

2.2 调用函数

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

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

3. 函数的参数

3.1 形参和实参

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

参数

说明

形参

形式上的参数,函数定义的时候传递的参数,当前并不知道是什么

实参

实际上的参数,函数调用的时候传递的参数,实参是传递给形参的

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

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

参数个数

说明

实参个数等于形参个数

输出正确结果

实参个数多于形参个数

只取到形参的个数

实参个数小于形参个数

多的形参定义为undefined,结果为NaN

function getSum(num1, num2) {
    console.log(num1 + num2)
}
getSum(1, 2)        // 3	实参个数等于形参个数 正常输出结果
getSum(1, 2, 3)     // 3	实参个数多于形参个数 会取到形参的个数
getSum(1)           // NaN	实参个数小于形参个数 多余的形参定义为undefined 最终的结果就是 NaN

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

4. 函数的返回值

4.1 return 语句

function 函数名() {
    return 需要返回的结果
}
函数名()
  • 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名(),通过 return 实现的。
  • 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果。

 4.2 return 终止函数

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

function getSum(num1, num2) {
    return num1 + num2		// return 后面的代码不执行
    alert('不会执行')
}
console.log(getSum(1, 2))

4.3 return 的返回值

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

function fn(num1, num2) {
    return num1, num2
}
console.log(fn(1, 2))	// 2

4.4 函数没有 return 返回 undefined

函数都是有返回值的

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

5. arguments 的使用

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

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

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

对象

1. 对象

1. 1 什么是对象?

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

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

对象是由属性方法组成的

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

2. 创建对象的三种方式

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

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

2.1 利用字面量创建对象

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

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

  • 键:相当于属性名
  • 值:相当于属性值,可以是任意类型的值
let obj = {
    uname: '张三',
    age: 18,
    sex: '男',
    sayHi: function() {
    	console.log('你好')
    }
}

对象的调用

  • 对象里面的属性调用:对象.属性名 ,这个小点 . 就理解为 “的”
  • 对象里面属性的另一种调用方式:对象[ '属性名' ] ,注意花括号里面的属性必须加引号
  • 对象里面的方法调用:对象.方法名() ,方法名后面必须加括号
console.log(obj.uname)	    // 调用名字属性
console.log(obj['age'])	    // 调用名字属性
obj.sayHi()				    // 调用 sayHi 方法属性,后面必须加括号

 2.2 利用 new Object 创建对象

let obj = new Object()
obj.uname = '张三'
obj.age = 18
obj.sex = '男'
obj.sayHi = function() {
    console.log('hi')
}
// 利号用等赋值的方法 添加对象的属性和方法

 2.3 利用构造函数创建对象

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

function 构造函数名() {
    this.属性 = 值
    this.方法 = function() {}
}
new 构造函数名()
  • 构造函数名字首字母大写
  • 构造函数不需要 return 就可以返回结果
  • 调用构造函数必须使用 new
  • 属性和方法前面必须添加 this

3. new 关键字

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

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

4. 遍历对象

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

for (变量 in 对象) {
    // 代码块
}
for (let k in obj) {
    console.log(k); 		// k 变量 得到是 属性名
    console.log(obj[k]); 	// obj[k] 得到是 属性值
}

小结

  1. 对象可以让代码结构更清晰。
  2. 对象复杂数据类型object。
  3. 本质:对象就是一组无序的相关属性和方法的集合。
  4. 构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
  5. 对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。
  6. for...in语句用于对对象的属性进行循环操作。

持续更新中 —— 8-15 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值