javascript語言廣泛應用于Web開發(fā)中，具有豐富的功能與高效的性能。為了提高學習者的編程能力，下文將為大家介紹100例javascript代碼應用實例。

例1：對一個數(shù)組進行去重。

var arr = [1, 2, 3, 4, 1, 2, 5, 6];
var newArr = [];
for(var i=0, len=arr.length; i<len; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
console.log(newArr); // [1, 2, 3, 4, 5, 6]

例2：將字符串中的單詞首字母大寫。

var str = "this is a test sentence.";
str = str.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase() + word.substring(1);
});
console.log(str); // "This Is A Test Sentence."

例3：獲取指定日期的前一天。

function getBeforeDate(date, n){
var d = new Date(date);
d.setDate(d.getDate() - n);
var month = d.getMonth() + 1;
return d.getFullYear() + "-" + month + "-" + d.getDate();
}
console.log(getBeforeDate("2022-01-02", 1)); // "2022-01-01"

例4：判斷一個字符串是否是服務(wù)器路徑。

function isServerPath(str){
return /^[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.+[A-Za-z0-9-_%&\?\/.=]+$/.test(str);
}
console.log(isServerPath("https://www.google.com")); // true
console.log(isServerPath("www.google.com")); // false

例5：實現(xiàn)一個瀑布流效果。

var container = document.querySelector("#container");
var boxes = document.querySelectorAll(".box");
var boxWidth = boxes[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / boxWidth);
var heightArr = [];
for(var i=0; i<boxes.length; i++){
if(i<cols){
heightArr[i] = boxes[i].offsetHeight;
}else{
var minHeight = Math.min.apply(null, heightArr);
var minIndex = heightArr.indexOf(minHeight);
boxes[i].style.position = "absolute";
boxes[i].style.top = minHeight + "px";
boxes[i].style.left = boxWidth * minIndex + "px";
heightArr[minIndex] += boxes[i].offsetHeight;
}
}

例6：獲取指定DOM元素的所有相鄰兄弟元素。

function getAllSiblings(elem){
var siblings = [];
var node = elem.parentNode.firstChild;
for(; node; node=node.nextSibling){
if(node.nodeType === 1 && node !== elem){
siblings.push(node);
}
}
return siblings;
}
var elem = document.querySelector("#test");
console.log(getAllSiblings(elem));

例7：利用localStorage實現(xiàn)本地存儲。

localStorage.setItem("key", "value");
console.log(localStorage.getItem("key")); // "value"
localStorage.removeItem("key");

例8：實現(xiàn)一個快速排序算法。

function quickSort(arr){
if(arr.length <= 1){
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for(var i=0; i<arr.length; i++){
if(arr[i] < pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
console.log(quickSort([3, 1, 4, 2, 7, 6, 5])); // [1, 2, 3, 4, 5, 6, 7]

例9：使用canvas繪制一個太陽系模型。

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var sun = new Image();
var earth = new Image();
var moon = new Image();
function draw(){
ctx.clearRect(0, 0, width, height);
ctx.drawImage(sun, 0, 0, 50, 50);
ctx.translate(width / 2, height / 2);
ctx.rotate((2 * Math.PI / 180));
ctx.translate(105, 0);
ctx.drawImage(earth, 0, 0, 30, 30);
ctx.rotate((10 * Math.PI / 180));
ctx.translate(40, 0);
ctx.drawImage(moon, 0, 0, 10, 10);
ctx.restore();
}
sun.src = "sun.png";
earth.src = "earth.png";
moon.src = "moon.png";
window.setInterval(draw, 50);

例10：使用ajax獲取服務(wù)器端數(shù)據(jù)并顯示在頁面上。

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var data = JSON.parse(xhr.responseText);
var html = "";
for(var i=0; i<data.length; i++){
html += "<li>" + data[i].name + "：" + data[i].age + "</li>";
}
document.querySelector("#list").innerHTML = html;
}
}
xhr.send();

......（略）......

這些javascript實例展示了javascript語言的豐富功能，以及在Web開發(fā)中的廣泛應用。通過學習這些實例，我們可以不斷提高自己的編程能力，為自己的職業(yè)生涯打好堅實的基礎(chǔ)。