JS基础（二）...

普通对象

由大括号包裹起来的{key:value} 属性是用来描述对象特征的属性值是特征的描述

对象的声明

var one = {
    name:zhangsan,
    age:12,
    ary:[12，13，14]
}

对象属性操作

获取对象的属性值属性名为数字时只能用第二种方式获取
- 对象.属性名
- 对象['属性名']

返回属性名对应的属性值不存在返回undefined

增加或者修改属性名具有唯一性
- 这个属性名之前在对象中存在（修改）就是修改属性值
- 若这个属性名之前不存在（增加）就是增加一个键值对
删除对象的属性
- 软删除将属性值改为null属性名还存在
- 彻底删除 delete 对象.属性名/对象['属性名'] 删除后属性名属性值都不存在

var a = {
    name:qqq,
    age:13;
    play:['hehhe','hahha']
}
console.log(a.name) //获取
a.age = 11; //修改
a.all = 'nanan' //增加
a.age = null; //删除
delete a.name //删除

数组操作

数组是有序的键值对顺序不能随意调整键是浏览器自动分配的从零开始第n项的键是 n-1 我们一般称为索引我们操作的都是值长度为length - 1

操作数组只能用方括号的方式获取、修改不存在时返回undefined

var a = [1,2,3]
console.log(ary[0]); //获取
console.log(ary.length); //获取数组长度
ary[1] = 12; //修改
ary[3] = 13; //增加

基本数据类型和引用数据类型的区别？

基本数据类型操作的是值类型的操作就是说变量真的就是这个本身
引用数据类型操作的不是值的本身而是这个引用数据类型存储的堆内存空间地址具有唯一的地址因此在声明变量时引用数据类型将变量存储在堆内存空间最后代表的值是这内存空间地址

布尔类型只有两个值 true/false 通常配合条件语句使用

将其它类型的值转换成布尔值 Boolean(需要转变的值) /!![]
- 数字转换成布尔值只有空字符串转换成布尔值是false 其余都是true
- 字符串转换成布尔值只有空字符串转换成布尔值是 false 其余都是true
- null 转换成布尔值 false
- undefined 转换成布尔值 false
- Symbol() true
- 引用数据类型转换成布尔值都是true 除了 0 NaN '' null undefined 其他都是true

算法

if(条件){ 浏览器会对条件进行布尔运算 true 执行的语句 }else{ false 执行的语句 } if(){

}else if(){

}else{

}

三元运算符条件？ ‘对执行’ ： ‘错执行’
switch(值值要绝对比较){ case: break; ... default: break }

== 相对比较不比较类型只比较值值相同返回true
===绝对比较不仅值要相同类型也要相同
若条件中有一个数学表达式先进行计算

null 和 undefined 的区别

首先null和undefined是两种不同类型
typeof null -> "object" 因为null空对象指针；typeof undefined -> "undefined"
访问对象、数组不存在的键或者索引返回undefined
Number(null) -> 0 Number(undefined) -> NaN

逻辑运算符

|| 或逻辑两者只要有一个为true 就是true
&& 且逻辑两者都是true 才会返回true

逻辑运算符的赋值属性

|| 赋值属性哪一个是true 就返回哪一个
&& 赋值属性哪一个是false 就返回哪一个

== 和 === 的区别

数字 == 字符串字符串转换成数字然后再比较

console.log(1 == '1')  //true
console.log(1 == 'abc')  //false

数字 == 布尔值把布尔值转换成数字再进行比较

console.log(1 == true) //false
console.log(1 == false) //false

布尔值 == 字符串把布尔值和字符串都转换成数字再比较

console.log(true == '1') //true
console.log(false == '') //true

nul == undefined // true null undefined 和其它数据类型比较都是false
对象 == 对象比较的是堆内存空间若对内存的地址相同就返回true

var obj = {
    name:'wang',
    age = 12
}
var a = obj;
console.log(obj == a) //true

对象 == 字符串对象调用 toString() 转成字符串然后再和字符串比较

console.log({} == '') //false ({}).toString() -> '[object Object]'

普通对象 ({}).toString() -> '[object Object]'
数组（[]）.toString() 就是将方括号会转成引号内容和数组项相同

对象== 布尔值将对象先转成字符串然后再转成数字布尔值也转成数字再比较

console.log({} == true); // false

对象 == 数字对象想转成字符串再转成数字再比较
NaN == NaN false

基本数据类型比较值和类型都相同返回true
引用数据类型比较地址相同返回true

for 循环

for(初始值；判断条件；变化规律){
    循环体
}

步骤：

设置循环初始值
判断循环条件是否成立若成立向下执行若不成立退出循环
执行完循环体累加
累加过后判断是否满足条件若成立执行循环体不成立退出循环
直到不满足循环条件退出整个循环 生命的初始值和累加可以不写在小括号里

倒着输出
var ary = [1,2,3,4,5,6,7,8];
for(var i = ary.length -1 ; i >= 0 ; i--){
    console.log(ary[i]);
}

输出奇数项
for(var i = 0; i < ary.length ; i++){
    if(i%2 === 0){
        console.log(ary[i])
    }
}

遍历把所有集合每个元素都取出一次叫做一次遍历

for in 循环用来遍历普通对象

