每天10個前端知識點:陣列應用
以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。
1. 陣列翻轉方法2
eg: 這裡說明一下,這個方法用的不是reverse,因為一次面試中被問過不用reverse實現翻轉,所以這裡標註為陣列的翻轉方法2。
<script>
var arr=[1,2,3,4];
var arr2=[];
while(arr.length) {
var num=arr.pop();
arr2.push(num);
}
alert(arr2);
</script>
2. 首字母大寫
eg:
<script>
var str = 'welcome to china';
var arr = str.split(' ');
var arr2 = [];
for(var i = 0; i < arr.length; i++) {
var first = arr[i].charAt(0).toUpperCase();
var other = arr[i].substring(1);
arr2.push(first + other);
}
alert(arr2.join(' '));
//正則寫法
var str2 = str.replace(/\w+/g , function(s) {
return s.charAt(0).toUpperCase().substring();
})
alert(str2);
</script>
3.快速清空陣列
- length=0;
- arr=[];
- arr.splice(0,arr.length);
- 迴圈pop或shift
4. 陣列排序方法
更多方法見後續排序演算法篇
<script>
function findMinIndex(arr, start) {
var iMin = arr[start];
var iMinIndex = start;
for(var i = start + 1; i < arr.length; i++) {
if(iMin > arr[i]) {
iMin = arr[i];
iMinIndex = i;
}
}
return iMinIndex;
}
for(var i = 0; i < arr.length; i++) {
var iMinIndex = findMinIndex(arr, i);
var temp;
temp = arr[iMinIndex];
arr[iMinIndex] = arr[i];
arr[i] = temp;
}
</script>
5. 陣列內查詢元素是否存在
<script>
function findInArr(item, arr) {
for(var i = 0; i < arr.length; i++) {
if(item == arr[i]) {
return true;
} else {
return false;
}
}
}
</script>
6. 陣列去重的多種方法
(1)findInArr
<script>
var arr2 = [];
for(var i = 0; i < arr.length; i++) {
if(!findInArr(arr[i], arr2)) {
arr2.push(arr[i]);
}
}
// 陣列內查詢元素是否存在
function findInArr(item, arr) {
for(var i = 0; i < arr.length; i++) {
if(item == arr[i]) {
return true;
} else {
return false;
}
}
}
</script>
(2)json(自動從小到大排序)
<script>
var json = {};
var arr2 = [];
for(var i = 0; i < arr.length; i++) {
json[arr[i]] = 'xxx';
}
for(var name in json) {
arr2.push(name);
}
</script>
(3)sort()
<script>
arr.sort();
for(var i = 0; i < arr.length; i++) {
if(arr[i] == arr[i+1]) {
arr.splice(i, 1);
i--;
}
}
</script>
(4) indexOf
這個方法是在前端公眾號偶然看到的,陣列的indexOf方法第一次用到
<script>
for(var i = 0; i < arr.length; i++) {
if(arr2.indexOf(arr[i]) < 0) {
arr2.push(arr[i]);
}
}
</script>
(5)二分法
<script>
var arr = [1, 2, 3, 2, 4, 3, 1, 5, 7, 2, 5];
// 陣列內查詢元素是否存在
function findInArr(item, arr) {
for(var i = 0; i < arr.length; i++) {
if(item == arr[i]) {
return true;
}
}
return false;
}
function del(arr, s, e) {
if(s > e) {
return [];
} else if(s == e) {
return [arr[s]];
}
var c = Math.floor((s + e) / 2);
var l = del(arr, s, c);
var r = del(arr, c + 1, e);
for(var i = 0; i < r.length; i++) {
if(!findInArr(r[i], l)) {
l.push(r[i]);
}
}
return l;
}
console.log(del(arr, 0 , arr.length - 1));
</script>
更多內容可以訂閱本人微信公眾號,一起開啟前端小白進階的世界!
相關推薦
每天10個前端知識點:陣列應用
以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。 1. 陣列翻轉方法2 eg: 這裡說明一下,這個方法用的不是reverse,因為一次面試中被問過不用reverse實現翻轉,所以這裡標註為陣列的翻轉方法2。 <script&g
每天10個前端知識點:原生篇(4)
以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。 1. 引數的陣列arguments 引數中的陣列,函式中可以不需要定義引數 <script> sum(12, 5, 6); function sum()
每天一個JS 小demo之自定義滾動條。主要知識點:事件應用
prevent 數據 滾動 sca listener 視頻 希望 特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D
每天一個JS 小demo之郵件刪除。主要知識點:事件應用
inline order else ont math tee tom seo onchange <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti
組合語言:以GRADE為首地址的10個字的陣列中儲存有學生成績。建立一個10個字的RNAK 陣列,並根據GRADE中的學生成績將學生名次填入RANK陣列中
上機程式碼: data segment ;input data segment code here &n
掌握這10個核心知識點C語言就算入門了
1、順序、分支、迴圈等基本語句; 2、char、int、double、float等基本資料型別; 3、帶引數巨集定義和函式的區別; 4、指標和陣列的區別,尤其注意下指標陣列和陣列指標; 5、函式指標和指標函式; 6、結構體和聯合體以及自定義型別typedef的應用; 7、printf、sca
js-隨機產生一個由10個元素組成的陣列
一.隨機產生一個由10個元素組成的一個數組。 第一步:建立一個隨機函式; 第二步:定義一個空陣列; 第三步:for迴圈遍歷,將隨機的每一個數新增在數組裡面。 上面的這一種方法,隨機產生的10個元素的陣列,其實是有重複的,下面的這種方法可以去重複。 二.隨機產生一個由10個
【新書推薦】【2019.10】每天10分鐘學習SQL:Sams教你如何自學(第5版)
【2019.10】每天10分鐘學習SQL:Sams教你如何自學(第5版)SQL in 10 Minutes a Day, Sams Teach Yourself (5th Edition),共306頁。 無論您是應用程式開發人員、資料庫管理員、Web應用程式設計人員、移動應用程式開
前端面試題(每天10個)
說不定哪天就要重新找工作了,作為知識的儲備和鞏固學習,每天記一點東西總歸是好的。(儘可能的每天更新一點) 目錄 HTML Doctype 有什麼用? HTML 中用來區分標準模式和怪異模式的宣告,用來告知瀏覽器使用標準模式渲染頁面。
OWASP Top 10十大風險 – 10個最重大的Web應用風險與攻防
先來看幾個出現安全問題的例子OWASP TOP10開發為什麼要知道OWASP TOP10TOP1-注入TOP1-注入的示例TOP1-注入的防範TOP1-使用ESAPI(https://github.com/ESAPI/esapi-java-legacy)TOP2-失效的身份認
Java宣告一個10個元素的整數陣列,隨機賦值,列印輸出,排序後,列印輸出
import java.util.Random; public class Arr11{ public static void main(String[] args){ int[] aa =new int [10]; Rand
前端演算法:給定兩個陣列,編寫一個函式來計算它們的交集(兩個陣列的交叉點)
給定兩個陣列,編寫一個函式來計算它們的交集。 例1: 輸入: nums1 = [1,2,2,1],nums2 = [2,2] 輸出:[2,2] 例2: 輸入: nums1 = [4,9,5],nums2 = [9,4,9,8,4] 輸出:[4,9] 注意: 結果
生成十個0~100之間的隨機數,放到陣列中,然後排序輸出。(知識點:Math類取整,獲得隨機數等) [必做題]
import java.util.Arrays; import java.util.Scanner; public class 隨機陣列排序 { public static void main(String[] args) { Scanner s = new Scanner(Syst
Java程式設計:定義一個int型的一維陣列,包含10個元素,分別賦一些隨機整數,然後求出所有元素的最大值,最小值,平均值,和值,並輸出出來。
public class Program1 {/**1.定義一個int型的一維陣列,包含10個元素,分別賦一些隨機整數,然後求出所有元素的最大值,最小值,平均值,和值,並輸出出來。*/public static void main(String[] args) { int[
前端開發:這10個Chrome擴充套件你不得不知
轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 原文出處:https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e 1. CSSViewer &nb
每天一個JS 小demo之原生數組splice方法書寫。主要知識點:鍛煉思維邏輯能力,對於數組方法的理解和各種情況的考量
scrip charset 是否 isn 如果 情況 del 當前 cti <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl
每天一個JS 小demo之韓雪冬輪播圖。主要知識點:html,css布局,對於數組和對象的理解和運用
身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st
每天一個JS 小demo之個人信息添加。主要知識點:DOM操作中的表格操作,節點操作
mov src i++ blog this tex set elements img 以下是簡易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
每天一個JS 小demo之通過鍵盤方向鍵操作圖片上下左右無縫切換。主要知識點:事件
tco listen add head query ceo defined clas css <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti
每天一個JS 小demo之通過事件委托實現菜單展開及選中特效。主要知識點:事件
實現 tween efi blog dem int position 16px eas <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><titl