js修改數組元素數據類型

A. js常用增刪改查方法/js比較運算符 邏輯運算符 賦值運算符 算術運算符

js數組遍歷某個值求和

一、增

1、push()

可接收任意數量的參數，把它們逐個添加至數組末尾，並返回修改後數組的長度。例如：

2、unshift()

該方法與push()類似，也可接收任意數量的參數，只不過是將參數逐個添加至數組前端而已，同樣返回新數組長度。咱們接著上面的例子：

3、concat()

該方法與push()方法有點類似，同樣是將元素添加至數組末尾，只不過這個數組已經不是原來的那個數組了，而是其副本，所以concat()操作數組後會返回一個新的數組。具體用法如下：

① 不傳參數，返回當前數組副本
② 傳遞一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中
③ 傳遞非數組參數，這些參數就會被直接添加到結果數組的末尾

繼續接著上面的栗子：

例子中一目瞭然，原數組保持不變，新數組後面添加了4、5、6三個元素。

4、splice()

前面的三個方法都具有很大局限性，因為不是添加到數組前就是數組後，而splice()就不一樣了，它非常靈活和強大。靈活是因為它可以添加元素到數組的任意位置，強大是因為它除了可以添加元素之外還具有刪除和替換元素的功能（這個後面會陸續講到）。

splice()可以向數組指定位置添加任意數量的元素，需要傳入至少3個參數： 起始位置、0（要刪除的元素個數）和要添加的元素。

依然接著上面的例子繼續：

可以看出，splice()與push()和unshift()一樣是直接在原數組上修改的。

二、刪

1、pop()

與push()方法配合使用可以構成後進先出的棧，該方法可從數組末尾刪除最後一項並返回該項。

接著上例：

2、shift()

與push()方法配合使用可以構成先進先出的隊列，該方法可刪除數組第一項並返回該項。

繼續接著上例：

3、slice()

定義和用法
slice() 方法以新的數組對象，返回數組中被選中的元素。

slice() 方法選擇從給定的 start 參數開始的元素，並在給定的 end 參數處結束，但不包括。

注釋：slice() 方法不會改變原始數組。

該方法同concat()一樣是返回一個新數組，不會影響原數組，只不過slice()是用來裁剪數組的，返回裁剪下來的數組，具體用法如下：

4、splice()

好，繼續講這個「萬能」的方法。

上面講到，該方法在添加數組元素的時候需要傳入3個以上參數，而其中第2個參數就是用於指定要刪除元素的個數的，那時我們傳的是數字0。那麼，如果單單只需刪除元素，我們就只需給splice()傳入兩個參數，第1個參數用於指定要刪除的第一項的位置，第2個參數用於指定要刪除元素的個數。

繼續上例~~

從索引項為2的位置開始刪除4個元素，所以結果為 [-1, 0, 1, 2]。

三、改

這個其實最靈活的方式就是直接使用splice()這個強大的方法了，其實通過以上對該方法的了解，我們大致就能知道使用該方法修改數組元素的基本原理。

原理很簡單，就是向指定位置插入任意數量的元素，且同時刪除任意數量的元素。

依然繼續上例~~

四、查

indexOf()和lastIndexOf()

這兩個方法都接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中，indexOf()從數組的開頭（位置0）開始向後查找，lastIndexOf()方法則從數組的末尾開始向前查找。

例如：

當找不到該元素時，返回 -1 ，lastIndexOf()方法同理。

1 數據類型
<script>
2 引用數據類型
object 對象類型
3 number 數字類型
包含所有的數字（整數，浮點數，正數，負數，極大極小數），Infinity(分母為零)，NaN(not a number)
4 string 字元串類型
引號包含的任意文本，單雙引號都可以

輸出展示

