前端攻城狮---js之语法基础(3)

数组

什么是数组？数组是一组有序的数据集合。

定义方式

1.最简单的方式，数组字面量。var list = [1,2,3,4,5,6];

2.通过new的方式创建，这里涉及到对象的概念，后面会细说。

数组元素的引用

现在有这个一个数组，var list = [1,2,3,4,5,6,7];此时我想要读取数组中第3个数据，要怎么读取？

var num_3 = list[2],这里有人会问，我不是读取第3位吗怎么要从第2位读取？因为数组的索引的下标是从0开始，也就是说数组中的第一位对应的是list[0]，数组的第二位对应的是list[1]。

数组的长度

数组的长度需要通过数组的一个属性length来获取，如list.length，此时的值是7。那么数组的索引最大的下边就是length-1。

数组的循环

我们来定义一个循环，去获取到数组里的数据。

for(var i=0; i<=arr.length-1; i++) {
console.log(arr[i]);
}

数组中常用的方法

pop() push()

pop() 表示移出移除最后一项，那么返回的结果是被移除对象的值。

push() 表示在末尾添加一项，括号里需要传入值，然后返回的结果是添加后数组的长度。

    var arr = [1,2,3,4,5,6,7,8];
	    console.log(arr.length+" "+arr);
	    // 定义一个循环
	    console.log("pop "+arr.pop()+" "+arr.length+" "+arr);
	    console.log("push "+arr.push(9)+" "+arr.length+" "+arr);

shift() unshift()

shift() 表示移出第一项，那么返回的结果回事被移除对象的值。

unshift() 表示在第一项之前添加新的值，那么返回的结果回事添加后数组的长度。

   var arr = [1,2,3,4,5,6,7,8];
	    console.log(arr.length+" "+arr);
	    // 定义一个循环
	    console.log("shift "+arr.shift()+" "+arr.length+" "+arr);
	    console.log("unshift "+arr.unshift(9)+" "+arr.length+" "+arr);

concat() slice()

concat() 表示将几个数组连接起来，返回的结果是数组。

slice() 表示返回选定的数据，需要填写选取数组的下标范围，返回的结果是选取的数组。

slice(1,5)表示获取该数组的下标1－5的数组，不过[1,5),不包括5，所以获取到了4个数据。

   　　　　　　　　var arr = [1,2,3,4,5,6,7,8];
　　            var arr1 = ["a","b","c","d"];
		arr = arr.concat(arr1,9,["hahaha","heiheihei"]);
		console.log(arr);
		arr = arr.slice(0,5);
		console.log(arr);

reverse()

数组的逆序，颠倒数组的顺序。

splice()

我们可以通过splice去添加　删除　替换数组。splice(index,howmany,item....item)方法可以填写三个参数，第一个是从第几个item开始操作，第二个参数表示要删除的数量，第三个表示添加的数据。

添加数据 如我要第一项和第二项之间添加一个数据

    var arr = [1,2,3,4,5,6,7,8];
	    arr.splice(1,0,"hahaha");
	    console.log(arr);

我们可以看到第一个参数1，表示在第一项之后，第二个0表示删除0个，第三个参数表示要添加的数据。

删除数据　如我要删除第二项，第三项数据

	    var arr = [1,2,3,4,5,6,7,8];
	    arr.splice(1,2);
	    console.log(arr);

修改数据　如我要修改第二项数据

	    var arr = [1,2,3,4,5,6,7,8];
	    arr.splice(1,1,"hahaha");
	    console.log(arr);

sort()

此方法主要是来对数组进行排序的。sort()括号中使可以写方法，来定义某一个依据去让数据大到小的排列或者是小到大的排序，若不写方法则默认根据字符编码的顺序去排序。下面我们来看看实际使用。

	   var arr2 = [12,2,23,102,5,18,554,32];
	   arr2.sort(function(a,b) {
	   	    if(a<b) {
	   	    	return -1;
	   	    } else if(a==b) {
	   	    	return 0;
	   	    } else {
	   	    	return 1;
	   	    }
	   }); 
	   console.log(arr2);

看上述，看判断条件对应的返回值　a<b return -1; a>b return 1;a=b return 0;三个返回值-1 表示位置往前移一位，就是排在前面的意思，0表示位置不变，1表示位置排在后面。所以上面的判断条件对应的就是小的数字拍前面大的数字拍后面。

