前端算法入门一：刷算法题常用的JS基础扫盲

2023-02-19 05:31:02JavaScript037

前端算法入门一：刷算法题常用的JS基础扫盲,第1张

此篇属于前端算法入门系列的第一篇，主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。

在尾部追加，类似于压栈，原数组会变。

在尾部弹出，类似于出栈，原数组会变。数组的 push &pop 可以模拟常见数据结构之一：栈。

在头部压入数据，类似于入队，原数组会变。

在头部弹出数据，原数组会变。数组的 push（入队） &shift（出队）可以模拟常见数据结构之一：队列。

concat会在当前数组尾部拼接传入的数组，然后返回一个新数组，原数组不变。

在数组中寻找该值，找到则返回其下标，找不到则返回-1。

在数组中寻找该值，找到则返回true，找不到则返回false。

将数组转化成字符串，并返回该字符串，不传值则默认逗号隔开，原数组不变。

翻转原数组，并返回已完成翻转的数组，原数组改变。

从start 开始截取到end，但是不包括end

可参考 MDN：Sort

将数组转化成字符串，并返回该字符串，逗号隔开，原数组不变。

返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。

类似数组的concat()，用来返回一个合并拼接两个或两个以上字符串。原字符串不变。

indexOf,返回一个字符在字符串中首次出现的位置,lastIndexOf返回一个字符在字符串中最后一次出现的位置。

提取字符串的片断，并把提取的字符串作为新的字符串返回出来。原字符串不变。

使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回，原字符串不变。

match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并返回一个包含该搜索结果的数组。

注意事项 :如果match方法没有找到匹配，将返回null。如果找到匹配，则 match方法会把匹配到以数组形式返回，如果正则规则未设置全局修饰符g，则 match方法返回的数组有两个特性：input和index。input属性包含整个被搜索的字符串。index属性包含了在整个被搜索字符串中匹配的子字符串的位置。

replace接收两个参数，参数一是需要替换掉的字符或者一个正则的匹配规则，参数二，需要替换进去的字符，仔实际的原理当中，参数二，你可以换成一个回调函数。

在目标字符串中搜索与正则规则相匹配的字符，搜索到，则返回第一个匹配项在目标字符串当中的位置，没有搜索到则返回一个-1。

toLowerCase把字母转换成小写，toUpperCase()则是把字母转换成大写。

includes、startsWith、endsWith，es6的新增方法，includes 用来检测目标字符串对象是否包含某个字符，返回一个布尔值，startsWith用来检测当前字符是否是目标字符串的起始部分，相对的endwith是用来检测是否是目标字符串的结尾部分。

返回一个新的字符串对象，新字符串等于重复了指定次数的原始字符串。接收一个参数，就是指定重复的次数。原字符串不变。

最常用的for循环，经常用的数组遍历，也可以遍历字符串。

while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作 .

拷贝一份遍历原数组。

for…of是ES6新增的方法，但是for…of不能去遍历普通的对象， for…of的好处是可以使用break跳出循环。

面试官：说一下 for...in 和 for...of 区别？

返回一个布尔值 。当我们需要判定数组中的元素是否满足某些条件时，可以使用every / some。这两个的区别是，every会去判断判断数组中的每一项，而 some则是当某一项满足条件时返回。

reduce 从左到右将数组元素做“叠加”处理，返回一个值。reduceRight 从右到左。

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

这里罗列一些我在刷算法题中遇到的正则表达式，如果有时间可认真学一下正则表达式不要背。

持续更新，敬请期待……

若一个正整数无法被除了1 和它自身之外的任何自然数整除，则称该数为质数（或素数），否则称该正整数为合数。

持续更新，敬请期待……

作者：摆草猿

链接：https://juejin.cn/post/7087134135193436197

