JavaScript 基础五 函数的内置形参arguments ； 函数的两种声明；作用域链；预解析；创建对象的三个方式；构造函数；for in 遍历对象
程序员文章站
2022-04-10 15:38:23
...
1.0 arguments 函数内置的形参
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。
在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 等方法
arguments 的使用 只有函数才有 arguments对象， 而且是每个函数都内置好了这个 arguments
function fn() {
console.log(arguments); // 里面储存了所有传递过来的实参 arguments = [1,2,3]
console.log(arguments.length); // 具有数组的 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, 6);
// 他是一个伪数组 并不是真正意义上的数组
// 1. 具有数组的 length 属性
// 2. 按照索引的方式进行存储
// 3. 它没有真正数组的一些方法 pop() push() 等。
2.0 函数案例
1. 利用函数求任意个数的最大值
function getSum() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i]
}
}
return max;
}
console.log(getSum(1, 34, 24, 241, 421));
2. 利用函数翻转任意数组 reverse 翻转
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i]
}
return newArr;
}
var re1 = reverse([4, 2, 8, 1, 4, 3]);
console.log(re1);
3. 利用函数封装对象，对数组排序（冒泡方法） sort 排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var re = sort([2, 24, 3214, 34, 14, 124, 1]);
console.log(re);
4. 利用函数判断闰年
function isRunYear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 == 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
var re = isRunYear(2000);
console.log(re);
5. 函数之间相互调用
function backDay() {
var year = prompt('请输入年份');
if (isRunYear(year)) {
alert('今年是闰年是29天')
} else {
alert('今年是平年是28天')
}
}
var re = backDay();
console.log(re);
function isRunYear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 == 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
3.0 函数的两种声明方式
1. 利用函数关键字自定义函数(命名函数)
调用函数的代码！！既可以！！放到声明函数的前面，
！！也可以！！放在声明函数的后面
function fn() {
}
fn();
2.函数表达式(匿名函数)
函数调用的代码！！必须！！写到函数体后面
// var 变量名 = function(){ };
var fun = function(arr) {
console.log('我是函数表达式');
console.log('arr');
};
fun('pink');
// 1. fun 是变量名 不是函数名
// 2. 函数表达式声明方式跟声明变量差不多， 只不过变量里面存的是值， 而 函数表达式里面存的是函数
// 3. 函数表达式也可以进行传递参数
1.0 作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript（es6前）中的作用域有两种：(es6 以后才有块级作用越，{}包裹的，如if for)
- 全局作用域
- 局部作用域（函数作用域）
1. 全局作用域：整个 script标签 或者 是一个单独的js文件
var num = 10;
var num = 30;
console.log(num);
2. 局部作用域(函数作用域) 在函数内部就是局部作用域 ，这个代码的名字只在函数内部起效果和作用
function fn() {
//局部作用域
var num = 20;
console.log(num);
}
fn();
2.0 变量的作用域
在JavaScript中，根据作用域的不同，变量可以分为两种：
全局变量：
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
局部变量：
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
区别：
全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
3.0 作用域链
**作用域链：**采取就近原则的方式来查找变量最终的值。
<script>
作用域链： 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链 （就近原则）
var num = 10;
function fn() { // 外部函数
var num = 20;
function fun() { // 内部函数
console.log(num);
}
fun();
}
fn(); // 20 内部函数 优先调用 外部函数内的num
</script>
4.0 预解析
1. 我们js引擎运行js 分为两步： 预解析 和 代码执行
- 预解析：js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
- 代码执行 按照代码书写的顺序 从上往下执行
2. 变量预解析和函数预解析
预解析也叫做变量、函数提升：
- 变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升
- 函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
// 例子
console.log(num); // 他的值为 空 undefined
var num = 20; // 他只提升了 变量名 没有提升值
// 预解析后
var num;
console.log(num); // 代码执行到这一步时 num 还没有值 所以 为 undefined
num = 20;
// 2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
// (1) 变量提升 就是把 所有的 变量声明提升到 当前的作用域最前面 ！！！ 不提升赋值操作
// (2) 函数提升 就是把 所有的 函数声明提升到 当前的作用域最前面 ！！！ 不调用函数
// 例子1
fn();
function fn() {
console.log(num);
}
// 预解析后
function fn() { // 所以的 函数声明会提升到最前面 所以可以使用
console.log(num);
}
fn();
// 例子2 函数表达式的！ 重要！！！！！
fun();
var fun = function() {
console.log(11);
}
// 解析后
var fun;
fun(); // 当运行到这时 还没有函数 所以 直接显示错误！！ 所以函数表达式 的调用 一定要写在表达式的后面
fun = function() {
console.log(11);
}
4.1 预解析理解案例
案例1
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
相当于执行了以下操作
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
num = 10;
fun();
案例2
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
相当于以下代码
var num;
function fn() {
var num;
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fn();
案例3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
相当于以下代码
var a;
function f1() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 18;
f1();
案例4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
以下代码
function f1() {
var a;
a = b = c = 9;
// 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
// 集体声明 var a = 9, b = 9, c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
1.0 对象
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
JS 中的对象表达结构更清晰，更强大。
2.0 创建对象的三种方式
在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
- 利用 字面量 创建对象
- 利用 new Object 创建对象
- 利用 构造函数 创建对象
2.1 利用字面量创建对象
对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示 {键：值}
- 键：相当于属性名
- 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
var object = {}; // 创建了一个空的对象
var obj = {
uname: '汪汪汪',
age: '24',
height: '172',
sayHi: function() {
console.log('Hi~~');
}
}
// 注意！！！ 后面是 ， 号。 方法冒号后面跟的是一个匿名函数！
// 调用变量的三种方式
// 1.调用对象的属性 ， 我们采取 对象名.属性名
console.log(obj.uname);
// 2. 调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
// 3. 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号
obj.sayHi();
2.1 变量、属性、函数、方法总结
- 变量：单独声明赋值，单独存在
- 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
- 函数：单独存在的，通过“函数名()”的方式就可以调用
- 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能
2.2 利用new Object创建对象
跟 new Array() 原理一致 new Object()
- Object() ：第一个字母大写
- new Object() ：需要 new 关键字
- 使用的格式：对象.属性 = 值
利用new Object 来创建对象
var obj = new Object();
obj.uname = '汪汪汪';
obj.age = 18;
obj.sayHi = function() {
console.log('hi~~');
};
// 我们是利用等号 = 赋值 的方法 添加对象的属性和方法
// 每个属性和方法之间 用分号结束
// 调用方法 跟 对象字面量的创建的调用一样
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();
2.3 利用构造函数创建对象
**构造函数 ：**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
在 js 中，使用构造函数要时要注意以下两点：
- 构造函数用于创建某一类对象，其首字母要大写
- 构造函数要和 new 一起使用才有意义
利用构造函数来创建对象
语法
function 构造函数名字() {
this.属性 = 值；
this.方法 = function() {}；
}
调用方法：
1. 先调用一个对象：
var 对象名 = new 构造函数名();
2. 然后调用对象里面的属性， 或者方法：
console.log(对象名.属性);
console.log(对象名['属性']);
对象名.方法(); */
注意点：
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候，必须用 new 来调用构造函数。
2.3 构造函数和对象
- 构造函数 泛指的 某一大类。 它类似于 java 语言里的 类(class)
- 对象 特指 是一个具体的事物。 如 刘德华 郭富城
- 我们利用构造函数创建对象的过程 我们称为 对象的实例化
3.0 new关键字
new 在执行时会做四件事情：
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码，给这个新对象添加属性和方法。
- 返回这个新对象（所以构造函数里面不需要return）。
4.0 遍历对象属性 for…in
for…in 语句用于对数组或者对象的属性进行循环操作。
k 是属性名
obj[k] 是属性值
// 遍历对象的公式
/* for in 遍历我们的变量
for (变量 in 对象) */
var obj = {
unume: '汪思华',
age: 18,
sex: '男',
fun: function() {
},
}
for (var k in obj) {
console.log(k); // k 也可以写成 key 输出的是 属性名
console.log(obj[k]); // ibj[k] 输出的是 属性值
}
5.0 小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型object。
- 本质：对象就是一组无序的相关属性和方法的集合。
- 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
- 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。
- for…in 语句用于对对象的属性进行循环操作。
上一篇： js-for循环的性能优化
下一篇： opencv读取视频，存放视频图像