函数和BOM编程（JS）-阿里云开发者社区

一、JavaScript函数

1、概述

函数可以把代码封装起来，可以重复条用，完成特定的代码，JavaScript调用function关键字定义，例：

function h(){
   }

2、常见函数

1）eval 函数

ecal用于计算一个字符串，并用作代码运行

eval("1+1");//返回4

2）parseInt 函数

parseInt（变量名）从字符串提取整数；如果字符串第一个不是数字，返回null，遇到非数字停止提取。

3）parseFloat 函数

parseFloat（变量名）从字符串提取小数；如果字符串第一个不是数字，返回null，遇到非数字停止提取。

4）inNaN 函数

isNaN将一个数据类型自动转换为Number 如果是NaN就返回true，如果不是的就是false；如果是一个数字就得到false。

3、自定义函数

1）声明函数

function 函数名（）{
   
代码，函数体
}
//调用
函数名（）；

2）函数参数

function 函数名（参数1，参数2....）{
   }
//调用
函数名（参数1，参数2....）;

3)return 返回值

函数执行完毕后，只完成里面的代码，我么如果要函数产生的值，就要用到返回值。

return会终止函数并返回一个值，返回最后一个值；如果没有return 则会返回undefined

function 函数名（）{
   
return 123;
}

4）不定参数传递

function test(){
   
    console.log(arguments);
}
test(1,2,3,4,5);

// 输出结果
[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

伪数组：

具有数组length属性
按照索引方式进行存储
它没有真正数组的一些方法： pop(), push()

5)函数中调用函数

function test1(){
   
    console.log('test1');
}

function test2(){
   
    test();
    console.log('test2');
}

test2();

6) 匿名函数

function(){
   }

调用匿名函数：
用小括号的方法实现函数的自调用，注意，这种调用方法只能调用一次

(function(){
   
    console.log('hello');
})();

还可以将匿名函数赋值给一个变量，当给这个变量加上() 的时候，就相当于调用了这个函数

f = function (x, y) {
   
    return x + y;
};
fn(1, 2);

7）把函数当参数

var f1 = function () {
   
    return 100;
};
var f2 = function (fun) {
   
    console.log(f1());
};
f2(f1);

8) 函数的调用方式

直接调用

function a(){
   }
a();

函数内调用函数方式

function a(){
   }
function b(){
   
    a();
}

事件属性调用

function a(){
   }
<button onclick = "a();">点击</button>

匿名函数通过变量调用

var sb = function(){
   }
console.log(sb);

9）内置函数对象

var a= new Function('num1', 'num2', 'return num1 + num2');
a(1,2)

二、BOM编程

1、BOM介绍

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2、BOM的构成

BOM 比 DOM 更大，它包含 DOM。

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；

3、window

window 对象是浏览器的顶级对象它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

1）窗口加载事件

在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作

<body>
    <button>点击</button>
    <script>
        var button = document.querySelector('button');
        button.onclick = function(){
    
            alert('您刚点击了一下！')
        }
    </script>
</body>

如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。

window.onload 就是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function(){
   }
//或者 
window.addEventListener("load",function(){
   });

2） open()和close()

open()

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

window.open([URL], [窗口名称], [参数字符串])

参数说明：
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
（1）该名称由字母、数字和下划线字符组成。
（2）"_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
（3）相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
（4）name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

close()

close关闭窗口

window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口

3）定时器

setTimeout
setInterval
clearInterval

clearTimeout

（1）setTimeout() 定时器

window.setTimeout(调用函数 [,延迟的毫秒数]);
//1-window 可以省略
//2-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
//3-延迟的毫秒数省略默认为 0，如果写必须是毫秒
//4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

（2）停止 setTimeout() 定时器

window.clearTimeout(timeoutID)// 取消了先前通过调用 setTimeout() 建立的定时器，里面的参数就是定时器的标识符

（3）setInterval() 定时器

window.setInterval(回调函数 ,间隔毫秒数);// 重复调用一个函数，每个这个时间，就去调用一次回调函数

（4）停止 setInterval() 定时器

window.clearInterval(intervalID)// 取消了先前调用 setInterval() 建立的定时器，里面的参数就是定时器标识符

4 location

window 对象给我们提供了一个 location 属性用于获取或设置窗体 URL，并且可以用于解析 URL因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象

1） location 对象属性及方法

location.href：获取或者设置整个 URL
location.reload()：重新加载当前页面，相当于刷新，如果参数为 true，强制刷新

5、history

与浏览器的历史记录进行交互，该对象包含用户访问过的 URL

back()：可以后退
forward() ：前进功能
go(n) ：前进后退功能，参数如果是1，前进1个页面，如果是-1，后退一个页面

三、内置对象

1、 Math数学对象

console.log(Math.PI);
console.log(Math.max(1,2,3,45));  // 取多个值中的最大数
Math.min(1,2,3);    //最小
Math.floor(3.4);  // 向下取整 3
Math.ceil(3.4);  // 向上取整 4
Math.round(1.1);  // 四舍五入
Math.abs(-3);  // 取绝对值 3
Math.pow(10,2)  // 10的2次方
Math.sqrt(100)  // 开平方
Math.random();  // 生成0~1之间的随机小数 [0，1) === 左闭右开区间

2、Date 日期对象

Date 是一个构造函数，需要使用 new 来创建对象

var date = new Date();
console.log(date);  // Wed Apr 21 2021 19:34:46 GMT+0800
date.getFullYear();  // 返回当前年份
date.getMonth();  // 返回的月份小1月
date.getDate();  // 返回几号
date.getDay();  // 返回周几，周一是1，周日是0
date.getHours();
date.getMinutes();
date.getSeconds();

3、字符串函数

包装对象
字符串、数字、布尔值这三种原始类型的值，为什么会有对象调用方法？这是因为 JS 引擎会自动将原始类型的值转换为包装对象，使用之后会立即销毁。

String 对象

Number 对象

Boolen 对象

1）indexOf(), lastIndexOf() 查找字符位置

和数组类似，可以将字符串也看做数组，第一个字符索引为0。
返回值：
查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

2）concat() 拼接字符串

将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。
~~~js
var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = str1.concat(str2, str3);
console.log(str4);

// 输出结果
abc

#### 3）substr()  按长度截取字符串
~~~js
substr(start, length);  // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾

4）slice() 截取字符串

slice(start, end);  // 从 start 位置开始，截取到 end 位置（不包括end）。不输入 end 默认截取到结尾

如果是负数索引，从 -1 开始计数

5）substring() 截取字符串

substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。slice() 用法与 substring()用法类似，

slice() 方法也可以使用在数组中，并且支持负数索引
substring() 只可以在字符串中使用，不支持负数索引
6）replace() 替换字符串

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

7）toUpperCase(), toLowerCase() 大小写转换
console.log("aBc".toUpperCase());//ABC
console.log("Abc".toLowerCase());//abc
上一张：JavaScript 基础入门
 下一章：DOM编程基础（JS）

函数和BOM编程（JS）