零JS筆記 | 字符串 | 數組

字符串方法

下標值找對應的字符： str.charAt(位置)
字符轉編碼： str.charCodeAt(位置)
編碼轉字符： String.fromCharCode(編碼,編碼)
截取一段字符：str.substring()、str.slice()
字符串分割成數組：str.split()
數組連接成字符串: str.join()

var str = '百度一下，你就知道'  //百 = 30334; 度 = 24230

console.log(str.charAt()); //百 str.charAt(位置)默認為0;
console.log(str.charAt(50)); //找不到則返回空白

console.log(str.charCodeAt(1)); //24230 charCodeAt(位置)，默認0 返回字符編碼值
console.log(str.charCodeAt(50)); //NaN 找不到則返回NaN

console.log(String.fromCharCode(24230)); //百 根據編碼返回字
console.log(String.fromCharCode(30334, 24230)); //百度
console.log(String.fromCharCode(789745544845647000)); //找不到則返回空白

//inp只允許輸入數字，isNaN無法判斷空格，所以使用str.charCodeAt()
/*
0 - 9之間的編碼為： 48 - 57
a - z 之間的編碼為： 97 - 122
A - Z 之間的編碼為： 65 - 90  
*/
function detectNum(str) {
  var n = 0;
  for (var i = 0; i < str.length; i++) {
    n = str.charCodeAt(i); //每一位的編碼
    if (n < 48 || n > 57) { //有一個非數字，後面不需要檢測
      return false;
    }
  }
  return true;
}

//打印編碼
document.body.innerHTML = String.fromCharCode()
var str = '';
for (var i = 0; i < 1000; i++) {
  str += String.fromCharCode(i) + ' '
}
document.body.innerHTML = str;

//簡漏加密
var inp = document.getElementsByTagName('input')
var box = document.getElementById('box')
inp[1].onclick = function () {
  var str = inp[0].value;
  var strN = '';
  for (var i = 0; i < str.length; i++) {
    strN += String.fromCharCode(str.charCodeAt(i) - 1000); //value每一個轉成編碼
  }
  box.innerHTML = strN;
}

str.indexOf()方法 -- indexOf(字符或字符串) 找到則返回位置，找不到則返回-1，indexOf(字符或字符串,從第幾位開始找),第二個參數為負數，默認0
str.lastIndexOf(),從左 <-- 右

var str = 'what id how goe what miei slfk.mai to zhay zip sib sussuej ahwt haha,id what at miei slfk.mai to zhay'
var s = 'what' //待查找字符
var i = 0;
var nu = 0;
for (; str.indexOf(s, i) != - 1; ) { //重覆執行找不到為止
  alert('找到位置：' + i) //找到3次
  i = str.indexOf(s, i) + s.length //i從找到的位置後加目標長度繼續找、
  nu++;
}
alert('總共：' + nu) //3

//比較
alert('你好'>'我好') //false
console.log('你'.charCodeAt()); //20320
console.log('我'.charCodeAt()); //25105

str.substring()、str.slice() 方法

var str = 'what id how goe what miei slfk.mai'
console.log(str.substring(0, 4)); //what
console.log(str.substring(4, 0)); // what 大的會自動在前面
console.log(str.substring( - 2, 4)); //what  負數當成0處理

console.log(str.slice(0, 4)); //what
console.log(str.slice(4, 0)); //無substring交換位置功能，返回空白
console.log(str.slice( - 3)); //mai 負數 = 尾部找

//展開收縮
_a.onclick = function () {
  if (on) {
    var stra = _span.innerHTML.substring(0, 27);
    _span.innerHTML = stra + '……';
    _a.innerHTML = '展開'
  } 
  else {
    _span.innerHTML = _spani
    _a.innerHTML = '收縮'
  }
  on = !on //每次點擊取反
}

str.toUpperCase()
str.toLowerCase()

str.split()、arr.join()

var strb = 'www.baidu.com'
console.log(strb.split('.')); //["www", "baidu", "com"]

var strT = 'www'
console.log(strT.split()); //["www"]
console.log(strT.split('')); //["w", "w", "w"]

var strM = '去芫存菁'
console.log(strM.split('芫')); //["去", "存菁"]

var strH = '/www.baidu.com/';
console.log(strH.split('/')); //["", "www.baidu.com", ""]

var strD = '2012-08-16-21-14-56'
console.log(strD.split('-')); //["2012", "08", "16", "21", "14", "56"]
console.log(strD.split('-', 3)); //["2012", "08", "16"] 第二個參數表示截取幾組

