JS（复杂数据类型）（初认识）

一、对象（重点）

对象就是一系列`无序`数据的集合

• 对象由属性和方法构成
• 对象中每个值/元素/成员，由键:值构成
• 对象多个成员之间用 “ , ” 隔开

操作对象的方法

增：对象.新键 = 值
删：delete 对象.旧键
改：对象.旧键 = 值
取：对象.旧键 => 对象是由属性或方法 => 对象.属性名 或 对象.方法名()
多学一招：对象[变量] // 不推荐，仅对象的属性是一个变量时使用 同数组

语法：

// 字面量创建空对象（推荐） 
var obj = {} 
// 内置构造函数空对象
var obj = new Object()

// 非空对象    
var obj = {键1:值1,...,键n:值n} 
var obj = new Object({键1:值1,...,键n:值n})  // 注意：内置构造函数写入值的值必须加上{}

练习：

                      需求：定义学生stu对象，设置属性name属性、age属性、say方法

var stu = {
    name:'tom', 
    age:18, 
    say: function() {
        alert('hello,world')
    }
} 
console.log(stu)

二、数组***

数组就是一系列有序数据的集合

• 数组中每个值，称之为一个“数组元素”;

• 数组元素可以是任意类型的数据

• 数组下标都是从0开始

语法

创建数据：

// 字面量创建空数组  
var arr = []
// 内置构造函数空数组
var arr = new Array()

// 非空数组  
var arr = [值1,...,值n] 
var arr = new Array(值1,...,值n)    //注意：这边一定要注意构造函数必须首字母大写
var arr = new Array(仅一个参数)     //注意：仅一个参数时（数字-则指数组长度，字符串-则正常定义值）

操作方法：

增：变量名[新下标] = 值
删：待会讲（下述：数组对象JS内置方法操作）
改：变量名[旧下标] = 值
取：变量名[下标]

练习

需求：定义数组arr 存放数据挨个手动输出
var arr = ['1', '2', '3', '4', '5'];
// 挨个手动输出
console.log(arr)
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr[3])
console.log(arr[4])

需求：将3改为6
arr[2] = '5'
console.log(arr)

数组长度（length）

length 就是表示数组的长度，数组里面有多少个成员，length 就是多少

// 创建一个数组
var arr = [1, 2, 3]

console.log(arr.length) // 3

数组索引

• 索引，也叫做下标/编号/键，是指一个数据在数组里面排在第几个的位置

• 注意： 在所有的语言里面，索引都是从 0 开始的

• 在 js 里面也一样，数组的索引从 0 开始

// 创建一个数组
var arr = ['hello', 'world']

• 上面这个数组中，第 0 个 数据就是字符串 hello，第 1 个 数据就是字符串 world

• 想获取数组中的第几个就使用 数组[索引] 来获取

var arr = ['hello', 'world']
  
console.log(arr[0]) // hello
console.log(arr[1]) // world

二维数组（多维数组）

数组元素可以是任意类型，如果其中一个元素依旧是数组，我们称之为`多维数组`

var arr = [
  元素1,
  [元素1,元素2,元素3],
  元素3,
  元素4
];

获取元素：数组名[一维数组下标][二维数组下标]，如：arr[1][1];
增加元素：数组名[一维数组下标][新增的二维数组下标]，如：arr[1][8]
修改元素：数组名[一维数组下标][已存在的二维数组下标]，如：arr[1][4]

扩展：

• 元素和元素之间用逗号隔开（,）最后一个元素不用加“，”

• 多维数据理论上可以有N层，在实际工作中一般三层，称之为：三维数组

三、传值方式（栈 和 堆）****

内存方面

• 既然我们区分了基本数据类型和复杂数据类型
• 那么他们之间就一定会存在一些区别
• 他们最大的区别就是在存储上的区别
• 我们的存储空间分成两种 栈 和 堆
• 栈： 主要存储基本数据类型的内容
• 堆： 主要存储复杂数据类型的内容

var num = 99;

var obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

注意

赋值传值/值传递：基本数据类型都是“拷贝传值”。
引用传址/引用传递：复合数据类型都是“引用传地址”

四、数组对象（★★★）

一些重要的语法：

属性
length  获取数组元素长度  =>  数组最大下标长度 - 1

方法
sort()   reverse()    	    join(x)  				concat(array1,..,arrayn)    
排序      翻转          	   划分数组，默认（，）        合并数组（多个）
pop()                  		push(x)       
后弹出，返回弹出的值    后压入，返回新数组的长度
shift()    			      unshift(x)
前弹出，返回弹出的值      前压入，返回新数组的长度

splice(从 哪一个索引位置开始，截取多少个，替换的新元素)   索引截取数组