再来一个demo

        var arr = ["△△△","△△△△△","△△","△△△","△△","△△△△△△△△△△","△△△"];
        arr.sort(function(a,b) {
        	if(a.length>b.length) {
        		return 1;
        	} else if(a.length < b.length) {
        		return -1;
        	} else {
        		return 0;
        	}
        });
        console.log(arr);

join()

表示将数组转化为字符串，括号就填写拼接时的间隔元素。

  var list =["A","B","C","D","E"];
	  console.log(list.join("/"));

字符串

和数组一样length属性表示字符串的长度。

循环字符串

var str = "abcxyz";
for(var i=0; i<=str.length-1; i++) {
console.log(str.charAt(i));

}

常用方法

charAt()

获取字符串中指定位置的字符。下标从０开始

concat()

连接字符串，返回的是连接后的字符串 "abc".concat("hahaha")

indexof()

检查字符串，检索目标字符串是否有指定的字符串。”abc“.indexof("d"),若检索到则返回对应的下边，若无则返回-1。

replace()

替换与正则表达式匹配的子串，返回的是替换后的字符串。"abcdefg".replace(/a/,"A");或者是"abcdefg".replace("a","A")

slice()

提取字符串，"人人都爱人民币".slice(１,４); // "人都爱" --->(1,4]

substr()

截取字符串。

"abcfhh123".substr(3,6);// "fhh123" 从下标为3的地方开始截取6个字符

substring()

截图字符串。

"abcfhh123".substring(3,6);== "abcfhh123".substr(3,3); // "fhh" 从下标为3的地方开始截取到下标为6的字符位置但是不包含6这个位置

toLowerCase()

将字符串转小写

toUpperCase()

将字符串转大写

arguments对象

js里没有函数重载，函数重载就是同一个函数名，不同的参数如java支持函数重载。但是我们可以通过arguments对象来实现函数重载的效果。

arguments是什么呢？它不是数组但又类似数组，它表示的是用户传入的实参。下面看这个demo。

	    // 求任意多个数的和
	    function sum() {
	    	console.log("形参　"+arguments.callee.length);
	    	var sum = 0;
	    	for(var i=0; i<arguments.length; i++) {
	    		sum += arguments[i];
	    	}
	    	return sum;
	    }

	    console.log(sum(1));
	    console.log(sum(1,2));
	    console.log(sum(1,2,3));
	    console.log(sum(1,2,3,4));

IIFE(即时调用函数表达式)

怎么理解呢？我们定义函数的方式有两种，一种是函数表达式，另一种是函数定义，但是在定义的时候我们并没有去调用该函数。而IIFE就不同，在定义的时候就已经把函数调用了一边，这样做有什么好处呢？下面回来分析，我们先来看看IIFE的使用结构。

   // 标准IIFE
	     (function() {
	    	alert("IIFE");
	    })();

通过IIFE来解决实际中的问题

我们来实现这样一个问题，给一个数组添加10个函数，函数里有个参数记录着自己这个函数在数组中对应的下标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    	var arr = [];
	    for(var i=0; i<10; i++) {
	    	arr.push( function() {
	    		console.log(i); // 想弹出自己的序号
	    	});
	    }
	    arr[0](); // 10
	    arr[2](); // 10
        arr[5](); // 10 
    </script>
</body>
</html>

我们可以看到返回的值却不是我们想要的而都是10，为什么呢？不是说每个函数都是闭包，都会保存下当时声明时的值？为什么没有保存下来？为什么只保存了最后一个？

闭包是可以保存当时声明时的参数，但只是个参数没有保存参数对应的值，也就是说数组里面的10个函数都记录下了i，但是i对应的值却不知道，想要保存里面的值的话，该函数需要被调用，那么里面的i就可以被记录下来，这就用到了IIFE，接下来我们把代码修改一下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	    var arr = [];
         for(var i=0; i<10; i++) {
          	(function(n) {
          		arr[n] = function() {
	    		   alert(n); // 想弹出自己的序号
	    	    }
          	})(i);  	
	    }
	    arr[0](); // 0
	    arr[5](); // 5
	</script>
</body>
</html>

这样就可以避免刚才的问题，IIFE即时调用函数声明，在声明的时候就已经调用函数，就把里面的i和对应的值保留下来。