猫史档案馆


【JavaScript教程】函数,永远滴神!

用户:神岛吉吉喵神岛吉吉喵查看:18 回复:29 评论:18 创建时间:2021-01-17T11:30:31


center_image

API实现不了的复杂功能

只要合理运用自定义函数

都可以轻松实现哦~

https://www.bilibili.com/video/BV1Qh41127M8

 

1.函数定义

以下面代码为例

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

函数的常规格式是以关键词function开头

“add”(加法)是函数的名称

圆括号中的a b c则表示函数有3个可输入的参数

return 表示函数会返回一个值

 

2.函数调用

函数调用的格式是: 函数名(参数1,参数2…)

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

console.log(add(1,2,3)) //输入1 2 3, 返回6
console.log(add(4,5,6)) //输入4 5 6, 返回15
console.log(add(4,5,6,7)) //输入4 5 6 7, 多了7这个参数, 照样返回15
console.log(add(4,5)) //输入4 5, 缺了一个参数, 返回NaN(not a number)意味着参与计算过程出现错误
//当undefined跟数字发生运算就会产生NaN, 如 undefined+1

 

3.函数参数

在函数中插入log追查参数在函数中的实际值  

function add(a, b, c) {
    console.log('a b c的值分别是:',a+'', b+'', c+'') //显示 a b c 的值
    var d = 0
    d += a
    d += b
    d += c
    console.log('返回:',d)
    return d
}

//先单独演示这个, 
add(3,2,1) //输入3 2 1, 返回6

center_image

add(4,5,6) //输入4 5 6, 返回15
add(4,5,6,7) //输入4 5 6 7, 多了7这个参数, 照样返回15
add(4,5) //输入4 5, 缺了一个参数, 缺失的参数会以undefined的值参与运算, 当undefined跟数字发生运算就会产生NaN

center_image

 

4.函数返回

当函数运行到第一个return语句时  

就会立即带着返回值跳出函数  

往后的代码不会被执行  

function add(a, b, c) {
    var d = 0
    return d//这行再往下移一点试试?
    d += a
    d += b
    d += c
    return d
}

console.log(add(3,2,1))
console.log(add(4,5,6))
console.log(add(4,5,6,7))
console.log(add(4,5))

center_image

 

5.匿名函数

函数可以没有名字

没有名字的函数叫做匿名函数

但没了名字怎样调用呢?

