JavaScript函数增强以及额外知识

JavaScript函数增强以及额外知识

目录

一、函数增强

1.1 函数对象的属性

1.2 arguments

1.3 剩余rest参数

1.4 纯函数的使用

1.5 柯里化的过程

1.6 组合函数的使用

二、额外知识

2.1 with

2.2 eval

2.3 严格模式

总结

一、函数增强 1.1 函数对象的属性

JavaScript中函数也是一个对象,那么对象中就可以有属性和方法。

name:一个函数的名字我们可以通过name来访问length:属性length用于返回函数参数的个数

注意:rest参数是不参与参数的个数的

var bar = function(m, n, ...others) { } console.log(bar.length) // 2 1.2 arguments arguments 是一个对应于传递给函数的参数的类数组(array-like)对象注意:array-like意味着它不是一个数组类型,而是一个对象类型

拥有数组的一些特性,比如说length,比如可以通过index索引来访问没有数组的一些方法,比如filter、map等arguments转数组

遍历arguments,添加到一个新数组中

调用数组slice函数的apply方法

[].slice.apply(arguments) Array.prototype.slice.apply(arguments)ES6中的两个方法 Array.from

[…arguments]

特别注意:箭头函数不绑定arguments 在箭头函数中使用arguments会去上层作用域查找

function foo() { var bar = () => { console.log(arguments) } bar() } foo(111, 222) // Arguments(2) [111, 222, callee: ƒ, Symbol(Symbol.iterator): ƒ] 1.3 剩余rest参数 ES6中引用了rest parameter,可以将不定数量的参数放入到一个数组中:

如果最后一个参数是 ... 为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组