2 比較運算符
<script>
/*
1 比較運算符
比較兩個值的大小 返回一個布爾值（true 或 false）
> < >= <= == != === !==
== 等於，只判斷數值
===全等，絕對等於，即判斷數據類型也判斷數值
!= == 取反
!== ===取反
console.log(undefined == null);//true 都沒有值
console.log(undefined === null);//false 數據類型不同undefined object
console.log(NaN == NaN); //false
console.log(NaN === NaN); //false
console.log(NaN != NaN); //true
console.log(NaN !== NaN); //true
/
</script>
3 邏輯運算符
<script>
/
2 邏輯運算符
連接多個表達式，返回一個布爾值（true 或 false）
&& 邏輯與 並且 所有的表達式都為true，結果才為true，有一個為false結果就為false
|| 邏輯或 或者 所有的表達式都為false，結果才為false，有一個為true結果就為true
！ 邏輯非 取反 表達式為true取反就為true，反之亦然
注意： 邏輯與的優先順序大於邏輯或
*/
</script>
邏輯運算符演示

輸出到控制台的結果

4 賦值運算符
<script>
/*
3 賦值運算符
= 等號右邊的值賦值給左邊
+= x += y x = x + y 下同
-=
*=
/=
%= 要的是余數
*/
</script>
<script>
x = 7;
y = 3;
console.log(x/=y)
</script>

5 算術運算符
<script>
/*
算術運算符
+ - * / %(取余，取模) ++（自增） --(自減）
%(取余，取模) 應用 判斷奇偶數、倍數
++ 相當於自己加1 x++ 相當於 x = x + 1
-- 相當於自己加1 x-- 相當於 x = x - 1
+運算碰到字元串，直接進行字元串拼接，返回string類型
- * / %遇到字元串，都轉換成number類型進行計算，如果不能轉換成數字，則返回NaN，數據類型未number
true轉換1 false轉換為0
++ --
前++和後++，對於變數自己來說沒有區別都是+1
前++ 先賦值 在加1
後++ 先加1 再賦值
/
</script>
<script>
/ var x = 5;//number
var y = 2;//number
comsole.log(x + y);//7
comsole.log(x - y);//3
comsole.log(x * y);//10
comsole.log(x / y);//2.5
comsole.log(x % y);//1 */

B. JS Array(數組)所有操作方法，改變數組方法、不改變數組方法

定義：返回由所有參數值組成的數組，如果沒有參數，就返回一個空數組。
目的：Array.of() 出現的目的是為了解決上述構造器因參數個數不同，導致的行為有差異的問題。

參數：
第一個參數(必需):要轉化為真正數組的對象。
第二個參數(可選): 類似數組的map方法，對每個元素進行處理，將處理後的值放入返回的數組。
第三個參數(可選): 用來綁定this。

ps：splice方法從數組中添加/刪除項目，然後返回被刪除的項目

語法： array.splice(index,howmany,item1,.....,itemX)
參數:
index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany：必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。
item1, …, itemX： 可選。向數組添加的新項目。
返回值: 如果有元素被刪除,返回包含被刪除項目的新數組。

刪除元素

刪除並添加

不刪除只添加

ps：方法接受兩個參數，一個從哪裡開始，一個是到哪裡結束（但是不包括這個結束的元素本身）。如果是負數，就從倒數第幾個。

參數可選: 規定排序順序的比較 函數 。
默認情況下sort()方法沒有傳比較函數的話，默認按字母升序，如果不是元素不是字元串的話，會調用toString()方法將元素轉化為字元串的Unicode(萬國碼)位點，然後再比較字元。

比較函數的兩個參數
sort的比較函數有兩個默認參數，要在函數中接收這兩個參數，這兩個參數是數組中兩個要比較的元素，通常我們用 a 和 b 接收兩個將要比較的元素：

sort排序常見用法
數組元素為數字的升序、降序:

數組多條件排序

自定義比較函數

定義: 在當前數組內部，將指定位置的成員復制到其他位置,並返回這個數組。
語法: array.Within(target, start = 0, end = this.length)
參數:
三個參數都是數值，如果不是，會自動轉為數值.
target（必需）：從該位置開始替換數據。如果為負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認為 0。如果為負值，表示倒數。
end（可選）：到該位置前停止讀取數據，默認等於數組長度。使用負數可從數組結尾處規定位置。
瀏覽器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持

