JavaScript项目中常用数据处理方法（必备）

1. 对数组的处理

1.1 对数组的处理，变异方法（会改变原始数组）

1.push()

向数组的末尾增加一个或多个元素,可以通过for循环来达到增加多个元素的效果。

2.pop()

删除并返回数组的最后一个元素

let element = arr.pop() //返回最后一个元素

arr //删除最后一个元素后的数组

3.shift()

删除并返回数组的第一个元素

如果数组为空，那么shift()方法不进行任何操作，并返回一个undefined（ps:可以用该方法来判断一个未知长度的数组是否为空）

4.unshift()

向数组的开头增加一个或多个元素

5.splice()

对数组的内容进行删除，增加，替换。

arr.splice(index,howmany,item1,item2...)

index是执行操作的位置，必须

howmany是删除的个数，为0时就是不删除只增加

    //样例（通过循环来删除数组里几个特定的元素）    let params = ["方案1", "方案2", "方案3", "方案4", "方案5678等等"];    for (let i = 0, len = params.length; i < len; i++) {      if (        params[i].methodName === "方案1" ||        params[i].methodName === "方案2" ||        params[i].methodName === "方案3"      ) {        params.splice(i, 1);        i--; //因为删除后，数组长度会减1，所以 i 也要减1，才能对应新的数组      }    }

6.sort()

用于对数组进行排序，默认升序。

如果不传入参数，默认以字符编码为基准排序，也可以传入一个排序函数进行排序。

    //例子：    let array = [1, 2, 10, 18, 3, 95, 2, 5];    let arrayNew = array.sort(      //升序      function(a, b) {        return a - b;      }    );    let arrayNew = array.sort(      //降序      function(a, b) {        return b - a;      }    );

7.reverse()

array.reverse()

用于颠倒数组中的元素，但是不会创建新的数组，会改变原来的数组

1.2 对数组的处理，非变异方法（不会改变原始数组，而是创建一个新的数组，所以需要创建一个新数组去接收）

1.filter()

对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

例子：

    let array = [1, 2, 5, 6];    let arrayNew = array.filter(item => item > 2); //如果item大于2，则返回该item到新数组中去    console.log(arrayNew); //5,6

2.concat()

用于连接两个或者多个数组

3.slice()

从已有的数组中返回选定的元素

array.slice(start,end) //start是开始的位置，必须

4.map()

map方法会按照原始数组元素的顺序依次按照方法处理元素并且不会改变原来的数组，也不会对空数组进行检测 （所以要将返回的数组赋值于一个新定义的数组）

例子：

//map有返回值

    let array = [1,2,4,5]

    let arr = array.map(function(value) {

      return value * 2;

    });

    console.log(arr) //[2,4,8,10]

5.forEach()

forEach也是一种对数组的遍历，与map不同的是，forEach没有返回值；

let array = [1,2,4,5]

    let arr = array.forEach((item)=> {

      return item * 2;

    });

    console.log(arr) //undefined

    let arr2 = [];

    array.forEach((item,index)=>{

      arr2.push(item*2)

    })

    console.log(arr2) //[2,4,8,10]

6.join()

array.join(separator) // separator= "." 分隔符，默认为,

将所有数组元素拼接成字符串

注意：不能处理对象数组const arr1 = [1,2,3,4,5];const arr2 = [{name:'张三'},{age:24}];console.log(arr1.join("")) // 12345console.log(arr2.join("")) // [object Object][object Object]

使用场景：map与push和join配合，可以将多个数组，合并成一个字符串，生成模板字符串

7.reduce()

接收一个函数作为累加器（可做对数组元素的求和或者求积），数组中的每个值（从左到右）开始缩减，最终计算为一个值

例子：

let arry = [1, 25, 85, 36];

    let arryNew = arry.reduce(function(total, currentValue, currentIndex, arr) {

      return total * currentValue;

    });

    console.log(arryNew);//76500

total: 必需。初始值, 或者计算结束后的返回值。

currentValue 必需。当前元素

currentIndex 可选。当前元素的索引

arr 可选。当前元素所属的数组对象。

8.toString()

将数组作为字符串返回

注意：使用toString()方法将数组转为字符串时，只能转化数值数组或字符串数组。不能用在对象数组上

const arr1 = [1,2,3,4,5];

const arr2 = [{name:'张三'},{age:24}];

console.log(arr1.toString()) // 1,2,3,4,5

console.log(arr2.toString()) // [object Object],[object Object]

1.3 对数组的数字的检测

1.every()

对数组中的每一项运行给定函数，全部满足条件则返回true

let arr = array.every(value => value > 18)

2.some()

对数组中的每一项运行给定函数，如果有一项满足条件则返回true

3.indexOf()

