函数参数
function sum(n1, n2) {
console.log(n1 + n2);
}
sum(10, 20); // 结果30
说明:
定义一个sum函数
形参为n1和n2
调用函数是传入的是实际参数
形参为n1和n2
调用函数是传入的是实际参数
函数返回值
默认返回
function sum(n1, n2) {
console.log(n1 + n2);
}
var res = sum(10, 20);
console.log(res); // 这里返回undefined
返回值注意:
1、函数的返回值需要使用 retur 关键字来返回值,默认返回 undefined
2、return 后面没有任何变量或者值,那么也是返回一个 undefined
3、函数内部遇到 return 关键字则退出这个函数,return 后面的代码不会再执行了
2、return 后面没有任何变量或者值,那么也是返回一个 undefined
3、函数内部遇到 return 关键字则退出这个函数,return 后面的代码不会再执行了
指定返回值
function sum(n1, n2) {
return n1 + n2;
}
var res = sum(10, 20);
console.log(res); // 30
说明:
上述例子中函数使用的了 return 关键字返回了数据,在调用是使用变量 res 接收是返回值,所以 res 的值是30
阶段1练习
求1-n的和
function sum(n) {
if (n <= 0) return `Error:您输入的数字 ${n} 不能小于 0`
var total = 0;
for (let i = 1; i <= n; i++) {
total += i
}
return total
}
console.log(sum(-5)); // Error:您输入的数字 -5 不能小于 0
console.log(sum(5)); // 25
数字格式化
let n1 = 5671
let n2 = 196000
let n3 = 1300456633
function formatNumber(n) {
if (n >= 10_0000_0000) {
n = Math.floor(n / 1_0000_0000) + '亿'
} else if (n >= 10_0000) {
n = Math.floor(n / 1_0000) + '万'
}
return n
}
console.log('n1', formatNumber(n1)) // 5671
console.log('n2', formatNumber(n2)) // 19万
console.log('n3', formatNumber(n3)) // 13亿
说明:这种数值10_0000_0000是语法糖,是ES6中新增的!
回调函数
function request(url, callback) {
console.log('正在请求网络...')
console.log('正在处理数据...')
console.log('正在发送数据...')
let data = ["JS", "Python", "VueJs"]
setTimeout(() => {
callback(data)
}, 2000);
}
request('https://api.linuxcc.cn/getData', function (res) {
console.log(res)
console.log('数据接收成功...')
})
立即执行函数
let ret = (function (name) {
console.log('立即执行函数执行了~', name)
return '立即执行函数'
})('linuxcc')
console.log(ret)
例子
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>
var btns = document.querySelectorAll('.btn')
for (var i = 0; i < btns.length; i++) {
var btn = btns[i];
(function (thisBtnIndex) {
btn.addEventListener('click', function () {
console.log(`按钮 ${thisBtnIndex + 1} 被点击了`);
})
})(i)
}