数组函数some、every、find、filter、map、forEach有什么区别

some

1、不创建新数组

2、不改变原数组

3、输出的是判断为true则马上跳出循环并return成true

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//计算对象数组中每个电脑的操作系统是否可用,
//大于16位操作系统表示可用,否则不可用

var computers = [
    { name: "Apple", ram: 8 },
    { name: "IBM", ram: 4 },
    { name: "Acer", ram: 32 },
];
var some = computers.some(function (computer) {
    return computer.ram > 16;
});
console.log(some);//true
console.log(computers);//[{ name: "Apple", ram: 8 },{ name: "IBM", ram: 4 },{ name: "Acer", ram: 32 }]

every(与some相反)

1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作

var computers = [
    { name: "Apple", ram: 8 },
    { name: "IBM", ram: 4 },
    { name: "Acer", ram: 32 },
];
var every = computers.every(function (computer) {
    return computer.ram > 16;
});
console.log(every);//false

find

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个对象数组,找到符合条件的对象
var users = [
    { name: 'Jill' },
    { name: 'Alex', id: 1 },
    { name: 'Bill' },
    { name: 'Alex' },
];
var user = users.find(function (user) {
    return user.name === 'Alex';
});
console.log(user);//[{ name: 'Alex', id: 1 }]

//假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
var posts = [
    { id: 1, title: "Node.js" },
    { id: 2, title: "React.js" },
];
var comment = { postId: 1, content: 'hello' };
function postForComment(posts, comment) {
    return posts.find(function (post) {
        return post.id === comment.postId
    })
};
console.log(postForComment(posts,comment));//{ id: 1, title: "Node.js" }

filter

1、创建新数组

2、不改变原数组

3、输出的是判断为true的数组元素形成的新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
var products = [
    { name: "cucumber", type: "vegetable" },
    { name: "banana", type: "fruit" },
    { name: "celery", type: "vegetable" },
    { name: "orange", type: "fruit" },
];
var filtered = products.filter(function (product) {
    return product.type === "vegetable"
});
console.log(filtered);//[{ name: "celery", type: "vegetable" }, { name: "celery", type: "vegetable" }]

//假定有一个对象数组(A),过滤掉不满足以下条件的对象
//条件:蔬菜 数量大于0 价格小于10
var products = [
    { name: "cucumber", type: "vegetable", quantity: 0, price: 1 },
    { name: "banana", type: "fruit", quantity: 10, price: 16 },
    { name: "celery", type: "vegetable", quantity: 30, price: 8 },
    { name: "orange", type: "fruit", quantity: 3, price: 6 },
];
products = products.filter(function (product) {
    return product.type === 'vegetable'
        && product.quantity > 0
        && product.price < 10
});
console.log(products);//[{ name: "celery", type: "vegetable", quantity: 30, price: 8 }]
console.log(products)//[{ name: "cucumber", type: "vegetable" },{ name: "banana", type: "fruit" },{ name: "celery", type: "vegetable" },{ name: "orange", type: "fruit" }]

#map

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function (number) {
    return number * 2;
})
console.log(doubled);//[2,4,6,8,10]

//假定有一个对象数组(A),将A数组中的对象某个属性的值存储到B数组中
var cars = [
    { model: 'Buick', price: 'cheap' },
    { model: 'BMW', price: 'expensive' },
];
var prices = cars.map(function (car) {
    return car.price;
});
console.log(prices)//(2) ["cheap", "expensive"]

reduce

1、创建新数组

2、不改变原数组

3、输出的是return叠加什么就输出什么 新数组

4、使用return操作输出,会循环数组每一项,并在回调函数中操作

5、回调函数参数

pre(第一次为数组第一项,之后为上一操作的结果)
next(数组的下一项)
index(next项的序列)
arr(数组本身)
回调函数后的改变第一项参数。(不影响原数组)

//计算数组中所有值的总共
var numbers = [10, 20, 30];
var sum = 0;
//reduce第二个参数是sum的值,与上面的sum无关
var sumValue = numbers.reduce(function (sum, number) {
    return sum += number;
}, 0);
console.log(sumValue);//60

//使用reduce能同时实现map和filter,reduce能遍历数组两遍
const numberss=[10,20,30,40];
const doubleedOver50=numberss.reduce((finalList,num)=>{
    num=num*2;
    if(num>50){
        finalList.push(num);
    }
    return finalList;
},[]);
console.log(doubleedOver50);//[60,80]

//将数组中对象的某个属性抽离到另外一个数组中
var primaryColors = [
    { color: 'red' },
    { color: 'yellow' },
    { color: 'blue' },
];
var color = primaryColors.reduce(function (previous, primaryColor) {
    previous.push(primaryColor.color);
    return previous;
}, []);
console.log(color);//["red", "yellow", "blue"]


