JavaScript基础 二

取摸（求余数）

var list = document.querySelector('.list');
var lis = list.querySelectorAll('li');
var colors = ["red","blue","yellow"]
for(var i = 0; i < lis.length; i++){
    // if(i%2 == 1){
    //     lis[i].style.background = "red";
    // } else {
    //     lis[i].style.background = "pink";
    // }
    lis[i].style.background = colors[i%colors.length];
    console.log(i%colors.length);
}    
/*
    % 取模 (求余数)
*/

三目运算符

/*
    判断条件? 条件成立的值:条件不成立的值
*/    
console.log(1<2?1:2);

数据类型

var a = Symbol();
var b = Symbol();
console.log(a == b);
/*
    标准划分：
        基本类型:
            number (数字类型)
            string (字符串类型)
            boolean (布尔值 true false)
            null (空,空对象)
            undefined (未定义)
            symbol (Symbol(),ES6新增) 
        复合类型：
            object (window,元素,数组,function,对象)



    Symbol() 一个匿名且唯一的一个值
*/    

typeof

/*
    typeof 验证数据类型:
        number 数字
        string 字符串
        boolean 布尔值
        undefined 未定义
        function 函数
        object 对象类型
        symbol symbol类型
*/    
//var a = 0; // number 数字
var a = Symbol();
console.log(typeof a);

数字的取值范围

console.log(Number.MIN_VALUE);
/*
    Number.MAX_VALUE
    Number.MIN_VALUE
    Infinity 正无穷
    -Infinity 负无穷    

*/

未定义

var a;
console.log(a);
console.log(window.b);    

console.log(a == null);

对象

var arr = [1,2,3,4];
var obj = {
    name: "妙味",
    age: 10
};    
obj.boss = "leo";
console.log(obj,obj.name);

数据类型转换

var div = document.querySelector('div');
div.onclick = function(){
    var width = this.style.width;
        width += 10;
        console.log(width);
    this.style.width = width; 
};    

数据转换的整理资料

Number

var a = [true];
console.log(Number(a));
/*
    Number(val)
    1. 数字，原样返回
    2. 字符如果符合数字的规范就转换否则返回NaN
    3. true 为 1，false 为 0
    4. null 为 0
    5. undefined 为 NaN
    6. 对象转换数字，先调用对象的 valueOf() 再调用对象的 toString(),然后按照上边的规则进行转换


    NaN 数字中的一个特殊值
    1. NaN not a number 这不是一个数字
    2. NaN 的数据类型是数字


*/    

对象下的两个方法

var arr = [0,1,2];
console.log(arr.valueOf().toString());
// obj.valueOf() 把对象中的所有值，取出来    

NaN

var a = "a";
console.log(NaN == NaN);
/*
    NaN:
        1. NaN 数据类型是数字
        2. NaN 本身的含义表示这不是数字
        3. NaN 不等于任何值，并且不等于它自己

*/    

isNaN

var a = "12.2a";
console.log(isNaN(a));
/*
    isNaN(要检测的数据)
    如果可以转成数字就返回 false，如果不能转换成数字就返回true
*/    

parseInt

var a = "a 12px ";
// console.log(Number(a));
console.log(parseInt(a));    
/*

parseInt(val) 取整

    val 接受的是字符串，其他类型会先转成字符串然后进行转换

    从第一个字符开始，碰到不是数字的字符为止，把是数字的字符转成数字并返回
    得到的值为整数
    开头和结尾的空格是允许的    
    如果字符串的第一个字符不能被转换为数字，那么会返回 NaN
*/

parseFloat

var a = true;
console.log(parseFloat(a));    
/*
规则parseIn
        会保留小数部分
        如果小数部分为0，则忽略
*/

String

var a = {m:1};
console.log(String(a));
/*
    String(val) 其他类型转换成字符串
    1. 除对象以外的类型，都是加上引号原样输出
    2. 对象类型直接调用对象的 toString 把内容输出
*/    

Boolean

/*
Boolean(val) 转换成布尔值

1. 数字类型转换布尔值
0 转成 false，非0 转换成 true，NaN 转换成 false
2. 字符串
"" 转换成 false， 非空字符串转换成true
3. undefined false
4. null false
5. 对象 转换成 true    
*/    

强制类型转换和隐式类型转换

var a = 0;
var b = "1";
console.log(a - b);
/*
强制类型转换:
    通过函数或方法调用，明确的将某种类型转换成另一种类型
    parseInt、parseFloat、Number、Boolean，String...

隐式类型转换:
    为了能够进行必要运算，解析器会自动把要操作的数据进行对应的类型转换。    


*/    

运算符和赋值运算符

