本文目录一览：
- 1、js 常见数据结构和算法（待更新）
- 2、如何用JS控制网页字体大小，使其能够自适应屏幕大小
- 3、快来看JS的的几个常用算法（持续更新中）
- 4、js实现网页 高度和宽度成比例的代码
- 5、WEB前端怎么布局？
- 6、web前端javascript能实现什么算法或者计算
js 常见数据结构和算法（待更新）
比较相邻的元素，如果前一个比后一个大，交换之。
第一趟排序第1个和第2个一对，比较与交换，随后第2个和第3个一对比较交换，这样直到倒数第2个和最后1个，将最大的数移动到最后一位。
第二趟将第二大的数移动至倒数第二位
……
因此需要n-1趟；
选择排序，从头至尾扫描序列，找出最小的一个元素，和第一个元素交换，接着从剩下的元素中继续这种选择和交换方式，最终得到一个有序序列
链表:存贮有序元素的集合,
但是不同于数组,每个元素是一个存贮元素本身的节点和指向下一个元素引用组成
要想访问链表中间的元素,需要从起点开始遍历找到所需元素
类似对象，以key，value存贮值
特点：每个节点最多有两个子树的树结构
如何用JS控制网页字体大小，使其能够自适应屏幕大小
1.首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;
只能指定百分比宽度：width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
快来看JS的的几个常用算法（持续更新中）
数组去重
// 第一种方法
let arr = [1,1,2,3,4];
function fun(v) {
return Array.from(new Set(v))
}
console.log(fun(arr)) //[1,2,3,4]
// 第二种方法
let qc= […new Set(arr)]
console.log(qc) //[1,2,3,4]
数组并集
let arr0 = [‘a’,’b’,’c’];
let arr2 = [‘c’,’d’];
let a=new Set(arr0);
let b=new Set(arr2);
let bj = new Set([…a,…b]);
console.log(bj);//{“a”, “b”, “c”, “d”}
数组交集
let jj = new Set([…a].filter(x=b.includes(x)));
console.log(jj);//{“c”}
数组差集
let cj = new Set([…a].filter(x=!b.includes(x)));
console.log(cj);//{“a”, “b”}
统计数组相同项的个数
let arr6=[‘a’,’a’,’a’,’b’,’c’,’c’];
let arr6obj=arr6.reduce(function(obj,name){
obj[name]=obj[name]?++obj[name]:1;
return obj;
},{})
console.log(arr6obj)// {a: 3, b: 1, c: 2}
数组方法reduce()实现filter、map
let arr7=[2,3,10];
const arro=arr7.reduce(function(list,num){
num=num*2;
if(num=20){
list.push(num)
}
return list;
},[])
console.log(arro);//[20]
字符串转换为数字
let num1=’1′ * 1;
console.log(typeof num1) //number
使用Boolean过滤数组中的所有假值
let jz=[0,null,false,NaN,1,2];
const filter1=arr1=arr1.filter(Boolean);
console.log(filter1(jz)) //[1,2]
取整
let num2=1.223;
console.log(num2|0);//1
判断奇偶
let num3=3;
console.log(!!(num3 1));//true
精确到指定位数(取小数第一位)
let num4=6.222;
console.log(num4.toFixed(1));//6.2
解构
let [rr,aa]=[1,2];
console.log(rr);//1
使用解构交换数值
[rr,aa]=[aa,rr];
console.log(rr);//2
。。。。。。。。。。。。。
作者：Vam的金豆之路
篇幅有限更多请见扩展链接：
js实现网页 高度和宽度成比例的代码
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在
IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
复制代码 代码如下:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“”
html xmlns=””
head
title请调整浏览器窗口/title
meta http-equiv=”content-type” content=”text/html; charset=gb2312″
/head
body
h2 align=”center”请调整浏览器窗口大小/h2hr
form action=”#” method=”get” name=”form1″ id=”form1″
!–显示浏览器窗口的实际尺寸–
浏览器窗口 的 实际高度: input type=”text” name=”availHeight” size=”4″br
浏览器窗口 的 实际宽度: input type=”text” name=”availWidth” size=”4″br
/form
script type=”text/javascript”
!–
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement document.documentElement.clientHeight document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//–
/script
/body
/html
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
WEB前端怎么布局？
在谈WEB前端怎么布局前，我们先梳理前端的布局类型，具体有以下几种：
1.静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2.流式布局：布局特点是屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
3.自适应布局：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4.响应式布局：布局特点是每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
那么我们如何布局呢？通过以下几点来选择布局。
1.如果只做电脑端，最好的选择是静态布局。
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，通过一份css+一份js调节font-size就搞定。
3.如果电脑端，移动端要兼容，而且要求很高，那么响应式布局还是最好的选择。前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
web前端javascript能实现什么算法或者计算
在Web开发中，JavaScript很重要，算法也很重要。下面整理了一下一些常见的算法在JavaScript下的实现，包括二分法、求字符串长度、数组去重、插入排序、选择排序、希尔排序、快速排序、冒泡法等等。仅仅是为了练手，不保证高效与美观，或许还有Bug，有时间再完善吧。
1.二分法：
function binary(items,value){
var startIndex=0,
stopIndex=items.length-1,
midlleIndex=(startIndex+stopIndex)1;
while(items[middleIndex]!=value startIndex
if(items[middleIndex]value){
stopIndex=middleIndex-1;
}else{
startIndex=middleIndex+1;
}
middleIndex=(startIndex+stopIndex)1;
}
return items[middleIndex]!=value ? false:true;
}
2.十六进制颜色值的随机生成：
function randomColor(){
var arrHex=[“0″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9″,”a”,”b”,”c”,”d”],
strHex=”#”,
index;
for(var i=0;i 6; i++){
index=Math.round(Math.random()*15);
strHex+=arrHex[index];
}
return strHex;
}
一个求字符串长度的方法：
function GetBytes(str){
var len=str.length,
bytes=len;
for(var i=0;i len;i++){
if(str.CharCodeAt255){
bytes++;
}
}
return bytes;
}
3.js实现数组去重：
Array.protype.delRepeat=function(){
var newArray=new Array();
var len=this.length;
for(var i=0;i len;i++){
for(var j=i+1;j len;j++)
{
if(this[i]==this[j])
{
++i;
}
}
newArray.push(this[i]);
}
return newArray;
}
4.插入排序。所谓的插入排序，就是将序列中的第一个元素看成一个有序的子序列，然后不段向后比较交换比较交换。
function insertSort(arr){
var key;
for(var j = 1; j arr.length ; j++){
//排好序的
var i = j – 1;
key = arr[j];
while(i = 0 arr[i] key){
arr[i + 1] = arr[i];
i –;
}
arr[i + 1] = key;
}
return arr;
}
5.选择排序。其实基本的思想就是从待排序的数组中选择最小或者最大的，放在起始位置，然后从剩下的数组中选择最小或者最大的排在这公司数的后面。
function selectionSort(data)
{
var i, j, min, temp , count=data.length;
for(i = 0; i count – 1; i++) {
/* find the minimum */
min = i;
for (j = i+1; j count; j++)
{
if (data[j] data[min])
{ min = j;}
}
/* swap data[i] and data[min] */
temp = data[i];
data[i] = data[min];
data[min] = temp;
}
return data;
}
6.希尔排序，也称递减增量排序算法。其实说到底也是插入排序的变种。
function shellSort(array){
var stepArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1]; //
reverse()在维基上看到这个最优的步长较小数组
var i = 0;
var stepArrLength = stepArr.length;
var len = array.length;
var len2 = parseInt(len/2);
for(;i stepArrLength; i++){
if(stepArr[i] len2){
continue;
}
stepSort(stepArr[i]);
}
// 排序一个步长
function stepSort(step){
//console.log(step) 使用的步长统计
var i = 0, j = 0, f, tem, key;
var stepLen = len%step 0 ? parseInt(len/step) + 1 : len/step;
for(;i step; i++){// 依次循环列
for(j=1;/*j stepLen */step * j + i len;
j++){//依次循环每列的每行
tem = f = step * j + i;
key = array[f];
while((tem-=step) = 0){// 依次向上查找
if(array[tem] key){
array[tem+step] = array[tem];
}else{
break;
}
}
array[tem + step ] = key;
}
}
}
return array;
}
7.快速排序。其实说到底快速排序算法就系对冒泡排序的一种改进，采用的就是算法理论中的分治递归的思想，说得明白点，它的做法就是：通过一趟排序将待排序的纪录分割成两部分，其中一部分的纪录值比另外一部分的纪录值要小，就可以继续分别对这两部分纪录进行排序;不段的递归实施上面两个操作，从而实现纪录值的排序。
function quickSort(arr,l,r){
if(l r){
var mid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;
while(true){
while(arr[++i] mid);
while(arr[–j]mid);
if(i=j)break;
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
quickSort(arr,l,i-1);
quickSort(arr,j+1,r);
}
return arr;
}
8.冒泡法：
function bullSort(array){
var temp;
for(var i=0;i array.length;i++)
{
for(var j=array.length-1;j i;j–){
if(array[j] array[j-1])
{
temp = array[j];
array[j]=array[j-1];
array[j-1]=temp;
}
}
}
return array;
}
原创文章，作者：WPNY，如若转载，请注明出处：https://www.506064.com/n/131155.html
微信扫一扫 
支付宝扫一扫 