記錄個人數組、字元串自己常忘記的方法,以及ES常用處理方式

来源:https://www.cnblogs.com/skyHF/archive/2018/02/24/8466167.html
-Advertisement-
Play Games

記錄自己在工作中,時不時使用,每次都要去查一下的基礎方法。以及ES6經常使用的方法 一、Array 1、concat 合併數組 2、shift 獲取數組第一個元素 unshift 向數組首位添加一個元素 3、pop 獲取數組中最後一個元素 4、slice 截取數組 5、splice 對數組的增刪改 ...


記錄自己在工作中,時不時使用,每次都要去查一下的基礎方法。以及ES6經常使用的方法

一、Array

1、concat 合併數組

2、shift 獲取數組第一個元素 unshift 向數組首位添加一個元素

3、pop 獲取數組中最後一個元素

4、slice 截取數組

5、splice 對數組的增刪改

 

/*
 * concat 合併數組
 * 該方法並不會改變原有的數組結構,而是生成一個新的數組
 * */
var arr1_1 = [1 , 2 , 3] , arr1_2 = [4 , 5];
var arr1_3 = arr1_1.concat(arr1_2);
console.log(arr1_1 , arr1_2 , arr1_3);//(3) [1, 2, 3] (2) [4, 5] (5) [1, 2, 3, 4, 5]
console.log('---------------------------------------------------------');
/*
 * shift 獲取數組中的第一個元素
 * unshift 向數組第一項添加一個元素
 * 該方法會把數組第一個元素給刪除
 * */
var arr2_1 = [1 , 2, 3 , 4];
var item2 = arr2_1.shift();
console.log(arr2_1 , item2);//(3) [2, 3, 4] 1
console.log(arr2_1.unshift(1));//(4) [1 ,2, 3, 4]
console.log('---------------------------------------------------------');
/*
 * pop 獲取數組中最後一個元素
 * 該方法會把數組最後一個元素給刪除
 * */
var arr3_1 = [1 , 2, 3 , 4];
var item3 = arr3_1.pop();
console.log(arr3_1 , item3);//(3) [1, 2, 3] 4
console.log('---------------------------------------------------------');
/*
 * slice 截取數組
 * 該方法不會改變原有數組的結構,兩個參數為[)左閉右開的區間,兩個參數均代表index索引
 * */
var arr4_1 =  [1 , 2, 3 , 4];
var arr4_2 = arr4_1.slice(1 , 3);
console.log(arr4_1 , arr4_2);//(4) [1, 2, 3, 4] (2) [2, 3]
console.log('---------------------------------------------------------');
/*
 * splice 
 * 數組方法中最強大的,包含數組操作的增刪改
 * 它會修改原有的數組結構,並返回一個新數組
 * 可以傳入多個參數splice(index , length , args)
 * index 開始的索引 length 刪除元素的長度 args 向索引處添加的元素(可以為多個)
 * */
var arr5_1 = [1 , 2, 3 , 4 , 5];
//1、刪除
var arr5_2 = arr5_1.splice(1 , 2);
console.log(arr5_1 , arr5_2);//(3) [1, 4, 5] (2) [2, 3]
//2、新增
var arr5_3 = [1 , 2, 3 , 4 , 5];
var arr5_4 = arr5_3.splice(1 , 0 , 9 , 8);
console.log(arr5_3 , arr5_4);//(7) [1, 9, 8, 2, 3, 4, 5] []
//3、修改
var arr5_5 = [1 , 2, 3 , 4 , 5];
var arr5_6 = arr5_5.splice(1 , 2 , 9 , 8);
console.log(arr5_5 , arr5_6);//(5) [1, 9, 8, 4, 5] (2) [2, 3]    

 

 

二、String

1、concat 拼接字元串

2、slice 字元串截取

3、substring 字元串截取

4、substr 字元串截取

/*
 * concat 拼接字元串
 * */
var str1_1 = 'sky ';
console.log(str1_1.concat('blue'));//sky blue
console.log('---------------------------------------------------------');
/*
 * slice 字元串截取
 * 使用方法同數組一樣
 * */
var str2_1 = 'sky blue';
var str2_2 = str2_1.slice(1 , 5);
console.log(str2_1 , str2_2);//sky blue ky b
console.log('---------------------------------------------------------');
/*
 * substring 字元串截取
 * 使用方法同slice一樣
 * */
