web前端JS学习第二十九天

数组

• 数组是什么
• 数组的基本使用
• 操作数组
• 数组案例

1，数组是什么
目标：能说出数组是什么

数组（Array）是一种可以按顺序保存数据的数据类型

数组可以存放不同的属性类似，多个数组元素值。

2，数组的基本使用
目标：能够声明数组并且能够获取里面的数据

1，声明语法
let 数组名 = [数据1,数据2,…数据n]

列：

let names = ['小明','小刚','小红','小丽','小米']

1，数组是按顺序保存，所以每个数据都有自己的编号
2，计算机中编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
3，在数组中，数据的编号也叫索引或下标
4，数组可以存储任意类似的数据

2，取值语法
数据名[下标]

列：

let names = ['小明','小刚','小红','小丽','小米']
names[0]//小明
names[1]// 小刚

1，通过下标去数据
2，取出来是什么类型的，就根据这种类型特点来访问

3，一些术语：

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获取

let names = ['小明','小刚','小红','小丽','小米']
console.log (names[0])//小明
console.log (names[1])//小刚
console.log (names(names.length))// 5

4，遍历数组
用循环把数值中每个元素都访问到，一般会用for循环遍历

语法：
for (let i = 0; i < 数组名.length; i++) {
数组名[i]
}

let nums = [10,20,30,40,50]
for (let i = 0; i < nums.length; i++) {
	document.write(nums[i])
}

数组本质是数据集合，操作数据无非就是 增 删 改 查
语法：
查： 查看数组数据 ：数组[下标] 列：arr[0] ，或者我们称为访问数组数据

改：重新赋值 数组[下标] = 新值 列：arr[0] = ‘red’

增：数组添加新的数据，arr.push（新增的内容）.push是在末尾添加新的数据，arr.unshift（新增的内容）是在开头追加

删：删除数组中数据，arr.pop() 删除末尾的元素，arr.shift（）删除开头的元素，arr.splice（操作的下标，删除的个数） 第一个参数是指定删除那个下标值，第二个参数是要删除几个元素，不填默认删除下标值后的所有元素。

删除元素代码pop()

	let arr = ['red', 'green', 'pink']
        // 删除最后一个元素 pop
         arr.pop()
        // 返回值是删除的元素
         console.log(arr.pop())//['red','green']
         console.log(arr)//pink

删除元素代码shift()

	let arr = ['red', 'green', 'pink']
       // 删除第一个元素
         arr.shift()
        // 返回值是删除的元素
         console.log(arr.shift());// ['green','pink']
         console.log(arr);//red

删除元素splice

		let arr = ['red', 'green', 'pink']
		// 指定删除元素 splice
        // 第一个参数是数组里是下标值
        // 第二个参数是删除几个元素，第二个参数没有默认删除第一个下标值后面的元素
        // arr.splice(1,1)
        arr.splice(1)//['red']
      

函数

学习目标
1，掌握函数的基本使用，让代码具备复用能力
2，理解封装的意义，，能够具备 封装函数的能力

函数
1，为什么需要函数
2，函数使用
3，函数传参
4，函数返回值
5，作用域
6，匿名函数

1， 为什么需要函数
函数：代码复用

目标：能说出为什么需要函数

函数：function 是被设计执行特定任务的代码块

说明：
函数可以把具有相同或相似逻辑的代码 包裹起来，通过函数调用执行这些被包裹的代码逻辑，这么做的优势是有利于精简代码方便复用

小结：
1，为什么需要函数？

• 可以实现代码复用，提高开发效率

2，函数是什么

• function执行特定任务的代码块

2，函数使用
函数声明语法：

function 函数名 () {
	函数体
}

列：

 function getName() {
            document.write(`你好~~~~`)
        }

        getName()
        getName()

2.1函数命名规范：

1，和变量命名一致
2，尽量小驼峰式命名
3，前缀应该为动词
4，命名建议：常用动词

动词
can 判断是否可执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据

2.2函数调用语法

//函数调用，这些函数体内的代码逻辑会被执行
函数名()

注意：声明（定义）的函数必须调用才会真正被执行，使用（）调用函数

列：

//函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
sayHi()
sayHi()

2.3函数体：
函数体是函数的构成部分，它负责将相同或相似代码 包裹 起来，直到函数调用时函数体内的代码才会被执行，函数的功能代码都要写在函数体当中

函数使用小结
1，函数是用那个关键字声明的？

• functiion

2，函数不调用会执行嘛？如何调用函数？

• 函数不调用自己不执行
• 调用方式：函数名()

3，函数的复用代码和循环重复代码用什么不同？

• 循环代码写完即执行不能很方便控制执行位置

• 随时调用，随时执行，可重复调用

3，函数传参
3.1，为什么要有参数的函数

• 若函数完成功能调用者传入数据，那么就需要用有参数的函数。
• 这样可以极大提高函数的灵活性

3.2有参数的函数声明和调用
声明语法：

function 函数名 （参数列表）{
	函数体
}
函数名(实参)

3.3参数列表

1，传入数据列表
2，声明这个函数需要传入几个数据
3，多个数据用逗号隔开
4，有多少个参数列表（形参）就有对应多少个实参

3.4,形参和实参

1，形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

2，实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

3，形参可以理解为是在这个函数声明的变量（比如 num1=10）实参可以理解为是给这个变量赋值

