js 方法的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38210427/article/details/145493441

一【JavaScript】函数 ⑦ ( 函数定义方法 | 命名函数 | 函数表达式 )

1.1、命名函数

定义函数的标准方式就是命名函数 , 也就是之前讲过的声明函数 ;

函数声明后 , 才能被调用 ;

声明函数的语法如下 :

function functionName(parameters) {  
    // 函数体  
    return expression;
}

functionName 是函数名称 ;
parameters 是函数的形式参数列表 , 多个参数之间用逗号分隔 ;
expression 是函数返回值 ;

命名函数示例如下 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 函数

        // 定义函数
        function add(num1, num2) {
            // 打印所有的实参
            console.log(arguments);
            // 返回返回值
            return num1 + num2;
        }

        // 函数有返回值
        var ret = add(1, 2);
        console.log("函数返回值 : " + ret);
    </script>
</head>

<body>
</body>

</html>

1.2、函数表达式

" 函数表达式 " 与函数声明类似 ,

" 函数表达式 " 可以定义在代码的任何位置 ,

" 函数表达式 " 可以赋值给变量 ;

函数表达式语法结构如下 :

var functionName = function(parameters) {  
    // 函数体  
    return expression; 
};

在函数表达式中 , 可以将匿名函数赋值给一个变量 , 上面的语法结构就是将匿名函数赋值给变量的语法 ;

上述使用函数表达式赋值的变量 , 也可以当做函数进行调用 , 调用方法与函数相同 , 将变量名当做函数名使用即可 ;

函数表达式示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 函数

        // 将 函数表达式 赋值给 add 变量
        var add = function (num1, num2) {
            // 打印所有的实参
            console.log(arguments);
            // 返回返回值
            return num1 + num2;
        }

        // 函数有返回值
        var ret = add(1, 2);
        console.log("函数返回值 : " + ret);
    </script>
</head>

<body>
</body>

</html>

二函数使用（项目）

 <div class="customer_content_line customer_line">
                        <div class="title">社媒主页</div>
                        <div>
                          <svg-icon
                            v-for="(item, WayIndex) in customerVO.socialList"
                            style="width: 20px; height: 20px; margin-right: 8px; cursor: pointer"
                            :key="WayIndex"
                            :icon-class="getWayIcon(item.socialType)"
                            @click="enterSocialHomepage(item)"
                          />
                        </div>
                      </div>



import { getWayIcon, enterSocialHomepage } from "@/utils/way"

utils/way

import { ElMessage } from "element-plus"
const wayIconMap = {
  Facebook: "social_icon_Facebook",
  Yelp: "social_icon_Yelp",
  CrunchBase: "social_icon_CrunchBase",
  Tiktok: "social_icon_tiktok",
  Instagram: "social_icon_ins",
  Whatsapp: "social_icon_whatsapp",
  Linkedin: "social_icon_Linkedin",
  Skype: "social_icon_skype",
  Wechat: "social_icon_WeChat",
  VKontakte: "social_icon_VKontakte",
  Twitter: "social_icon_Twitter",
  Youtube: "social_icon_youtube"
}
export function getWayIcon(iconType: string) {
  return wayIconMap[iconType]
}
// 动态判断url添加https
export function addProtocol(url) {
  return /^https?:\/\//g.test(url) ? url : `https://${url}`
}
// 跳转社媒主页
export function enterSocialHomepage(item: any) {
  if (item?.socialUrl) {
    window.open(addProtocol(item.socialUrl), "_blank")
  } else {
    ElMessage.warning("请先维护社媒主页信息")
  }
}