返回第一个与给定参数相等的数组元素的索引，没有的话返回-1

例子：

let arr = [1,2,3,56,57]

arr.indexOf(1)

4.lastIndexOf()

返回最后一个与给定参数相等的数组元素的索引，没有的话返回-1

5. includes()

检测数组是否包含某个数

[5,6,7,8,24,25,26,27,28,29,30,31,32,33].includes(val)

存在返回true，不存在返回false

6.find()

找出第一个符合条件的数组成员，如果没有符合条件的则返回undefined

[1, 4, -5, 10].find((n) => n < 0)

// -5

7.findIndex()

返回第一个符合条件的数组成员的位置，如果没有符合条件的，则返回-1

2.对字符串的处理

1.indexOf()

可以返回指定字符串值或数字在字符串或数组中首次(第一个)出现的位置，有的话会出现对应的下标，没有的话会返回 -1。

2.split()

把一个字符分割成字符串数组 。非变异方法，不会改变原字符串，所以需创建变量去接收。

array.split(separator，howmany) //separator 必须，字符串或正则表达式，从该参数指定的位置分割 howmany 可选 分割的长度 默认不考虑长度 ","

3.substr()

可在字符串中抽取从start下标开始的指定书目的字符

stringObject.substr(start,length)

start（必需）：抽取的字符串的起始下标

length（可选）：字串中的字符数，必修是数值

4.replace()

replace("条","行")可将字符串中特定的内容转为自己想要的

但是注意要把修改后的值重新赋值给字段，这样才能通过该字段取得想要的值

aaa = aaa.replace("false", "true");

5.parseInt()

解析一个字符串，返回一个整数 parseInt(msg.totals);

6.parseFloat()

解析一个字符串，返回一个浮点数

7.+

将字符串类型转为Number类型

例子：const obj={

a:'12'

}

console.log(+obj.a) //12(Number类型)

8.toString()

将一个逻辑值转为一个字符串，或者将数值转为一个字符串;

3.处理对象

1.Object.assign()

将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象（属性相同的情况，后面的源对象的属性值会覆盖前面的属性值）

const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

const source1 = {b : 5 , d : 4};

Object.assign(target, source,source1);

console.log(target); // { a: 1, b: 5, c: 5, d: 4 }

2.Object.create()

将参数对象的属性和方法都加到新对象的原型上去

例子：

var obj = {

a:1,

aa(){

console.log(`this ${this.a} aa ${this.b}`)

}

};

var obj2 = Object.create(obj)

obj2.b = 3;

obj2.aa();

console.log(obj2)

//this 1 aa 3

b: 3

__proto__:

a: 1

aa: ƒ aa()

3.Object.defineProperty()

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

4.Object.entries()

返回给定对象自身可枚举属性的[key, value]数组（与for...of一起使用）

5.Object.freeze()

冻结对象：其他代码不能删除或更改任何属性

6.Object.isFrozen()

判断对象是否已经冻结

7.Object.keys()

返回对象可枚举属性（返回一个数组）

8.Object.values()

返回对象可枚举的值（返回一个数组）

9.delete

删除对象某个属性

delete a.age;

在vue中，如果删除对象的某个属性也要触发视图更新的话，Vue.delete(target,propertyName/index)

4.校验

1.typeof

用typeof可以来判别数据类型，但只能区分基本类型：

number、string、undefined、boolean、object。

2.Object.prototype.toString.call()

判断某个对象之属于哪种内置类型（可比type多五种类型检测）

分为null、string、boolean、number、undefined、array、function、object、date、math

例子：Object.prototype.toString.call("abc");// "[object String]"

5.定时器

setTimeout()与setInterval()属于回调函数，this指向window，所以需要使用箭头函数使this指向上下文

1.setTimeout()

在指定的毫秒数后调用函数或计算表达式，只执行一次

2.setInterval()

按照指定周期来调用函数，会不停的调用。可返回一个ID（数字），然后通过调用clearInterval( ID ) 方法来取消定时器，或者当窗口关闭的时候，定时器也会自己关闭

var ID = setInterval( ()=>{ this.aaa() },777 )

aaa(){ } //写具体的方法

附：

使用二分法查询数组中的元素

this.binarySearch = function (item,array) {

var low = 0, height= array.length - 1,mid,element;

while (low <= height){

mid = Math.floor((low+height)/2);

element = array[mid];

if(element < item){

low = mid + 1 ;

}else if(element > item){

height = mid - 1;

}else {

return mid;

}

}

return -1;

};

let arr = [1,5,8,6,5,4,8,5,2,3,1];

let arrNew = arr.sort(

function (a,b) {

return a-b;

}

);

console.log('arrNew',arrNew);

console.log(this.binarySearch(1,arrNew));

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342