自己做的网站用在博客上,安卓手机优化大师官方下载,青岛响应式网站设计,怎么做网站例如京东个人主页#xff1a;学习前端的小z 个人专栏#xff1a;JavaScript 精粹 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 #x1f235;Function方法 与 函数式编程#x1f49d;1 call #x1f49d… 个人主页学习前端的小z 个人专栏JavaScript 精粹 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 Function方法 与 函数式编程1 call 2 apply3 柯理化函数(currying) 4 bind5 偏函数 (partial)6 通道函数(compose)6.1 柯理化与偏函数区别 Object 方法 深入1 Object.defineProperty()2 Object.entries() 3 Object.keys() 4 Object.fromEntries() 5 Object.preventExtensions() Function方法 与 函数式编程
1 call
语法call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义调用一个对象的一个方法以另一个对象替换当前对象。
说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数那么 Global 对象被用作 thisObj。 let myName goudan;let myAge 13; function showMsg(msg){return (msg ).toLowerCase();}showName(myName); // goudan这段代码很容易就能看懂在实际开发工作中我们会处理不同的数据集合这时候声明单一变量已经无法满足胃口需要通过json的形式来存储数据 let person {name:kyogre,age:13,hobby:coding}let newPerson {name:dachui,age:99,hobby:eat}function showMsg(msg){return (msg ).toLowerCase();}showMsg(person.name) // kyogreshowMsg(newPerson.name) // dachui存储数据的方式发生了改变但是我们处理数据的方式还是那么。。。古老如果业务复杂一点 function format(msg){return msg.toLowerCase();}function show(msg){return 信息的内容是 format(msg);}show(person.name) // 信息内容是kyogreshow(newPerson.name) // 信息内容是dachui显示的传递上下文对象 穿参使得业务越来越复杂这种叠加会让开发变得冗余和难以解读bug和闭包横飞 那我们看看通过this如何清晰解决问题 通常this不会指向函数自身而是调用函数的对象主体。当然我们可以强制让function自身成为对象主体这个以后咱们讨论 json本身就是对象我们是否可以这样 const person {name:kyogre,age:13,hobby:coding}const newPerson {name:dachui,age:99,hobby:eat}function format(){return this.name.toLowerCase();}问题来了不让穿参这个format中的this指向谁呢 指向调用format的对象本身,可是调用主体并不明确可能是person也可能是newPerson这时回过头看看call的定义吧调用一个对象的一个方法以另一个对象替换当前对象。 将函数内部执行上下文对象由原始对象替换为指定对象 const name 我叫window; //全局变量 非严格模式下都为 window的属性 window.name;function format(){return (this.name ).toLowerCase();}format(); //我叫window; 不要惊慌本身他就是这样window会作为调用顶级作用域链函数的对象主体这里的this默认为 window, 用person对象代替window这个默认this主体去执行format会怎么样呢 format.call(person); // kyogre format.call(newPerson);// dachuifunction show(){return 信息的内容是 format.call(this);}show.call(person); // 信息的内容是kyogre感觉自己了解了this和call的小明已经肆无忌惮的笑了起来这样他就可以从繁重的回调与参数传递中解脱了并且能够实现方法的初级模块化。 下面可以用call做一些平常的操作 function isArray(object){return Object.prototype.toString.call(object) [object Array];}// 借用Object原型上的toString方法来验证下对象是否是数组function accumulation(){return [].reduce.call(arguments,(a,b){return ab}}//让不能使用数组方法的arguments类数组集合使用借用数组的reduce方法return Array.prototype.forEach.call($$(*),(item){item.style.border 1px solid red;}
2 apply
语法func.apply(thisArg, [argsArray]) call()方法的作用和 apply() 方法类似区别就是call()方法接受的是参数列表而apply()方法接受的是一个参数数组。 const person {fullName: function(city, country) {return this.firstName this.lastName , city , country;}
}
const person1 {firstName:John,lastName: Doe
}
person.fullName.apply(person1, [Oslo, Norway]);Math.max.apply(null, [1,2,3]); // 3const arr [1,2,3];
const otherArr [3,4,5];
arr.push.apply(arr,otherArr);
console.log(arr); // [1, 2, 3, 3, 4, 5]3 柯理化函数(currying) 在数学和计算机科学中柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 function currying(fn) {const args Array.prototype.slice.call(arguments, 1);const inlay function () {if (arguments.length 0) {return fn.apply(this, args);}if(arguments.length 0 ){Array.prototype.push.apply(args, arguments);return inlay;} }return inlay;}function add() {const vals Array.prototype.slice.call(arguments);return vals.reduce((pre, val) {return pre val;});}let newAdd currying(add, 1, 2, 3);newAdd(4, 5);newAdd(6, 7)(6)(2, 3);console.log(newAdd()); //39
4 bind bind() 方法创建一个新的函数在 bind() 被调用时这个新函数的 this 被指定为 bind() 的第一个参数而其余参数将作为新函数的参数供调用时使用。 语法: function.bind(thisArg[, arg1[, arg2[, ...]]])
参数:
thisArg 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用[new](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)运算符构造绑定函数则忽略该值。当使用 bind在setTimeout中创建一个函数作为回调提供时作为thisArg传递的任何原始值都将转换为object。如果 bind 函数的参数列表为空或者thisArg是null或undefined执行作用域的 this将被视为新函数的thisArg。 arg1, arg2, … 当目标函数被调用时被预置入绑定函数的参数列表中的参数。
返回值:
返回一个原函数的拷贝并拥有指定的 **this** 值和初始参数。
const OBJ {petName: kyogre,qq: 2971411050,sayHi: function () {console.log(我是${this.petName} 很高兴认识你)}
}let sayHi OBJ.sayHi;
sayHi(); //我是undifined 很高兴认识你 ps: this非严格模式指向了window window.petName不存在let sayHi OBJ.sayHi.bind(OBJ);
sayHi(); //我是kyogre 很高兴认识你 ps:通过bind强制绑定sayHi函数内部的this指向OBJ5 偏函数 (partial) 在计算机科学中局部应用(偏函数)是指固定一个函数的一些参数然后产生另一个更小元的函数。什么是元元是指函数参数的个数比如一个带有两个参数的函数被称为二元函数。 bind() 的另一个最简单的用法是使一个函数拥有预设的初始参数。只要将这些参数如果有的话作为 bind() 的参数写在 this 后面。当绑定函数被调用时这些参数会被插入到目标函数的参数列表的开始位置传递给绑定函数的参数会跟在它们后面。 function list() {return Array.prototype.slice.call(arguments);
}function addArguments(arg1, arg2) {return arg1 arg2
}const list1 list(1, 2, 3); // [1, 2, 3]const result1 addArguments(1, 2); // 3// 创建一个函数它拥有预设参数列表。
const leadingThirtysevenList list.bind(null, 37);// 创建一个函数它拥有预设的第一个参数
const addThirtySeven addArguments.bind(null, 37); const list2 leadingThirtysevenList();
// [37]const list3 leadingThirtysevenList(1, 2, 3);
// [37, 1, 2, 3]const result2 addThirtySeven(5);
// 37 5 42 const result3 addThirtySeven(5, 10);
// 37 5 42 第二个参数被忽略
6 通道函数(compose) 按照顺序 function toUpperCase(str){return str.toUpperCase(); // 将字符串变成大写}function add(str){return str !!!; // 将字符串拼接}function split(str){return str.split(); // 将字符串拆分为数组}function reverse(arr){return arr.reverse(); // 将数组逆序}function join(arr){return arr.join(-); // 将数组按-拼接成字符串}function compose(){const args Array.prototype.slice.call(arguments); // 转换为数组使用下面的方法return function(x){return args.reduceRight(function(result, cb){return cb(result);}, x);}}const f compose(add, join, reverse, split, toUpperCase);console.log( f(cba) ); // A-B-C!!!6.1 柯理化与偏函数区别 柯里化是将一个多参数函数转换成多个单参数函数也就是将一个 n 元函数转换成 n 个一元函数。 局部应用则是固定一个函数的一个或者多个参数也就是将一个 n 元函数转换成一个 n - x 元函数。 Object 方法 深入
Object.getOwnPropertyNames()
//方法返回一个由指定对象的所有自身属性的属性名包括不可枚举属性但不包括Symbol值作为名称的属性组成的数组。Object.getPrototypeOf()
//方法返回指定对象的原型内部[[Prototype]]属性的值。Object.getOwnPropertyDescriptors()
//方法用来获取一个对象的所有自身属性的描述符。Object.getOwnPropertyDescriptor()
//方法返回指定对象上一个自有属性对应的属性描述符。自有属性指的是直接赋予该对象的属性不需要从原型链上进行查找的属性Object.assign()
//方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.create()
//方法创建一个新对象使用现有的对象来提供新创建的对象的__proto__。 请打开浏览器控制台以查看运行结果。Object.freeze()
//方法可以冻结一个对象。一个被冻结的对象再也不能被修改冻结了一个对象则不能向这个对象添加新的属性不能删除已有属性不能修改该对象已有属性的可枚举性、可配置性、可写性以及不能修改已有属性的值。此外冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。Object.isFrozen()
//方法判断一个对象是否被冻结。Object.isSealed()
//方法判断一个对象是否被密封。hasOwnProperty()
//方法会返回一个布尔值指示对象自身属性中是否具有指定的属性也就是是否有指定的键。isPrototypeOf()
//方法用于测试一个对象是否存在于另一个对象的原型链上。Object.is()
//方法判断两个值是否为同一个值。
1 Object.defineProperty() 方法会直接在一个对象上定义一个新属性或者修改一个对象的现有属性并返回此对象。 语法
Object.defineProperty(obj, prop, descriptor)
参数 obj 要定义属性的对象。 prop 要定义或修改的属性的名称或 Symbol 。 descriptor 要定义或修改的属性描述符。
返回值
被传递给函数的对象。
该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的在枚举对象属性时会被枚举到for...in 或 Object.keys 方法可以改变这些属性的值也可以删除这些属性。这个方法允许修改默认的额外选项或配置。默认情况下使用 Object.defineProperty() 添加的属性值是不可修改immutable的。对象里目前存在的属性描述符有两种主要形式数据描述符和存取描述符。数据描述符是一个具有值的属性该值可以是可写的也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一不能同时是两者。这两种描述符都是对象。它们共享以下可选键值默认值是指在使用 Object.defineProperty() 定义属性时的默认值 configurable 当且仅当该属性的 configurable 键值为 true 时该属性的描述符才能够被改变同时该属性也能从对应的对象上被删除。 默认为 false。 enumerable 当且仅当该属性的 enumerable 键值为 true 时该属性才会出现在对象的枚举属性中。 默认为 false。
数据描述符还具有以下可选键值 value 该属性对应的值。可以是任何有效的 JavaScript 值数值对象函数等。 默认为 undefined。 writable 当且仅当该属性的 writable 键值为 true 时属性的值也就是上面的 value才能被赋值运算符改变。 默认为 false。
存取描述符还具有以下可选键值 get 属性的 getter 函数如果没有 getter则为 undefined。当访问该属性时会调用此函数。执行时不传入任何参数但是会传入 this 对象由于继承关系这里的this并不一定是定义该属性的对象。该函数的返回值会被用作属性的值。 默认为 undefined。 set 属性的 setter 函数如果没有 setter则为 undefined。当属性值被修改时会调用此函数。该方法接受一个参数也就是被赋予的新值会传入赋值时的 this 对象。 默认为 undefined。
描述符默认值汇总
拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。属性值和函数的键 value、get 和 set 字段的默认值为 undefined。
描述符可拥有的键值
configurableenumerablevaluewritablegetset数据描述符可以可以可以可以不可以不可以存取描述符可以可以不可以不可以可以可以
如果一个描述符不具有 value、writable、get 和 set 中的任意一个键那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键则会产生一个异常。
记住这些选项不一定是自身属性也要考虑继承来的属性。为了确认保留这些默认值在设置之前可能要冻结 Object.prototype明确指定所有的选项或者通过 Object.create(null) 将 __proto__ 属性指向 null。
Object.defineProperties() 可以对多条属性进行修改
var obj {};
Object.defineProperties(obj, {property1: {value: true,writable: true},property2: {value: Hello,writable: false}// etc. etc.
});2 Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组其排列与使用 for...in 循环遍历该对象时返回的顺序一致区别在于 for-in 循环还会枚举原型链中的属性。 语法
Object.entries(obj)参数 obj 可以返回其可枚举属性的键值对的对象。
返回值
给定对象自身可枚举属性的键值对数组。
const object1 {a: somestring,b: 42
};for (const [key, value] of Object.entries(object1)) {console.log(${key}: ${value});
}// expected output:
// a: somestring
// b: 42
// order is not guaranteed3 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。。 语法
Object.keys(obj)参数 obj 要返回其枚举自身属性的对象。
返回值
一个表示给定对象的所有可枚举属性的字符串数组。
const arr [a, b, c];
console.log(Object.keys(arr)); // console: [0, 1, 2]// array like object
const obj { 0: a, 1: b, 2: c };
console.log(Object.keys(obj)); // console: [0, 1, 2]4 Object.fromEntries() 方法把键值对列表转换为一个对象。 语法
Object.fromEntries(iterable);参数 iterable 类似 Array 、 Map 或者其它实现了可迭代协议的可迭代对象。
返回值
一个由该迭代对象条目提供对应属性的新对象
const map new Map([ [foo, bar], [baz, 42] ]);
const obj Object.fromEntries(map);
console.log(obj); // { foo: bar, baz: 42 }5 Object.preventExtensions() 方法让一个对象变的不可扩展也就是永远不能再添加新的属性。 语法
Object.preventExtensions(obj)参数 obj 将要变得不可扩展的对象。
返回值
已经不可扩展的对象。
var obj {};
var obj2 Object.preventExtensions(obj);
obj obj2; // true// 字面量方式定义的对象默认是可扩展的.
var empty {};
Object.isExtensible(empty) // true// ...但可以改变.
Object.preventExtensions(empty);
Object.isExtensible(empty) // false// 使用Object.defineProperty方法为一个不可扩展的对象添加新属性会抛出异常.
var nonExtensible { removable: true };
Object.preventExtensions(nonExtensible);
Object.defineProperty(nonExtensible, new, { value: 8675309 }); // 抛出TypeError异常// 在严格模式中,为一个不可扩展对象的新属性赋值会抛出TypeError异常.
function fail()
{use strict;nonExtensible.newProperty FAIL; // throws a TypeError
}
fail();const map new Map([ [foo, bar], [baz, 42] ]);
const obj Object.fromEntries(map);
console.log(obj); // { foo: bar, baz: 42 }参考 : http://bclary.com/log/2004/11/07/#a-11.9.3
