JavaScript函数和BOM编程-阿里云开发者社区

一、函数概述

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块
一个 JavaScript 函数用function关键字定义，后面跟着函数名和圆括号。
函数：系统函数和自定义函数

1.常见的函数

eval
parseInt
parseFloat
isNaN

1.1 eval

javascript中eval函数的作用是用于计算一个字符串，并将其作为脚本代码执行。

eval(string);
eval("x=10;y=20;document.write(x*y)")//返回200
document.write(eval("2+2"))//返回4
var x=10
document.write(eval(x+17))//返回27

1.2 parseInt

parseInt(变量名);

作用：从一个字符串提取整数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。

1.3 parseFloat

parseFloat(变量名);

作用：从一个字符串提取小数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

1.4 isNaN

如果是NaN就返回true，如果不是的就是false
作用：先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true，如果是一个数字就得到false。

2. 自定义函数

2.1 声明函数

// 声明函数
function 函数名(){
    // 函数内部代码，又称为函数体
}
// 调用函数
函数名();

案例:将1-100累加封装成函数

function sum(){
 var sum = 0;
 for(var i=1; i<=100; i++){
     sum = sum+i;
 }
 console.log(sum);
}
sum();

2.2 函数参数

function 函数名(形参1, 形参2){
    // 函数体
}
函数名(实参1, 实参2);
函数调用参数实例：
function cook(arg){
 console.log(arg);
}
cook('鸡你太美');

如果调用函数的时候，实参个数大于形参，则只会以形参个数为准
如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined

2.3 return 返回值

函数执行完毕后，只完成里边的代码，如果我们想要获取到函数运行中产生的数据，就需要用到返回值。

function getResult(){
    return '晚上来CSGO';
}
console.log(getResult());

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

2.4 不定参数传递

function test(){
console.log(arguments);
}
test('小','飞','侠','来','咯');

输出结果为:

Arguments(5)
0: "小"
1: "飞"
2: "侠"
3: "来"
4: "咯"
callee: ƒ test()
length: 5
Symbol(Symbol.iterator): ƒ values()
[[Prototype]]: Object

伪数组:

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

2.5 函数中调用函数

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

匿名函数：匿名函数没有名字

function(){
    // 代码块
}

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

(function(){
    console.log('花姑凉');
})();

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

fn = function (x, y) {
    return x + y;
};
console.log(fn(5, 5));

2.6 将函数当做参数

var f1 = function () {
return '爱你一万年';
};
var f2 = function (fun) {
console.log(f1());
};
f2(f1);
// 输出结果
爱你一万年

2.7 函数的调用方式

直接调用方式
函数内调用函数方式
事件属性调用
匿名函数通过变量调用

//直接调用方式

function a(){}

a();

//函数内调用函数方式

function a(){}

function b(){

a();

}

//事件属性调用

function a(){}

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

//匿名函数通过变量调用

var sb = function(){

}

console.log(sb);

2.8 内置函数对象

var calSum3 = new Function('num1', 'num2', 'return num1 + num2');

var a= calSum3(1,2);

console.log(a); // 输出结果为 3 ;

二、B O M 编程

1.1 BOM基本介绍

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

1.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。

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

1.3 window

window 对象是浏览器的顶级对象，它具有双重角色。
它是 JS 访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

1.4 窗口加载事件

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

<body>

<button>点击</button>

<script>

var btn = document.querySelector('button');

btn.onclick = function(){

alert('您刚点击了一下！')

}

</script>

</body>

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

window.onload = function(){}

//或者

window.addEventListener("load",function(){});

需要注意的是：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。

如果使用 addEventListener 则没有限制。

1.5 open()和close()

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

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

/*

参数说明：

1.URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

2.窗口名称：可选参数，被打开窗口的名称。

（1）该名称由字母、数字和下划线字符组成。

（2）"_top"、"_blank"、"_self"具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

（3）相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

（4）name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

*/

close()关闭窗口

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

<script type="text/javascript">

var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象，存储在变量mywin中

mywin.close();

</script>

1.6 定时器

setTimeout
setInterval
clearInterval
clearTimeout

1.6.1 setTimeout() 定时器

window.setTimeout(调用函数 [,延迟的毫秒数]);

1-window 可以省略

2-延迟的毫秒数省略默认为 0，如果写必须是毫秒

3-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

4-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式

1.6.2 停止 setTimeout() 定时器

window.clearTimeout(timeoutID)

1-window 可以省略

2-里面的参数就是定时器的标识符

1.6.3 setInterval() 定时器

window.setInterval(回调函数 [,间隔毫秒数]);

1-window 可以省略
2-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
3-.间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
5-第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

1.6.4 停止 setInterval() 定时器window.clearInterval(intervalID)

1-window 可以省略

2-里面的参数就是定时器标识符

1.7 location 和 history

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

location对象属性和方法	返回值
location.href	获取或者设置整个 URL
location.reload()	重新加载当前页面，相当于刷新，如果参数为 true，强制刷新

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

history对象方法	作用
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();

// 获得总毫秒数从1970年1月1日（时间戳）

date.valueOf();

date.getTime();

// H5 浏览器可以直接用 date 中的方法获取时间戳

var now = Date.now()

// 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳

var now = +new Date()

获得指定日期对象：

var date = new Date(1619005441955);  // 传入时间戳
var date = new Date(2015, 4, 1);  // 传入年、月、日（月份从0开始计数）
var date = new Date("2020-5-10");  // 字符串方式传入年-月-日

3.字符串对象

包装对象

String 对象
Number 对象
Boolen 对象

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

和数组类似，可以将字符串也看做数组，第一个字符索引为0。

返回值：查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

// str.indexOf('要查找的字符', [起始的位置])

var str = '蜘蛛侠';

console.log(str.indexOf('侠'));

console.log(str.lastIndexOf('侠'));

例：求某个字符出现的次数和位置

var str = "adfajiwerasdfjklweasdfawer";
var index = str.indexOf("a");
var num = 0;
while (index != -1) {
    console.log(index);
    num++;
    index = str.indexOf("a", index + 1);
}
console.log(num);

charAt() 按索引返回字符串

var str = 'andy';

str.charAt(3); // 返回index位置的字符

str.charCodeAt(3); // 返回 index 位置的 ASCII 码

str[3]; // 获取指定位置处字符

例：遍历字符串中字符

var str = "andy";
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

concat() 拼接字符串

将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

var str1 = "小";

var str2 = "飞";

var str3 = "棍";

var str4 = str1.concat(str2, str3);

console.log(str4);

// 输出结果

小飞棍

substr() 按长度截取字符串

substr(start, length); // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾

var anyString = "大大滴花姑凉";

console.log(anyString.substr(3,6));

// 输出结果为:

花姑凉

slice() 截取字符串

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

var str= "大大滴花姑凉";
console.log(str.slice(3, 6));

// 输出结果

花姑凉

substring() 截取字符串

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

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

var str= "小飞棍来咯";

console.log(str.substring(-2,3));

// 输出结果

小飞棍

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

replace() 替换字符串

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

stringObject.replace(regexp/substr,replacement)

字符串替换只替换第一个匹配项目
批量替换需要使用正则

var anyString = "Hello World";
console.log(anyString.replace("World", "Javascript"));
// 输出
Hello Javascript

toUpperCase(), toLowerCase() 大小写转换

console.log("aBc".toUpperCase());
console.log("Abc".toLowerCase());
// 输出结果
ABC
abc

JavaScript函数和BOM编程

一、 函 数 概 述