js数据类型（2019-06-25）

复习

js组成: ECMAScript + DOM + BOM
ECMAScript 和 js的关系?
三种方式
- 行内
- 内嵌脚本块
- 外链
文档就绪事件
- window.onload = function(){ .... }
调试语句
- alert('');
- console.log('');
变量
- var 变量名 = 值;
- var 变量1 = 值,变量2 = 值;
- var 变量3; //undefined
- 变量3 = 10;
- "变量 is not defined"
- 命名规则
  - 数字\字母\下滑线$,数字不能开头
  - 推荐驼峰命名法
  - 不能使用关键字和保留字
  - 使用英文单词
交互思路
- 获取元素
  - var oBox = document.getElementById('box');
- 绑定事件
  - oBox.onclick = function(){ ... }
- 事件发生做什么操作
  - oBox.onclick = function(){ 做什么 }
标签的操作
- 样式: oBox.style.width = "100px"; - oBox.style.cssText = "width:100px;height:100px;"; - oBox.style = "width:100px;height:100px;"
- 内容: innerHTML innerText value
- 属性: oBox.id img.src a.href oBox.className radio.checked = false; option.selected = true;
鼠标事件
- onclick ondblclick onmousemove onmouseenter onmouseleave onmouseover onmouseout onmousedown onmouseup oncontextmenu

(A) Data Types

1- basic data types: simple structure, in which the stack memory, the value stored operation
- String string: '' "" 'a' "a" 'asdfdf'
- String comes with a natural length property represents the length of the string (number of characters)
- Can access the character string specified by a range of index values the index value of the string (subscript): 0 - (length-1)
```
    var str = 'hello world!';
    console.log(str.length); //12
    console.log(str[0]);  //'h'
    console.log(str[str.length-1]); //'!'
```
- Digital number: Positive Negative decimal NaN(not a number)
- Js there between fractional arithmetic precision loss, should generally avoid direct operation between decimal
```
    console.log(0.1+0.3); //  0.30000000000004
```
- Boolean boolean: trueTrue falseFalse
- null null
- undefined undefined (uninitialized)
2- reference data types: complex structure, which is stored in the heap memory, the address operation is
- Object object { key1:val,key2:val} {}empty object
- Array array [1,2,3,'aaa'] []empty array
  - Array comes a natural length property represents the length of the array
  - Access to a range of index values in the array by the array index value (index): 0 - (length-1)
```
    var ary = [2,3,4,5]; 
    console.log(ary.length);  //4
    console.log(ary[0]); //2
    console.log(ary[ary.length-1]); //5
```
- Regular regExp /^1$/
- Function function function(){ }

(Ii) the detected data type

1-typeof is used to detect the basic data types

null result is detected object, it is defined as a null empty object references in js
[] , {} , /123/ The detection results are the object

   console.log( typeof '' );  //string
   console.log( typeof -18);  //number
   console.log( typeof NaN);  //number
   console.log( typeof true);   //boolean
   console.log( typeof null);   //object
   console.log( typeof undefined);  //undefined
   console.log( typeof []);  //object
   console.log( typeof /123/);  //object
   console.log( typeof {});  //object
   console.log( typeof function(){});  //function

2-instanceof is used to detect reference data types, determining whether an object instance of a class

  console.log([] instanceof Array);  //true
  console.log(/123/ instanceof RegExp); //true
  console.log({} instanceof Object);   //true
  console.log(function(){}   instanceof Function); //true

(C) the data type conversion

1- isNaN () detecting whether a value is not a valid number, the number returned is false, otherwise it is true (implicit call Number () method converts the number into a value and then determines the type)
```
console.log(isNaN('12')); //false
console.log(isNaN(true));  //false
```

2- Number (); cast to type number

    console.log(Number('12.345')); // 12.345
    console.log(Number(''));  //0

    console.log(Number(true));  //1
    console.log(Number(false));  //0

    console.log(Number(null));  //0

    console.log(Number([]));  //0
    console.log(Number([12]));  //12
    console.log(Number(['12']));  //12

3- parseInt (); converted into digital integer
- Find numbers from left to right, until it hits non-stop to find digital, digital has been found is returned
```
console.log(parseInt('12px345'));  //12
console.log(parseInt('12.5px345')); //12        
console.log(parseInt('12.23435')); //12
```
4- parseFloat (); converted to floating point numbers
- Than the parseInt () identified more than a decimal point
```
console.log(parseFloat('12.5px345')); //12.5
```

5- Boolean (); converted to Boolean

Empty string \ 0 \ NaN \ null \ undefined, converted to a boolean value is false, other values are true

console.log(Boolean(''));  //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false

6- toString (); into a string

    //数组串字符串:去掉括号,加引号
     console.log([1,2,3].toString()); // '1,2,3' 
     //所有对象转成字符串结果都是 '[object Object]'
     console.log({name:'ujiuye'}.toString()); // '[oject Object]'

toString () operation can not be null and undefined, being given
String () and toString most cases the same effect
- It can be used to convert the string to null and undefined
```
 console.log(String(null)); // 'null'
 console.log(String(undefined));  // 'undefined'
```

(Iv) operator

1- arithmetic operators
- Plus +
  - If both sides of the + sign is a string, then the string concatenation operator is
```
 console.log('10'+20);  //'1020'
```
- Less -
- Take *
- In addition to /
- % Modulus
  - Arithmetic operators on both sides if it is not a number, would then implicitly converted into digital operation (except +)
- Increment ++
```
    var  n = 0;
    n++;  // n = n + 1;
    console.log(n); //1

    var x = 0;
    var y = x++; //++写在后面,先赋值再运算
    console.log(y); //0

    var a = 0;
    var b = ++a; //++写在前面,先运算再赋值
    console.log(b); //1
```
- Decrement -
2- Comparison Operators
- == equal to: If the different data types can be implicitly converted, and then compare
- === congruent: data type and value must be equal
- Unequal! =
- Insufficiency! ==
```
    console.log( 12 == '12'); //true
    console.log( 12 === '12'); //false
    console.log( 12 != '12'); //false
    console.log( 12 !== '12'); //true
```
- Greater than>
- Less than <
- Greater than or equal to> =
- Less than or equal to <=
3- assignment operator
- =
- += x += y ==> x = x + y;
- -= x -= y ==> x = x - y;
- *= x *= y ==> x = x * y;
- /= x /= y ==> x = x / y;
- %= x %= y ==> x = x % y;
4- logical operators
- And (and) && : both sides of the expression are true, the final result of the establishment
- Or || : expressions on both sides there is a set up, the whole expression resulting in the establishment
  - &&And ||: Return to decide the final result that the value of the expression side
- Non- ! : negated, the result must be a Boolean value
```
    console.log(1&&0); //0
    console.log(1&&2); //2
    console.log(1&&-1); //-1
    console.log(0&&-1); //0
    console.log(1||0);  // 1
    console.log(0||false);  //false
    console.log(1||true);  //1
```

5- ternary operator

条件 ? 条件成立执行的代码 : 条件不成立执行的代码 ;

(E) comparing the different data types Law

- ① : 字符串和数字比较 : 字符串转数字,然后比较
- ② : 字符串和布尔值 : 字符串和布尔值都转数字,比较
- ③ : 数字和布尔比较 :  布尔转数字再比较
- ④ : NaN和任何的值比较都不相等,包括自己
- ⑤ : 字符串和数组 : 数组转字符串,再比较
- ⑥ : 字符串和对象 : 对象转字符串,再比较
- ⑦ : null和undefined比较相等,各自和其他数据类型的值比较都不相等
- ⑧ : 引用数据类型的值相比较永不相等