JSDay05:02.36
01-arguments使用
1.在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。
2.当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
3.arguments展示形式是一个伪数组,因此可以进行遍历。
4.伪数组具有以下特点:
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法
伪数组 , 数组,有序集合 (集合:存储多个数据)
对象是无序集合
5. arguments的应用场景:我们的函数允许用户调用时,传递不定长(不确定个数)的参数,函数声明时,不会使用形参,而是使用arguments **
7. 案例:
function fn() {
// console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3]
// console.log(arguments.length);
// console.log(arguments[2]);
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
7. 问题:
1.console.log()内部是如何获取参数的?
console.log(1)
console.log(1,2)
function log(a,b,c,....){
}
function log(){
arguments[0] ---- 1
arguments[1] ---- 2
}
2. arguments能替代形参么?
如果现在确定函数的参数有两个,你觉得使用哪种形式处理简单?arguments?还是形参?
function getSum(a,b){
a
b
}
function getSum(){
arguments[0]
arguments[1]
}
02-利用函数求任意个数的最大值
03-利用函数翻转数组
04-函数封装冒泡排序
05-利用函数判断闰年
06-函数可以调用另外一个函数
1.因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。
2.例子:
function fn1(param1,param2,arg1,arg2) {
console.log(111);
fn2();
console.log(‘fn1’);
}
function fn2() {
console.log(222);
console.log(‘fn2’);
}
fn1();
3. 注意点:
可以相互调用,但是不能 同时 相互调用,会形成死循环。 ***
07-输出2月份天数
08-函数的两种声明方式
1.自定义函数方式(命名函数)
// 声明定义方式
function fn() {…}
// 调用
fn();
因为有名字,所以也被称为命名函数
2. 函数表达式方式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
注意:
因为函数没有名字,所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
应用场景:在对象中声明函数时,使用函数表达式方式 ***
命名函数: 有名字:fn
匿名函数: 没有名字,有变量名fn
09-作用域导读
目标:
能够说出 JavaScript 的两种作用域
能够区分全局变量和局部变量
能够说出如何在作用域链中查找变量的值
10-JavaScript作用域 ***
1.作用域:起作用的范围。 *** (变量起作用的范围)
2.作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
3.JavaScript(es6前)中的作用域有两种: ***
全局作用域 (函数外部)
局部作用域(函数作用域) (函数内部)
4.全局作用域:作用于所有代码执行的环境(整个 script 标签内部)(函数内外部)或者一个独立的 js 文件。
5.局部作用域(函数作用域):作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
11-全局变量和局部变量 ***
1.全局变量:
1.在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量 *** )。
2.特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用) (隐式全局变量)
2.局部变量:
1.在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量 ***)
2.局部变量只能在该函数内部使用
3.函数的形参实际上就是局部变量
3.区别:
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当函数运行结束后,就会被销毁,因此更节省内存空间
12-JavaScript没有块级作用域 了解
块作用域由 { } 包括。
在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用
如下面的Java代码:
if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错
在Js中:
if(true){
var num = 123;
console.log(num); //123
}
console.log(num); //123
if(false){
var num = 123;
console.log(num); //123
}
console.log(num); //undefined
13-作用域链 了解
1.作用域链:函数嵌套函数,作用域中有作用域,形成作用域链。
2.规律:采取就近原则的方式来查找变量最终的值。
14-作用域链案例
15-JavaScript预解析导读
目标:
能够知道解析器运行 JS 分为哪两步
能够说出变量提升的步骤和运行过程
能够说出函数提升的步骤和运行过程
16-预解析 ***
1.JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
2.预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
在代码执行之前,先读一遍代码,找var,function。 ***
3.预解析做两件事情: ***
1.变量声明提升 :变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
var num = 1;
2.函数声明提升 :函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
function xx(){}
var xx = function(){}
17-预解析案例
18-对象导读
目标:
能够说出为什么需要对象
能够使用字面量创建对象
能够使用构造函数创建对象
能够说出 new 的执行过程
能够遍历对象
19-什么是对象以及为什么需要对象
1.万物皆对象,对象是 一个具体的事物 ***,看得见摸得着的实物。例如,一本书、一辆汽车
2.在 JavaScript 中,对象是一组无序的相关属性和方法的集合 ***
3.对象是由属性和方法组成的。 ***
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
对象中的变量,称之为属性 ***
对象中的函数,称之为方法 ***
4.为啥要有对象?
为了方便管理多个变量,和多个函数。
20-利用对象字面量创建对象
1.创建对象方式
1.利用字面量创建对象
2.利用 new Object 创建对象
3.利用构造函数创建对象
2.利用字面量创建对象
对象字面量:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法。
{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
3.例子:
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
4.对象使用
对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号,
对象里面的方法调用:对象.方法名()
5.例子:
console.log(star.name)
console.log(star['name'])
star.sayHi();
6. 对象与数组: ***
1. 声明:
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
var arr = [1,2,3];
var arry = [
0: 1,
1: 2,
2: 3
]
2. 存储结构:
都是key:value
对象的key是:属性名
数组的key是:索引
3. 获取: 都是通过key获取value
star['name']; 通过中括号key获取对象的value,需要添加引号。
arr[0]
21-变量属性函数方法的区别
变量:单独声明赋值,单独存在
属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
函数:单独存在的,通过“函数名()”的方式就可以调用
方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。
22-利用new Object创建对象
1.例子:
var andy = new Obect();
andy.name = ‘pink’; // 新增加属性
andy.age = 18;
andy.sex = ‘男’;
andy.sayHi = function(){
alert(‘大家好啊~’);
}
var star = { ***
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
star.name
23-我们为什么需要构造函数
因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制
因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
又因为这个函数不一样,里面封装的不是普通代码,而是 对象
构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数: 特殊的函数,能够构造对象(创建对象)的函数
24-构造函数创建对象(上)
1.构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。
我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。
2.在 js 中,使用构造函数要时要注意以下两点:
构造函数用于创建某一类对象,其首字母要大写
构造函数要和 new 一起使用才有意义
3.例子:
function Person(name, age, sex) { *** 构造函数的参数与对象的属性是一致的。
// 1. 创建了Person人类对象this js内部做的第一件事情 ***
// var this = new Object();
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
}
//2. return this; js内部做的第二件事情 ***
}
var bigbai = new Person('大白', 100, '男'); // var bigbai = this;
// 创建出来一个大白的人类对象,大白的名字是大白,100,男
// this 就是即将创建出来的大白对象
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
构造函数内部创建对象,其实就是第二种方式:
var andy = new Object();
andy.name = 'pink'; // 新增加属性
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
4. 注意
1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候,必须用 new 来调用构造函数。
25-构造函数创建对象(下)
26-构造函数和对象区别
1.构造函数,如 Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)
2.创建对象,如 new Stars(),特指某一个,通过 new 关键字创建对象的过程我们也称为对象实例化
类 构造函数 对象
某一类事物 那如何创建出某一类的具体一个对象呢 具体的一个事物
万物皆为对象,但是世间万物种类太多,我们通过类进行分类 通过new 构造函数()创建出来
Person:人类 Person() zs,ww (Person类的对象)
Star:歌星 Star() ldh,zxy
Array:数组类 Array() arr1,arr2
Object:万物类 Object() obj1,obj2 (普通的对象)
27-new关键字执行过程
1. 在内存中创建一个新的空对象。
2. 让 this 指向这个新的对象。
3. 执行构造函数里面的代码,给这个新对象添加属性和方法。
4. 返回这个新对象(所以构造函数里面不需要return)。
28-遍历对象
1.for…in 语句用于对数组或者对象的属性进行循环操作
2.语法:
for (变量 in 对象名字) {
// 在此执行代码
}
var obj = {
//key:value,
name:'zs',
age:18
}
3.例子:
for (var k in obj) { // for in遍历obj,其实遍历的是obj中的属性 ['name','age']
console.log(k); // 这里的 k 是属性名 (字符串) ‘name’,'age'
console.log(obj[k]); // 这里的 obj[k] 是属性值
// obj.k , obj['k']// 找obj中名字叫做k的属性的值
// obj[k] // 先找全局变量k,拿到k的值,然后再去obj中查找
// 如果遍历第一次: k = ‘name’ ,obj['name']
}
var arr = ['a','b']
for (var i=0;i<arr.length;i++){ // i 数组的啥呢?索引 , key
i; // 0,1
arr[i]; // a ,b
}
数组和对象都是键值对:key,value
数组的key:索引
对象的key:属性
根据key获取value: xx[key]