常用js函数方法积累

常用js函数积累

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

文章目录

常用js函数积累
- map() 方法
- reduce()
- filter() 函数
- find() 函数
- every() 函数
- some()函数
- includes() 函数

map() 方法

语法
arr.map(callback,thisValue)
解析
- callback 函数
  执行数组中每个值的函数，包含3个参数：
  1. item 数组元素的每一项
  2. index （当前元素在数组中的索引）
  3. array （调用数组）
- thisValue
  thisValue 可以修改循环时候的 this 指向，默认是全局对象。
- 注意事项
  a. map 生成一个新数组，当你不打算使用返回的新数组请用 forEach 或者 for-of 替代;使用 map 的时候，需要在回调函数中写上 return 。
  b. map() 不会改变原始数组，但是可以在回调中改变。
  c. 空数组不会调用 map 。
常用方法

/*** 1、做数据处理，返回新数组* */
let arr = [{name:'1',age:1},{name:'2',age:2}]
let ages = arr.map((item)=>{return item.age
})
console.log(ages)
// 输出 [1, 2]/*** 使用 map 重新格式化数组中的对象* */
const kvArray = [{ key: 1, value: 10 },{ key: 2, value: 20 },{ key: 3, value: 30 },
];
const reformattedArray = kvArray.map(({ key, value}) => ({ [key]: value }));
// reformattedArray 现在是 [{1: 10}, {2: 20}, {3: 30}],// kvArray 依然是：
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]/*** 2、* [1] 两数之和 (leetcode)* 输入：nums = [2,7,11,15], target = 9* 输出：[0,1]* 解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。* @param {number[]} nums* @param {number} target* @return {number[]}* map.has (该方法主要用来检查Map中是否存在具有制定键的元素)* Map.set()方法 为Map对象添加一个指定键(key)和值(value)的新元素* Map.get(key)方法 用来获取一个Map对象指定的元素，返回的是键所对应的值，如果不存在则会返回undefined* */
var sum = function(nums, target) {let map = new Mapfor(let i=0;i<nums.length;i++){let x=target-nums[i];if(map.has(x)){return([map.get(x),i])}map.set(nums[i],i)}
};

reduce()

语法：
arr.reduce(callback,[initialValue])
解析
- callback 函数
  执行数组中每个值的函数，包含四个参数
  1. previousValue 简写为 pre （上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。）
  2. currentValue 简写为 cur（数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]）
  3. index （数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始）
  4. array （调用 reduce 的数组）
- initialValue
  初始化值: 作为第一次调用 callback 的第一个参数
常用方法