indexOf(x)  出现位置

实例如下：

// - 需求1：分别定义数组arr1,arr2,arr3

// arr1 张三,李四,王五,赵六
// arr2 神龙教主,八戒,悟空,沙师弟
// arr3 西门庆,潘金莲,武大郎,武松

var arr1 = ['张三','李四','王五','赵六'];
var arr2 = ['神龙教主','八戒','悟空','沙师弟'];
var arr3 = ['西门庆','潘金莲','武大郎','武松'];

// - 需求2：将三个数组数据合并，
// 语法：第一个数组.concat(arr1,...,arrn)  返回：新的数组

var arr = arr1.concat(arr2, arr3)
console.log(arr)

// - 需求3：弹出数组第一个成员和最后一个成员，
// 前弹：数组.shift()   返回：弹出的值
// 后弹：数组.pop()     返回：弹出的值
console.log(arr.shift())
console.log(arr.pop())
console.log(arr)

// - 需求4：数组前增加三哥      前压入： arr.unshift(数据)  返回：新数组的长度
// - 需求5：数组后面增加潘长江  后压入： arr.push(数据)     返回：新数组的长度
console.log(arr.unshift('三哥'))
console.log(arr.push('潘长江'))
console.log(arr)

// - 需求6：数组翻转
console.log(arr.reverse())

// - 需求7：删除沙师弟
// 语法：arr.splice(下标, 删除个数  ,可选参数将他替换为新数据)   注：下标从0开始

// arr.splice(4, 1)
arr.splice(4, 1, '数据删掉了，我自己占个坑')
console.log(arr)

// 需求8：检测数组中是否有 花姑娘 
// 语法：arr.indexOf(内容)   返回检索的下标   没有返回 -1
console.log(arr.indexOf('花姑娘'))
console.log(arr.indexOf('三哥'))

// - 需求9：将数组转化为字符串，多个之间逗号隔开
// 语法：arr.join（分隔符）   默认逗号
console.log(arr.join(','))

for 和 for in 循环

数组：一堆有序数据的集合
对象：一堆无序数据的集合

• 因为数组有序并且下标固定从0开始 所以可以使用for循环 来挨个输出数组成员（也就是遍历）
• 因为对象无序所以可以用新语法for in来遍历

语法

for (var key in 对象) {
    // key是对象的键， 我们可以通过
    // 对象.键调用（推荐）  或  对象[键]调用
}

五、数组的排序（冒泡和选择）

冒泡：冒泡排序就是像泡泡一样每次冒出一个最大的或者最小的
选择：每次假设当前项是最小值，拿每一个数字和目前已知的最小值比较，发现存在数字比当前最小值还小 的话，选择最小值下标，循环完毕以后，交换两者的位置。

六、this（事件函数中大量使用）

this标识调用当前方法的对象（动态的）

场景

普通函数中的this 是window浏览器窗口
创建对象方法中的this 指对象本身（就是自己创建的对象）
事件中this 指页面HTML标签

// 场景一

var webopenfahter = 6666

function fn() {
    console.log(this)  // window
}
fn()                   // 调用是不是在全局作用域  都属于window对象
                       // 因为window对象是最大的对象 所以可以忽略不写

// 场景二
var obj2 = {
    say: function() {
        console.log(this)
    },
    miximixi: function() {
        console.log(this)  // obj 对象本身
    }
}
obj2.miximixi()


// 场景三
btn.onclick = function() {
    console.log(this) // <button id="btn">按钮</button>
                      // 在HTML中  它叫标签   有属性
                      // 在JS中    它叫对象   有属性 
                      // 
                      // 岁月的风铃换起你沉睡的记忆
                      // <input type="text" id="input2" value=""/>
                      // input2.value

    console.log(input2) // <input type="text" id="input2" value="" />
                        // 叫对象  （由属性和方法）
    console.log(input2.value) 
    console.log(input2.testMyValue)   // 必须是w3c规定的属性
}

七、严格模式

• 我们都知道 js 是一个相对不很严谨的语言

• 而且开发的时候，一些代码也不是很严格要求

• 而严格模式就是对开发的时候写的一些内容做了要求

    想开启严格模式，直接在代码最开始的位置写上字符串 `use strict`
  

规则（务必满足不然报错）

//声明变量必须有 `var` 关键字
'use strict'
var num = 100
num2 = 200 // 这个就会报错
//之前了解过，在声明变量的时候，如果没有 var 关键字，那么按照作用域的规则会自动定义成全局变量
// 严格模式下不可以，会报错

//函数的行参不可以重复
'use strict' 
function fn(p1, p1) {} // 直接就会报错
//在非严格模式下，函数两个行参一样，是不会报错的，只不过就是相当于在函数内部只有一个变量了
//但是在严格模式下会报错