var arr = [
  'a',
  'b',
  'c'
]
console.log(arr.join()); //a,b,c 不加參數，中間默認有,
console.log(arr.join('')); //abc
console.log(arr.join('-')); //a-b-c

應用一：
1、獲取值
2、把值轉成數組 str.split('')
3、向數組裏的每一項添加標籤
4、把新數組重新組合成字符串 arr.join('')

應用二：
1、使用所輸入的內容作為分割可符，分割成數組，[, , , , , ,]
2、再用新的形式作為連接符，連接成字符串
3、所以替換功能也只是把join連接符換成新輸入內容即可

<p id="find">腦殘文段一：站在十六岁，站在青春转弯的地方，站在一段生命与另一段生命的罅隙，我终于泪流满面。<br />
    在黑色的风吹起的日子，在看到霰血鸟破空悲鸣的日子，在红莲绽放樱花伤势的日子里，在你抬头低头的笑容间，在千年万年的时光裂缝与罅隙中，我总是泪流满面。因为我总是意犹未尽地想起你。这是最残酷也是最温柔的囚禁吗？ </p>
<input type="text" id="findinp"/>
<input type="button" id="findbtn" value="findbtn"/>

var pfind = document.getElementById('find')
var findinp = document.getElementById('findinp')
var findbtn = document.getElementById('findbtn')
findbtn.onclick = function () {
  var str = findinp.value; //輸入內容作為分割符
  if (!str) return false
  pfind.innerHTML = pfind.innerHTML.split(str).join('<span>' + str + '</span>') //以 關鍵字 分割，以 新關鍵字 組合
}

數組方法
1、截取數組方法：arr.length = n；字符串的lenght無法寫；清空：arr.length = 0; || arr = []
2、添加 push()/unshift()，返回長度；刪除 pop()/shift()，返回被刪；
3、數組添加刪除、替換、添加 arr.splice()；刪除：返回被刪，替換：返回被刪，添加：返回[]
4、去除重複數組，循環1獲取第一個i，循環2獲取很二個j，j = i+1，前後對比；相等splice刪，j--;
5、排序：arr.sort(function(a,b){return a-b})，b-a表示從大到小；
6、隨機排：arr.sort(function(a,b){return Math.random()-0.5;});
7、隨機數：Math.round(Math.random();
8、數組連接：arr.concat(arr1,arr2,...); 顛倒位置：arr.reverse();

var arr = [1,2,3]
var arr = new Array(1,2,3)  //區別： var arr = Array(n),表示長度：n

var arr = [1,2,3]
arr.length = 1; //可寫
console.log(arr); // [1]

arr.length = 0;
arr = [] //清空數組，效率可能高

var str = 'abc'
str.length = 1; //字符串的length無法寫
console.log(str); //數組length可寫，字符串不可寫

var arr = [];
arr.push(1, 2, 3) //最後一位添加
console.log(arr.push('abc')); //4 arr.push()返回值為length

arr.unshift(0) //最前面一位添加
console.log(arr.unshift('def')); //6 arr.unshift返回值為length IE67不支持

var arrD = ['ab','bc','cd','de']
arrD.pop() //刪除最後一位
console.log(arrD.pop()); //返回被刪除字符

var arrD2 =  ['ab','bc','cd','de']
arrD2.shift() //刪除第一位
console.log(arrD2.shift()); //返回被刪除字符

排隊應用：切換圖片交換位置

var arrQ = ['1','2','3','4']
arrQ.unshift(arrQ.pop()) //刪除最後一位，並把刪除元素添加首位
console.log(arrQ); //["4", "1", "2", "3"]

var arrQ2 = ['1','2','3','4']
arrQ2.push(arrQ2.shift())
console.log(arrQ2); //["2", "3", "4", "1"]

//刪除 arr.splice(位置,刪除個數)
var arrS = ['1','2','3','4']
arrS.splice(0, 1)
console.log(arrS);
console.log(arrS.splice(0, 1)); //返回被刪元素

//替換 arr.splice(位置,刪除個數,'替換內容')
var arrS2 = ['1','2','3','4']
arrS2.splice(0, 1, 'a')
console.log(arrS2);
console.log(arrS2.splice(0, 1, 'a')); //返回被刪元素

//添加 arr.splice(位置,刪除0,'添加內容1',...)
var arrS3 = ['1','2','3','4']
arrS3.splice(2, 0, 'a')
console.log(arrS3);

數組去重覆，此方法適用於較少個數，太多會卡死，性能差；

var arr = [1,2,3,4,45,5,5]
for (var i = 0; i < arr.length; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) { //第一位與第二位比較
      arr.splice(arr[j], 1)
      j--; //splice成立後會刪除一個，所以arr.length應該減少1位
    }
  }
}
console.log(arr);