// 判断字符串括号是否对称,遇到(时加1,遇到)时减1
function balancedParens(string) {
    return !string.split("").reduce(function (previous, char) {
        if (previous < 0) { return previous };//若")"比"("先出现
        if (char == "(") { return ++previous };
        if (char == ")") { return --previous };
        return previous;
    }, 0);
};
console.log(balancedParens(")((()))"));//false

forEach

遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环
不支持return操作输出,return只用于控制循环是否跳出当前循环
因此难操作成新数组,新值

var colors = ['red', 'blue', 'green']
colors.forEach(function (color) {
    console.log(color);//red blue green
})

原 html javascript 图片上传

<input type="hidden" id="boyHead" name="boyHead" value="" />
<input type="file" id="file_boyHead" style="display:none;" />
<div id="studentHead" style="padding-top:150px;letter-spacing:2px;font-size:16px; font-weight:bold; border: 1px #d3d3d3 solid; width: 155px; height:190px; text-align: center;">学生免冠1寸近照</div>
<script type="text/javascript" >
   $(function(){

      $("#studentHead").click(function(){
         $("#file_boyHead").click();
      });
      $("#file_boyHead").change(function(){
         var objUrl = getObjectURL(this.files[0]) ;
         if (objUrl) {
            $("#studentHead").css("background-image","url("+objUrl+")");
            createImg(objUrl,155,190,'boyHead');
         }
      });
   });

   //获取图片的Base64
   function getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
      return dataURL;
   }

   //赋值图片的base64
   function createImg(url,width,height,targetId) {
      var image = new Image();
      image.crossOrigin = '';
      image.src = url;
      image.width = width;
      image.height = height;
      image.onload = function(){
         var base64 = getBase64Image(image);
         document.getElementById(targetId).value = base64;
      }
      return image;
   }

   //获取图片地址(预览)
   function getObjectURL(file) {
      var url = null ;
      if (window.createObjectURL!=undefined) { // basic
         url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined) { // mozilla(firefox)
         url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined) { // webkit or chrome
         url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
   }
</script>

(转)JS之on与addEventListener的使用与两者的不同

JS之ON和ADDEVENTLISTENER的使用与不同

一.首先介绍两者的用法:
1.on的用法:以onclick为例
第一种:
“`javascript
obj.onclick = function(){
//do something..
}

第二种:
```javascript
    obj.onclick= fn;
    function fn (){
    //do something...
    }

第三种:当函数fn有参数的情况下使用
匿名函数来传参:

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

不能够这样写:
错误写法:obj.onclick= fn(param):
因为这样写函数会立即执行,不会等待点击触发,
特别注意一下

2.addEventListener的用法:
形式:
addEventListener(event,funtionName,useCapture)
参数:
event:事件的类型如 “click”
funtionName:方法名
useCapture(可选):布尔值,指定事件是否在捕获或冒泡阶段执行。
true – 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
写法:
第一种:

obj.addEventListener("click",function(){
//do something
}));

第二种,没参数可以直接写函数名
obj.addEventListener(“click”,fn,fasle));
function fn(){
//do something..
}
第三种:函数有参数时需要使用匿名函数来传递参数

obj.addEventListener("click",function(){fn(parm)},false);

二.两者的区别
1.on事件会被后面的on的事件覆盖
以onclick为例:

//obj是一个dom对象,下同
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

最终会只有弹框输出:
hello world too

2.addEventListener 则不会覆盖。

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

这样会连续输出:
hello world
hello world too

三.addEventListener注意事项:
特别说明addEventListener不被
IE9以下兼容,IE9以下用使用
addEvent()
obj.addEvent(event,funtionName);
参数:
event:事件类型(需要写成“onclick”前面加on,这个与addEventListener不同)
funtionName:方法名(要参数是也是需要使用匿名函数来传参)

四.事件集合:
1.鼠标事件:
click(单击)
dbclick(双击)
mousedown(鼠标按下)
mouseout(鼠标移走)
mouseover(鼠标移入)
mouseup(鼠标弹起)
mousemove(鼠标移动)
2.键盘事件:
keydown(键按下)
keypress(按键)
keyup(键起来)
3.HTML事件:
load(加载页面)
unload(卸载离开页面)
change(改变内容)
scroll(滚动)
focus(获得焦点)
blur(失去焦点)
五.总结:
onXXX与addEventListener都是为dom元素添加事件监听,使其在事件发生后执行相应的代码,操作。有了它们我们实现了页面与用户交互。

作者:Ry-yuan

本文是个人总结得出。
转载请标明出处,本文地址:
http://www.cnblogs.com/Ry-yuan/p/6865632.html