function(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

可以把整个函数表达式当作数据赋值给变量或属性

也就是函数本身可以作为数据存储在变量或对象属性里

var add = function(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

console.log(add(1,2,3))

那存到变量的匿名函数

跟带名字的函数有啥区别呢?

在下面这种情况有区别:

如果在函数声明之前调用函数

存到变量的函数

会因为函数未被定义而报错

console.log(add(1,2,3))// add未被赋值而报错

var add = function(a, b, c) { //在add被调用之后才被定义
    var d = 0
    d += a
    d += b
    d += c
    return d
}

而带名字的函数则允许你在定义之前调用

因为js引擎在运行时会自动把它移到代码最上方

console.log(add(3,2,1))// 运行正常, 因为add的定义被js引擎自动提前运行

function add(a, b, c) {// add作为有名函数, 会被自动提升到代码最上方, 所以能正常运行
    var d = 0
    d += a
    d += b
    d += c
    return d
}

 

6.箭头函数

此外, 还有另一种函数定义方式跟匿名函数相似

叫做"箭头函数"

var mul = (a, b, c) => a * b * c // 省略大括号的写法, 如果函数里的表达式简单不用分行可以这样写

calc(add)
calc(mul)

// 下面的运行结果跟上面一样
calc((a, b, c) => {
    return a + b + c
})

calc((a, b, c) => a * b * c)

  它的写法更简洁  

大多数时候作为参数传进其他函数里  

作用跟普通函数基本一致

 

  7.全局函数

把add函数以ADD为名暴 露到全局, 这样控制台也能访问

function add(a, b, c) {
    var d = 0
    d += a
    d += b
    d += c
    return d
}

global.ADD = add // 把add函数赋值给global对象的ADD属性

这样在代码运行后, 控制台也能调用add函数的功能了

center_image

 

本期的教程内容知识量巨大

记得回去做练习题哦~

emotion_编程猫_加油

作业:

用例1:伤害计算

自定义一个hurt函数

可以给对象计算伤害

也可以给相同属性结构的玩家实体计算伤害

function hurt(attacker, victim) { //定义一个可复用的"喵"函数
    victim.hp -= attacker.atk
    console.log(`${attacker.player.name}对${victim.player.name}造成${attacker.atk}点伤害`)
    console.log(`${victim.player.name}剩余生命 ${victim.hp}/${victim.maxHp}`)
    console.log('-------------')
}

var user1 = {
    atk: 20,
    hp: 50,
    maxHp: 100,
    player: {
        name: '雷电猴',
    },
}

var user2 = {
    atk: 15,
    hp: 70,
    maxHp: 100,
    player: {
        name: '阿尔法',
    },
}

// 下面表示雷电猴打了2下阿尔法
hurt(user1, user2) // user1打了user2一下
hurt(user1, user2) // user1又打了user2一下

world.onPlayerJoin(({ entity }) => {
    entity.enableDamage = true // 允许玩家受伤
    hurt(user1, entity) // 玩家在进入地图时也被user1打了一下
})

center_image

1.怎样用hurt函数, 让阿尔法打回雷电猴?

2.让玩家尝试打回雷电猴时

会出现下面的问题

该怎样解决这个问题? 

center_image

3.自己定义一个名为heal的函数

调用后能让目标恢复满血

比如调用heal(user1)能让雷电猴恢复满血

4.下面的代码, 如何修改箭头函数, 让雷电猴满血

emotion_编程猫_翻白眼

 

用例2: 生成建筑或地形

自定义一个build函数

把3句摆放方块的代码封装在里边

用来生成柱子

在脚本启动时调用一次

也可以被onVoxelSeparate API复用

还可以在控制台调用

function build(x, y, z) { //每调用一次建造一根由3个方块组成的小石柱
    voxels.setVoxel(x, y+1, z, 'stone')
    voxels.setVoxel(x, y+2, z, 'stone')
    voxels.setVoxel(x, y+3, z, 'stone')
}

build(喵, 9, 喵) //在地图中央放一根石柱, 也可以调用多次生成多几根

world.onVoxelSeparate(({ x, y, z }) => {// 结合api, 每离开一个方块就在那个方块上面放石柱
    build(x, y, z)
})

global.build = build //允许build被控制台调用, 在控制台运行 build(喵, 15, 喵) 在地图中央半空也放

问:怎样让build函数在地上生成柱子的代码改成在地上生成十字?

center_image

emotion_编程猫_在吗

加入代码岛3.0官方内测Q喵

官网:box3.codemao.cn

下面的二维码会扫出来什么呢?( =•ω•= )m

center_image


回复

上一页1 页 / 共 1下一页
荷花编程荷花编程

沙发

点赞2


评论


荷花编程荷花编程

板凳

点赞0


评论


荷花编程荷花编程

地板

点赞0


评论


荷花编程荷花编程

天花板

点赞0


评论


荷花编程荷花编程

地下室

点赞0


评论


高贵的木叶龙A35d高贵的木叶龙A35d

前排

点赞0


评论


Architect_海绵Architect_海绵

az

点赞0


评论


高贵的木叶龙A35d高贵的木叶龙A35d

function build(x, y, z) { //每调用一次建造一朵花
    voxels.setVoxel(x+1, y+1, z, 'stone')
    voxels.setVoxel(x, y+1, z+1, 'stone')
    voxels.setVoxel(x-1, y+1, z, 'stone')
    voxels.setVoxel(x, y+1, z-1, 'stone')
}

点赞1


评论


高贵的木叶龙A35d高贵的木叶龙A35d

漏了一个吧,在岛三还有一种函数,就是异步函数:

async function

 

点赞0


评论


波波看世界波波看世界

前排

 

点赞0


评论


指令者指令者

前排

点赞0


评论


GZ006GZ006

前排

点赞0


评论


DL1DL1

前排

点赞0


评论


Artist_CArtist_C

前排

点赞0


评论


DL1DL1

我正在拼命写作业emotion_编程猫_加油

点赞2


评论


SKQASKQA

好像没讲async的,还有为啥我直接用(async function(){})会报错

点赞0


评论


小小瓢虫小小瓢虫

前排!!

点赞0


评论


一位人类一位人类

c++,永远滴神

点赞0


评论


冬烟的Bot冬烟的Bot

function build(x, y, z) {
    voxels.setVoxel(x, y, z, 'stone')
    voxels.setVoxel(x-1, y, z, 'stone')
    voxels.setVoxel(x+1, y, z, 'stone')
    voxels.setVoxel(x, y, z-1, 'stone')
    voxels.setVoxel(x, y, z+1, 'stone')
}

build(喵, 9, 喵)

global.build = build

点赞0


评论


高贵的木叶龙A35d高贵的木叶龙A35d

//顺便补一个async function的使用
//定义方法:
async function add(a,b){//创建一个异步函数,函数名为add,参数a,b
    console.log('答案是……')
    await sleep(1000)//异步函数可以用await
    console.log(a+b)
}
add(1,1)//调用方法
//控制台输出:
//答案是……
//(一秒后…)
//2

点赞2


评论


DL1DL1

作业:

//第一题
hurt(user2,user1)


//第二题
world.onPlayerJoin(({ entity }) => {
    entity.enableDamage = true;
    entity.atk = 14;//这个数字可以改,我写的14
})
world.onPlayerJoin(({ entity }) => {
    entity.enableDamage = true
    hurt(entity,user1)
})


//第三题
function heal(user) {
    user.hp = 100
}

//第四题
calc((u) => {
    u.hp = u.maxHp
})
calc(user1)


//第五题
function build(x, y, z) { //每调用一次建造一根由3个方块组成的十字
    voxels.setVoxel(x+1, y+1, z, 'stone')
    voxels.setVoxel(x, y+1, z-1, 'stone')
    voxels.setVoxel(x, y+1, z+1, 'stone')
    voxels.setVoxel(x-1, y+1, z, 'stone')
   
}

build(64, 9, 64) //在地图中央放一根十字, 也可以调用多次生成多几个

world.onVoxelSeparate(({ x, y, z }) => {// 结合api, 每离开一个方块就在那个方块上面放十字
    build(x, y, z)
})

global.build = build //允许build被控制台调用, 在控制台运行 build(64, 15, 64) 在地图中央半空也放

写完了啊,emotion_编程猫_厉害了

点赞3


评论


小小爱html小小爱html

CM cm

点赞0


评论


一勺小汤_纪念号一勺小汤_纪念号

一言不发走了

center_image

点赞0


评论


LeecLeec

yyds

 

点赞0


评论


卫道士32_32*2没了卫道士32_32*2没了

center_image

点赞2


评论


ZNS_RemytowerJimmyZNS_RemytowerJimmy

乌 兹 才 是 永 远 的 神 !()

点赞0


评论


迷失冷光迷失冷光

a(``)=a``

点赞1


评论


SGY喵茶九尾SGY喵茶九尾

函数,永远不会!

点赞1


评论


array_已退array_已退

吉吉喵,第4步的代码片段是不是没切换为JavaScript啊?

点赞0


评论