//声明式函数调用的时候函数内部没有 this
'use strict'
function fn() {
  console.log(this) // undefined
}
fn()
//本身，全局声明式函数在调用的时候，函数内部的 this 是指向 window 的
//在严格模式下，是没有 this 的

八、数组对象（ES5）

indexOf

• indexOf 用来找到数组中某一项的索引

• 语法： indexOf(你要找的数组中的项)

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)

console.log(index) // 2

如果你要找的内容在数组中没有，那么就会返回 -1（特别重要）

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)

console.log(index) // -1

forEach

• 和 for 循环一个作用，就是用来遍历数组的

• 语法：arr.forEach(function (item, index, arr) {})

var arr = [1, 2, 3]

// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

map

和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

var arr = [1, 2, 3]

// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item + 10
})

console.log(newArr) // [11, 12, 13]

filter

• 和 map 的使用方式类似，按照我们的条件来筛选数组

• 把原始数组中满足条件的筛选出来，组成一个新的数组返回

var arr = [1, 2, 3]

// 使用 filter 过滤数组
var newArr = arr.filter(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item > 1
})

console.log(newArr) // [2, 3]

九、Math

Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字

***常用（Math.）**

ceil()、floor()、

向上取整  向下取整 

round()、pow(x，y)、sqrt()、random()

四舍五入  x的y次幂   求平方根   随机数



**了解**

PI

圆周率

max()、min()、abs()、

求最大  求最小  绝对值  



**数字转换进制（周边）**

内容.toString（你要转换的进制）

parseInt（内容，当作几进制来转换）

练习

• 需求1：返回1、2、3、4最大的一个数
• 需求2：返回4、3、2、1最小的一个数
• 需求3：返回-1的绝对值
• 需求4：数字1.8分别向上、向下取整、还有四舍五入
• 需求5：求2的2次幂
• 需求6：求9的平方根
• 需求7：返回0-1之间的随机数

// - 需求1：返回1、2、3、4最大的一个数
// 语法：Math.max(值1,..,值n)
// 作用：返回最大的一个值
var tmp = Math.max(1,2,3)  //上面这个调用函数返回值赋给变量
console.log(tmp) //然后输出
console.log(Math.max(1,2,3)) //调用函数返回值 直接 输出

// - 需求2：返回4、3、2、1最小的一个数
// 语法：Math.min(值1,..,值n)
// 作用：返回最小的一个值
console.log(Math.min(4,1,2,111,223423))

// - 需求3：返回-1的绝对值*   abs
console.log(Math.abs(-1))

// - 需求4：数字1.8分别向上、向下取整、还有四舍五入*
// 向上取整：Math.ceil(数字)
// 向下取整：Math.floor(数字)
// 四舍五入：Math.round(数字)
console.log(Math.ceil(1.8)) //2
console.log(Math.ceil(1.1)) //2
console.log('---------')
console.log(Math.floor(1.8)) //1
console.log(Math.floor(1.1)) //1
console.log('---------')
console.log(Math.round(1.8)) //2
console.log(Math.round(1.1)) //1

// - 需求5：求2的2次幂  工作概率低、学习笔试会有概率
// 语法：Math.pow(数字, 次幂)
console.log(Math.pow(2,2)) // 4
// - 需求6：求9的平方根
// 语法：Math.sqrt(数字)
console.log(Math.sqrt(9)) // 3

// - 需求7：返回0-1之间的随机数*
console.log(Math.random())

十、Date

js 提供的内置构造函数，专门用来获取时间的

var time = new Date()   					  // 当前

var time = new Date(2019, 11, 05, 22, 33, 55)    // 指定（注：00是12月）

var time = new Date('2019-12-05 22:33:55')      // 指定



getFullYear()、

getMonth()、   // 0-11   0代表1月

getDate()、

getHours()、

getMinutes()、

getSeconds()、

getDay()、   // 星期几   0-6   0星期天

getTime()   返回1970年1月1号至今毫秒数

十一、BOM浏览器对象模型

BOM是英文Browser Object Model的首字母缩写（浏览器对象模型 -> 规范）

■ window*（浏览器窗口对象，js中最大的对象）

● location*（地址栏对象 - 提供了对地址栏操作的方法和属性）

● history*（浏览历史对象，提供了对浏览器历史记录操作的方法和属性）

● screen（屏幕对象，获取屏幕的信息）

● navigator（浏览器对象，提供了获取浏览器信息的方法和属性）

● document*（文档对象， - 代表整个网页，DOM的根节点）

window对象*

属性

innerWidth

document.documentElement.clientWidth ie兼容

innerHeight

document.documentElement.clientHeight ie兼容

