前端必须要了解的一些知识 (一)-白红宇

前端必须要了解的一些知识 (一)

阅读量：628 次

发布时间：2019-03-14

本文共 2152 字，大约阅读时间需要 7 分钟。

以下是优化后的技术内容：

获取Canvas对象并绘制基本图形

首先，我们需要获取Canvas对象，通过以下代码找到画布并创建CanvasRenderingContext2D对象：

var canvas = document.getElementById("myCanvas");if (canvas.getContext) {  var ctx = canvas.getContext("2d");  // 开始绘制  ctx.beginPath();  // 设置颜色  ctx.strokeStyle = "blue";  // 绘制圆形  var circle = { x: 100, y: 100, r: 50 };  ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);  ctx.stroke();}

深拷贝与浅拷贝

在 JavaScript 中，深拷贝和浅拷贝更加灵活，下面是两种拷贝方式的常见案例：

深拷贝

深拷贝允许拷贝嵌套对象结构，两者相互独立。以下是通用的深拷贝方法：

function deepCopy(obj) {  if (typeof obj !== 'object') return obj;  var newObj = obj instanceof Array ? [] : {};  for (var key in obj) {    if (obj.hasOwnProperty(key)) {      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];    }  }  return newObj;}// 示例：var arr = ['old', 1, true, ['old1', 'old2'], { old: 1 }];var new_arr = JSON.parse(JSON.stringify(arr)); // 深拷贝实现

浅拷贝

浅拷贝只拷贝一层结构，不处理对象或数组嵌套。常用方法为以下两种：

// 通过concat实现浅拷贝var new_arr = arr.concat();// 或通过slice实现浅拷贝var new_arr = arr.slice();

数组常用方法总结

在 JavaScript 中，Array 提供了多种实用方法，以下是一些常用的方法示例：

1. `map` 方法

将原数组中的每个元素通过指定函数处理，返回新数组：

let arr = [1, 2, 3, 4, 5];let newArr = arr.map(x => x * 2); // 返回 [2,4,6,8,10]

2. `forEach` 方法

执行指定函数对原数组中的每个元素：

let arr = [1, 2, 3, 4, 5];arr.forEach(x => x *= 2); // 修改原数组元素

3. `filter` 方法

过滤数组，返回满足条件的新数组：

var isBigEnough = x => x >= 3;var newArr = arr.filter(isBigEnough); // 返回 [3,4,5]

4. `reduce` 方法

对数组元素进行累减或其他累积操作：

let sum = arr.reduce((a, b) => a + b, 0); // 累加

5. 数组增删方法

// 推入末尾arr.push(newElement);// 弹出末尾arr.pop();// 删除第一项arr.shift();// 添加在前面arr.unshift(newElement);

6. 数组字符串转换

// 用 `join` 方法转换成字符串var str = arr.join();var str = arr.join("-");

判断是否为数组的方法

判断数组的常用方法有两个：

Array.isArray（IE8及以上版本支持）:

console.log(Array.isArray(arr)); // true 当且仅当 arr 是数组

IE8及之前版本不支持 Array.isArray，可以使用下面的方法：

function isArrayFn(value) {  return value !== null && (typeof value === 'object' && Object.prototype.toString.call(value) === '[object Array]');}console.log(isArrayFn(arr)); // true