前端必须要了解的一些知识 (一)
常用api
moveTo(x0,y0)：把当前画笔（ictx）移动到（x0,y0）这个位置。
lineTo(x1,y1):从当前位置(x0,y0)处到（x1，y1）画一条直线。
beginPath()：开启一条路径或者重置当前路径。
closePath():从当前点回到路径起始点，也就是上一个beginPath的位置,回避和路径。
stroke():绘制。必须加了这个函数才会画图，所以这个一定要放在最后。
绘制一个圆形
/获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//开始一个新的绘制路径
ctx.beginPath();
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
var circle = {
x : 100, //圆心的x轴坐标值
y : 100, //圆心的y轴坐标值
r : 50 //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);
//按照指定的路径绘制弧线
ctx.stroke();
}
------
深拷贝
深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个
1:不仅可拷贝数组还能拷贝对象（但不能拷贝函数）
var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}] var new_arr = JSON.parse(JSON.stringify(arr)) console.log(new_arr);
2:下面是深拷贝一个通用方法，实现思路：拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数
var deepCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型，如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}
浅拷贝
数组的浅拷贝，可用concat、slice返回一个新数组的特性来实现拷贝for in
var arr = ['old', 1, true, null, undefined];
var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果;
new_arr[0] = 'new';
console.log(arr); // ["old", 1, true, null, undefined]
console.log(new_arr); // ["new", 1, true, null, undefined]
-------------------------------------------
数组常用的方法
map此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
let arr = [1, 2, 3, 4, 5]
let newArr = arr.map(x => x*2)
//arr= [1, 2, 3, 4, 5] 原数组保持不变
//newArr = [2, 4, 6, 8, 10] 返回新数组
forEach此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分
let arr = [1, 2, 3, 4, 5]
num.forEach(x => x*2)
// arr = [2, 4, 6, 8, 10] 数组改变,注意和map区分
filter()此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
let arr = [1, 2, 3, 4, 5]
const isBigEnough => value => value >= 3
let newArr = arr.filter(isBigEnough )
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
reduce()此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：
let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
//sum = 15 相当于累加的效果
与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的
push/pop
push:数组后面添加新元素，改变数组的长度
pop：数组删除最后一个元素 。 也改变长度
shift/unshift
shift：删除第一个元素 。 改变数组的长度
unshift：将一个或多个添加到数组开头 。 返回数组长度
isArray：返回bool
cancat：合并数组
toString：数组转字符串
join（"--"）:数组转字符串 。 间隔可以设置
splice（开始位置，删除个数，元素）万能方法 增删改
------------------------------------------------
判断是不是数组的方法
var arr = [1,2,3,1];
var arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){
if (typeof Array.isArray === "function") {
//判断是否支持isArray ie8之前不支持
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true
