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

可以查看文章右边进行导航!

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，要检查的对象或其他
【返回值】: 为数组返回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

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 值。

【返回值】: 
	如果回调函数的每一次返回(return)都为 true 值，则Array.prototype.every()返回值为 true ，否则返回值为 false。

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

// result 为 true 代表所有结果都符合要求
let result = array1.every((element) => {
    return element < 40;
});


const array2 = [60,80,18];
// result 为 false 代表数组当中有的不符合
let result = array2.every((element) => {
    return element < 40;
});

Array.prototype.filter()

【功能】: 创建一个新数组,包含通过自定义函数测试的所有元素

【语法】: 
	var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
【参数】: 
	callback
    	element 数组中当前正在处理的元素。
        index[可选] 正在处理的元素在数组中的索引。
		array[可选] 调用了 filter 的数组本身。
    thisArg 执行 callback 时，用于 this 的值。
【返回值】: 
	不改变原有数组,返回新数组,这个新数组的组成是回调函数返回结果为真的时候的正在处理的元素
【注意】: 
	item相当于是常量,只要不改变item的指向,里面的数据可以随意更改(仅限于引用数据类型)
	//可以成功
    var b  = a.filter(item => {
         //成功修改里面的每一个attrName
         item.attrName="aaaaaa"
         return true
    })
    //会失败
    var b  = a.filter(item => {
         //成功修改里面的每一个attrName
         item = {sex:'男'};
         //改变item的指向,不会成功
         return true
    })
【示例】: 
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

// 只需要长度大于6的字符串

const reulst = words.filter(function(element){
    // 如果结果大于0,则返回遍历的这个element放在result当中
    // 否则不返回
    return word.length > 6
})

console.log(result);
// 输出结果: Array ["exuberant", "destruction", "present"]

Array.prototype.some()

【功能】: some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

【语法】: 
	var newArray = arr.some(callback(element[, index[, array]])[, thisArg])
【参数】: 
	callback
    	element 数组中当前正在处理的元素。
        index[可选] 正在处理的元素在数组中的索引。
		array[可选] 调用了 some 的数组本身。
   thisArg 执行 callback 时使用的 this 值。
【返回值】:
	如果回调函数的有一次返回(return)都为 true 值，则Array.prototype.some()返回值为 true ，否则返回值为 false。
	不改变原有数组,返回布尔值
	`如果用一个空数组进行测试，在任何情况下它返回的都是false。`
【示例】: 
const array = [1, 2, 3, 9, 5];

// 检测是否至少有一个是偶数
let hasEven = array.some(function(element){
    return element%2 == 0
})

//输出结果为: true
console.log(hasEven);

Array.prototype.map()

【功能】: map()方法创建一个新数组,这个新数组由原数组中的每一个元素都调用一次提供的函数后的返回值组成

【语法】: 
	var newArray = arr.some(callback(element[, index[, array]])[, thisArg])
【参数】: 
	callback
    	element 数组中当前正在处理的元素。
        index[可选] 正在处理的元素在数组中的索引。
		array[可选] map方法调用的数组。
   thisArg 执行 callback 时使用的 this 值。
【返回值】: 
	回调函数当中return什么,返回的新数组当中的值就是什么样子的
	不改变原有数组,返回新数组
【示例】: 
const array1 = [1, 4, 9, 16];

const map1 = array1.map(function(element){
    // 遍历每一个值,每一个值*2再返回
    return element*2;
})

// 输出结果: Array [2, 8, 18, 32]
console.log(map1);

const array1 = [1, 4, 9, 16];

//如果每一次循环并不是都有return,那么没有return的item会undefined
const map1 = array1.map(function (element) {
    //只对偶数做返回映射处理
    if(element%2==0){
        return element * 2;
    }
    
})
//输出结果: [undefined, 8, undefined, 32]
console.log(map1);

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"

in语句

【功能】: A in B 用于判断A是否在B的属性上或者是原型链上(官方解释为如果指定的属性在指定的对象或其原型链中，则返回true。)

【语法】: prop in object
【参数】: 
		prop: 一个字符串类型或者 symbol 类型的属性名或者数组索引（非symbol类型将会强制转为字符串）。
		objectName: 检查它（或其原型链）是否包含具有指定名称的属性的对象。

【示例】: 
const car = { make: 'Honda', model: 'Accord', year: 1998 };

console.log('make' in car);
// 输出:  true

delete car.make;
if ('make' in car === false) {
  car.make = 'Suzuki';
}

console.log(car.make);
// 输出: "Suzuki"

Object.assign()

【功能】: Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象,会改变target!

【语法】: Object.assign(target, ...sources)
【参数】: 
		target: 目标对象(也就是其他对象的组合体)
		sources: 源对象 (融合素材)
【示例】: 
const target = { a: 11, b: 22 };
const source1 = { b: 33, c: 44 };
const source2 = { e: 55, f: 66 };
const result = Object.assign(target,source1,source2);

console.log(target);
// 输出结果	
// {a: 11, b: 33, c: 44, e: 55, f: 66}

console.log(result);
// 输出结果
// {a: 11, b: 33, c: 44, e: 55, f: 66}

//相当于将source1,source2,融合到了target

具体Object.assign可看

Object.prototype.toString.call()

• 类型转换的可以看看这个博客

【功能】: 准确判断变量的类型
		因为如果使用
        		typeof null 会输出 'object'
		顺便复习下其他的~
                1==true;//true
                ""==false;//true
                false==null;//false
                null==undefined;//true
【语法】: 
	Object.prototype.toString.call(要判断的变量)
【示例】: 
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call("abc");// "[object String]"
Object.prototype.toString.call(123);// "[object Number]"
Object.prototype.toString.call(true);// "[object Boolean]"
//输出'[object Function]'
function f1(){};Object.prototype.toString.call(f1);

array.forEach()

是不会返回值的,直接对原数组进行改变
【功能】: forEach() 方法对数组的每个元素执行一次给定的函数。
【语法】: 
	arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
【返回值】:
	不会返回值的
【参数】: 
	callback 为数组中每个元素执行的函数，该函数接收一至三个参数：
		currentValue 数组中正在处理的当前元素。
		index(可选) 数组中正在处理的当前元素的索引。
		array(可选) forEach() 方法正在操作的数组。
    thisArg(可选) 可选参数。当执行回调函数 callback 时，用作 this 的值。
    
【注意】:
	如果循环参数currentValue传入的是引用数据类型
    那么如果在回调函数当中对其进行了修改,那么是会影响到原来的值的
【示例】: 
const items = ['item1', 'item2', 'item3'];

//输出结果为
// item1
// item2
// item3
items.forEach(function(item){
  console.log(item);
});

//注意事项所说的例子
const tempItem = [
    {name:'李白',money:100},
    {name:'动感超人',money:100},
    {name:'傻瓜超人',money:100},
];
tempItem.forEach(function(item){
    item.money = item.money*2;
});
console.log(tempItem);
//输出结果
 [
    {name:'李白',money:200},
    {name:'动感超人',money:200},
    {name:'傻瓜超人',money:200},
];