/*对比:
1、map速度比foreach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined
3、map因为返回数组所以可以链式操作，foreach不能
4, map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错*/
/*方法一:*/
var arr1 = [1, 2, 3, 4, 5, 6]
for(var i = 0, len = arr1.lengthi <leni++) { //优化性能处理
console.log(arr1[i], 'for遍历出来的数据')//每个item 1,2,3,4,5,6
}
/*方法二:*/
/*forEach方法中的function回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身*/
var arr2 = [{
name: 'bob',
age: 20
},
{
name: 'tom',
age: 18
},
{
name: 'sos',
age: 19
}
]
arr2.forEach((val, i) =>{ //没有返回值的，对原来数组也没有影响
console.log(val, '遍历出来的每个obj')
})
/*方法三:*/
var fruits = [1, 2, 3, 4, 5, 6, 7, 8]
let arr = fruits.map((item, index) =>{
console.log(item, 'top')
console.log(index, 'top')
return item * 8
})
console.log(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"
var a = fruits.indexOf("Apple", 4)
console.log(a)
//for 和 forEach都是普通循环，map 带返回值并且返回一个新数组；
/*
*当前元素的值,当期元素的索引值,当期元素属于的数组对象
语法:array.map(function(currentValue,index,arr), thisValue)
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
* */
/*方法四:*/
/*兼容写法：
不管是forEach还是map在IE6 - 8 下都不兼容（ 不兼容的情况下在Array.prototype上没有这两个方法）, 那么需要我们自己封装一个都兼容的方法：*/
/**
* forEach遍历数组
* @param callback [function] 回调函数；
* @param context [object] 上下文；
*/
Array.prototype.myForEach = function myForEach(callback, context) {
context = context || window
if('forEach' in Array.prototye) {
this.forEach(callback, context)
return
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0, len = this.lengthi <leni++) {
callback &&callback.call(context, this[i], i, this)
}
}
/**
* map遍历数组
* @param callback [function] 回调函数；
* @param context [object] 上下文；
*/
Array.prototype.myMap = function myMap(callback, context) {
context = context || window
if('map' in Array.prototye) {
return this.map(callback, context)
}
//IE6-8下自己编写回调函数执行的逻辑var newAry = []
for(var i = 0, len = this.lengthi <leni++) {
if(typeof callback === 'function') {
var val = callback.call(context, this[i], i, this)
newAry[newAry.length] = val
}
}
return newAry
}
</script>
方法/步骤
新建一个html文件，命名为test.html，用于讲解JavaScript如何比较两个数组的内容是否相同。
请点击输入图片描述
在js标签内，使用“[]”创建两个数组，分别保存在变量a和变量b中。
请点击输入图片描述
在js标签内，再创建一个变量temp，初始值为1，用于记录数组是否相同。当它为1时，表示两个数组相同，当它为0时，表示两个数组为不相同。
请点击输入图片描述
在js标签内，首先通过length属性分别获得两个数组的长度，使用if语句判断两个数组的长度是否相等，如果不相等，temp变量为0。
请点击输入图片描述
在js标签内，如果两个数组长度相等，则使用for循环遍历两个数组内的每一个元素，通过if语句逐个判断元素是否相等，若有数组元素不相等，temp变量为0。
请点击输入图片描述
在js标签内，使用if判断temp值，当temp为1时，使用alert()方法提示“两个数组相同”，否则，提示“两个数组不相同”。
请点击输入图片描述
在浏览器打开test.html文件，查看实现的效果。
请点击输入图片描述
第一种：如果不考虑IE8的兼容性完全可以使用Foreach ,此方法求出arr1 减去 arr2的差集，
arr1 = [1,2,3,4]arr2 = [1,2,3]
var subSet = function (arr1, arr2) {
var set2 = new Set(arr2)
var subset = []
arr1.forEach(function(val, index) {
if (!set2.has(val)) {
subset.push(val)
}
})
return subset
}
//结果等于4
第二种是使用JQuery 的merge和grep的配合使用求差集，兼容IE8 、chrome等主流游览器
var alpha = [1, 2, 3, 4],beta = [1，2，3]
$.arrayIntersect = function(a, b)
{
return $.merge($.grep(a, function(i)
{
return $.inArray(i, b) == -1
}) , $.grep(b, function(i)
{
return $.inArray(i, a) == -1
})
)
}
window.console && console.log( $.arrayIntersect(alpha, beta) )
//结果等于4
第三种使用ES6 的set 方法类似与foreach方法
var subSet = function(arr1, arr2) {var set1 = new Set(arr1)
var set2 = new Set(arr2)
var subset = []
for (let item of set1) {
if (!set2.has(item)) {
subset.push(item)
}
}
return subset
}
