本文目錄一覽：
- 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/zh-hk/n/131155.html
微信掃一掃 
支付寶掃一掃 