版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
判断关键字是否在对象中存在
var obj = {
name:"sad"
};
console.log("name" in obj);
Reduce 用法
统计数据中重复的元素的个数
<script>
var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15];
var sum = arr.reduce(function(prev,next) {
/*如果next在prev中*/
/*console.log(prev);*/
if(next in prev){
prev[next]++;
}else{
/*这么做就是向prev中追加新的统计元素*/
prev[next] = 1;
}
return prev;
/*这里要有个花括号，初始化prev*/
},{});
console.log(sum);
/*这里面会有key 值的排序，并不是reduce处理的，而是对象拍的序
* key值如果是数字的话，obj会自己排序*/
</script>
加和
var grade = [
{name:"zhangsan1",grade:60},
{name:"zhangsan2",grade:70},
{name:"zhangsan3",grade:80},
{name:"zhangsan4",grade:90},
];
var sum = grade.reduce(function (previousValue, currentValue) {
/*注意这里赋值给prev*/
return previousValue + currentValue.grade;
},0);
console.log(sum);
去重
测试去重的时候，漏敲了几行代码，导致老是提示错误，尝试打印 arr1 和 arr2 中发现途中 arr2 会变成 undefined，我猜测这个 reduce 一定是有某种机制在里面的，问老师先。
<script>
var arr1 = [1,2,3,1,23,1,2,3,1,2,3];
var arr2 = arr1.reduce(function (previousValue, currentValue) {
/*indexOf可以是数组，字符串*/
if(previousValue.indexOf(currentValue) == -1){
return previousValue.concat(currentValue);
}else{
/*必须要有这个返回值，不然你的arr2会变成undefined*/
return previousValue;
}
},[]);
console.log(arr2);
</script>
测试如下
筛选过滤 Filter
总结一下，这个可以根据筛选条件来提取你想要的数据
<script>
/*filter 过滤
return 为 true 会保留
为 false 会过滤掉*/
var grade = [
{name:"zhangsan1",grade:60},
{name:"zhangsan2",grade:50},
{name:"zhangsan3",grade:40},
{name:"zhangsan4",grade:70},
{name:"zhangsan5",grade:80},
];
/*过滤器*/
var arr1 = grade.filter(function (value, index, array) {
return value.grade >= 60;
/*return value.name == 'zhangsan1';*/
});
console.log(arr1);
</script>
画板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="1111" height="666" style="border: 4px silver solid">
</canvas>
</body>
<script>
var can = document.querySelector("#canvas");
/*初始化上下文*/
var ctx = can.getContext("2d");
function draw() {
ctx.lineWidth = 10;
ctx.strokeStyle = "hotpink";
/*fill会自动闭合*/
ctx.fillStyle = "skyblue";
/*起点*/
ctx.moveTo(100,230);
/*终点*/
ctx.lineTo(300,450);
ctx.lineTo(500,450);
ctx.lineTo(100,230);
/*划线，不会自动闭合*/
ctx.stroke();
/*自动闭合*/
ctx.closePath();
ctx.fill()
}
/*draw();*/
function drawRect() {
ctx.strokeRect(10,10,500,50);
ctx.fillRect(70,10,500,50);
ctx.clearRect(70,10,10,10)
}
/*drawRect();*/
function drawCircle() {
/*开始新路径*/
ctx.beginPath();
/*0点，起始点是最右边的那个*/
ctx.moveTo(100,100);
/**/
ctx.arc(100,100,50,0,Math.PI/2);
/*闭合曲线*/
ctx.closePath();
/*画线*/
ctx.stroke();
}
drawCircle();
</script>
<script>
</script>
</html>