原生JS填坑

目录

循环遍历创建DOM只能插入一个

本地存储和会话存储

输出语句 document.write

变量命名规则

两种数据类型检测的区别

各种数据类型的转换

1.数字类型的转换

2.字符串的转换

3.布尔类型的转换

赋值运算符

逻辑运算符

自增自减运算符

问题：在动态创建列表时，通过页面加载函数获取到后台数据后，循环遍历创建dom节点时，只能插入最后一个的数值的节点

然而获取的数据结构为：

对应下可以看出执行遍历后，只是传递了最后一个值，之前的值都被覆盖了，问题代码如下：

	window.onload =  function getdata(){
		$.ajax({
		 url:'index',
		 async:false,
		 dataType:'json',
		 success:function(e){
		 var data = e;
		 console.log("已经获取数据");
		 var father = document.getElementById('.showbox');
		 var div = document.createElement('div');//问题就出在这里
		 for (let key in data) {
		   for(let i=0,res=data[key];i<=res.length-1;i++){ 
			 console.log(res[i]);
			 var html='';
			html+='';
			html+='';
		    html+='
应急事件编号：'+res[i].id+'
';
		    html+='
应急事件名称：'+res[i].name+'
';
			html+='
发布单位名称：'+res[i].danwei+'
';
			html+='
提报日期：'+res[i].data+'
';
			html+='';
            html+='';
		    html+='';	
			div.innerHTML = html;
			// console.log(html);
			showbox.appendChild(div);
				 }
			 }
		 }
	 })
},

因为动态创建的dom节点都会被appendChild()方法添加到，一个div父盒子中，但是父盒子却并没有放在遍历循环中，所以始终只有一个父盒子，所传递参数就会覆盖之前的参数，就造成了只会插入最后一个的情况。

解决办法
将父元素也放入循环遍历中，代码如下：

	window.onload =  function getdata(){
		$.ajax({
		 url:'index',
		 async:false,
		 dataType:'json',
		 success:function(e){
		 var data = e;
		 console.log("已经获取数据");
		 var father = document.getElementById('.showbox');
		 var div = document.createElement('div');//问题就出在这里
		 for (let key in data) {
		   for(let i=0,res=data[key];i<=res.length-1;i++){ 
			 console.log(res[i]);
			 var html='';
			html+='';
			html+='';
		    html+='
应急事件编号：'+res[i].id+'
';
		    html+='
应急事件名称：'+res[i].name+'
';
			html+='
发布单位名称：'+res[i].danwei+'
';
			html+='
提报日期：'+res[i].data+'
';
			html+='';
            html+='';
		    html+='';	
			div.innerHTML = html;
			// console.log(html);
			showbox.appendChild(div);
				 }
			 }
		 }
	 })
},

效果如下：

localStorage：
是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存

sessionStorage：
用于本地存储一个会话（session）中的数据，一旦会话关闭，那么数据会消失，比如刷新。

localStorage与sessionStorage具有相同的API，以下方法都可以用于sessionStorage

localStorage存储方法

localStorage.name ='vanida；
localStorage["name"]='vanida'；
localStorage.setItem("name","vanida");

localStorage获取值方法

var name = localStorage["name"]
var name= localStorage.name
var name＝ localStorage.getItem("name");

localStorage清除特定值方法

//清除name的值

localStorage.removeItem("name");
localStorage.name＝'';

localStorage清除所有值方法

 localStorage.clear()

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；

var person = {name:"vanida","sex":"girl","age":25};
localStorage.setItem("person",JSON.stringify(person));
// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！

然后取出person的对象你可以用JSON.parse();

person = JSON.parse(localStorage.getItem("person"));
// {name: "vanida", sex: "girl", age: 25}

这个可以直接把内容输出在页面上(可以解析标签)，除数字类型外需要用单引号包裹

document.write(111)
document.write('abc')
document.write('')
document.write(111)
document.write('')
var i=0
document.write(i)

输出结果：

1、数字类型的转换

      语法：Number（你要转换的数据）

      返回值：转换好的数据

      特点：将转换数据当作一个整体；能转成数字就转数字类型，不能转为数字类型就会返回NaN

2、整型转换

      语法：parseInt()

      返回值：转换好的数据

      特点：将转换数据拆分成一个个的字符，挨个转换直到一个不能转为合法字符串的位置为止，且不认识小数点

3、浮点转换

     语法：parseFloat()

     返回值：转换好的数据

     特点：整型转换特点一样，只不过多认识了一个小数点

4、正负值的添加

     语法：+变量 、-变量

     返回值：转换好的数据

     特点：和Number的解析规则一样

5、非加法的数学运算

     语法：parseFloat()

     返回值：转换好的数据

     特点：整型转换特点一样，只不过多认识了一个小数点

Numer('100') //100
Numer('abc') //NaN
Numer('100.123') //100.123

parseInt('100') //100
parseInt('100abc') //100
parseInt('100.123') //100

parseFloat('100.123')//100.123

var b1 =true
parseInt(b1) //NaN

var b2 ='100'
var b3 = +b2
var b4 = -b2
console.log(b3,b4) // 100 100

var b2 ='100'
var b3 = b2 - 0
var b4 = b2 * 1
var b5 = b2 / 1
console.log(b3,b4,b5) // 100 100 100

1、string（）

      语法：string（你要转换的数据）

      返回值：转换好的数据

      特点：任何数据类型都能转

2、tostring（）

      语法：要转换的数据.tostring（）

      返回值：转换好的数据

      特点：undefined  null不能转换

3、+运算符

      js里的加法运算符有两种情况

         1.进行字符串的拼接

             +符号任意一边是字符串的时候就是字符串拼接

         2.进行数学运算

             +符号两边都是布尔值或者数字类型时，才是数学运算

1.Boolean ()

        语法：Boolean (你要转换的数据)

        返回值：转化好的数据

        特点：JS里只有 0、空字符串、NaN、undefined、null转换为false，其余的所有的内容都转换为true 

1.Boolean ()

        语法：Boolean (你要转换的数据)

        返回值：转化好的数据

        特点：JS里只有 0、空字符串、NaN、undefined、null转换为false，其余的所有的内容都转换为true 

1、+=、*=、/=、-=

都是在自己的基础上进行叠加

比如：a += b  等价于  a=a+b

var a ='10'
a+='20'
console.log(a) //1020

1、&& 与（且）

   运算符两边都是true为true，任意一边为false就是false

 具体用法：

if(i<20 && i>15){  
   //这里标识i的范围，因为js里设置范围不能用 15

//一般的获取布尔值方法
console.log(Boolean(0))
//双取反用法
console.log(!!0) //false

var a = 10 
var res = 10 + a++ //后置++
console.log(res,a)  //20 11


var b = 10
var ress = 10 + ++b  //前置++
console.log(ress,b)   //21 11

var n = 5
var resss = n++ + ++n + ++n + n++ 
console.log(resss,n)  //28  9

for(i = 0;i<=3;i++){
  if(i=2){
    continue
    console.log("跳过本次循环")
  }
    console.log(i)  
}
  //  1
  //  跳过本次循环  
  //  3     

abcd:  //自定义标记
for(var i=0;i<=5;i++){
  for(var j=0;j<=3;j++){
    if(i==3&&j==2){
      console.log("看到半条虫子")
      break abcd  //可以给任意循环做标记，标记名称也是自定义的
    } 
  }
   console.log('吃的第' + i + '个包子的第' + j + '口')
}