2.8.4.数组对象
数组的分类**
1、二维数组，二维数组的本质是数组中的元素又是数组。
var arr = [[1,2],[a,b]]; alert(arr[1][0]); //a 第2列第1行所在的元素
2、稀疏数组
稀疏数组是包含从0开始的不连续索引的数组。在稀疏数组中一般length属性值比实际元素个数大（不常见）
举例
var a=["a",,"b",,,,"c",,];
数组对象属性
| 属性 | 作用 |
| length 属性 | 表示数组的长度，即其中元素的个数 |
| prototype 属性 | 返回对象类型原型的引用 |
| constructor 属性 | 表示创建对象的函数 |
1.length属性:
alert(arr.length); //显示数组的长度10 arr.length=15; //增大数组的长度,length属性是可变的 alert(arr.length); //显示数组的长度已经变为15
2.prototype 属性
prototype 属性返回对象类型原型的引用。prototype 属性是object共有的。
objectName.prototype
objectName 参数是object对象的名称。
说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
对于数组对象，用以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。
function array_max( ){ var i, max = this[0]; for (i = 1; i < this.length; i++){ if (max < this[i]) max = this[i]; } return max; } Array.prototype.max = array_max; var x = new Array(1, 2, 3, 4, 5, 6); var y = x.max( );
3.constructor 属性
constructor 属性表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明：constructor 属性是所有具有prototype 的对象的成员。它们包括除 Global 和 Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。
例如：
x = new String("Hi"); if (x.constructor == String) // 进行处理（条件为真）。 //或 function MyFunc { // 函数体。 } y = new MyFunc; if (y.constructor == MyFunc) // 进行处理（条件为真）。
Array的对象方法
说明：部分是ECMAScript5的新特性（IE678不支持）
主要对一些新特性进行讲解
concat
concat作用是拼接数组，需要注意的是也可以把一个数组元素作为拼接的元素，如果这样的话，数组会被拉平，再和其它的元素拼接起来成为新的数组，但是不会被拉平两次，concat不会修改原数组。
例如:
var arr=[1,2,3,4,5]; arr.concat([10,11],13);//[1,2,3,4,5,10,11,13] arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]
slice
slice（a,b）a和b可以取负数，表示从a位置开始截取到b位置的一段数组，是一个左闭右开的区间，a和b可以取负数，如果是负数代表倒数第a/b个元素
var arr=[1,2,3,4,5]; arr.slice(1,3);//[2,3] arr.slice(1);//[2,3,4,5] arr.slice(1,-1);//[2,3,4] arr.slice(-4,-3);//[2]
splice
splice删除元素并向数组添加新元素
object.splice(a)从左边开始删除a个元素
object.splice(a，b)从a位置开始截取其中的b个元素
object.splice(a，b，c，d)从a位置开始截取b个元素，并将c和d或者更多的元素插入原数组
需要注意的是splice会修改原数组
var arr=[1,2,3,4,5]; arr.splice(2);//[3,4,5] arr;//[1,2];原数组被修改了 var arr=[1,2,3,4,5]; arr.splice(2，2);//[3,4] arr;//[1,2,5]; var arr=[1,2,3,4,5]; arr.splice(1，1，‘a’，‘b’);//[2] arr;//[1,"a","b",3,4,5];
foreach
foreach()函数从头到尾把数组遍历一遍。有三个参数分别是：数组元素，元素的索引，数组本身
var arr = [1, 2, 3, 4, 5]; arr.forEach(function(x, index, a) {//分别对应：数组元素，元素的索引，数组本身 console.log(x + '|' + index + '|' + (a === arr)); }); // 1|0|true // 2|1|true // 3|2|true // 4|3|true // 5|4|true
reduce()
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 2, 3]; var sum = arr.reduce(function(x, y) { return x + y }, 0); //参数 0是可选的，如果写了参数0那第一次传递的两个值就是0和1 如果不写第一次传递的就是数组的前两个值，计算结果是6 arr; //[1, 2, 3] arr = [3, 9, 6]; var max = arr.reduce(function(x, y) { console.log(x + "|" + y); return x > y ? x : y; }); // 3|9 // 9|6 max; // 9
数组和一般对象的比较
| 数组/一般对象 | |
| 相同点 | 都可以继承，对象不一定是数组，都可以当做对象添加属性 |
| 不同点 | 数组自动更新length按索引访问数组比访问一般对象属性明显迅速。数组对象继承Array.prototype上的大量数组操作方法 |
数组和字符串的比较
| 数组 /字符串 | |
| 相同点 | 字符串是数组的一种 |
| 不同点 | 字符串是不可变的数组，字符串没有数组的方法 |
2.9.JSON
2.9.1.stringify()
用于把js对象序列化为JSON字符串
var person={ name:"xiaoming", age:12 } var json=JSON.stringify(person); //{"name":"xiaoming","age":12}
stringify() 除了可以接受对象外，还可以接受2个参数，第一个参数是过滤器，可以是对象属性的数组集合，也可以是函数；第二个参数是一个选项，表示是否在JSON字符串中保留缩进
数组过滤器:
json=JSON.stringify(person,['name']); //{"name":"xiaoming"}
函数过滤器:
json=JSON.stringify(person,function(key,value){ switch(key){ case "name": return value+",wang"; case "age": return undefined; default: return value; } }); //{"name":"xiaoming,wang"}
注意，如果函数返回undefined，则该属性就会被忽略；
字符串缩进:
json=JSON.stringify(person,null,4); { "name": "xiaoming", "age": 12 }
2.9.2.toJSON()
向对象添加toJSON（）方法：
var person={ name:"xiaoming", age:12, toJSON:function(){ return this.name+" is "+this.age; } } json=JSON.stringify(person); console.log(json); //"xiaoming is 12"
2.9.3.parse()
parse()除了接受json字符串外，也可以接受一个函数参数。该函数接受2个值，一个键和一个值
var person=JSON.parse('{"name":"xiaoming","age":12}'); var person=JSON.parse('{"name":"xiaoming","age":12}',function(key,value){ if(key=="age"){ return value+10; } else{ return value; } });
2.10.Ajax
2.10.1.创建步骤:
1.创建一个XMLHttpRequest异步对象
2.设置请求方式和请求地址
3.接着，用send发送请求
4.监听状态变化
5.最后，接收返回的数据
例:
const xhr = new XMLHttpRequest() xhr.open('GET', './data/test.json', true) xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(JSON.parse(xhr.responseText)) } else { console.log('其它情况...') } } } xhr.send()
2.10.2.ajax在jQuery中的应用
$.ajax({ type:"post", //请求方式 url:"a.php", //服务器的链接地址 dataType:"json", //传送和接受数据的格式 data:{ username:"james", password:"123456" }, success:function(data){//接受数据成功时调用的函数 console.log(data);//data为服务器返回的数据 }, error:function(request){//请求数据失败时调用的函数 alert("发生错误:"+request.status); } });
2.10.3.GET方法
结构
$.get( url，[ data ]，[ callback ]，[ type ])
参数解释:
//步骤一：创建异步对象 var ajax = new XMLHttpRequest(); //步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url ajax.open("get", "users.json"); //步骤三：发送请求 ajax.send(); //步骤四：注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { //步骤五：如果能够进到这个判断，说明数据完美的回来了，并且请求的页面是存在的 console.log(ajax.responseText);//输入响应的内容 } };
2.10.4.POST方法
它与$.get( )方法的结构和使用方式都相同，不过之间仍然有一下区别
2.10.5.get与post区别
1.post的安全性高于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高
2.数量区别：get方式传输的数据量小，规定不能超过2kb，post方式请求数据量大，没有限制。
3.传输速度：get的传输速度高于post
因为使用方法相同，因此只要改变jQuery函数，就可以将程序在GET请求和POST请求之间切换
2.11.Cookie
2.11.1.js中cookie的读取操作
function getCookie(c_name){ if (document.cookie.length>0){ //先查询cookie是否为空，为空就return "" c_start=document.cookie.indexOf(c_name + "=") //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1 if (c_start!=-1){ c_start=c_start + c_name.length+1 //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置 c_end=document.cookie.indexOf(";",c_start) //其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断 if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节 } } return "" }
2.11.2.cookie简单存储操作
$.cookie("groupCode",222)
2.11.3.cookie设置过期时间
document.cookie = "name=value;expires=date"
2.11.4.cookie修改
document.cookie = "username=zhangsan"; document.cookie = "username=lisi"; var cookies = document.cookie; console.log(cookies);
2.11.5.cookie删除
document.cookie = "username=zhangsan"; document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; var cookies = document.cookie; console.log(cookies);
2.12.循环
2.12.1.for循环
for是最常用的循环，主要用来循环数组
let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3
2.12.2.Array.forEach()
语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
callback为数组中每个元素执行的函数，该函数接收三个参数，currentValue（数组中正在处理的当前元素），index（数组中正在处理的当前元素的索引），array（forEach() 方法正在操作的数组）
thisArg为当执行回调函数 callback 时，用作 this 的值。
let arr = [1, 2, , 3] let arrCopy1 = [] arr.map((item, index, arr) => { arrCopy1.push(item * 2) }) console.log(arrCopy1) // [2, 4, 6]
forEach() 为每个数组元素执行一次 callback 函数
那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）
与map()和reduce()不同的是，它没有返回值，总是返回undefind。
forEach()除了抛出异常以外，没有办法中止或跳出 forEach() 循环。
2.12.3.while
while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环
示例：
let n = 0; while (n < 3) { n++; } console.log(n); // expected output: 3
注：使用break语句在condition计算结果为真之前停止循环
2.12.4.do…while
do…while 语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次
示例
const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i]) //value console.log(i) //index i = i + 1 } while (i < list.length)
2.12.5.for…in
for…in循环可以用来遍历对象的可枚举属性列表（包括[[Prototype]]链）
主要用于遍历对象，通过属性列表可以获取属性值
for (let property in object) { console.log(property) //property name console.log(object[property]) //property value }
三、JavaScript新特性
参考此文:js新特性
