摘要:前一個值,當前值,索引,數組對象產生新數組的迭代器方法類似,對數組的每個元素使用某個函數,并返回新數組和相似,傳入一個返回值為布爾類型的函數。
1. 前言
數組真的是每天用了,但是有很多方法都是記不住,總是要百度查,很煩,所以才寫了個數組使用總結,有什么不對的希望大家指出來。
2. 思路先看看這些問題都記得很清楚么?
創建數組,怎么創建數組的
數組的構造方法Array有哪些方法?ES5 , ES6
ES6把類似數組對象轉化成數組方法,ES5怎么把類似數組的對象轉化成數組,原理
字符串和數組互相轉換
數組的增刪查改
增:從頭部增,從尾部增, 從中間位置增加
刪:從頭部刪,從尾部刪,從中間位置刪
查: indexOf(), indexOf 的不足,ES6 怎么查找指定的元素
改:哪些操作是對本數組的修改,哪些是創建新數組?
數組排序,配合sort方法
數組的迭代器方法
不產生新數組的迭代器方法
產生新數組的迭代器方法
$.each() 和 forEach 參數區別,如何跳出循環?
3. 整理 3.1 創建數組var a = new Array(1,2,3); //[1,2,3] var b = new Array(4); //[,,,] 四個空值,不是undefined var c = [5,6,7]; //[5,6,7]3.2 Array 的構造函數有哪些方法?
ES5:isArray, 判斷變量是否是數組
var a = [1,2,3]; Array.isArray(a); //true
ES6: Array.from ,Array.of
Array.from 將類似數組的對象(array-like object)和可遍歷(iterable)的對象, 轉為真正的數組
什么是類似數組的對象?類數組對象
總結:
表象:這種對象很像數組,對對象的讀寫和遍歷操作和數組類似,但卻不是數組
條件:只包含使用從零開始,且自然遞增的整數做鍵名,并且定義了length表示元素個數的對象,我們就認為他是類數組對象。
常見的類數組對象:DOM 通過 document.querySelectorAll 獲取的對象、函數的參數arguments
//定義數組和類數組對象 var arr = [1,2,3]; var obj = {0: 1, 1: 2, 2: 3, length: 3}; //元素讀寫操作 console.log(arr[0], obj[0])//1, 1 console.log(arr["length"], obj["length"])//1, 1 arr[0] = 9; obj[0] = 9; //遍歷 for(var i = 0, len = arr.length; i < len; i++) { arr[i].... } for(var i = 0, len = obj.length; i < len; i++) { obj[i].... }
什么是可遍歷對象?
JavaScript 原有的表示“集合”的數據結構,主要是數組(Array)和對象(Object),ES6 又添加了Map和Set。
任何數據結構只要部署 Iterator 接口,就可以完成遍歷操作(即依次處理該數據結構的所有成員)
Array.from 使用:
let arrayLike = { "0": "a", "1": "b", "2": "c", length: 3 }; // ES5的寫法 var arr1 = [].slice.call(arrayLike); // ["a", "b", "c"] // ES6的寫法 let arr2 = Array.from(arrayLike); // ["a", "b", "c"] let namesSet = new Set(["a", "b"]); Array.from(namesSet) //將可遍歷對象轉成數組
Array.of :方法用于將一組值,轉換為數組
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 13.3 ES6、ES5怎么把類似數組的對象轉化成數組,原理
[].slice.call(arrayLike); //為什么能轉化為數組
slice原理
var s = "a,b,c,d"; var arr1 = s.split(","); arr1; // ["a", "b", "c", "d"] var s2 = arr1.join(" "); s2; //"a b c d" var s3 = arr1.toString(); s3; // "a,b,c,d"3.5 數組的增刪查改
從頭部增,從尾部增, 從中間位置增加
頭: var arr = [4,5,6]; arr.unshift(3); //5 注意,返回的是數組長度 arr; // [3,4,5,6] arr.unshit(1,2); // unshit 不僅可以增加一個,還可以增加多個 arr; //[1,2,3,4,5,6] 尾: arr.push(7); //7, 返回數組長度 arr; // [1,2,3,4,5,6,7] arr.push(8,9); //9, push也可以添加多個 arr; // [1,2,3,4,5,6,7,8,9] 中間 splice(起始索引,需要刪除的元素個數,想要添加進數組的元素) var arr2 = [1,2,3,7,8,9]; arr2.splice(3,0,4,5,6); arr2; //[1, 2, 3, 4, 5, 6, 7, 8, 9]
從頭部刪,從尾部刪,從中間位置刪
var arr = ["a","b","c","d","e"] arr.shift(); // "a", 被刪除的元素 arr; //["b", "c","d","e"] arr.pop(); //"e", 返回被刪除的元素 arr; // ["b","c","d"] arr.splice(1,1); // ["c"] 返回,被刪除元素組成的數組!!! arr; // ["b","d"]
indexOf(), indexOf 的不足,ES6 怎么查找指定的元素
indexOf : 如果目標數組包含該參數,就返回第一個與參數相同元素的的索引,如果不包含,返回 -1
var arr = ["a", "b", "c"]; arr.indexOf("b"); //1
indexOf 不足:
一是,不夠語義化,它的含義是找到參數值的第一個出現位置,所以要去比較是否不等于-1,表達起來不夠直觀。
二是,它內部使用嚴格相等運算符(===)進行判斷,這會導致對NaN的誤判
ES6: includes: 返回一個布爾值,表示某個數組是否包含給定的值 ``` [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true ``` find: 用于找出第一個符合條件的數組成員,參數是一個回調函數 和filter 不同,返回所有符合添加的數組成員 ``` [1, 4, -5, -2].find((n) => n < 0) // -5 [1, 4, -5, -2].filter((n) => n < 0) //[-5, -2] ``` findIndex: 返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。 ``` [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2 ```
哪些操作是對本數組的修改,哪些是創建新數組?
splice: 修改會影響原數組
concat: 不會影響原數組
var a = [1,2,3,4]; var b = [5,6]; a.concat(b); a; //[1,2,3,4];3.6 數組排序,配合sort方法
//順序修改 var arr = [1,11,2,22,3,33]; arr.reverse(); //[33, 3, 22, 2, 11, 1] //大小排序: arr.sort(); //[1, 11, 2, 22, 3, 33] //sort 方法默認按照字典順序對元素進行排序 arr.sort(function(a, b) { return a - b; }); arr; //[1, 2, 3, 11, 22, 33]3.7 數組的迭代器方法
不產生新數組的迭代器方法 1. forEach 2. every 3. some 4. reduce
forEach,接受一個函數作為參數,對數組的每一個元素使用該函數
var arr = [1, 2, 3]; arr.forEach(function(value, index){ console.log(value * value); })
every, 接受一個返回值為布爾類型的函數,對數組中每一個元素使用該函數,如果所有元素,該函數均返回true,則函數返回true
var arr = [1, 2, 3]; var arrIsEven = arr.every(function(value){ return value % 2 == 0; }); arrIsEven; //false
some, 接受一個返回值為布爾類型的函數,對數組中每一個元素使用該函數,只要有一個元素使得該函數返回true,則函數返回true
var arr = [1, 2, 3]; var arrIsEven = arr.some(function(value){ return value % 2 == 0; }); arrIsEven; //true
reduce, 接受一個函數,返回一個值。迭代數組的所有項,然后構建一個最終返回的值。reduce() 方法從數組的第一項開始,逐個遍歷到最后,而reduceRight() 則從數組的最后一項開始,從前遍歷到第一項。
//前一個值,當前值,索引,數組對象 reduce(prev, cur, index, arr) var nums = [1, 2, 3, 4, 5]; var sum = nums.reduce(function(prev, cur, index, arr) { console.log("prev", prev); //1 3 6 10 console.log("cur", cur); // 2 3 4 5 return prev + cur; }) sum; //15
產生新數組的迭代器方法 1. map 2. filter
map: 類似forEach,對數組的每個元素使用某個函數,并返回新數組
var arr = [1, 2, 3]; var arr2 = arr.map(function(value, index){ return (value * value); }) arr2; //[1, 4, 9] arr; //[1, 2, 3]
filter: 和every相似,傳入一個返回值為布爾類型的函數。和every不同的是,對數組中的所有元素應用改函數,將返回返回為true的元素,添加新數組,返回新數組
var arr = [1, 2, 3]; var arr2 = arr.filter(function(value){ return value % 2 == 0; }) arr2; //[2] arr; //[1, 2, 3]3.8 $.each() 和 forEach 參數區別,如何跳出循環?
$.each 是 jQuery的方法,forEach 是js 數組原生方法 ,
value 和 index 順序是反的,很氣!每次都要百度!
$.each 用return false
forEach 無法在所有元素都傳遞給調用的函數之前終止遍歷,沒有辦法中止 forEach 循環。如果要中止,可使用 Array.every 或Array.some,或 try catch
$.each([1,2,3,4], function(index, value ){ if( value == 3) { return false; } console.log( value ); //1 2 3 }) var flag = true; [1,2,3,4].forEach(function(value, index) { if( value != 3 && flag) { console.log(value); } else { flag = false; } }) try { [1,2,3].forEach(function(i) { if(i === 2) throw new Error(); console.log(i); }); } catch(e) { } [1,2,3].some(function(i) { if(i == 2) return true; console.log(i); });4. 參考
類數組對象
slice原理
forEach如何跳出循環
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99258.html
摘要:如果網頁中包含多個框架,那實際上就存在兩個以上不同的全局執行環境,從而存在兩個以上不同版本的構造函數。如果你從一個框架向另一個框架傳入一個數組,那么傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。 1. 首先,typeof肯定是不行的 對于一些基本類型,typeof是可以判斷出數據類型,但是判斷一些引用類型時候,不能具體到具體哪一種類型 再來復習一下typeof的...
摘要:歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節復習的是中的高階函數,可以提高我們的開發效率。 本文是 重溫基礎 系列文章的第二十一篇。 今日感受:想家。 本人自己整理的【Cute-JavaScript】資料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基礎...
摘要:即將立秋的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。課多周刊機器人運營中心是如何玩轉起來的分享課多周刊是如何運營并堅持下來的。 即將立秋的《課多周刊》(第2期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大...
摘要:即將立秋的課多周刊第期我們的微信公眾號,更多精彩內容皆在微信公眾號,歡迎關注。若有幫助,請把課多周刊推薦給你的朋友,你的支持是我們最大的動力。課多周刊機器人運營中心是如何玩轉起來的分享課多周刊是如何運營并堅持下來的。 即將立秋的《課多周刊》(第2期) 我們的微信公眾號:fed-talk,更多精彩內容皆在微信公眾號,歡迎關注。 若有幫助,請把 課多周刊 推薦給你的朋友,你的支持是我們最大...
閱讀 1093·2021-10-12 10:11
閱讀 877·2019-08-30 15:53
閱讀 2286·2019-08-30 14:15
閱讀 2961·2019-08-30 14:09
閱讀 1197·2019-08-29 17:24
閱讀 972·2019-08-26 18:27
閱讀 1283·2019-08-26 11:57
閱讀 2146·2019-08-23 18:23