JS中常用的方法

Array

new Set()

用来对数组进行去重。

var arr = [1,2,3,3,4,5,5,5];

console.log(new Set(arr));//{1, 2, 3, 4, 5}

const a = Array.from(new Set(arr));console.log(a);//[1, 2, 3, 4, 5]

sort()

对数组元素进行排序(改变原数组)

var aa = [1,3,4,2,5,7,9,6];console.log(aa.sort());//[1, 2, 3, 4, 5, 6, 7, 9]

reverse()

反转数组中的元素(改变原数组)。

var aa = [1,3,4,2,5,7,9,6];console.log(aa.reverse());// [9, 7, 6, 5, 4, 3, 2, 1]

delete

删除一个数组成员,会形成空位,并不会影响length属性(改变原数组),同样适用于对象。

var aa = [1,3,4,2,5,7,9,6];delete aa[0]; console.log(aa); // [empty, 3, 4, 2, 5, 7, 9, 6]

aa.length //8

const obj = {name: ‘pboebe‘,age: ‘23‘,sex: ‘女‘};delete obj.sex;console.log(obj);//{name: "pboebe", age: "23"}

shift()

把数组的第一个元素从其中删除,并返回第一个元素的值(改变原数组)。

var aa = [1,3,4,2,5,7,9,6]; aa.shift()// 1; console.log(aa); //[3, 4, 2, 5, 7, 9, 6]

unshift()

向数组的起始处添加一个或多个元素,并返回新的长度(改变原数组)。

push()

在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度(改变原数组)。

valueOf()

返回数组本身。

toString()

可把值转换成字符串。

var aa= [3,4,4,5,4,6,5,7];
console.log(aa.toString());//3,4,4,5,4,6,5,7

concat()

在原始数据尾部添加另外数据组成新数据(字符串适用)。

var aa1 = [3,4,5],aa2 = [6,7]; console.log(aa1.concat(aa2));//[3, 4, 5, 6, 7]

const x = ‘abc‘;const y = ‘def‘;const z = x.concat(y);console.log(y);//"abcdef"

join()

以参数作为分隔符,将所有参数组成一个字符串返回(一般默认逗号隔开)。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.join(‘-‘)); // 3-4-4-5-4-6-5-7

slice(start, end)

用于提取原来数组的一部分,会返回一个提取的新数组,原数组不变(字符串适用,不包括end)。

const arr = [3,4,4,5,4,6,5,7];

const a = arr.slice(2, 5);console.log(a);//[4, 5, 4]

const x = ‘abcdefgh‘;const y = x.slice(3, 6);console.log(y);//def

splice()

用于删除原数组的一部分,并且可以在删除的位置添加新的数组成员,返回值是被删除的数组元素。(改变原数组)

splice(t, v, s)t:被删除元素的起始位置;v:被删除元素个数;s:s以及后面的元素为被插入的新元素。

const arr = [3,4,4,5,4,6,5,7];
const a = arr.splice(3, 2, 12); // [5, 4]
console.log(arr);// [3, 4, 4, 12, 6, 5, 7]

map()

依次遍历数组成员,根据遍历结果返回一个新数组。(map方法同样适用于字符串,但是不能直接调用,需要通过函数的call方法,间接使用,或者先将字符串川转为数组,再使用)(不会改变原始数组)。

const arr = [3,4,4,5,4,6,5,7];arr.map(item => item*2); //[6, 8, 8, 24, 12, 10, 14]

forEach()

跟map方法类似,遍历数组,区别是无返回值。

const arr3 = [3,4,4,5,4,6,5,7];arr3.forEach(item => {item=item*2;console.log(item);}) //6 8 8 10 8 12 10 14

for in()

map方法类似,遍历对象或者数组。

但值得注意的是for in循环返回的值都是数据结构的键值名。 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。

对象:const obj1 = {a: 123, b: 12, c: 2 };for(objitem in obj1){console.log(objitem+‘:‘+obj1[objitem])} //a:123  b:12  c:2

数组:

const arr = [3,4,4,5];
for(let a in arr) {
console.log(a+‘:‘+arr[a])
}//0:3 1:4 2:4 3:5

