一、 js 数组字符串常用方法

1、数组转换为字符串

使用 arr.join()

let arr=[1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.join()   // "1,2,3,4,5,6,7,8,9"

2、字符串转为数组

使用 str.split(’’)

let   str='123456789'
str.split()  // ["1", "2", "3", "4", "5", "6", "6", "7"]

3、数组截取元素

使用 arr.splice(0,1) / 第一个参数起始位置 第二个参数 需要截取的位数 原数组会改变

let arr=[1, 2, 3, 4, 5, 6, 7, 8, 9]   // 需要截取7,8 
arr.splice(6,2)  // [1, 2, 3, 4, 5, 6, 9]

4、字符串截取

使用 str.substring(0,1) 第一个参数起始位置索引 第二个参数 需要截取的参数索引 原字符串不会改变

let  str='123456789'  //需要截取2,3   
str.substring(1,3) 

二、 js 数组常用操作方法

1、es6 filter()

（1）判断数组中是否存在某个元素

var newarr = [{ num: 1, val: 'ceshi', flag: 'aa' },{ num: 2, val: 'ceshi2', flag: 'aa2'  }
]
console.log(newarr.filter(item => item.num===2 ))

（2）掉空数组空字符串、undefined、null

var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)  
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)// 最后 ["1", "2", "3.jpg"]

（3）去掉数组中不符合项 （filter、find、findIndex、some、every）

var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40)  
console.log(newArr) 
//2、或者是find方法：参数n代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。//返回找到的那一项，find只查出第一个符合条件的结果，如果没有找到返回undefined（这是与filter的区别）[1, 4, -5, 10].find((n) => n < 0)    // -5//3、findIndex方法：find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
[1, 4, -5, 10].findIndex((value,index,arr) => value < 0)  // 2
// 3、返回Boolean 判断数组中是否有满足callback函数的元素（一旦有符合的元素立即返回true，所以可能不会遍历每一个元素）,如果没有找到返回false
let newArr = arr.some((item, index)=>{console.log(item) // 1,3,5return item>3
})
console.log(newArr) // true
// 4、返回Boolean 判断数组中每一个元素是否满足callback函数（只有所有的元素都满足时才返回true，只要有不满足的元素就立即终止遍历并返回false）
let newArr = arr.every((item, index)=>{console.log(item) // 1return item>3
})
console.log(newArr) // false

（4）过滤不符合项（filter）

 var arr = ['10','12','23','44','42']var newArr = arr.filter(item => item.indexOf('2')<0)console.log(newArr)//  ["10", "44"]//数组filter后，返回过滤后的新数组//1、有一个对象数组A,获取数组中指定类型的对象放到B数组中var products = [{name:"cucumber",type:"vegetable"},{name:"banana",type:"fruit"},{name:"celery",type:"vegetable"},{name:"orange",type:"fruit"}]; var filtered = products.filter((product)=>{return product.type === "vegetable";})console.log(filtered)  //[{name:"cucumber",type:"vegetable"},{name:"celery",type:"vegetable"}]// 2、有两个数组(A,B),根据A中id值,过滤掉B数组不等于A中id的数据var post = {id:4,title:"Javascript"};
var comments = [{postId:4,content:"Angular4"},{postId:2,content:"Vue.js"},{postId:3,content:"Node.js"},{postId:4,content:"React.js"}   ];function commentsForPost(post,comments){return comments.filter(function(comment){return comment.postId === post.id;})}console.log(commentsForPost(post,comments));  //[ {postId:4,content:"Angular4"},{postId:4,content:"React.js"}]

（5）filter数组去重

 var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

（6）获取数组中指定字段（元素）（map、filter）

1 var users = [2   {name: "张含韵", "email": "zhang@email.com"},3   {name: "江一燕",   "email": "jiang@email.com"},4   {name: "李小璐",  "email": "li@email.com"}5 ];6 //获取所有人的email7 var emails=users.map(user=>user.email) 8 console.log(emails.join(',')) //"zhang@email.com",  "jiang@email.com", "li@email.com"9 //获取指定人的email
10 var liEmail=emails.filter(email=>/^li/.test(email))
11 console.log(liEmail.join('')) //li@email.com

（7）从数组获取某个字段重新生成数组（map）

var building=[{name:'the Great Wall',location:'BeiJing'},{name:'Eiffel Tower',location:'Paris '}
]
var citys=building.map(item=>{return item.location
})
console.log(citys)  //["BeiJing", "Paris "]