從上述例子:
第一個參數是開始被替換的元素位置
要替換數據的位置范圍:從第二個參數是開始讀取的元素，在第三個參數前面一個元素停止讀取
數組的長度不會改變
讀了幾個元素就從開始被替換的地方替換幾個元素

參數:
第一個元素(必須): 要填充數組的值
第二個元素(可選): 填充的開始位置,默認值為0
第三個元素(可選)：填充的結束位置，默認是為this.length

使用join方法或者下文說到的toString方法時，當數組中的元素也是數組或者是對象時會出現什麼情況？

join()/toString()方法在數組元素是數組的時候，會將裡面的數組也調用join()/toString(),如果是對象的話，對象會被轉為[object Object]字元串。

如上述栗子：調用數組的toLocaleString方法，數組中的每個元素都會調用自身的toLocaleString方法，對象調用對象的toLocaleString,Date調用Date的toLocaleString。

該方法的效果和join方法一樣，都是用於數組轉字元串的，但是與join方法相比沒有優勢，也不能自定義字元串的分隔符，因此不推薦使用。
ps：當數組和字元串操作的時候，js 會調用這個方法將數組自動轉換成字元串

ps：字元串也有一個slice() 方法是用來提取字元串的，不要弄混了。
參數:
begin(可選): 索引數值,接受負值，從該索引處開始提取原數組中的元素,默認值為0。
end(可選):索引數值(不包括),接受負值，在該索引處前結束提取原數組元素，默認值為數組末尾(包括最後一個元素)。

如上：新數組是淺拷貝的，元素是簡單數據類型，改變之後不會互相干擾。

如果是復雜數據類型(對象,數組)的話，改變其中一個，另外一個也會改變

原因在定義上面說過了的：slice()是淺拷貝，對於復雜的數據類型淺拷貝，拷貝的只是指向原數組的指針，所以無論改變原數組，還是淺拷貝的數組，都是改變原數組的數據。

ES6擴展運算符...合並數組：
因為ES6的語法更簡潔易懂，所以現在合並數組我大部分採用...來處理，...運算符可以實現cancat的每個栗子，且更簡潔和具有高度自定義數組元素位置的效果。

參數:
searchElement(必須):被查找的元素
fromIndex(可選):開始查找的位置(不能大於等於數組的長度，返回-1)，接受負值，默認值為0。
嚴格相等的搜索:
數組的indexOf搜索跟字元串的indexOf不一樣,數組的indexOf使用嚴格相等===搜索元素，即數組元素要完全匹配才能搜索成功。
注意：indexOf()不能識別NaN

參數:
searchElement(必須): 被查找的元素
fromIndex(可選): 逆向查找開始位置，默認值數組的長度-1，即查找整個數組。
關於fromIndex有三個規則:
正值。如果該值大於或等於數組的長度，則整個數組會被查找。
負值。將其視為從數組末尾向前的偏移。(比如-2，從數組最後第二個元素開始往前查找)
負值。其絕對值大於數組長度，則方法返回 -1，即數組不會被查找。

參數：
searchElement(必須):被查找的元素
fromIndex(可選):默認值為0，參數表示搜索的起始位置，接受負值。正值超過數組長度，數組不會被搜索，返回false。負值絕對值超過長數組度，重置從0開始搜索。
includes方法是為了彌補indexOf方法的缺陷而出現的:
indexOf方法不能識別NaN
indexOf方法檢查是否包含某個值不夠語義化，需要判斷是否不等於-1，表達不夠直觀

C. js new Array數組

array數組可以自動擴展長度，用戶直接new Array（100）的話，循環就會進行一百次。

具體有什麼作用，可以參考下面的例子：

varx=newArray(100);

for(vari=0;i<x.length;i++)x[i]=i*i;

(3)js修改數組元素數據類型擴展閱讀：

使用規則

1、數組的類型實際上是指數組元素的取值類型，對於同一個數組，其所有元素的數據類型都是相同的。

2、數組名的書寫規則應符合標識符的書寫規定。

3、數組名不能與其它變數名相同。

4、可以只給部分元素賦初值，當{ }中值的個數少於元素個數時，只給前面部分元素賦值。