function foo(num1, num2, ...otherNums) { // otherNums数组 console.log(otherNums) // [111, 222, 333] } foo(20, 30, 111, 222, 333)那么剩余参数和arguments有什么区别呢?

剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参arguments对象不是一个真正的数组,而rest参数是一个真正的数组,可以进行数组的所有操作arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构,而rest参数是ES6中提供并且希望以此来替代arguments的注意:剩余参数必须放到最后一个位置,否则会报错 1.4 纯函数的使用

纯函数的概念:确定的输入一定产生确定的输出

执行过程中不能副作用副作用是指在执行一个函数时,除了返回函数值之外,还对调用函数产生了附加的影响,比如修改了全局变量,修改参数或者改变外部的存储

实际开发中应用:React中就要求无论是函数还是class声明一个组件,这个组件都必须像纯函数一样,保护它们的props不被修改

没有必要每一个函数都是纯函数

数组的方法中slice就是一个纯函数,不会修改数组本身,而splice函数不是一个纯函数:

slice:slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组splice:splice截取数组, 会返回一个新的数组, 也会对原数组进行修改 1.5 柯里化的过程 什么是柯里化

只传递给函数一部分参数来调用它,让它返回一个函数去处理剩余的参数

两个案例:

logInfo

// 1.没有柯里化的时候做法 function logInfo(date, type, message) { console.log(`时间:${date} 类型:${type} 内容:${message}`) } // // 打印日志 // logInfo("2022-06-01", "DEBUG", "修复界面搜索按钮点击的bug") // // 又修复了一个bug // logInfo("2022-06-01", "DEBUG", "修复了从服务器请求数据后展示的bug") // logInfo("2022-06-01", "DEBUG", "修复了从服务器请求数据后展示的bug") // logInfo("2022-06-01", "DEBUG", "修复了从服务器请求数据后展示的bug") // logInfo("2022-06-01", "FEATURE", "增加了商品的过滤功能") // 2.对函数进行柯里化: 柯里化函数的做法 // var logInfo = date => type => message => { // console.log(`时间:${date} 类型:${type} 内容:${message}`) // } function logInfo(date) { return function(type) { return function(message) { console.log(`时间:${date} 类型:${type} 内容:${message}`) } } } var logToday = logInfo("2022-06-01") var logTodayDebug = logToday("DEBUG") var logTodayFeature = logToday("FEATURE") // 打印debug日志 logTodayDebug("修复了从服务器请求数据后展示的bug") logTodayDebug("修复界面搜索按钮点击的bug") logTodayDebug("修复界面搜索按钮点击的bug") logTodayDebug("修复界面搜索按钮点击的bug") logTodayDebug("修复界面搜索按钮点击的bug") logTodayFeature("新建过滤功能") logTodayFeature("新建搜索功能")

makeAdder

function makeAdder(count) { function add(num) { return count + num } return add } // 1.数字和5相加 var adder5 = makeAdder(5) adder5(10) adder5(15) adder5(18) // 2.数组和10相加 var adder10 = makeAdder(10) adder10(10) adder10(16) adder10(19)

柯里化优势:

函数的职责单一

函数的参数复用

自动柯里化的函数封装

// 将一个普通函数转化成柯里化函数 function curried(fn) { function curryFn(...args) { // 传入的参数大于等于fn的需要的参数个数,直接执行fn函数 // 否则返回新的函数继续接收参数 if(args.length >= fn.length) { return fn.apply(this, args) } else { // 返回新的函数并接收参数 return function(...newArgs) { // 递归调用currFn,此处的参数为上一次传入的参数和之后传入的参数 return curryFn.apply(this, args.concat(newArgs)) } } } return curryFn }

注意:函数柯里化性能并不高(使用到闭包,可能会导致内存泄露)

1.6 组合函数的使用

组合函数多个函数组合在一起, 依次调用

封装组合函数

// 传入多个函数,自动的将多个函数组合在一起依次调用 function composeFn(...fns) { var length = fns.length // 边界判断 if (length <= 0) return for (var fn of fns) { if (typeof fn !== "function") { throw new Error("Expected a function") } } return function (...args) { // 第一个函数可能传入多个参数 var result = fns[0].apply(this, args) // 之后的函数依次调用 for (var i = 1; i < length; i++) { result = fns[i].apply(this, [result]) } return result } }

二、额外知识 2.1 with with语句 扩展一个语句的作用域链。

var obj = { message: "Hello World" } with (obj) { console.log(message) // Hello World }

不建议使用with语句,因为它可能是混淆错误和兼容性问题的根源 2.2 eval 内建函数 eval 允许执行一个代码字符串

eval是一个特殊的函数,它可以将传入的字符串当做JavaScript代码来运行eval会将最后一句执行语句的结果,作为返回值 var message = "Hello World" var codeString = `var name = "kobe"; console.log(name); console.log(message); "abc";` var result = eval(codeString) console.log(result) // abc不建议在开发中使用eval:

eval代码的可读性非常的差(代码的可读性是高质量代码的重要原则)eval是一个字符串,那么有可能在执行的过程中被刻意篡改,那么可能会造成被攻击的风险eval的执行必须经过JavaScript解释器,不能被JavaScript引擎优化 2.3 严格模式

什么是严格模式?

严格模式是一种具有限制性的JavaScript模式,从而使代码隐式的脱离了“懒散(sloppy)模式”支持严格模式的浏览器在检测到代码中有严格模式时,会以更加严格的方式对代码进行检测和执行 严格模式对正常的JavaScript语义进行了一些限制:

严格模式通过抛出错误来消除一些原有的 静默(silent)错误严格模式让JS引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理)严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法

如何开启严格模式:严格模式通过在文件或者函数开头使用 use strict 来开启

// 给整个script开启严格模式 "use strict" // 给一个函数开启严格模式 function foo() { "use strict" }

严格模式的限制:

无法意外的创建全局变量

严格模式会使引起静默失败(silently fail,注:不报错也没有任何效果)的赋值操作抛出异常

严格模式下试图删除不可删除的属性

严格模式不允许函数参数有相同的名称

不允许0的八进制语法

在严格模式下,不允许使用with

在严格模式下,eval不再为上层引用变量

严格模式下,this绑定不会默认转成对象

"use strict" // 1.不会意外创建全局变量 // function foo() { // message = "Hello World" // } // foo() // console.log(message) // 报错 // 2.发现静默错误 var obj = { name: "kobe" } Object.defineProperty(obj, "name", { writable: false, configurable: false }) // obj.name = "curry" console.log(obj.name) // delete obj.name console.log(obj) // 3.参数名称不能相同 // function foo(num, num) { // } // 4.不能以0开头 // console.log(0o123) // 0o是ES6新语法可以写 // 5.eval函数不能为上层创建变量 // eval(`var message = "Hello World"`) // console.log(message) // 6.严格模式下, this是不会转成对象类型的 function foo() { console.log(this) } foo.apply("abc") foo.apply(123) foo.apply(undefined) foo.apply(null) // 独立函数执行默认模式下, 绑定window对象 // 在严格模式下, 不绑定全局对象而是undefined foo()

总结

到此这篇关于JavaScript函数增强及额外知识的文章就介绍到这了,更多相关js函数增强知识内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    计算机主板BIOS设置详细-BIOS知识

    计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主板已经设置完毕后,电脑就开始按del键进入BIOS。系统启动BIOS,即微机的基本输入

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    1394连接是什么1394网络适配器知识

    1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这样一个问题:1394连接是什么?。由于笔者对1394连接不清楚,通过百度搜索与谷歌

    扬声器属性级别设置|扬声器属性高级

    扬声器属性级别设置|扬声器属性高级,,1. 扬声器属性高级选择“高级”标签试试,不行的话,说明系统有问题了,直接换个验证过的系统盘重装系统就

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    电脑主板品牌的一些基本知识

    电脑主板品牌的一些基本知识,,组装的电脑不再是什么奇怪的事情,不再是一个专业的专利,许多普通的电脑用户可以自己组装电脑,但是,毕竟用户电脑