/*
    算术运算符
    + 加、- 减、* 乘、/ 除、% 取模（求余数）、++、--

    赋值运算符
    =、+=、-=、*=、/=、%=
*/    
/*
    除了 + += 其他所有的运算符只能进行数字运算，所以遇到非数字，会转换成数字进行运算
*/
var a = undefined;
var b = null;
console.log(a + b);
/*
    +=,+ 数字运算，字符串连接

    1. 如果两边都是数字，进行数字运算
    2. 如果 一边是否字符串，就把另一边转换成字符串进行连接
    3. 如果是布尔值转换成数字进行运算
    4. 如果是对象 就先调用对象的 valueOf 方法，然后调用对象的toString() 转成字符串之后,然后进行字符串连接
    5. 如果一边数字或null，一边undefined 返回NaN，其余情况 undefined 都转换字符串进行连接
    6. null 先转换成数字，然后进行计算



*/

关系运算符

//console.log("1" < 1);

console.log("a" != "A");
/*
关系运算符:
    <、>、<=、>=、==、!=、===、!==

    <、>、<=、>=
    1. 如果两个值都是数字，则进行数字比较
    2. 如果两个值都是字符串，则比较字符串对应的 Unicode 码
    3. 如果一个值是数字，则将另外一个值转成数字进行比较，转换规则参照 Number() 方法
    4. 如果一个数是对象，则调用valueOf()方法然后调用 toString方法，得到的结果按照前面的规则执行比较
    5. 如果一个值是布尔值、null、undefined 则将其转换为数值，再进行比较
    6. 最后注意 NaN，NaN 不等于任何值，所以直接返回false



    == 等等、!= 不等

    1. 有 NaN 时,直接判定两侧不相等
    2. 两侧都是数字时，直接比较数字大小
    3. 两侧都是字符串时，直接比较字符串是否相同
    4. 两侧都是布尔值时，直接比较值是否相同
    5. 两侧都是对象时，比较两个对象的引用地址是否相同
    6. undefined ，null 在比较的时候只等于自己和其他任何类型都不相等，但是 undefined 等于 null
    7. 如果一个值是布尔值时，先把布尔值转成数字再比较
    8.一个值是字符串，一个是数字时会调用 Number() 转出数字再进行比较
    9.如果一个值是对象，先调用valueOf()方法，然后调用 toString 方法，输出字符串，然后再参照以上规则比较





    ===、!== 不会进行类型转换,如果左右两侧的类型不同，会返回两边不等
    1. 两侧都是数字时，直接比较数字大小
    2. 两侧都是字符串时，直接比较字符串是否相同
    3. 两侧都是布尔值时，直接比较值是否相同
    4. 两侧都是对象时，比较两个对象的引用地址是否相同


*/    

Unicode

   var a = "A";
   alert("a" < "A");

传值 和 传址

/*
    传值 和 传址

    在js中，基础类型数据在赋值的过程中，传递的是数值,
    对象在赋值的过程中，传递的是内存中的引用地址
*/    

// 传值
var a = 0;
var b = a;
b = 3;
console.log(a);

// 传址

var c = [2]; 
var d = c;
d[0] = 4;
console.log(c);

逻辑运算符

// var a = 0;
// console.log(!a);
/*
    逻辑运算符
        && 与、|| 或、! 否 、三目运算符

    ! 否 取反
    碰到非布尔值类型的数据，会调用 Boolean,转换成布尔值之后，再进行计算

    三目运算符
    条件语句?成立的结果:不成立的结果

    1.条件语句中的运算结果，不是布尔值的话，就转成布尔值
    2. 条件语句 如果返回 true 就返回 成立的结果 否则 返回不成立的结果


    && 与 (并且)

    1.第一位是布尔值的 true 时，返回第二位的值，例如：true&&1 返回 1
    2. 第一位是布尔值的 false 时，直接返回 false
    3. 第一位不是布尔值，则调用Boolean()进行转换，如果转换的结果为 true 则返回第二个值，否则，返回第一位的值 (注意：是值不是转换后的 false)
    4. 如果有一个值为 null，返回 null
    5. 如果有一个值为 NaN，返回 NaN
    6. 如果有一个值为 undefined，返回 undefined

    || 或者
    如果第一个值经Boolean()转换后为false，则返回第二个值，否则返回第一个值 (注意：是值不是转换后的 true)

*/    
// var a = 0;
// var b = 3;
// if(a < b
// || a == 0){
//     console.log("执行语句");
// }
//console.log(0&&2);
console.log(0||null);

运算符优先级

var a = 0;
var b = 1;
var d = 2;
var c = d*(b + a + b) + (a - b);
console.log(c);