例如：static int a[10]={0,1,2,3,4};表示只給a[0]～a[4]5個元素賦值，而後5個元素自動賦0值。

D. JS創建數組及數組元素

1、字面量的方式創建數組 ：

         let arr = ['張三','李四','王五'];

        let num = [11,22,33,44]；

        console.log(arr); 

         數組的下標從0開始 

 2、構造函數的方式創建數組 

        new Array(size);

        表示數組中可存放的元素總數

        規定了總數 但是添加一個數 總數也會增

        new Array()實例化一個數組對象 

         let arr = new Array(3)

         arr = [1,2,3,4] 

        聲明時賦值 ：

         let arr = new Array(1,2,3,4,5,6) 

        分別賦值 ：

         let arr = new Array(3);

        arr[0] = 'zhangsan';

        arr[1] = 'lisi';

        arr[2] = 'wangwu' ；

 3、通過數組的名稱和下標直接訪問數組的元素 

         console.log(arr[1]); 

        for(var i in arr){

            console.log(arr[i]); } 

  4、屬性   length  設置或返回數組中元素的數目 

        let arr = [1,2,3,4,5]

         console.log(arr.length); 

  5、 join( )  把數組的所有元素放入一個字元串，通過一個分隔符進行分隔 

        把數組轉成字元串 

        let newstr = arr.join(); 

         join()裡面沒有傳任何參數 默認以逗號連接 

         join('') 數字中間沒有任何字元拼接

        let newstr = arr.join('+');

         console.log( typeof(newstr) ); 

       console.log(newstr);

   6、 sort()   對數組排序 

         隱式數據類型轉換 會字元串類型的轉成數字類型進行排序 

        let arr = ['2', '3', '1', '5', '0'];

        let newarr = arr.sort(); 

         sort方法 會把老數組和新產生的數組都進行排序 

        console.log(arr, newarr); 

       sort()對應多位數排序會出現問題

        let arr = [2,22,3,32,1,12,100];

       sort 給我們提供的解決方法 

         arr.sort(function(a,b){

         從小到大的順序 

          return a-b; 

        從大到小的順序 

          return b-a; })

         console.log(arr);

7、 push()   向數組末尾添加一個或更多元素，並返回新的長度 

         在外面定義的叫全局變數 

        let stu = ['小張','小王','小李'];

      console.log(stu); 

    方法裡面的叫局部區域 

        function fn(){

   因為stu 是全局的 所以在方法裡面 可以獲取到

    數組可以添加重復的數據 

    push也可以添加多個數據 

           let a = stu.push('麗麗','倩倩','雯雯')

            console.log(a);

          console.log(stu);}

         定義一個空數組 點擊添加按鈕 可以在空數組裡面添加

        姓名 點擊一個添加 可以把數組使用 dw 顯示在頁面上 

         let arr = []

         function fn(){

             arr.push('xiaoa')

        document.write有個缺陷，用按鈕點擊的時候

            會把整個頁面進行重新繪制，導致頁面原來的內容丟失  

           document.write(arr)} }

