1.js 函数的创建有几种方式:

1.1  直接声明

1.2 创建匿名函数,然后赋值

1.3 声明函数,然后赋值给变量

1.4 使用1.3 得到的变量再赋值给变量

1.5 使用函数对象创建函数

 <script>
// 第一种:直接声明函数
function show(a, b) {
return a + b;
}
console.log(show(10, 20));
// 第二种:创建匿名函数,然后把匿名函数赋值给变量,然后就可以通过变量调用函数
var show1 = function(a, b) {
return a + b;
}
console.log(show1(30, 50));
// 第三种:声明一个函数,然后把这个函数赋值给一个变量
var show2 = function show1(a, b) {
return a + b;
}
console.log(show2(301, 200));
// 第四种:把第三种得到的变量中赋值给一个变量
var show2 = function show1(a, b) {
return a + b;
}
var show3 = show2;
console.log(show3(308, 206));
// 第五种:使用函数对象实例化得到函数
var show4 = new Function("a,b", 'return a + b;');
console.log(show4(100, 200));
</script>

注意第五种函数声明的方式:参数和函数体,都是写在小括号中的

2.1 关于函数对象Function()的例子:

  <script>
function show() {
var arr = [];
arr.push(10);
arr.push(20);
arr.push(30);
return arr.join("");
}
console.log(show()); // var show = new Function('', 'var arr=[];arr.push(10);arr.push(20);arr.push(30);return arr.join("")');
console.log(show()); // </script>

结果:两种方式是一样的,只是函数对象实例化的方式比较少用:

(备注:在数组arr中添加数据项,然后把数组转化为字符串)

2.2  完成字符串的拼接:

 <script>
var s = '我的名字是:<%name%>,年龄是<%profile.age%>,性别:<%sex%>';
// //完成字符串的拼接
var parse = new Function('str', 'var arr = [];arr.push("我的名字是:");arr.push("<%name%>");arr.push(",年龄是");arr.push("<%proflie.age%>");arr.push(",性别:");arr.push("<%sex%>");return arr.join("");');
var res = parse();
console.log(s);
console.log(res);
</script>

2.3 函数对象可以在声明的同时,执行函数体本身

   <script>
new Function('console.log("hello world!");')();
</script>

2.4 函数对象调用:

  <script>
//拼接字符串之后,把字符串解释出来
var parse = new Function('str', 'var arr = [];arr.push("我的名字是:");arr.push(this.name);arr.push(",年龄是");arr.push(this.profile.age);arr.push(",性别:");arr.push(this.sex);return arr.join("");');
var userInfo = {
name: 'aluoha',
profile: {
age: 25
},
sex: 'man'
};
console.log(typeof parse);
//调用parse函数,把parse函数里面的this指向userInfo;
// 这里主要是为了改变function parse 的作用域,把this指向userInfo;这样,在函数体中,this.属性 就可以进行替换了
var res = parse.call(userInfo);
console.log(res);
</script>

运行结果:

2.5 正则匹配初级:match() 与exec()的差异

 <script>
var s = '我的名字是:<%name%>, 年龄是<%age%>,性别:<%sex%>';
/*
<%变量名%> // 匹配格式
*/
var re = /<%([^%>]+)?%>/g;
console.log(s.match(re)); // 一次性把所有的匹配结果返回
console.log(re.exec(s)); // 第一次皮匹配结果
console.log(re.exec(s)); // 第二次皮匹配结果
console.log(re.exec(s)); // 第三次皮匹配结果
</script>

2.5.2 正则匹配初级:match() 与exec()的差异

  <script>
var s = '我的名字是:<%name%>, 年龄是<%age%>,性别:<%sex%>';
var arr = []; //存放整体匹配结果
var re = /<%([^%>]+)?%>/g;
var item = []; //存放单次匹配结果 while (item = re.exec(s)) { //第三次的时候 item = null, 循环退出
arr.push(item); // item 中有两个值,一个是整体匹配的结果,另一个是子匹配的结果
}
console.log(arr.join(''));
</script>

js函数的创建的更多相关文章

  1. 前端小课堂 js:函数的创建方式及区别

    js 函数的创建大体有这几种方式: -1-函数表达式(函数字面量): 说白了就是把一个函数赋值给了一个变量. var fun1 = function(index){ alert(index); } f ...

  2. 如何编写高质量的 JS 函数(1) -- 敲山震虎篇

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ作者:杨昆 一千个读者,有一千个哈姆雷特. 此系列文 ...

  3. Js函数的概念、作用、创建、调用!

    一.函数是用来帮助我们封装.调用代码的最方便的工具! 二.函数的创建方法有三种: 三.函数的创建方式有3种,调用方式也不是单一的,调用方式有4种!      1.作为一个函数去调用 函数名+();(函 ...

  4. JS函数创建的具体过程

    JS函数创建的过程: 1.新建Object对象F,类型设置为Function 2.设置F.__proto__ = Function.prototype 3.设置F.constructor = Func ...

  5. JS基础——函数的创建和使用

    在JS中函数在使用时实质上和我们平时学习的编程语言中的函数类似,它相同也具有函数名,參数,返回值,函数体等这些寻常函数所具有的内容.可是作为一种脚本语言,它确实也有自己不一样的地方. 一.创建 < ...

  6. js中函数对象创建的总结

    在JavaScript的函数对象创建方法中,可以分为三种情况: 1:第一种是使用function语句定义函数 <script type="text/javascript"&g ...

  7. js函数表达式和函数声明的区别

    我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function ...

  8. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  9. JS函数

    1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏 ...

随机推荐

  1. 以太网安全技术ACL原理+配置

    一.以太网访问控制列表 主要作用:在整个网络中分布实施接入安全性 访问控制列表ACL(Access Control List)为网络设备提供了基本的服务安全性.对某个服务而言,安全管理员首先应该考虑的 ...

  2. maven使用笔记--在父pom中声明过的jar可以被继承,使子项目不用写版本号由父pom控制

    将dependencies放到dependencyManagement中,如下: [html] view plaincopy <dependencyManagement> <depe ...

  3. [UE4]圆形的动态材质,使用VectorParameter、Get Dynamic Material、Set Vector Parameter Value

    一.新建一个名为M_FriendColor的材质.使用VectorParameter函数 二.新建一个名为FriendFlag的UserWidget,生成随机颜色,并传递给上一步设置的材质参数Colo ...

  4. sas基础系列(2)-时间差精度获取

    data a; interval='month'; start='14FEB2013'd; end='13MAR2013'd; months_default=intck(interval, start ...

  5. javascript-回归原生基础

    //添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEventListener){//主流浏览器 ad ...

  6. samba安装

    第一步下载: wget https://download.samba.org/pub/samba/stable/samba-4.6.7.tar.gz 看了下没看到啥有用的直接安装: ./configu ...

  7. django模板(template)

    模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 def current_datetime ...

  8. JSP:注册&登录

    数据库:Mysql 除了_id自动增长,其余全是varchar 注册:register.jsp <%@ page language="java" import="j ...

  9. vue-cli 项目搭建

    vue-cli 项目搭建 1.首先需要安装nodejs(安装省略). 2.用node安装vue-cli. npm install -g vue-cli   3.新建目录用来存放工程. 新建一个vue项 ...

  10. [UGUI]修改顶点

    参考链接: https://blog.csdn.net/jk823394954/article/details/53870779 说明:unity版本5.3,新建一个Image,挂上以下的脚本 一.图 ...