var obj = {
    name: 'zhangsan',
    age:10,
    teacher:'admin'
}
console.log(obj);
for(var key in obj){
    key 是每次循环对象的一个键 对象有多少个键 就执行多少回
    console.log(key);
    console.log(obj[key]);  //每次循环时对象的值
}

break 和 continue 的区别

continue 结束本次循环
break 退出整个循环

获取DOM对象

DOM对象通过js 的相关和 HTML方法获取到的HTML文档中的元素

通过ID获取页面中的元素对象语法 document.getElementById('id名') 返回值若获取到就是元素ID 是指定ID的DOM元素对象若获取不到返回null 注意：
1. document 是查找上下文，document是整篇html文档，而且getElementById查找的上下文只能是document
2. DOM对象的属性

className: html元素的class名
id: html元素的id名
innerHTML: 以字符串形式存在的这个元素包裹的html标签
innerText: html元素包含的文本内容
onclick: html元素的点击事件属性
onmouseover: 鼠标滑过事件
onmouseout: 鼠标离开事件
style: html元素的行内样式

getElementByTagName() 通过标签名获取元素对象集合 DOM对象也都是对象可以像操作对象的方式一样操作DOM对象

隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隔行变色</title>
    <style>
       *{
           margin: 0;
           padding: 0;
       } 
       ul,li{
           list-style: none;
       }
    .liwrapper{
        margin: 30px auto;
        border: 1px solid orangered;
        width: 500px;
    }
    .liwrapper li{
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px darkkhaki dashed;
    }
    </style>
</head>
<body>
    <ul  id = 'wrapper' class="liwrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
<script>
var liWrapper = document.getElementById('wrapper');
var liList = liWrapper.getElementsByTagName('li');
for(var i = 0 ; i < liList.length ; i++){
//     if (i % 2 === 0) {
//     // 如果是 i 是偶数
//     liList[i].style.backgroundColor = 'pink';
//   } else {
//     // 否则 i 是奇数
//     liList[i].style.backgroundColor = 'yellow';
//   }
i%2 === 0 ? liList[i].style.backgroundColor = 'pink' : liList[i].style.backgroundColor = 'orange';
}
</script>

函数

在计算机语言中函数是拥有固定功能和逻辑的代码块只需声明一次就可无限执行面向对象（OOP Object-Oriented-Programming）的语言也叫做方法

function fn(){
    console.log(a);
}
fn();
fn();
fn(); 
//输出a a a

语法

函数声明部分
- function 声明函数
- fn 叫函数名
- (a,b)叫形参入口
- {功能和逻辑代码}
函数执行部分声明后不会执行需要函数执行才能执行函数体里的代码 -函数名（实参）实参是非必需的
- 函数可以执行多次每次执行都互不影响
- 函数名() 这个表达式还表示函数执行后留下的结果

function sum(a,b){
    var total = 0;
    total = a + b;
    console.log(total);
}
sum(1,2); //3

形参和实参一一对应

 function sum(a, b) {
 	var total = 0;
	total = a + b;
 	console.log(total)
 }

 var result = sum(1, 2);
 console.log(result) // undefined
 console.log(total); // Uncaught ReferenceError: ...

 引发报错的原因：total是在函数体内部声明的变量，这种声明在函数体内部的变量称为私有变量，而私有变量在函数外部是无法访问的，这是由于闭包机制导致的。
 修改后：
   function sum(a, b) {
  var total = 0;
  total = a + b;
  return total;
}

var result = sum(1, 2);
console.log(result); // 3
console.log(sum(1, 2));

return 用于指定函数返回值 return啥函数就返回啥
若函数内部没有return 或者return后面什么也没写那么函数的返回值是undefined
return 关键字还有一个重要的作用可以强制接收return 后面的代码
return 永远返回一个值若是一个表达式 return或等表达式求值完成后再返回值

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li {
      list-style: none;
    }
    .wrapper {
      margin: 30px auto;
      width: 800px;
    }

    .header {
      width: 602px;
      border: 1px solid #000;
    }
    .header:after {
      display: block;
      content: '';
      visibility: hidden;
      clear: both;
    }
    .header li {
      float: left;
      width: 200px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }
    .header li.active {
      background: yellow;
    }
    .header li:nth-child(2) {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
    }

    .wrapper div {
      display: none;
      height: 200px;
      width: 602px;
      border: 1px solid #000;
      line-height: 200px;
      text-align: center;
      font-size: 20px;
    }
    .wrapper div.active {
      display: block;
    }
    </style>
</head>
<body>
    <div id="wrapper" class="wrapper">
        <ul id="header" class="header">
            <li class="active">新闻</li>
            <li>时尚</li>
            <li>机车</li>
        </ul>
        <div class="active">新闻</div>
        <div>时尚</div>
        <div>机车</div>
    </div>
</body>
</html>
<script>
var wrapper = document.getElementById('wrapper');
var header = document.getElementById('header');
var tabList = header.getElementsByTagName('li');
var divList = wrapper.getElementsByTagName('div');


for (var i = 0; i < tabList.length; i++) {
  tabList[i].myIndex = i;
  tabList[i].onclick = function () {
    for (var j = 0; j < tabList.length; j++) {
      tabList[j].className = '';
      divList[j].className = '';
    }
    var myIndex = this.myIndex;
    tabList[myIndex].className = 'active';
    divList[myIndex].className = 'active';
  }
}

</script>

JS基础（二）