方法

alert()、prompt()、confirm()、open(待打开的网页,窗口名,打开窗口的外观)、close()、print()

倒计时定时器setTimeout

> 描述：打开网站等待指定时间后执行js代码（仅执行一次） 语法：var t = setTimeout(code,ms);  说明：
> 1、code指js功能代码，一般写函数（注：调用函数必须加引号） 2、ms指毫毛  1s = 1000ms
> 3、使用setTimeout()会返回一个唯一的标示，通过clearTimeout(唯一标示)可以清楚延时器
> 
> 
> 功能：清除延时器 语法：clearTimeout(t) 参数：t指延时器返回的唯一标示

间隔定时器setInterval

描述：指定时间不断重复的执行js代码（一直执行）
语法： var t = setInterval(code,ms);
说明：
1、code指js代码，一般写函数（注：调用函数得加引号）
2、ms指毫秒 ， 1s = 1000ms
3、使用setInterval()会返回一个唯一的标示，通过clearInterval()可以清除定时器

功能：清除定时器
语法：clearInterval(t);
参数：t指定时器返回的唯一标示

navigator对象

• window 中有一个对象叫做 navigator
• 是专门用来获取浏览器信息的

---

语法

内部代码

appName			  浏览器名称

appVersion			返回浏览器的平台和版本信息。

platform			    浏览器的操作系统平台。

userAgent			 用户代理信息（UA 作用：获取用户什么浏览器） *  

cookieEnabled		是否支持cookie

location对象*

• 在 window 中有一个对象叫做 location
• 就是专门用来存储浏览器的地址栏内的信息的、

属性和方法	描述
href*	1-获取地址栏网址2-修改地址栏网址（跳转网页），注：给href属性赋值相当于跳转指定网址
reload()	ad()刷新当前网页

history对象*

• window 中有一个对象叫做 history
• 是专门用来存储历史记录信息的

属性和方法	描述
length	获取历史记录个数
go(参数)	跳转指定的历史记录页参数：1 前几一个、-1 后退一个、2 前进2个、 -2 后退2个
forward()	forward()
back()	打开上一个网页（后退 <-）

十二、HTML DOM

语法

方法1：a.先给标签增加ID属性，b.然后直接id属性值获取标签对象（不推荐，代码多了可读性不强）

方法2：使用JS官方提供的语法

var 变量名 = document.getElementById(‘ID属性值’) // * var
变量名 = document.getElementsByClassName(‘class属性值’) var 变量名 =
document.getElementsByTagName(‘标签名’)

var 变量名 = document.querySelector(‘选择器’) // 仅一个标签对象* var 变量名 =
document.querySelectorAll(‘选择器’) // 多个*

注意：	上述代码：在HTML中，叫：标签/标记
		在JS中，  叫：标签/标记对象（默认标签有哪些属性，这个对象就可以用哪些属性。）
		在DOM中， 叫：节点/元素

常用的属性和方法

对象.innerHTML 获取指定节点的内容（包括html标签） 对象.innertText
获取指定节点的内容（只获取文本内容）

对象.getAttribute(属性名) 获取指定的属性 对象.setAttribute(属性名,属性值) 设置属性
对象.removeAttribute(属性名) 移除属性
CSS DOM 使js可以动态给HTML添加css样式属性 （行内样式）

语法

语法：标签对象.style.CSS属性转化为js后的名称 = 属性值;

脚下留心：

1、一个单词直接写，如：color，background，margin，width，height
2、多个单词，第二个单词去掉“-”并且“首字母大写” 事件 DOM（重点）
DOM的分层结构 / 树形结构 / 节点树

节点操作（语法）
1）取子节点

节点.firstChild 获取第一个子节点

节点.lastChild 获取最后一个子节点

节点.children 获取所有子节点（不计算空白节点）

节点.childNodes 获取所有子节点（计算空白节点）

2）获取兄弟节点

节点.nextSibling 获取下一个兄弟节点

节点.previousSibling 获取上一个兄弟节点

3）获取父节点

节点.parentNode 获取父节点

4）获取文本节点的值

节点.nodeName 获取节点名称（获取当前是p节点，还是b节点等等）

节点.nodeValue 获取节点值（限文本节点）

获取表单内容统一同 对象.value

节点属性

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

** 增删改节点**

节点创建

节点创建：document.createElement(节点名称)；

创建文本节点：document.createTextNode(文本内容)；

创建节点属性：节点.setAttribute（属性名，属性值）;

节点追加

给指定父节点追加最后一个子节点： 父节点.appendChild（待追加的节点）

在指定节点前追加新节点： 父节点.insertBefore（新节点，旧节点）

节点删除

父节点.removeChild（子节点）