0
点赞
收藏
分享

微信扫一扫

项目练习当中用到的函数但是不熟悉(持续更新)

Ewall_熊猫 2022-05-03 阅读 34
javascript前端

文章目录

arrayObject.reduce(callback)

【功能】: 求和
【参数】: callback参数
	1. total(若为赋值,则默认为0)
	2. currentItem
	3. currentIndex
	4. arr(数组所属数组对象)
【返回值】:根据callback的返回值决定total的值
【示例】: 
var sum = result.reduce(function(prev, cur) {
    console.log(prev)    // 0
    console.log(cur)       // {name:'小明',score:88}
    return cur.score + prev;
}, 0);
console.log('总数是' + sum)

delete

【功能】: 删除对象的某一个属性
【参数】: 无
【返回值】: 删除成功返回true,否则返回false(如果是删除对象不存在的某一个属性,那么返回为true)
【示例】: 
const Employee = {
  firstname: '李',
  lastname: '白'
};

console.log(Employee.firstname);
// 输出结果:  "李"

delete Employee.firstname;

console.log(Employee.firstname);
// 输出结果:  undefined

debugger

【功能】: 调用任何可用的调试功能，例如设置断点。 如果没有调试功能可用，则此语句不起作用。
【参数】: 无
【返回值】: 无
【示例】:
function potentiallyBuggyCode() {
    debugger;//浏览器在这里暂停，可用于调试
}

Array.isArray（obj）

【功能】: 检查传入过来的obj是否是一个数组（注意，伪数组不是数组！）
【参数】: obj，要检查的对象或其他
【返回值】: 为数组返回true，否则返回false
【示例】:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var isArray1 = Array.isArray(fruits);//返回true
var isArray2 = document.getElementsByClassName("demo1");//伪数组，返回false

instanceOf

【语法】: obj instanceOf Constructor
【功能】: 检测某一个对象是否是某一构造函数的实例化对象（实际上官方解释是判断这一个对象的原型链是否出现在这个构造函数的prototype上）
【参数】: 如上
【返回值】: true/false
【示例】: 
//创建一个猫的构造函数
function Cat(name,sex) {
  this.name = name;
  this.sex = sex;
}
const pet = new Cat('小白', '公');

console.log(pet instanceof Cat);
// 输出结果:  true

console.log(pet instanceof Object);
// 输出结果:  true

原型链图（instanceOf根据原型链判断的）

Array.prototype.includes()

【功能】: 用来判断一个数组是否包含一个指定的值(可以用于判断数组是否存在NaN)
【参数】: 要判断的是否存在的值
【返回值】: 包含则返回true,否则返回false
【示例】: 
const array1 = [1, 2, 3,NaN];

console.log(array1.includes(2));
// 输出: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// 输出: true

console.log(pets.includes('at'));
// 输出: false

console.log(pets.includes(NaN));
// 输出: true

Array.prototype.indexOf

【语法】: Array.prototype.indexOf(要查找的字符)
【功能】: Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。(不管是否存在NaN,均返回-1)
【参数】: 要查找的值
【返回值】: 查找到返回给定元素的第一个索引,不存在返回-1
【示例】: 
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison',NaN];

console.log(beasts.indexOf('bison'));
// 输出: 1

// 设置开始查找索引为2
console.log(beasts.indexOf('bison', 2));
// 输出: 4

console.log(beasts.indexOf('giraffe'));
// 输出: -1

console.log(beasts.indexOf(NaN));
// 输出: -1

Promise.all([])

escape(str)，unescape(str) (均废弃)

【功能】: 
	escape(): (全局对象属性)方法生成新的由十六进制转义序列替换的字符串,特色字符如 @*_+-./ 这7个将被排除在外。
	unescape(): 方法计算生成一个新的字符串，其中的十六进制转义序列将被其表示的字符替换。
【参数】: 
	escape(str): str => 待编码的字符串
	unescape(str): str => 待编码的字符串
【返回值】: 
	
【示例】: 
/*  escape  */
escape("abc123");     // "abc123"
escape("äöü");        // "%E4%F6%FC"
// 排除字符
escape("@*_+-./");    // "@*_+-./"

encodeURI

【语法】: encodeURI(要编码的字符串)
【功能】: 传入的字符串作为 URI 进行编码。
【参数】: 传入要编码的字符串
【返回值】: 返回编码后的字符串
【注意】: 对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的   ， / ? : @ & = + $ # 
【示例】: 
encodeURI("http://www.baidu.com?name=libai&sex=男");
//返回'http://www.baidu.com?name=libai&sex=%E7%94%B7'

decodeURI

【语法】: decodeURI(要解码的字符串)
【功能】: 传入的字符串作为 URI 进行解码。
【参数】: 传入要解码的字符串
【返回值】: 返回解码后的字符串
【示例】: 
decodeURI('http://www.baidu.com?name=libai&sex=%E7%94%B7');
//返回'http://www.baidu.com?name=libai&sex=男'

