学习前端的第二十四天——选择排序、递归和JSON

今天学习选择排序、递归、JSON，还有一些关于数组知识的补充

一、选择排序

选择排序：

• 思路，先使用第一个数组元素和后面的数组元素依次进行比较，那个大就放在后，那个小就放在前面，然后再使用第二个，第三依次比较

var arr = [5, 3, 7, 1];
//外层循环执行一次，内层循环执行一轮
for(var i=0; i<arr.length-1; i++){
	//j=i+1是因为不需要和自身进行比较
    for(var j=i+1; j<arr.length; j++){
        // 0>1 0>2 0>3 
        // 1>2 1>3
        // 2>3
        if(arr[i]>arr[j]){
            var temp;
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        } 
    }
}
console.log(arr);

二、数组去重

• 思路，把数组里面重复的东西去除掉，将数组里面的元素进行遍历，然后进行比较，若相同则删除
• 注意：删除数组元素的时候，由于有连续多个重复数组元素，当相等的元素被删除后，由于后面的跟前面的一样，所以会进行补位，原先删除的元素的位置被替换了，又因为跟删除的比较过了所以不会回来进行比较，就出现了漏网之鱼

var arr = ['a', 'a', 'a', 2, 3, 2, 3, 3];
for(var i=0; i<arr.length-1; i++){
      for(var j=i+1; j<arr.length; j++){
      
          //使用前面的依次和后面的进行比较，如果相等就从数组里面删除对应的项
          //splice(参数1, 参数2); 参数1表示从哪里开始  参数2表示删除几项 
          if(arr[i] == arr[j]){
              arr.splice(j, 1);
              
              //处理漏网之鱼
              j--;
          }
      }
  }
  console.log(arr);

三、递归

• 函数可以调用其他函数，函数也可以自己调用自己
• 函数自己调用自己，可以让函数重复执行，把这个执行的过程就叫做递归

递归的问题：

• 递归自己会形参一个循环，重复执行函数里面的代码
• 不确定循环执行的次数。所以递归必须有一个出口，才能结束，不然会陷入死循环，让内存溢出
• 递归非常好用的，但使用递归，必须自己去发现规律

var i = 0;
function zbds(){
    i++;
    console.log('准备冻手'+i);
    if(i<10){
        zbds();
    }
}
zbds();

四、堆和栈

内存空间：

• 数据在内存空间里面存储的时候，不同的数据类型存储的位置不不一样
• 内存空间分为栈区和堆区
• js里面数据类型分为两种
  1、基本数据类型，存储在内存的栈区
  2、引用数据类型，存储在内存的堆区

五、对象数据类型

• function 作用域，限定数据起作用域的范围
• Array 数据的集合，可以把分散的数据直接组合在一起方便使用
• object 数据的集合，语义更为明确，一定程度上解决命名问题
• 对象的语法：
  1、使用构造函数形式
  2、使用字面量形式
• 对象组成：
  1、属性和方法
  2、键值对 属性分为属性名(键)和属性值 方法又分为 方法名称(键)和方法值

//构造函数
var obj1 = new Object();
//给对象添加属性
obj1.name = '王小明';
obj1.age = 18;
obj1.sex = '男';
obj1.like = '路过的kamenrider';
//添加方法
obj1.cart = function(){
    console.log('喜欢变卡！');
}
//使用一个对象 对象名.属性 或者 方法
console.log(obj1.name);
obj1.cart();
document.write('<h1>我是:'+obj1.like+'</h1>');


//字面量方式
var obj1 = {
    //添加属性
    name : 'decade',
    sex : '男',
    age : 22,
    //添加方法
    //say : function(){
    //    console.log('henshin!');
    //}
    //简写形式
    say(){
  		console.log('henshin!');
	}
}
console.log(obj1.name);
obj1.say();


//对象数据类型添加属性也支持中括号形式
var obj = {};
obj.name = '宋江';
obj.sex = '男';
console.log(obj);


//通过中括号形式给对象添加属性，要求属性名称必须是字符串类型
var obj = {};
obj['name'] = '宋江';
obj['age'] = '28';
console.log(obj);

obj['say'] = function(){
     console.log('666'); 
}
obj.say();

//中括号形式里面可以接收一个变量，会让属性名名称更为灵活
var a = '及时雨';
var obj2 = {};
obj2[a] = '宋江';
console.log(obj2);

obj2[a] = function(){
     console.log('666'); 
}
consloe.log(obj2);

六、JSON

介绍：

• JSON是js对象的表示的一种
• JSON是前后端交换数据的一种公用的格式
• 后端语言很多种，而前端语言其实都是固定的好 html、css、js
• 开始的时候每一种后端语言和前端进行数据交换的时候，都有自己的格式或者叫做规定，对于开发人员来说就非常的麻烦
• 后面有人就提出为了解决问题，咱们一起把数据格式统一化，无论是那种后端语言格式是统一的就不会出现很多的状况，学习成本和沟通成本降低了
• 在JSON数据格式之前还有一种数据格式，目前还在使用但是慢慢已经被JSON格式给替代了
• xml格式，其实也是标记语言，和html的区别在于xml的标记可以自定义
• 大家发现xml数据格式也不是很方便，大家使用js对象的表示方法，出现了JSON格式
• JSON不仅是js对象，还是一种特殊的字符串，前后端交换要求使用字符串格式
• JSON和JS对象的格式是一样的，只不过JSON字符串中的属性名必须加双引号。

特点：

• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
• JSON 具有自我描述性，更易理解
• 注意：字符串格式不能换行

语法：

var data1 = '{"name":"张三"}';
var data2 = '["name":"张三"]';
var data2 = '[{"name":"张三"}, {"哈哈":"李四"}]';

JSON.parse()可以将JSON字符串转为js对象。
JSON.stringify() 可以把js对象转成JSON字符串，传递给后端

//在开发中尽量不要使用，首先的执行性能比较差，然后它还有安全隐患
eval()会把字符串转成对象，会把对象直接执行
//如果使用eval()执行的字符串中含有{}, 它会将{}当成代码块执行，如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
var obj = eval("("+'{a:1}'+")");



例子：

var lolInfo = [
	{
		"id" : 1,
		"name" : "亚索",
		"age" : 26,
		"sex" : "男",
		"say" : "死亡如风，常伴吾身"
	},
	{
		"id" : 2,
		"name" : "劫",
		"age" : 28,
		"sex" : "男",
		"say" : "无形之刃，最为致命"
	},
	{
		"id" : 3,
		"name" : "锐雯",
		"age" : 24,
		"sex" : "女",
		"say" : "断剑重铸之日，骑士归来之时"
	}
]
//创建一个表格
//遍历JSON对象，根据数据输出表格
var str = '<table border="1" width="600" height="300">';
	for(var i=0; i<lolInfo.length; i++){
		str += '<tr>';
			//使用for in遍历对象
			for(var j in lolInfo[i]){
				str += '<td>'+lolInfo[i][j]+'</td>';
			}
		str += '</tr>';
	}
str += '</table>';
document.write(str);