（8）判断数组是否包含某个元素（includes）

let arr = [1,3,5,6,3]
1、console.log(arr.includes(3)); // true
2、(arr, target) => {return arr.includes(target);
}
//findIndex
3、(arr, target) => {return arr.findIndex(el => el === target) >= 0;
}

2、数组去重

（1）、Array.filter() + indexOf

方法思路：将两个数组拼接为一个数组，然后使用 ES6 中的 Array.filter() 遍历数组，并结合 indexOf 来排除重复项

function distinct(a, b) {let arr = a.concat(b);return arr.filter((item, index)=> {return arr.indexOf(item) === index})
}

（2）、双重 for 循环

方法思路：外层循环遍历元素，内层循环检查是否重复，当有重复值的时候，可以使用 push()，也可以使用 splice()

function distinct(a, b) {let arr = a.concat(b);for (let i=0, len=arr.length; i<len; i++) {for (let j=i+1; j<len; j++) {if (arr[i] == arr[j]) {arr.splice(j, 1);// splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一len--;j--;}}}return arr
}

（3）、for…of + includes()

方法思路：双重for循环的升级版，外层用 for…of 语句替换 for 循环，把内层循环改为 includes()。先创建一个空数组，当 includes() 返回 false 的时候，就将该元素 push 到空数组中 。类似的，还可以用 indexOf() 来替代 includes()

function distinct(a, b) {let arr = a.concat(b)let result = []for (let i of arr) {!result.includes(i) && result.push(i)}return result
}

（4）、Array.sort()

方法思路：首先使用 sort() 将数组进行排序，然后比较相邻元素是否相等，从而排除重复项

function distinct(a, b) {let arr = a.concat(b)arr = arr.sort()let result = [arr[0]]for (let i=1, len=arr.length; i<len; i++) {arr[i] !== arr[i-1] && result.push(arr[i])}return result
}

（5）、new Set()

ES6 新增了 Set 这一数据结构，类似于数组，但Set 的成员具有唯一性

function distinct(a, b) {return Array.from(new Set([...a, ...b]))
}

（6）、new Set()

方法思路：首先创建一个空对象，然后用 for 循环遍历，利用对象的属性不会重复这一特性，校验数组元素是否重复

function distinct(a, b) {let arr = a.concat(b)let result = []let obj = {}for (let i of arr) {if (!obj[i]) {result.push(i)obj[i] = 1}}return result
}

测试结果一目了然，几种方法的性能 6>5>4>3>1>2

2、数组对象去重

（1）、Array.filter() + indexOf

reduce()方法接收一个回调函数作为第一个参数，回调函数又接受四个参数，分别是：
1.previousValue => 初始值或上一次回调函数叠加的值；
2. currentValue => 本次回调（循环）将要执行的值；
3. index =>“currentValue”的索引值；
4. arr => 数组本身；

reduce()方法返回的是最后一次调用回调函数的返回值；

 let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue, currentValue) => {return previousValue + currentValue; //返回的是最后一次调用回调函数的值，15+6；
})
log(arr); // 21
//上面代码的最终结果就是1+2+3+4+5+6 = 21；

需要注意的是，如果设置了initialValue的值，第一次执行回调函数的previousValue的值等于initialValue，此时查看当前索引（index）为0；但如果不设置initialValue的值，previousValue的值为数组的第一项，并且索引值（index）为1；也就是说，不设置初始值的话reduce()方法实际是从第二次循环开始的！

let log = console.log.bind(console);
let person = [{id: 0, name: "小明"},{id: 1, name: "小张"},{id: 2, name: "小李"},{id: 3, name: "小孙"},{id: 1, name: "小周"},{id: 2, name: "小陈"},   
];
let obj = {};
person = person.reduce((cur,next) => {obj[next.id] ? "" : obj[next.id] = true && cur.push(next);return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
log(person);

redecu()除了累加和去重外，功能还有很多，比如可以扁平化多维数组——

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {return a.concat(b);
}, []); // [0,1,2,3,4,5]

3、数组排序 sort a-b正向 b-a 反向

正向

var arr=[3,5,5,80,4]
var arr=arr.sort(function  (a,b) {
return a-b;
})
console.log(arr) //[3, 4, 5, 5, 80];

反向

var arr=[3,5,5,80,4]
var arr=arr.sort(function  (a,b) {
return b-a;
})
console.log(arr) //[80, 5, 5, 4, 3]