filter()

一个过滤方法,参数是一个函数,所有的数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。(不会改变原始数组)。

const arr8 = [3,4,4,5,4,6,5,7];
const a = arr8.filter(item => item % 3 > 1);
console.log(a);//[5, 5]

some()& every()

这两个方法类似于“断言”(assert),用来判断数组成员是否符合某种条件。

some方法是只要有一个数组成员的返回值为true,则返回true,否则false;

every方法是需要每一个返回值为true,才能返回true,否则为false;

const arr10 = [3,4,4,5,4,6,5,7];

arr10.some(function(item,index,arr){console.log(‘item:‘+item+‘,index:‘+index+‘,arr:‘+arr);return item >3;})

//item:3,index:0,arr:3,4,4,5,4,6,5,7

//item:4,index:1,arr:3,4,4,5,4,6,5,7

//true

arr10.every(function(item,index,arr){console.log(‘item:‘+item+‘,index:‘+index+‘,arr:‘+arr);return item >3;})

//item:3,index:0,arr:3,4,4,5,4,6,5,7

//false

reduce()

依次处理数组的每个成员,最终累计成一个值。

格式:

reduce(a, b, x, y)

a:必填,累计变量;b:必填,当前变量;x: 可选,当前位置; y:可选,原数组。

const arr = [3,4,4,5,4,6,5,7];

方法1:const b = arr.reduce((p,v)=>{return p+v}); //38

方法2:const a = arr.reduce((pre, cur) => (sum= pre+cur, sum));console.log(a);

//高级用法(举个数组去重和数组扁平化栗子)
const b = arr.reduce((pre, cur) => {
    if(!pre.includes(cur)) {
        return pre.concat(cur)
    } else {
        return pre
    }
}, [])
// [3, 4, 5, 6, 7]

const arrs = [[2,3,2], [3,4,5]]
const c = arr.reduce((pre, cur) => {
    return pre.concat(cur)
}, [])
// [3, 4, 4, 5, 4, 6, 5, 7]

reduceRight()

reduce方法使用方式相同,区别在于reduceRight方法从右到左执行(例子略过)

indexOf()

返回给定元素在数组中的第一次出现的位置,如果没有则返回-1(同样适用于字符串)。

lastIndexOf()

返回给定元素在数组中最后一次出现的位置,没有返回-1(同样适用于字符串)。

groupBy()

把集合的元素按照key归类,key由传入的参数返回。

const arr = [
                {name: ‘小孙‘, age: 18, score: 60, weight: 60},
                {name: ‘小王‘, age: 19, score: 70, weight: 55},
                {name: ‘小李‘, age: 18, score: 60, weight: 70},
                {name: ‘小刘‘, age: 20, score: 70, weight: 65},
                {name: ‘小赵‘, age: 18, score: 60, weight: 60},
                {name: ‘小钱‘, age: 19, score: 70, weight: 55},
                {name: ‘小周‘, age: 20, score: 60, weight: 50},
        ];
const example = (data, key) => {
            return data.reduce(function(prev, cur) {
                (prev[cur[key]] = prev[cur[key]] || []).push(cur);
                return prev;
            }, {});
        };
console.log(example(arr, ‘age‘));

// object: {18: Array(3), 19: Array(2), 20: Array(2)}
  18: Array(3)
    0: {name: "小孙", age: 18, score: 60, weight: 60}
    1: {name: "小李", age: 18, score: 60, weight: 70}
    2: {name: "小赵", age: 18, score: 60, weight: 60}
  19: Array(2)
    0: {name: "小王", age: 19, score: 70, weight: 55}
    1: {name: "小钱", age: 19, score: 70, weight: 55}
  20: Array(2)
    0: {name: "小刘", age: 20, score: 70, weight: 65}
    1: {name: "小周", age: 20, score: 60, weight: 50}
 

shuffle()

用洗牌算法随机打乱一个集合。

const arr = [1,2,3,4,5,6,7,8,9,10];
const shuffle = ([...arr]) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr;
};
console.log(shuffle(arr))
// [10, 9, 7, 5, 6, 4, 1, 2, 8, 3]