4，开发中尽量保持形参和实参个数一致

小结：
1，函数传递参数的好处是？

• 可以极大的提高了函数的灵活性

2，函数参数可以分为那两类，怎么判断他们是那种参数？

• 函数可以分为形参和实参

• 函数声明时，小括号里面的形参，形式上的参数

• 函数调用时，小括号里面的是实参，实际的参数

• 尽量保持形参和实参的个数一致

3，参数中间用什么符号隔开？

• 逗号

4，函数返回值
4.1，为什么要让函数有返回值

• 函数是被设计为执行特定任务的代码块
• 缺点：把计算后的结果处理方式写死了，内部处理
• 解决：把处理结果返回给调用者

有返回值函数的概念：

• 当调用某个函数，这个函数会返回一个结果出来
• 这就是有返回值的函数

2，用return返回数据
当函数需要返回数据出来时，用return关键字

语法：
return数据， return 20

怎么使用？

function getSum (x ,y) {
	return x +y
}
let num = getSum(10,30)
document.write(num)
//40

注意：

在函数体中使用return关键字能将内部的执行结果交给函数外部使用

函数内部只能出现1次return 并且return 后面代码不会再被执行，所有return 后面的数据不要换行写

return会立即结束当前函数

函数可以没有return，这种情况函数默认返回值为 undefined

小结：
1，为什么要让函数有返回值

• 函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）

• 对执行结果的扩展性更高，可以让其他的程序使用这个结果

2，函数有返回值那个关键字？有什么注意事项呢？

• 语法：return数据

• return后面不接受数据或者函数内不写return，函数的返回值是undefinde

• return能立即结束当前函数，所有return后面千万不能有数据和不要换行写

5，作用域

1，作用域概述

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

全局作用域：全局有效，作用于所有代码执行的环境（整个script 标签内部）或者一个独立的js文件

局部作用域：局部有效，作用于函数内的代码环境，就是局部作用域，因为跟函数有关系，，所有也称为函数作用域

块级作用域：{}内有效，块作用域由{}包括if语句和for语句里面的{}等

2，变量作用域

在javascript中，根据作用域的不同，变量可以分为

全局变量： 函数外部let的变量，全局变量在任何区域都可以访问和修改

局部变量：函数内部let的变量，局部变量只能在当前函数内部访问和修改

块级变量 ：{}内部的let变量，let定义的变量，只能在块作用域里访问，不能跨块访问也不能跨函数访问。

特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，，直接使用，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量

 // 全局变量 
        let nema = 10
        console.log(nema);

        function fu() {
            console.log(nema);
        }
        fu()

        if (true) {
            console.log(nema);

        }

        // 局部变量
        // 局部变量只能在函数内使用，出了函数外就不能使用了，不能越过函数区域，
        // 函数嵌套的，子级可以用父级的变量，但父级不能用子级变量
        function fy() {
            let name = 20
            console.log(name);

            function ff() {
                let sum = 30
                console.log(name);
            }
            ff()
            // console.log(sum);//报错，不能使用该变量，not defined
        }
        fy()
        // 块级变量
        if (true) {
            let num = 30
            console.log(num);
        }
        // console.log(num);不能使用该变量

        for (let i = 1; i < 5; i++) {
            console.log(i);
        }

小结：
1，JS作用域分为哪三种？

• 全局作用域，函数外部或者整个script有效

• 局部作用域，也称为函数作用域，函数内部有效

• 块级作用域{}内有效

  2，根据作用域不同，变量分为哪三种？

• 全局变量

• 局部变量

• 块级变量

注意：
变量访问原则-作用域链
1，只要代码，就至少有一个作用域
2，写在函数内部的局部作用域
3，如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
4，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

案例：结果是几？

function f1() {
	let num = 123
	function f2 () {
		let num = 0
		console.log(num)
}
	f2()	
}
let num = 456
f1()
//结果是：123

let a = 1
function fn1 () {
	let a = 2
	let b = '22'
	fn2 ()
	function fn2 () {
		let a = 3
		fn3()
		function  fn3 () {
			let a = 4
			console.log(a) //结果是 4 
			console.log (b) // 结果是'22'
}
}
}

6，匿名函数
目标掌握匿名函数的写法

具名函数：
声明：function fn() {}
调用：fn()

匿名函数: function() {}

1,匿名函数
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

语法：

	let fn  = function () {
		// 函数体
}

2，立即执行函数
场景介绍：避免全局变量之间的污染

语法:

//方式1
(function () { console.log(11) }) ();

//方式2
(function () { console.log(11) } () )

//不需要调用，立即执行

小结：
1，立即执行函数有什么作用

• 防止变量污染

2，立即执行函数需要调用嘛？有什么注意事项呢？

• 无需调用，立即执行，其实本质已经调用了

• 多个立即执行函数之间用分号隔开

综合大案例

    // 用户输入
        let calculate = +prompt('请输你需要计算的秒数：')
        // 计算时间，封装函数
        function getTime(t) {
            let h = parseInt(t / 60 / 60 % 24)
            let m = parseInt(t / 60 % 60)
            let s = parseInt(t % 60)

            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `计算出来的时间是${h}小时${m}分${s}秒`
        }
        // 打印输出
        let str = getTime(calculate)
        document.write(str)