1. 前端开发需要学习什么应该怎么学
目前前端开发主要通过自学和报班学习两种途径学习，自学的难度高一些。
自学的话，要先规划好自己要学哪些知识，从哪里入手，有困难如何解决。机构学的话，就要选一个靠谱的机构。近几年，前端的发展还是非常好的，市场需求大，加上学习起来也相对简单，有众多人选择并学习。
学习的内容包括：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
想要系统学习，你可以考察对比一下开设有IT专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能，建议实地考察对比一下。
祝你学有所成，望采纳。
2. 前端开发的基本方法
CSS部分
盒子边倾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止点击事件/鼠标事件“穿透”
div * { pointer-events: none; /*链接啊，点击事件啊，都没有效果了*/ }
用来控制元素在移动设备上使用滚动回弹效果
.main{-webkit-overflow-scrolling: touch;}
可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况
文字渐变效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);-webkit-background-clip: text; color: transparent;}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
实现圆弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中检测数组的方法
(1)、typeof操作符
这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object(2)、instanceof操作符
这个操作符是检测对象的原型链是否指向构造函数的prototype对象的(3)、对象的constructor属性
const arr = []console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字符串操作
字符串转化toString()
字符串分隔split()
字符串替换replace()
获取长度length
查询子字符串 indexOf
返回指定位置的字符串或字符串编码 charAt charCodeAt
字符串匹配 match
字符串拼接concat
字符串的切割或提取slice() substring() substr()
字符串大小写转化 toLowerCase toUpperCase
字符串去空格 trim() 用来删除字符串前后的空格
其中第9中三者的区别如下：（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串（3）substr()， 参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度字符串去重
const str = '11122223333'const uniqueStr = […new Set(str)].join('')
常用的数组操作
1、Array.map()此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组2、Array.forEach()此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分3、Array.filter()此方法是将满足条件的元素作为一个新数组返回4、Array.every()此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false5、Array.some()此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false6、Array.rece()此方法为所有元素调用返回函数7、Array.push()在数组最后面添加新元素8、Array.shift()删除数组第一个元素9、Array.pop()删除数组最后一个元素10、Array.unshift()在数组最前面增加元素11、Array.isArray()判断是否为一个数组12、Array.concat()数组拼接13、Array.toString()数组转化为字符串14、Array.join()数组转化为字符串，并用第一个参数作为连接符15、Array.splice(开始位置，删除个数，元素)其中rece使用方法为：
arr.rece(callback,[initialValue])跳过第一个索引。如果提供initialValue，从索引0开始。
callback （执行数组中每个值的函数，包含四个参数）1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、index （当前元素在数组中的索引）4、array （调用 rece 的数组） initialValue （作为第一次调用 callback 的第一个参数。）如果没有提供initialValue，rece 会从索引1的地方开始执行 callback 方法，
数组去重：
const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = […new Set(arr)]
常用对象方法
1、Object.assign()用于克隆，两个参数，将第二个对象分配到第一个中2、Object.is()用于判断两个值是否相同//注意，该函数与==运算符不同，不会强制转换任何类型， 应该更加类似于===，但值得注意的是它会将+0和-0视作不同值3、Object.keys()用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。4、Object.defineProperty()劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性
var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //该属性是否可枚举})
5、Object.defineProperties()可添加多个属性,与Object.defineProperty()对应,6、isPrototypeOf
function a(){}var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
安卓监听可视区域变化，让输入框移动至可视区域
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } }); };
vue中平滑滚动到某个位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加参数
/*** 向URL追加参数* @function stringifyUrlArgs* @param {string} url – URL路径* @param {object} params – 参数对象* @return {string}const stringifyUrlArgs = (url, params) => {url += (/?/).test(url) ? '&' : '?'url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url}
解析URL参数
/*** 解析URL参数* @function parseUrlArgs* @param {string} url – 字符串* @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => { a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a}, {}) return args}
好用的JavaSrcipt库与模块（包）
日期时间处理库
1、monent.js2、day.jsday相对于monent要轻量许多
高精度数学运算
number-precision
NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, …) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, …) // subtraction, num1 – num2 – num3NP.times(num1, num2, num3, …) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, …) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
实用工具库
Lodashlodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、 数字、对象、字符串等