排序、從大到小，從小到大，隨機排

var arr = [4,1,2,3,4,454,56,5878,1]
arr.sort()
console.log(arr);
arr.sort(function (a, b) {
  return a - b; //b - a 從大到小
})
console.log(arr);
// 快速，希爾、冒泡、歸並、選擇、插入

var arr = ['323px','123px','10px','2000px']
arr.sort(function (a, b) {
  return parseInt(a) - parseInt(b)
})
console.log(arr);

//隨機排序
var arr = [1,2,3,4,5,6,7,8]
arr.sort(function (a, b) {
  return Math.random() - 0.5;
})
console.log(arr);

隨機範圍及生產
0~1：Math.random()， Math.floor() 向下; Math.ceil() 向上 Math.round()四舍五入
0-10：Math.round(Math.random()* 10)
x~y：function xyNum(x, y) { return Math.round(Math.random() * (y - x) + x) }
0~y：Math.round(Math.random() * y);
1~y：Math.ceil(Math.random() * y);

數組連接 arr.concat(arr1,arr2,arr3,...)
顛倒數組位置：arr.reverse();

var arr = [2,3,4,5,56]
arr.reverse()
console.log(arr)  // [56, 5, 4, 3, 2]

//所以顛倒字符串是
str = 'abcdef'
console.log(str.split('').reverse().join('')); // fedcba 轉成數組，顛倒，轉回字符

不重覆隨機數生產：ex: 1000選500不重複
思路一:

1、創建數組，存範圍內的所有數據 1000，所以每一位都不相同了;
2、新數組獲取500個創建數組的隨機位置，即能不重複；

function randomNumOne(range, count) { //randomNumOne(範圍,個數)
  var arrR = []
  var arrC = []
  for (var i = 0; i < range; i++) {
    arrR.push(i)
  }
  for (var i = 0; i < count; i++) {
    var index = Math.floor(Math.random() * arrR.length); //注間位置範圍隨機產生也需要在數組的長度內，比如使用splice刪除1位，則數組長度也減少1位；
    arrC.push(arrR.splice(index, 1))
  }
  return arrC;
}

思路二：

1、創建數組，存範圍內的所有數據 1000 所以每一位都不相同了;
2、再打亂此數據；
3、返回截取需要數組中的500位，效率較高

function randomNumTwo(range, count) {
  var arrR = [
  ]
  for (var i = 0; i < range; i++) {
    arrR.push(i)
  }
  arrR.sort(function (a, b) {
    return Math.random() - 0.5;
  })
  arrR.length = count;
  return arrR;
}

類似字符串indexOf方法，返回指定元素的們置，找不到返回 -1；

var arr = ['abc','def','123','ggg']
console.log(arrIndexOf(arr, '12d3'));

function arrIndexOf(arr, v) {
  var indexof = -1;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] == v) {
      indexof = i;
    }
  }
  return indexof
}

JSON


var json = { name:'elmok','age':30 };
var json = { 'name':'elmok','age':30 }; //推薦
console.log(json.name); //json.name = 'ooo'
console.log(json['name']); //json['name'] = 'ooo'

//數組套json
var arr = [{'name':'ELMOK'},{'age':30}];
console.log(arr[0].name);

for (var attr in json) {
  //  alert(attr)   //前面
  // alert(json[attr]);  //後面
}

//json套數組
var json = {
        url:['1.jpg','2.jpg'],
        txt:['图一','图二']
}
for (var attr in json) { //嵌套找
  for (var i = 0; i < json[attr].length; i++) {
    console.log(json[attr][i]);
  }
}

for in 也可操作對象，注意for in 無for循環裏如1,2,3,4...這樣的屬性，

var str = '';
var num = 0; //設置for in裏的個數
for (var attr in window) {
  str += attr + ':' + window[attr] + '<br />'
  num++
}
console.log(num);
document.body.innerHTML = str;

for 與 for in
1、json無長度,json.length == undefined ,無法使用for循環；
2、數組可使用for in,也可使用for

var json = {
  url: ['1.jpg','2.jpg'],
  txt: ['图一','图二']
}
for (var i = 0; i < json.length; i++) {
  alert(json[i])
}
console.log(json.length); //undefined
var arr = [ 1,2,3 ]
for (var i in arr) {
  console.log(arr[i]); // 1,2,3
}

零JS筆記 | 字符串 | 數組 | JSON

最新文章

最近回复

分类

归档

其它