8、 concat() 合並兩個數組 

        對原來的兩個數組 沒有任何改變，會生成一個拼接好的新數組 

         let arr1 = [1,2,3];

         let arr2 = [4,5,6];

         let arr3 = [7,8,9]

     拼接多個數組 

       let newarr = arr1.concat(arr2).concat(arr3);

      console.log('arr1',arr1);

         console.log('arr2',arr2); 

      console.log('newarr',newarr);

        es6合並數組 要是用擴展運算符 ... 

         等同於 [1,2,3] 把arr1的括弧去掉，

        把裡面的內容拿出來了 

        let newarr = [...arr1]; 

         let newarr = [...arr1,...arr2,...arr3];

         console.log(newarr);

        eg1：定義  三個數組  分別是 三組學生的信息 第一組 姓名 年紀  性別 

        把三個數組 拼接起來 使用兩種方式 

        數組中的splice方法 可以對數組進行增刪改 

        splice()裡面有三個參數，

        第一個參數表示 你要操作的數組元素的索引

        第二個參數表示 你要從你選擇的索引開始要刪除的個數

        第三個參數表示 你要添加的數組元素

        let arr = ['張三','李四','王五']; 

         刪除李四 

        arr.splice(1,1) 

        把王五修改成麗麗 

         arr.splice(2,1,'麗麗') 

        添加 你想在哪裡添加就在哪裡添加 

        把倩倩放在數組索引為2的位置 因為第二個參數是0 所以王五不會被刪除 

         arr.splice(2,0,'倩倩') 

        使用splice在數組的末尾添加 

        arr.splice(3,0,'倩倩') 

        在任意數組末尾的位置進行添加 

        arr.splice(arr.length,0,'倩倩')

        console.log(arr); 

         eg2：寫一個數組 裡面有姓名 年紀 性別 展示在頁面上

         再寫三個按鈕 點擊 可以實現

        數組的末尾添加一個信息 刪除年紀  修改性別  點擊完成之後

        數組的最終結果使用alert列印出來 

         let arr = ['張三',20,'男'];

        document.write(arr);

         function fn(str){

            if(str=='add'){

                 arr.splice(arr.length,0,'賓士')

                alert(arr)    }

            if(str=='del'){

                 arr.splice(1,1)

              alert(arr)   }

           if(str=='update'){

               arr.splice(1,1,'女')

              alert(arr） } }

         let arr = ['張三','李四','王五'] 

         push在數組的末尾添加一個元素 

         pop 刪除數組的最後一個元素

         arr.pop();

        console.log(arr); 

        shift 刪除數組的最前面的一個元素 

        arr.shift();

        console.log(arr); 

        unshift 在數組的最前面添加一個數組 

        arr.unshift('麗麗')

        console.log(arr);

E. JS（JQUERY）把數組數據變成JSON數據

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8"/>
<title>JS的TAB切換</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
	varoldArr=[
{
"date":"20140929",
"value":"value1"
},
{
"date":"20140929",
"value":"value2"
},
{
"date":"20140929",
"value":"value3"
},
{
"date":"20140930",
"value":"value4"
},
{
"date":"20140930",
"value":"value5"
}
];
varconvert=function(oldArr)
{
	varnewJson={};
	for(vari=0;i<oldArr.length;i++)
	{
		(!newJson[oldArr[i].date])
		{
			newJson[oldArr[i].date]=
			{
				"date":oldArr[i].date
			};
		}
		if(!!newJson[oldArr[i].date]["data"])
		{
			newJson[oldArr[i].date]["data"].push(oldArr[i]);
		}
		else
		{
			newJson[oldArr[i].date]["data"]=[oldArr[i]];
		}
	}
	returnnewJson;
}
varnewJson=convert(oldArr);
console.log(newJson);
</script>
</head>
<body>
</body>
</html>

F. 怎麼用js修改chart.js數組裡面的值

後台獲取ajax參數後，可以通過參數查詢資料庫，返回一個javabean對象，然後轉換成json格式返回頁面：
ajax部分：
$(function(){
$("#userlist a").bind("click",function(){
var hol = $(this).attr("rel");
var data = "action=getlink&id="+hol;

$.getJSON("server.php",data, function(json){
$("#name").html(json.name);
$("#sex").html(json.sex);
$("#tel").html(json.tel);
$("#email").html(json.email);
});
});
});
php後台處理部分：
後台server.php得到前端的Ajax請求後，通過傳遞的參數連接資料庫並查詢用戶表，將相應的用戶信息轉換成一個數組$list，最後將數組轉換成JSON數據。關於PHP與JSON的操作可以查看本站收集的文章：PHP中JSON的應用。以下是server.php的詳細代碼，其中數據連接部分省略：
include_once("connect.php"); //連接資料庫
$action=$_GET[action];
$id=intval($_GET[id]);
if($action=="getlink"){
$query=mysql_query("select * from user where id=$id");
$row=mysql_fetch_array($query);
$list=array("name"=>$row[username],"sex"=>$row[sex],"tel"=>$row[tel],"email"=>$row[email]);
echo json_encode($list);
}