/** 数组求和 */
let arr = [1,2,3,4]
let sum = arr.reduce((pre,cur,i,arr)=>{consloe.log(pre,cur,i)return pre + cur
},0)
consloe.log(sum)
// 输出 10
let arr2 = [{name:'1',age:1},{name:'2',age:2}]
let ages = arr2.reduce((pre,cur,i,arr)=>{consloe.log(pre,cur,i)return cur.age + pre
},0)
consloe.log(ages)
// 输出 3/** 去重 */
let arr3 = [1,2,3,4,4,1]
let newArr = arr3.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])
console.log(newArr);
// 输出 [1, 2, 3, 4]/** 二维数组转一维数组 */
let arr4 = [[0, 1], [2, 3], [4, 5]]
let newArr2 = arr4.reduce((pre,cur)=>{return pre.concat(cur)
},[])
console.log(newArr2);
// 输出 [0, 1, 2, 3, 4, 5]/** 多维转一 */
let arr5 = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr3 = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr3(cur):cur),[])
}
console.log(newArr(arr5));
// 输出  [0, 1, 2, 3, 4, 5, 6, 7]/** 计算数组中每个元素出现的次数 */
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{if(cur in pre){pre[cur]++}else{pre[cur] = 1 }return pre
},{})
console.log(nameNum);
//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}/*** 按属性对 object 分类* */
let people = [{ name: 'Alice', age: 21 },{ name: 'Max', age: 20 },{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {return objectArray.reduce(function (acc, obj) {let key = obj[property]if (!acc[key]) {acc[key] = []}acc[key].push(obj)return acc}, {})
}
let groupedPeople = groupBy(people, 'age')
// groupedPeople is:
// {//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

l1 = [1,0,3]
l2 = [0,2,1]
// 301+120 = 421
// [4,2,1]
function sun(l1.l2){var a,b;for (let i = l1.length-1; i < 0; i--) {a += String(l1[i]);}for (let i = l2.length-1; i < 0; i--) {b += String(l2[i]);}console.log("a: ",a)console.log("b: ",b)let sum = Number(a)+Number(b)console.log("sum: ",sum)
}

filter() 函数

filter用于对数组进行过滤。它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

语法： arr.filter(callback,thisValue)
解析
- callback 函数
  执行数组中每个值的函数，包含3个参数
  1. currentValue 简写为 cur（数组中当前元素的值）
  2. index （当前元素在数组中的索引）
  3. array （调用 filter 的数组）
- thisValue
  thisValue 可以修改循环时候的 this 指向，默认是全局对象。
- 注意点
  a. filter()不会对空数组进行检测、不会改变原始数组
常用方法

// 过滤
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {return num > 5;
});
console.log(res);
// [6, 7, 8, 9, 10]/*** 判断数组里面是否存在某个值：* */var newarr = [14, 17, 18, 32, 33, 16, 40];newarr.filter(item => item.num==14); //判断数组中是否有14console.log(newarr.filter(item => item.num==14)) //true/*** 去掉数组中的空字符串(不能包含空格)、undefined、null* */
var array = ['1','2',undefined, '3.png',undefined, 'a','',null,' ']
var newArray = array.filter(item => item)
console.log(newArray) //返回结果:['1','2', '3.png', 'a',' ']//去掉数组中的空字符串的另一种方式
var array = ['1','2',undefined, '3.png', '', undefined, 'a', '  '];
let newArray=array.filter(i=>i && i.trim());
// 注意：IE9以下的版本没有这个trim()方法
console.log(newArray);   //返回结果:['1','2', '3.png', 'a']/*** 把对象数组a中的某个属性值取出来存到数组b中* */
var arrayA = [{name:"a",type:"letter"},{name:”1”,type:"digital"},{name:”c”,type:"letter"},{name:”2”,type:"digital"},];
var arrayB = arrayA.filter(function(array){   //对arrayA数组对象过滤如果array.type === "letter"就return出去, 再用一个变量接收return array.type === "letter"
});
console.log(arrayB);
//输出结果：[{name:"a",type:"letter"},{name:”c”,type:"letter"},]/*** filter()和find()结合使用，实现从数组中查找想要的元素* */projectDetail() {if (this.value) {return this.sourcedata.filter((item) => {      return [item.ProjectName, item.ProjectNewNo].find(//通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素            (si) => {return si.indexOf(this.value) != -1;  //根据是否输入来匹配           }          );        });      }     return this.sourcedata; //最后返回想要的元素的数组
}

find() 函数

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法： arr.find(callback,thisValue)
解析
- callback 函数
  执行数组中每个值的函数，包含3个参数
  1.currentValue （数组中当前元素的值）
  2.index （当前元素在数组中的索引）
  3.array （调用 find 的数组）
- thisValue
  执行回调时用作 this 的对象。
- 注意点
  a. find 方法不会改变数组。
常用方法


/*** 用对象的属性查找数组里的对象：* */
const inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5}
];
const result = inventory.find(({ name }) => name === 'cherries');
console.log(result) // { name: 'cherries', quantity: 5 }/*** filter()和find()结合使用，实现从数组中查找想要的元素* */projectDetail() {if (this.value) {return this.sourcedata.filter((item) => {      return [item.ProjectName, item.ProjectNewNo].find(//通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素            (si) => {return si.indexOf(this.value) != -1;  //根据是否输入来匹配           }          );        });      }     return this.sourcedata; //最后返回想要的元素的数组
}

every() 函数

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
备注：若收到一个空数组，此方法在任何情况下都会返回 true。

语法： arr.every(callback,thisArg)
解析
- callback 函数
  执行数组中每个值的函数，包含3个参数
  1. element （数组中当前元素的值）
  2. index （当前元素在数组中的索引）
  3. array （调用 every 的当前数组）
- thisArg
  执行 callback 时使用的 this 值。。
- 注意点
  a. every 不会改变原数组。
  b. every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后那些被删除的元素或从来未被赋值的元素将不会被访问到。
  c. every 和数学中的"所有"类似，当所有的元素都符合条件才会返回 true。正因如此，若传入一个空数组，无论如何都会返回 true。