flatten()

简写为flat(),接收一个数组,无论这个数组里嵌套了多少个数组,flatten最后都会把其变成一个一维数组(扁平化)。

const arr = [[1,2,3],[4,5,[6,7]]];
const a = arr.flat(3);
console.log(a);// [1, 2, 3, 4, 5, 6, 7]

Array.isArray()

用来判断是不是数据是不是一个数组,返回值为true或false。

const arr = [3,4,4,5,4,6,5,7];
console.log(Array.isArray(arr))//true

原文地址:https://www.cnblogs.com/maoyizhimi/p/12607017.html

时间: 2024-10-09 18:10:27

JS中常用的方法的相关文章

图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法

有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有6个常用的浏览器窗体属性(由于offsetWidth/Height在不同浏览器下表现有出入,故不在本章讨论): document.documentElement.clientWidth document.documentElement.clientHeight document.documentEl

js中常用追加元素的几种方法:append,appendTo,after,before,insertAfter,insertBefore,appendChild

js中常用追加元素的几种方法,点击下面每个按钮,即可查看效果 我是第一个子元素 我是第二个子元素 append appendTo prepend prependTo after before appendChild insertAfter insertBefore

Js中常用的字符串,数组,函数扩展

由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展,一来可以练练手,二来也锻炼下自己的代码能力.由于代码里面的注释自认为已经非常详细,所以就直接贴代码了. 1. 字符串扩展: ;(function() { var method, stringExtends = { /** * 删除字符串开始和结尾的空白 * @returns {string} */ stri

基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的地方或者是描述不足的地方,望大家批评指正,下面是我给我”参考答案“,也只是仅供参考: 1.JavaScript运行在html中,引用有几种方式? 我知道的方法有3种: 第一种:外部引用远程JavaScript文件,如<script type="text/javascript" src

笔记-[6]-js中事件绑定方法的总结

js中的两种对象事件绑定方法: 1:常用的如:div.onclick=function(){...}; 2:通过系统方法绑定事件: 非IE:addEventListener('事件名[不加on]',function(){},false[或者true]) IE:attachEvent('事件名[加on]',function(){}); 通过系统方法绑定事件可以让对象可以绑定相同的事件并且执行不同的操作,如果使用第一种方法绑定多个相同的事件,最后一个事件会覆盖前面所有的事件. 在addEventLi

php学习笔记(JS中的常见方法)

JS中的常见方法: 1.日期时间函数(需要用变量调用): var b = new Date(); //获取当前时间 b.getTime() //获取时间戳 b.getFullYear() //获取年份 b.getMonth()+1; //获取月份 b.getDate() //获取天 b.getHours() //获取小时 b.getMinutes() //获取分钟 b.getSeconds() //获取秒数 b.getDay() //获取星期几 b.getMilliseconds() //获取毫

C语言中常用计时方法总结

转自:http://blog.csdn.net/fz_ywj/article/details/8109368 C语言中常用计时方法总结 1. time() 头文件:time.h 函数原型:time_t time(time_t * timer) 功能:返回以格林尼治时间(GMT)为标准,从1970年1月1日00:00:00到现在的此时此刻所经过的秒数. 用time()函数结合其他函数(如:localtime.gmtime.asctime.ctime)可以获得当前系统时间或是标准时间. 用difft

String对象中常用的方法

String对象中常用的方法 1.charCodeAt方法返回一个整数,代表指定位置字符的Unicode编码.strObj.charCodeAt(index)说明:index将被处理字符的从零开始计数的编号.有效值为0到字符串长度减1的数字.如果指定位置没有字符,将返回NaN.例如:      var  str = "ABC";      str.charCodeAt(0);结果:652.fromCharCode方法从一些Unicode字符串中返回一个字符串.String.fromCh

js中使用eval()方法将字符串转换成日期格式、并获取指定时间的日期

1.在js中eval()方法将字符串格式数据转换成日期格式 function getDate(strDate) {         //strDate为需要转换成日期格式的字符串         var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,                 function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');