encodeURIComponent

【语法】: encodeURIComponent(要编码的字符串)
【功能】: 传入的字符串作为 URI 进行编码。
【参数】: 传入要编码的字符串
【返回值】: 返回编码后的字符串
【注意】: 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
【示例】: 
encodeURIComponent("http://www.baidu.com?name=libai&sex=男");
//返回'http%3A%2F%2Fwww.baidu.com%3Fname%3Dlibai%26sex%3D%E7%94%B7'

decodeURIComponent

【语法】: decodeURIComponent(要解码的字符串)
【功能】: 传入的字符串作为 URI 进行解码。
【参数】: 传入要解码的字符串
【返回值】: 返回解码后的字符串
【示例】: 
decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dlibai%26sex%3D%E7%94%B7");
//返回'http://www.baidu.com?name=libai&sex=男'

en/decodeURIComponet和en/decodeURI区别

两者最主要的区别是`encodeURI`不会编译有些`httpURL`中的预留符号，而`encodeURIComponent`会编译，参考下图：

contextMenus

【功能】: 创建右键菜单或者自定义右键菜单
【示例】: 
略：
  • 示例网站
    • jQuery的插件 jQuery-contextMenu可以实现自定义右键菜单
    • jQuery-contextMenu插件使用(csdn)
    • contextMenus的doc说明

onContentMenu

【功能】: oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。可以实现控制右键菜单显示！
【示例】: 
//实现禁用浏览器右键菜单
document.documentElement.oncontextmenu = function () {
    //alert('请不要点击鼠标右键！');
    return false;
}

Array.prototype.every

【功能】: 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

【参数】: arr.every(callback(element[, index[, array]])[, thisArg])
		callback用来测试每个元素的函数，它可以接收三个参数：
        		element 用于测试的当前值
                index 用于测试的当前值的索引
                array 调用every的当前数组
        thisArg 执行 callback 时使用的 this 值。

【返回值】: 如果回调函数的每一次返回都为 true 值，返回 true ，否则返回 false。

【示例】: 
const array1 = [1, 30, 39, 29, 10, 13];

let result = array1.every((element) => {
    return element < 40;
});
// result 为 true

localStorage.getItem

【功能】: 获取localStorage当中存储的指定的key
【参数】: localStorage.getItem(要获取的key)
【返回值】: 获取不到指定的key,返回null 不是返回undefined,获取成功返回存储在localStorage当中的key的值

String.prototype.startsWith

【功能】: 用于判断当前字符串是否是给定参数字符串的开头

【参数】: String.prototype.startsWith(searchString[,position ]) 
		searchString 要搜索的子字符串。
		position: 在 str 中搜索 searchString 的开始位置，默认值为 0。
【返回值】: 如果在字符串的开头找到了给定的字符则返回true；否则返回false。

【示例】: 
var str = "To be, or not to be, that is the question.";
alert(str.startsWith("To be"));         // true
alert(str.startsWith("not to be"));     // false
alert(str.startsWith("not to be", 10)); // true

for…in

【功能】: for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。(可遍历对象) 并且不应该用于迭代一个关注索引顺序的 Array。

【语法】: for (variable in object)
  			statement
【参数】: 
		variable 在每次迭代时，variable会被赋值为不同的属性名。
		object 非Symbol类型的可枚举属性被迭代的对象。
		
【示例】: 
var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for … of

【功能】: for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

【语法】: for (variable in iterable)
  			statement
【参数】: 
		variable 在每次迭代时，variable会被赋值为不同的属性名。
		iterable 被迭代枚举其属性的对象。

【示例】: 
//迭代Array
let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

//迭代String
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"
举报

相关推荐

常用但是不熟悉

目标对象字符串微信Java编程语言

不熟悉的编程语言，项目如何开展？

javaxmlc++编程语言

java流程控制不熟悉的知识点

java开发语言蓝桥杯

如何在不熟悉的领域建立自己的思考框架？ | 底层逻辑

运营方法论学习方法基础知识語錄集正能量语录集每天进步一点点经营

26k star！Linux不熟悉，快用这个帮助你

linuxgithub运维开源yyds干货盘点

Linux 命令合集 - 谁再说不熟悉 Linux 命令，就把这个给他

linux运维ssh

看完这篇，对flex布局还不熟悉，那就来找我（flex布局最全详解）

取值页面布局固定宽度前端开发

收集项目中用到的python库

当前目录pythonPython后端开发

项目中用到的金钱的处理方法

金钱处理方法JavaScript前端开发yyds干货盘点

刷题用到的非常有用的函数c++（持续更新）

机器学习线性回归人工智能
0 条评论