一 循环(数组 ,集合)

 
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 地址::::
 

常用处理数据用法es6 语法糖总结的更多相关文章

  1. ES6 语法糖

    重新认识ES6中的语法糖:https://segmentfault.com/a/1190000010159725

  2. es6语法糖

    ES6为一些已有的功能提供了非破坏性更新,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些,称之为语法糖. 对象属性的简洁表示法 声明的对象中包含若干属性,其属性值由变量表示,且变量名和属 ...

  3. ES6语法糖集锦

    sublime3安装Es6插件 javascriptNext,然后安装即可 Java​Script​Next - ES6 Syntax()高亮插件 -------------------------- ...

  4. ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖

    主要讲的内容 时间充裕的话就讲,模板字面量 默认参数值 首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...

  5. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

  6. 常用的ES6语法

    1. let.const 和 block 作用域 let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var: var a = 2; { let a = 3; console ...

  7. 详解es6 class语法糖中constructor方法和super的作用

    大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...

  8. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  9. ES6之对象的语法糖

    本文介绍下ES6中对象的一些拓展功能. 这三个语法糖在实际的项目开发中经常会见到.

随机推荐

  1. centos6上安装jenkins

    一.安装jdk 1.下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  2. python 基础_列表的其他操作 4

    一.查找某个元素在数组中出现的次数 ,count的运用 a = ['a','b','c','c','c','a'] print(a.count('c')) 二.把一个元素插入到另一个元素的末尾,ext ...

  3. C#的委托与Java的自定义接口的异曲同工的同步操作

    C#的委托(以WinForm为例) 在子窗体(ChildFrm)中定义一个委托 this.CaptureListener(callback);//子窗体触发委托事件,以告诉调用的窗体 /// < ...

  4. 成功解决在Python文件上右键菜单无“Edit with IDLE”选项

    我电脑是Win7旗舰版,之前电脑上安装的是Python2.6版本的,前两天为了体验一下Microsoft Excel与Python之间互操作, 下载并安装了DataNitro,在安装的时候脑残的安装了 ...

  5. android的消息处理机制(图文+源码分析)—Looper/Handler/Message[转]

    from:http://www.jb51.net/article/33514.htm 作为一个大三的预备程序员,我学习android的一大乐趣是可以通过源码学习google大牛们的设计思想.andro ...

  6. maven依赖管理

    maven依赖管理 1.依赖范围   (依赖相当于java中的import  是否需要导入别的jar包) 使用控制依赖与三种classpath(编译期,测试时期,运行时期)的关系 complie    ...

  7. Curl工具的使用

      Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景,因此这里研究下如何在windows下执行curl命令. 工具下载 在官网处下载工具包:http:// ...

  8. AngularJS 杂项知识点

    1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...

  9. Java学习--数组与方法

    1. public class MethodDemo01{ public static void main(String args[]){ printInfo() ; // 调用printInfo() ...

  10. Java-动态代理技术

    1.程序中的代理 为具有相同接口的目标类的各个方法,添加一些系统功能,如日志,异常处理,计算方法运行的 时间,事务管理等等,都可以交给另一个类去实现这些功能,该类称为代理类. 注意:为了让代理类共享目 ...