常用方法

/*** 检测所有数组元素的大小* */
function isBigEnough(element, index, array) {return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
// 箭头函数
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

some()函数

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
如果用一个空数组进行测试，在任何情况下它返回的都是false。

语法： arr.some(callback,thisArg)
解析
- callback 函数
  执行数组中每个值的函数，包含3个参数
  1. element （数组中当前元素的值）
  2. index （当前元素在数组中的索引）
  3. array （调用 some 的当前数组）
- thisArg
  执行 callback 时使用的 this 值。。
- 注意点
  a. some 不会改变原数组。
  b. some 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 some 之后那些被删除的元素或从来未被赋值的元素将不会被访问到。
  c. 如果用一个空数组进行测试，在任何情况下它返回的都是false。
常用方法

/*** 测试数组元素的值* */
function isBiggerThan10(element, index, array) {return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
// 箭头函数
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true/*** 判断数组元素中是否存在某个值* */
var fruits = ['apple', 'banana', 'mango', 'guava'];
function checkAvailability(arr, val) {return arr.some(function(arrVal) {return val === arrVal;});
}
// 箭头函数
function checkAvailability1(arr, val) {return arr.some(arrVal => val === arrVal);
}
checkAvailability(fruits, 'kela');   // false
checkAvailability1(fruits, 'banana'); // true/*** 将任意值转换为布尔类型* */
var TRUTHY_VALUES = [true, 'true', 1];
function getBoolean(value) {'use strict';if (typeof value === 'string') {value = value.toLowerCase().trim();}return TRUTHY_VALUES.some(function(t) {return t === value;});
}
getBoolean(false);   // false
getBoolean('false'); // false
getBoolean(1);       // true
getBoolean('true');  // true

includes() 函数

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
使用 includes() 比较字符串和字符时是区分大小写的.

语法：
includes(searchElement)
includes(searchElement, fromIndex)
解析
- searchElement: 需要查找的元素值。
- fromIndex (可选值)
  从fromIndex 索引处开始查找 searchElement。
  如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。
  默认为 0。
- 注意点
  a. 0 的值将全部视为相等，与符号无关（即 -0 与 0 和 +0 相等），但 false 不被认为与 0 相等。
  b. 如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组。
  c. 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
常用方法

// 如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   // false
arr.includes('c', 100); // false
//  如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
arr.includes('a', -100); // true
arr.includes('a', -2); // falsevar str = "I love JavaScript.";
var word = str.includes("javaScript"); // true/*** 作为通用方法的 includes()* includes() 方法有意设计为通用方法。它不要求this值是数组对象，所以它可以被用于其他类型的对象 (比如类数组对象)* */
(function() {console.log([].includes.call(arguments, 'a')); // trueconsole.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

未完···

常用js函数方法积累相关推荐

【JS教程】100+常用JS函数（方法）
为什么80%的码农都做不了架构师?>>> 100+常用JS函数(方法) 1. document.write("");为输出语句 2. JS中的注释为// ...
api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
让你瞬间提高工作效率的常用js函数汇总
让你瞬间提高工作效率的常用js函数汇总(持续更新) 前言本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下: 常用的正则校验常用的设备检测方式常用的日期时间函 ...
jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在www.21kaiyun.com的紫微斗数星座在线排盘开发中会比较常用的,仅供大家学习和参考. 事件处理 re ...
100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为// 3.传 ...
java easing_jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在www.2JavaScript jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法 ...
JS函数方法Call Apply Bind运用
JS 函数非继承的call和apply方法同:call & apply 主要是用于扩展this指向,降低this作用域与函数之间的耦合度: 区别:传参差异 function.call(thi ...
js如何提高for循环的效率_让你瞬间提高工作效率的常用js函数汇总
前言本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下: 常用的正则校验常用的设备检测方式常用的日期时间函数跨端事件处理 js移动端适配方案 xss预防方式 ...
简单常用JS函数集合大全107个
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
c#调用js脚本报错_C#后台调用前台JS函数方法
总结了公司其他人的一些C#后台调用前台的方法: 方法一: 假设前台页面的JS脚本标签中有如下函数: function A() { alert("hello word!"); } 那 ...