Двадцать четвертый день изучения фронтенда — сортировка выбором, рекурсия и JSON

Изучите сортировку выбором, рекурсию, JSON сегодня и некоторые дополнения к знанию массивов.

1. Сортировка выбором

Выберите сортировку:

• Идея состоит в том, чтобы использовать первый элемент массива и следующие элементы массива для сравнения по очереди, больший помещается сзади, а меньший помещается впереди, затем используется второй, а третий сравнивал в свою очередь

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

2. Дедупликация массива

• Идея состоит в том, чтобы удалить дубликаты в массиве, пройтись по элементам в массиве, затем сравнить их и удалить, если они одинаковы.
• Примечание. При удалении элементов массива, поскольку существует несколько последовательных повторяющихся элементов массива, при удалении одинаковых элементов, поскольку последний такой же, как и предыдущий, он будет заполнен, а позиция исходно удаленного элемента будет заменена .Поскольку она была сравнена с удаленной, она не вернется для сравнения, а есть рыба, которая проскользнула через сеть

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

3. Рекурсия

• Функции могут вызывать другие функции, а функции могут вызывать сами себя.
• Функция вызывает сама себя, и функция может выполняться повторно.Этот процесс выполнения называется рекурсией.

Рекурсивная проблема:

• Сама рекурсия формально параметрирует цикл и многократно выполняет код в функции.
• Количество выполнений цикла не определено. Таким образом, рекурсия должна иметь выход в конец, иначе она попадет в бесконечный цикл и позволит памяти переполниться.
• Рекурсия очень проста в использовании, но чтобы использовать рекурсию, вы должны сами открыть для себя правила.

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

4. Куча и стек

объем памяти:

• Когда данные хранятся в пространстве памяти, разные типы данных хранятся в разных местах.
• Пространство памяти разделено на область стека и область кучи.
• В js есть два типа типов данных:
  1. Базовые типы данных, которые хранятся в области стека памяти
  ; 2. Справочные типы данных, которые хранятся в области кучи памяти.

5. Тип данных объекта

• область действия функции, которая ограничивает область действия области данных
• Коллекция данных массива, которая может напрямую комбинировать разрозненные данные для удобства использования.
• Коллекция данных объекта с более четкой семантикой, которая в определенной степени решает проблему именования.
• Синтаксис объекта:
  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);

6. 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);