當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript学习笔记（2）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记（2）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.bilibili.com/video/BV1Sy4y1C7ha?p=168
文章目錄
- 數組對象Array（創建數組的兩種方式）
- 如何檢測傳入參數是否為數組？（arr instance of Array）（Array.isArray(arr)）
- 添加、刪除數組元素的方法 push pop unshift shift
- 利用push篩選數組
- 數組翻轉函數reverse() 數組排序函數 sort(comparator)
- 獲取數組元素索引arr.indexOf(數組元素) arr.lastIndexOf(數組元素)
- 如何數組去重？
- 數組轉換成字符串或加分隔符 toString() join('分隔符')
- concat()連接數組 slice() 截取數組 splice() 刪除數組元素
- 為什么基本數據類型也有復雜數據類型（對象）的方法？因為有基本包裝類型（將簡單數據類型包裝成了復雜數據類型）
- 字符串的不可變性
- 查找字符在字符串中的位置 indexOf(元素，下標) 從指定下標后開始查找元素
- 查找某個字符在字符串中出現次數
- 根據位置返回字符或Ascii碼 str.charAt(index) str.charCodeAt(index) str[index]
- 用字典統計字符串中每個字符出現次數，并找出出現次數最多的字符（難道只能這樣做沒有替代的方法嗎？）
- 字符串操作方法 concat連接字符串 substr截取字符串
- 字符串操作方法 replace替換字符串 split分割字符串
- 簡單數據類型和復雜數據類型
- 堆和棧
- 簡單數據類型傳參
- 復雜數據類型傳參
數組對象Array（創建數組的兩種方式）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 創建數組的兩種方式// 1. 利用數組字面量var arr = [1, 2, 3];console.log(arr[0]);// 2. 利用new Array()// var arr1 = new Array(); // 創建了一個空的數組// var arr1 = new Array(2); // 這個2 表示 數組的長度為 2 里面有2個空的數組元素 var arr1 = new Array(2, 3); // 等價于 [2,3] 這樣寫表示 里面有2個數組元素 是 2和3console.log(arr1);</script> </head><body></body></html>如何檢測傳入參數是否為數組？（arr instance of Array）（Array.isArray(arr)）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 翻轉數組function reverse(arr) {// if (arr instanceof Array) {if (Array.isArray(arr)) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;} else {return 'error 這個參數要求必須是數組格式 [1,2,3]'}}console.log(reverse([1, 2, 3]));console.log(reverse(1, 2, 3));// 檢測是否為數組// (1) instanceof 運算符 它可以用來檢測是否為數組var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// (2) Array.isArray(參數); H5新增的方法 ie9以上版本支持console.log(Array.isArray(arr));console.log(Array.isArray(obj));</script> </head><body></body></html>添加、刪除數組元素的方法 push pop unshift shift
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 添加刪除數組元素方法// 1. push() 在我們數組的末尾 添加一個或者多個數組元素 push 推var arr = [1, 2, 3];// arr.push(4, 'pink');console.log(arr.push(4, 'pink'));console.log(arr);// (1) push 是可以給數組追加新的元素// (2) push() 參數直接寫 數組元素就可以了// (3) push完畢之后，返回的結果是 新數組的長度 // (4) 原數組也會發生變化// 2. unshift 在我們數組的開頭 添加一個或者多個數組元素console.log(arr.unshift('red', 'purple'));console.log(arr);// (1) unshift是可以給數組前面追加新的元素// (2) unshift() 參數直接寫 數組元素就可以了// (3) unshift完畢之后，返回的結果是 新數組的長度 // (4) 原數組也會發生變化// 3. pop() 它可以刪除數組的最后一個元素 console.log(arr.pop());console.log(arr);// (1) pop是可以刪除數組的最后一個元素 記住一次只能刪除一個元素// (2) pop() 沒有參數// (3) pop完畢之后，返回的結果是 刪除的那個元素 // (4) 原數組也會發生變化// 4. shift() 它可以刪除數組的第一個元素 console.log(arr.shift());console.log(arr);// (1) shift是可以刪除數組的第一個元素 記住一次只能刪除一個元素// (2) shift() 沒有參數// (3) shift完畢之后，返回的結果是 刪除的那個元素 // (4) 原數組也會發生變化</script> </head><body></body></html>利用push篩選數組
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 有一個包含工資的數組[1500, 1200, 2000, 2100, 1800]，要求把數組中工資超過2000的刪除，剩余的放到新數組里面var arr = [1500, 1200, 2000, 2100, 1800];var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] < 2000) {// newArr[newArr.length] = arr[i];newArr.push(arr[i]);}}console.log(newArr);</script> </head><body></body></html>數組翻轉函數reverse() 數組排序函數 sort(comparator)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 數組排序// 1. 翻轉數組var arr = ['pink', 'red', 'blue'];arr.reverse();console.log(arr);// 2. 數組排序（冒泡排序）var arr1 = [13, 4, 77, 1, 7];arr1.sort(function (a, b) {// return a - b; 升序的順序排列return b - a; // 降序的順序排列});console.log(arr1);</script> </head><body></body></html>sort里必須加comparator比較器，否則排序只是按最高位
獲取數組元素索引arr.indexOf(數組元素) arr.lastIndexOf(數組元素)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 返回數組元素索引號方法 indexOf(數組元素) 作用就是返回該數組元素的索引號 從前面開始查找// 它只返回第一個滿足條件的索引號 // 它如果在該數組里面找不到元素，則返回的是 -1 // var arr = ['red', 'green', 'blue', 'pink', 'blue'];var arr = ['red', 'green', 'pink'];console.log(arr.indexOf('blue'));// 返回數組元素索引號方法 lastIndexOf(數組元素) 作用就是返回該數組元素的索引號 從后面開始查找var arr = ['red', 'green', 'blue', 'pink', 'blue'];console.log(arr.lastIndexOf('blue')); // 4</script> </head><body></body></html>
如果arr.indexOf(某個元素)=arr.lastIndexOf(某個元素)，表示這個數組中元素不重復，只有一個
如何數組去重？
數組轉換成字符串或加分隔符 toString() join(‘分隔符’)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 數組轉換為字符串 // 1. toString() 將我們的數組轉換為字符串var arr = [1, 2, 3];console.log(arr.toString()); // 1,2,3// 2. join(分隔符) var arr1 = ['green', 'blue', 'pink'];console.log(arr1.join()); // green,blue,pinkconsole.log(arr1.join('-')); // green-blue-pinkconsole.log(arr1.join('&')); // green&blue&pink</script> </head><body></body></html>concat()連接數組 slice() 截取數組 splice() 刪除數組元素
略
為什么基本數據類型也有復雜數據類型（對象）的方法？因為有基本包裝類型（將簡單數據類型包裝成了復雜數據類型）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 基本包裝類型var str = 'andy';console.log(str.length);// 對象 才有 屬性和方法 復雜數據類型才有 屬性和方法 // 簡單數據類型為什么會有length 屬性呢？ // 基本包裝類型： 就是把簡單數據類型 包裝成為了 復雜數據類型 // (1) 把簡單數據類型包裝為復雜數據類型 var temp = new String('andy');// (2) 把臨時變量的值 給 strstr = temp;// (3) 銷毀這個臨時變量temp = null;</script> </head><body></body></html>字符串的不可變性
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 字符串的不可變性var str = 'andy';console.log(str);str = 'red';console.log(str);// 因為我們字符串的不可變所以不要大量的拼接字符串var str = '';for (var i = 1; i <= 1000000000; i++) {str += i;}console.log(str);</script> </head><body></body></html>查找字符在字符串中的位置 indexOf(元素，下標) 從指定下標后開始查找元素
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 字符串對象 根據字符返回位置 str.indexOf('要查找的字符', [起始的位置])var str = '改革春風吹滿地，春天來了';console.log(str.indexOf('春'));console.log(str.indexOf('春', 3)); // 從索引號是 3的位置開始往后查找</script> </head><body></body></html>查找某個字符在字符串中出現次數
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 查找字符串"abcoefoxyozzopp"中所有o出現的位置以及次數// 核心算法：先查找第一個o出現的位置// 然后 只要indexOf 返回的結果不是 -1 就繼續往后查找// 因為indexOf 只能查找到第一個，所以后面的查找，一定是當前索引加1，從而繼續查找var str = "oabcoefoxyozzopp";var index = str.indexOf('o');var num = 0;// console.log(index);while (index !== -1) {console.log(index);num++;index = str.indexOf('o', index + 1);}console.log('o出現的次數是: ' + num);// 課后作業 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出現的位置和次數</script> </head><body></body></html>根據位置返回字符或Ascii碼 str.charAt(index) str.charCodeAt(index) str[index]
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 根據位置返回字符// 1. charAt(index) 根據位置返回字符var str = 'andy';console.log(str.charAt(3));// 遍歷所有的字符for (var i = 0; i < str.length; i++) {console.log(str.charAt(i));}// 2. charCodeAt(index) 返回相應索引號的字符ASCII值 目的： 判斷用戶按下了那個鍵 console.log(str.charCodeAt(0)); // 97// 3. str[index] H5 新增的console.log(str[0]); // a</script> </head><body></body></html>用字典統計字符串中每個字符出現次數，并找出出現次數最多的字符（難道只能這樣做沒有替代的方法嗎？）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 有一個對象 來判斷是否有該屬性 對象['屬性名']var o = {age: 0}if (o['age']) {//這里有問題吧？o['age']得到的是age屬性的值console.log('里面有該屬性（值不為0）');} else {console.log('沒有該屬性');}// 判斷一個字符串 'abcoefoxyozzopp' 中出現次數最多的字符，并統計其次數。// o.a = 1// o.b = 1// o.c = 1// o.o = 4// 核心算法：利用 charAt(） 遍歷這個字符串// 把每個字符都存儲給對象， 如果對象沒有該屬性，就為1，如果存在了就 +1// 遍歷對象，得到最大值和該字符var str = 'bbbsdfdsf';var o = {};for (var i = 0; i < str.length; i++) {var chars = str.charAt(i); // chars 是 字符串的每一個字符// console.log(o[chars]);//因為o[chars]永遠不可能等于0，所以上面的bug不可能出現，但這代碼貌似用鍵值對的方式也能實現（這特么就是個字典！🤬）if (o[chars]) { // o[chars] 得到的是屬性值o[chars]++;} else {o[chars] = 1;}}console.log(o);// 2. 遍歷對象var max = 0;var ch = '';for (var k in o) {// k 得到是 屬性名// o[k] 得到的是屬性值if (o[k] > max) {max = o[k];ch = k;}}console.log(max);console.log('最多的字符是' + ch);</script> </head><body></body></html>字符串操作方法 concat連接字符串 substr截取字符串
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 字符串操作方法// 1. concat('字符串1','字符串2'....)var str = 'andy';console.log(str.concat('red'));// 2. substr('截取的起始位置', '截取幾個字符');var str1 = '改革春風吹滿地';console.log(str1.substr(2, 2)); // 第一個2 是索引號的2 從第幾個開始 第二個2 是取幾個字符</script> </head><body></body></html>字符串操作方法 replace替換字符串 split分割字符串
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 1. 替換字符 replace('被替換的字符', '替換為的字符') 它只會替換第一個字符var str = 'andyandy';console.log(str.replace('a', 'b'));// 有一個字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替換為 *var str1 = 'abcoefoxyozzopp';while (str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);// 2. 字符轉換為數組 split('分隔符') 前面我們學過 join 把數組轉換為字符串var str2 = 'red, pink, blue';console.log(str2.split(','));var str3 = 'red&pink&blue';console.log(str3.split('&'));</script> </head><body></body></html>簡單數據類型和復雜數據類型
堆和棧
簡單數據類型傳參
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 簡單數據類型傳參function fn(a) {a++;console.log('a = ' + a);}var x = 10;fn(x);console.log('x = ' + x);</script> </head><body></body></html>復雜數據類型傳參
總結
以上是生活随笔為你收集整理的JavaScript学习笔记（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 注意：python flask 里ima
- 下一篇： JavaScript学习笔记（3）