var str3_1 = 'sky blue';
var str3_2 = str3_1.substring(1 , 5);
console.log(str3_1 , str3_2);//sky blue ky b
console.log('---------------------------------------------------------');
/*
 * substr 字元串截取
 * 同樣是接收2個參數,一個是開始截取的索引位置,一個是要截取的長度
 * */
var str4_1 = 'sky blue';
var str4_2 = str4_1.substr(1 , 4);
console.log(str4_1 , str4_2);//sky blue ky b
console.log('---------------------------------------------------------');

 

三、ES6在處理對象和數組中常用方式

1、數組過濾

2、數組添加元素

3、對象添加

4、對象覆蓋

5、獲取對象中的值

/*
 * filter 數組過濾
 * 該方法會返回一個新數組
 * */
const arr1_1 = [1 , 2 ,3 ,4 ,5];
let arr1_2 = arr1_1.filter(item => item != 3);
console.log(arr1_2);//(4) [1, 2, 4, 5]
console.log('---------------------------------------------------------');
/*
 * 數組添加元素
 * 得到的是一個新數組
 * */
const arr2_1 = [1 , 2];
let arr2_2 = [...arr2_1 , 3 , 4];
console.log(arr2_2);//(4) [1, 2, 4, 5]
console.log('---------------------------------------------------------');
/*
 * 對象添加
 * 得到一個新對象
 * */
const obj3_1 = {a : 1 , b : 2} , c = 3;
let obj3_2 = {...obj3_1 , c };
console.log(obj3_2);//{a: 1, b: 2, c: 3}
console.log('---------------------------------------------------------');
/*
 * 對象覆蓋
 * 覆蓋目標對象
 * */
let obj4_1 = {a : 1 , b : 2} ,
    obj4_2 = {a : 11 , b : 22} ,
    obj4_3 = {c : 3};
Object.assign(obj4_1 , obj4_2 , obj4_3);
console.log(obj4_1);//{a: 11, b: 22, c: 3}
console.log('---------------------------------------------------------');
/*
 * 獲取對象中的值
 * */
const obj5_1 = {a5 : 1 , b5 : 2 , c5 : 3};
let {a5 , b5 , c5 } = obj5_1;
console.log(a5 , b5 , c5);//1 2 3

 

 

搞定!!! 

 

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 自定義提示框,3秒鐘後自動消失。如上圖顯示效果。 提示框載入代碼: BIDNoteView.h 代碼: BIDNoteView.m 實現代碼: ...
  • 在開發過程中,可能會遇到各種不同的場景需要等待載入成功後才能顯示數據。以下是自定義的一個動畫載入view效果。 在UIViewController的中載入等到效果,如下 BIDActivityNote.m 代碼實現效果: ...
  • 本文將介紹在Android平臺上實現和演示 "迪士尼動畫基本準則" 。 項目開源,GitHub: "https://github.com/vhow/animation" 說明: 演示動畫原則的想法源自 "Animation Principles for the Web" 本項目所有的動畫都是通過 " ...
  • @Paradise_追逐者的幾種常用特效 1.回到頂部 2.拖拽方框到指定位置 3.輪播圖 4.選擇器 ...
  • canvas是HTML5中的一個新元素,這個元素可以通過JavaScript用來繪製圖形。例如可以用它來畫圖、合成圖象、做一些動畫等。 通常呢,我們在canvas上畫圖的方法是使用Image對象。基本上一些典型的圖片格式(png,jpg,gif等都沒有問題。好,那接下來我們就來使用它。 這是在我一個 ...
  • "源文件" ...
  • 年前,想在自己的網站首頁搞點過年喜慶的氣氛,在網上找素材無意中發現工業機器人網的首頁有一個掉金幣的JS特效,感覺挺好玩的,也是我想要找的效果,廢話少說,我還是一步步跟大家分析和實現這個效果,原理比較簡單。 大家可以看工業機器人網官網首頁的效果:http://www.robot-shop.cn/ 所需 ...
  • /* 一、generator函數的定義 1.Generator 函數是 ES6 提供的一種非同步編程解決方案,語法行為與傳統函數完全不同 2.形式上,Generator 函數是一個普通函數,但是有兩個特征。一是,function關鍵字與函數名之間有一個星號;二是,函數體內部使用yield表達式,定義不... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...