前端开发者的都知道3大框架:Angular,Vue,React。但是除了这三个框架以外的前端框架还有那些？下面具体介绍下前端都有哪些框架：一．前端UI框架1.bootstrap框架，它来自 Twitte，是目前最受欢迎的前端框架。具有简洁、直观的前端开发特点。2.EasyUI框架，EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。通过使用easyui不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。二．前端框架1.Node.js框架。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。2.Vue.js框架。 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API。3.React框架。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，是一个用于构建用户界面的 JAVASCRIPT 库。4.Angular.Js框架。angular.Js框架是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签。

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item')console.log(item)// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item')console.log(items[0])1234567

阻止默认行为

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.preventDefault){// w3c方法阻止默认行为

event.preventDefault()

} else{// ie 阻止默认行为

event.returnValue = false

}

}, false)// jQuery$('#btn').on('click', function (event) {event.preventDefault()

})1234567891011121314151617

阻止冒泡

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.stopPropagation){// w3c方法阻止冒泡

event.stopPropagation()

} else{// ie 阻止冒泡

event.cancelBubble = true

}

}, false)// jQuery$('#btn').on('click', function (event) {event.stopPropagation()

})1234567891011121314151617

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) {

// chrome &ie || // firefox

var delta = (event.originalEvent.wheelDelta &&(event.originalEvent.wheelDelta >0 ? 1 : -1)) || (event.originalEvent.detail &&(event.originalEvent.detail >0 ? -1 : 1))

if (delta >0) {

// 向上滚动

console.log('mousewheel top')

} else if (delta <0) {// 向下滚动

console.log('mousewheel bottom')

}

})123456789101112

检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://www.w3.org/2000/svg' return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect

}

// 测试console.log(isSupportSVG())1234567

检测浏览器是否支持canvas

function isSupportCanvas() {

if(document.createElement('canvas').getContext){return true

}else{return false

}

}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas())12345678910

检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase()

if (ua.match(/MicroMessenger/i)=="micromessenger") {

return true

} else {

return false

}

}// 测试alert(isWeiXinClient())1234567891011

jQuery 获取鼠标在图片上的坐标

$('#myImage').click(function(event){

//获取鼠标在图片上的坐标

console.log('X：' + event.offsetX+'\n Y:' + event.offsetY)

//获取元素相对于页面的坐标

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)

})1234567

验证码倒计时代码

<input id="send" type="button" value="发送验证码">12

// 原生js版本var times = 60, // 临时设为60秒

timer = null

document.getElementById('send').onclick = function () {

// 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

send.value = '发送验证码'

clearInterval(timer)

send.disabled = false

times = 60

} else {

send.value = times + '秒后重试'

send.disabled = true

}

}, 1000)

}1234567891011121314151617181920

// jQuery版本var times = 60,

timer = null

$('#send').on('click', function () {

var $this = $(this) // 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

$this.val('发送验证码')

clearInterval(timer)

$this.attr('disabled', false)

times = 60

} else {

$this.val(times + '秒后重试')

$this.attr('disabled', true)

}

}, 1000)

})12345678910111213141516171819202122

常用的一些正则表达式

//匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号

/^1[3|5|8|7]\d{9}$/

//验证URL

/^http:\/\/.+\./

//验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式

/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

js时间戳、毫秒格式化

function formatDate(now) {

var y = now.getFullYear() var m = now.getMonth() + 1// 注意js里的月要加1

var d = now.getDate() var h = now.getHours()

var m = now.getMinutes()

var s = now.getSeconds() return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s

}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20)

console.log(nowDate.getTime())// 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate))123456789101112131415

js限定字符数（注意：一个汉字算2个字符）

<input id="txt" type="text">//字符串截取function getByteVal(val, max) {

var returnValue = '' var byteValLen = 0 for (var i = 0i <val.lengthi++) {if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2else byteValLen += 1 if (byteValLen >max) break

returnValue += val[i]

}return returnValue

}

$('#txt').on('keyup', function () {

var val = this.value if (val.replace(/[^\x00-\xff]/g, "**").length >14) {this.value = getByteVal(val, 14)

}

})12345678910111213141516171819

js判断是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigator.userAgent

return {