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);
}