2019-03-19 js practice two

属性操作的两种方式

1、"." oDiv.style.background window.console.log()
+ []的写法： oDiv["style"]["background"]
2、"[]" 凡是点能操作的，[]都能操作
+ 数字不能用点，只能用[];变量必须用[];
+ 所有"."能操作的属性，都能用[]来写;

=

• "=" 等号是用来赋值的 *****
• "==" 双等号用来比较的，他是非严格比较；
  • 非严格比较：只比较结果，不比较数据类型 比如 "2"==2 true
• "===" 三等号用来比较的，它是严格比较
  • 严格比较：即比较结果，也比较数据类型 比如 "2"===2 false

请实现左边宽度固定为200，右边宽度自适应； 最少三种方法

-思路1：左边浮动，右边margin-left
-思路2：绝对定位+margin-left
-思路3：绝对定位+left
-思路3：flex弹性布局

出现省略号的样式

white-space: nowrap;  不折行
text-overflow: ellipsis;  当文本溢出时，以什么形式来展示，ellipsis代表省略号
overflow: hidden;  内容溢出隐藏

switch的坑

• 注意：switch是严格比较

数据类型

• 数据类型的判断 type of
• 数据类型包含：
  • 基本数据类型：string,number,boolean,null,undefined;
  • 引用数据类型：
    • 对象数据类型：object array Date RegExp
    • 函数数据类型：function
• null和undefined
  • null代表的是现在没有，以后会有

    var data=null;
    只有等到请求结束时，才能给data赋值；data=[{},{}...]
    

  • undefined 代表现在没有，以后也没有
  • 函数没有返回值
    • 没写return
    • 写了return但没有返回值
  • 对象的某个属性不存在的时候，拿到的值就是undefined；
  • 定义了形参，但没有赋值；
• 对象object {}
  • 语法{k;v,k:v}
  • 对象的遍历，用 for...in

  for(var attr in obj){
      attr->属性名
      obj[attr]->属性值
  }
  

  • 对象的增删改查
    • 增 obj.xxx=xxxx;
    • 改 obj.xxx=xxxx; 区别：如果属性名不存在，属于增加，如果属性名存在，属于更改；
    • 查 obj.xxx
    • 删除
      • 真删除 delete obj.xxx
      • 假删除 obj.xxx=null
  • 数组的语法：[x,x,x,x]
  • 数组的循环
    • for循环 常用
    • for..in 循环
  • 数组的增删改查
    • 增加 ary[x]=xxxx;
    • 更改 ary[x]=xxxx;
    • 查 通过数组的索引进行查找 ary[x]
    • 删除 通过delete不能删除，只能通过数组常用的方法来删除
      • splice
        • 如果是两个参数代表删除 splice(x,x)
        • 如果是三个参数，且第二个参数为0，插入
        • 如果是三个参数，且第二个参数不为0，替换
• 运算符
  • “+”具备两个功能：
    • 字符串拼接 优先
    • 运算

运算符

• 算术运算符： + - * / %
  • %的小技巧：有几种情况就%几；
  • 除了+法，其他几个都有隐式数据类型转换的功能；
• 比较运算符： > < >= <= == === != !==
• 逻辑运算符： && || !
  • 常用&&代替if

  bOk && alert('真真');
  

  • 常用||代替else

  bOk || alert("假假")；
  

• 赋值运算符：+ - += -= *= /= %=
  -运算符的优先级 算术 > 比较 > 逻辑 > 赋值

数字 number

• 常用的方法 toFixed(保留几位小数) 可以四舍五入的保留小数
• 字符串转数字的方法中，有一个严格转换，两个非严格转换：
  • 一个严格：Number()
  • 两个非严格：
    • parseInt() 整数
    • parseFloat() 保存小数
  • 数据转换失败时，返回NaN;
  • isNaN() 判断是否为非有效数字；
• 布尔值转数字： true->1 false->0
• null转为0 undefined转为NaN；

  if('23px'*40){//'23px'*40属于无效运算
      alert(true)
  }else{
      alert(false)
  }//false
  
  if('23px'+40){//'23px'+40属于字符串拼接
      alert(true)
  }else{
      alert(false)
  }//true
  

• 对象也能转数字：[]->toString()转成""字符串 -> 把""字符串通过Number("") 转为0；[]+20 //20

什么是真？什么是假？

• 除了这几个为假的，其他的都是真：
  • false '' 0 NaN null undefined

== 数据类型之间的比较

1. 对象和对象比较，按照‘地址’进行比较 [] == [] //false 引用数据类型，是对地址的比较
2. 对象和布尔值进行比较,按照数字进行比较 [] == ![] //true 左边转为0 右边转为false false又为0
3. 对象和字符串进行比较，转成数字 [] == "" //true 0 == 0
4. 对象和数字进行比较，转成数字 [] == 0 //true
5. 字符串和数字进行比较，转成数字 ""==0 //true
6. 字符串和布尔值进行比较，转成数字 ""==false //true
7. 数字和布尔值进行比较，转为数字 1==true false==0
8. null和undefined true; null===undefined false
9. NaN==NaN false NaN跟谁都不相等，包括自己

选项卡

扩展作业

• typeof能检测引用数据类型吗？如果不能，请想出解决办法，至少两种方法，最好有三种办法；
  typeof 可以检测function ,数组和对象检测为object;

• 数组的其他方法，有什么功能？自己测测

• 请把选项卡封闭成一个函数；如果页面有好几个选项卡，只需要一个函数多次调用，就能实现多个选项卡的功能；--练习封装；

• 请查找如何用闭包写选项卡？

数据类型检测有4种方法

• typeof 主要用来检测基本数据类型，不能具体检测出引用数据类型
• constructor 可以检测出当前这个对象具体属于哪个类
• instance of (obj instance of Object) 判断某个对象是否属于某个类，返回的应该是个布尔值
• Object.prototype.toString.call() 可以打印出对象的详细信息；