常用处理数据用法es6 语法糖总结

一 循环(数组 ,集合)

 

1 forEach-----------可以遍历得到vaue和index

 

const arr = ['red', 'green', 'blue'];
arr.forEach( (element, index)=> {
console.log(element); // red green blue
console.log(index);   // 0 1 2
});

//foreach处理不能直接用 变量接收 （map可以直接接收），返回undefined.

let newData=data.forEach((item, index) => {

if (item.imgUrl) {

item.imgUrl=tools.dealLogo(item.imgUrl, 460);

}

return item;

});

 

 

要接收可以这样:::

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

if (item.imgUrl) {

item.imgUrl=tools.dealLogo(item.imgUrl, 460);

}

});

let  newData=data;

console.log(JSON.stringFy(newData));

 

 

ps: 循环默认会全部执行完毕，若要满足条件 的情况下break,可以考虑 使用 "every".

//Foreach 循环处理item的时候， 只处理某字段，其他字段不用管，还是在！

 

 

2 for...of-----------可直接拿到某条item对象

 

const arr = ['red', 'green', 'blue'];

for(let v of arr) {

console.log(v); // red green blue

}

 

 

3 for...in---------只能获得对象的键名，不能直接拿到键值

 

const arr =['a', 'b', 'c', 'd'];

for(let a in arr) {

  console.log(a); // 0 1 2 3

}

 

 

 

4 普通的for循环

 

const arr =['a', 'b', 'c', 'd'];

 

for(let i=0;i<arr.length;i++)

{

  console.log(arr[i]); // a b c d

}

 

 

 

二 Map--------处理集合列表，里面的 具体item

const list= courses.map((item,index)=> {

 

       if ((item.time <= 15 && item.time>=0)) {

           item.type = 1 //产生新的字段

      }

 

    return item

  })

 

ps: map,foreach无法终止循环， 可以用every 替代处理

oldList.every(function (item, i) {

if (item.id==add.id) {

 

temp=i;

return  false//跳出循环

}

return   true//继续循环

})

 

//map 循环处理集合item的时候，处理某字段，其他字段一样要返回，否则其他字段会丢失。

 

 

三 Filter -----------集合条件过滤

 

let netList = list.filter((item)=> item.type !=3) // 可以结合map进一步处理集合数据

 

 

 

四 slice----------------截取集合 ,前闭后开！

let  newList = list.slice(0, 4)  

 

 

五 concat----------------合并数组

•concat是将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，

返回连接好的新的数组

 

•arrayObj.concat([item1[,item2[, . . . [,itemN]]]]);

 

•如果没有参数，则表示对数组进行了一次深拷贝！

 

 

 

六 splice-----数组截取 ，替换

oldList.splice(0, 1, add);  //删除该条旧数据，并用新数据替换

oldList.splice(0, 0, add);  //不删除，强插一条

oldList.splice(0, 1);          //直接删除

 

ps :::

1 一般不用变量接收 ，直接单行使用！！！

2 0：表示位置,    1：表示个数, 后面参数表示内容(个数几个,这里就要写几个内容用,号分割)

 

 

 

七 Shift/unshift ----附加和移除 ，数组最前面的元素

•arrayObj.shift();  //移除最前一个元素并返回该元素值，数组中元素自动前移（shift，unshift针对的都是数组最前面的元素，栈形式的数据操作）

 

•arrayObj.unshift([item1[item2 [. . . [itemN]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

 

ps::

oldList.unshift(add);//这里不能用变量接收赋值(打出的会是数量）直接写单行即可。。

 

 

 

 

八 push / pop -----附加和移除 ，数组 最后面的 元素

•arrayObj.push([item1 [item2 [. . . [itemN]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度

 

•arrayObj.pop();//移除最后一个元素并返回该元素值（pop和push连在一起形成，队列形式的操作）

 

 

 

九 set ------数组添加唯一的值

似于数组但它的一大特性就是所有元素都是唯一的，没有重复。

我们可以利用这一唯一特性进行数组的去重工作。

 

 

1.向Set中添加元素。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log('added:', set1)

 

结果：

added: Set { 1, 2, 3 }

 

 

 

2.从Set中删除元素。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('deleted:', set1)

 

结果：

deleted: Set { 2, 3 }

 

 

 

3.判断某元素是否存在。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('has(1):', set1.has(1))
console.log('has(2):', set1.has(2))

 

结果：

has(1): false
has(2): true

 

 

 

4.清除所有元素。

 

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.clear()
console.log('cleared:', set1)

 

结果：

 

cleared: Set {}

 

 

 

Set和Array互转

 

1.数组转Set

 

let set2 = new Set([4,5,6])
console.log('array to set 1:', set2)

let set3 = new Set(new Array(7, 8, 9))
console.log('array to set 2:', set3)

 

结果：

 

array to set 2: Set { 4, 5, 6 }
array to set 3: Set { 7, 8, 9 }

 

 

 

2.Set转数组(set数组是一个不包含重复元素,无序的元素的集合)

 

let set4 = new Set([4, 5, 6])
console.log('set to array 1:', [...set4])
console.log('set to array 2:', Array.from(set4))

 

结果：

 

set to array 1: [ 4, 5, 6 ]
set to array 2: [ 4, 5, 6 ]

 

 

 

 

 

十 解构函数 (比较方便处理模块化的逻辑)

 

•用法1

  Const {字段1，字段2，字段3,...other} =item;

 

 

•用法1  作为方法的参数使用 ，传递对象/数组 ，可 赋默认值！

 

 

 

十一   其他

 

1   函数方法没有多态性，同名方法后面的会覆盖前面的。

     ------类似的js 都是单线程，异步处理。(多个模块同时请求某方法都是会先后执行完毕)

 

2   方法里面参数可以传递{……}对象, [……] 集合，可以给参数设定默认值( 没有传递就是用默认值 )

    queryUnreadAritcleUsers(chapterId, pageNo, limit=100)

    类似这样传参，不传就是默认100。

 

3   判断空集合--[] es5就支持

if (Object.prototype.toString.call(data) === '[object Array]') {

if (!data.length) {

// 成功无数据

resolve({ errorCode: 0, data: { success: true } });

return；

}

}

4 空对象---{} es5就支持

if (Object.prototype.toString.call(data) === '[object Object]') {

if (JSON.stringify(data) === JSON.stringify({})) {

// 成功无数据

resolve({ errorCode: 0, data: { success: true } });

return;

}

}

 

 

十二   对象合并覆盖

Object.assign(target,…sources)
当target和sources对象中有相同的key时，在target对象中的值会被后面source对象的值覆盖。

target对象自身会被修改

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 },

如果想要避免o1被改变，需要这样写：

var obj = Object.assign({},o1,o2,o3);//给一个空对象作为target，这样改变的是空对象
console.log(obj);// { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1}

 

 

 

十三

Math.floor()和parseInt()  都是向下取整。  

 

 

 

十四  search判断字符串是否包含某字符内容。

 

String(currentName).search(item) !== -1

 

 

 

 

最后附es6 地址：：：：

http://es6.ruanyifeng.com/