JavaScript函数

函数参数

function sum(n1, n2) {
  console.log(n1 + n2);
}

sum(10, 20); // 结果30
说明:
定义一个sum函数
形参为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 后面的代码不会再执行了

指定返回值

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)
}

创作不易 请尊重他人劳动成果,未经授权禁止转载!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