数据是什么？

数据是具有特定形式的信息。
数据是可以被解析器处理的有效信息。
程序的运行离不开数据，数据是程序运行过程中操作的值。

  // 146/：Uncaught SyntaxError: expected expression, got end of script 语法错误
       // hello:Uncaught ReferenceError: hello is not defined 引用错误
       true
       null
       undefined
       Symbol//新的数据类型，表示一种符号
       100+100
       console.log("hello"+100)//hello100
       console.log(true+100)//101:true进行了数据类型转换
       console.log(null/0)//NaN

数据类型是什么？

• 计算机程序通过操作值或文本来工作。根据值的自身特点，程序对值的操作的方式也不同。如：数值可以用来计算，文本可以并接。
• 数据类型用于表示不同特点的值的类型。

数据类型的分类

js定义了八种数据类型，其中七种是原始值

原始值（primitive values）

原始值是一种简单的数据类型，它只包含一种类型的值。没有属性和方法的值就是原始值。
特点1.不可变，2.原始值在任何时候是没有属性和方法的，3.存储在内存栈中

• 字符串 （String）

• 布尔值（true false）

• 数值（Mumber）

• Symbol

• Bihint

• null

• undefined

  对象值（object）

  对象值是一种复杂数据类型，它可以包含多种类型的值。
  特点1.可变值，2.对象有属性和方法，3.对象存储在内存堆中。

• 对象：变量的集合||对象是属性的集合

• 数组：值的有序集合

• 函数：语句的集合

• Date：毫秒数

• Math

• ......

对象也是一种数据结构。数据结构就是一个放置复杂数据的容器。

值的有序集合，数据结构：数组

[1,2,3]

表示键值对，数据结构：对象

{x:1,y:2}

重复调用多条语句，数据结构：函数

function fn(){
//语句1
//语句2
//......
}

对象分类

按来源分类

• 内置对象
  Number String Boolean Object Function Array Math RegExp Date

• 宿主对象

• 自定义对象

  const arr = new Array()//内置对象
        const obj = {x:1,y:2}//自定义
        const win = window//宿主对象
        const d = document//宿主对象
        const h = history//宿主对象
        const http = new XMLHttpRequest()//宿主对象
        //内置对象 Number String Boolean Object Function Array Math RegExp Date
  

  创建对象

  • 字⾯量法

  • 构造函数法

  • Object.create()

  对象字面量

  定义：使用花括号包含的一组逗号分割的名值对。
  注意对象字面量是一个表达式，每次求值都会创建并初始化一个新对象。

  //①花括号 ②多个属性⽤逗号分隔 ③属性值可以是任意数据类型
  //④属性名：必须是字符串或Symbol
  const obj = {
  name: '',
  age: 18,//建议写上
  10:'hello',
  true:'haha',
  undefined:'hahaha',
  'a-b':'hehehehe',
  Symbol:'nihao'
  }
  obj.hobies = '游泳'
  console.log(obj['10']);
  console.log(obj.true);
  console.log(obj.undefined);
  console.log(obj['a-b']);
  console.log(obj.Symbol);
  const arr = ['a','b','c','d']
  console.log(arr['0']);
  

如何读取对象的属性

点语法

⽅括号法

如何修改/添加对象属性

⽅法1：点语法赋值

⽅法2：⽅括号法赋值

⽅法3：Object.defineProperty()

定义

Object.defineProperty() 静态⽅法直接在⼀个对象上定义⼀个新的属性，或者修改⼀个对象上的现有属性，并返回该对象。

语法

Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(对象名, 属性名, 属性描述符)
Object.defineProperty(对象名, 属性名, {
enumerable: true,//是否可枚举
configurable: true,//是否可配置
writable: false,//是否可修改
value: 18,//设置属性值
})

• 对象名

• 属性名

• 属性描述符：是一个对象。用于描述属性的细节

const obj = {
name: '张三'
}
obj.hobbies = '游泳' //通过点语法添加的属性都是可枚举的
Object.defineProperty(obj, 'age', {
enumerable: true,//是否可枚举
configurable: true,//是否可配置
writable: false,//是否可修改
value: 18,//设置属性值
})
Object.defineProperty(obj, 'age', {
enumerable: false,//是否可枚举
configurable: false,//是否可配置
writable: false,//是否可修改
value: 18,//设置属性值
})
console.log(obj);
obj.age = 100
console.log(obj.age);
for(key in obj)
console.log(key);

删除对象属性的方法

//删除对象属性的⽅法：delete操作符
delete student.age
//delete删除对象的属性，会全部删除：属性和属性值
console.log(student.age);
//delete删除数组元素，只删除值，不删除属性
const arr = ['a','b','c','d']
console.log(delete arr['0']);
console.log(arr[0]);//
console.log(arr.length);//4 数组⻓度不变

遍历数组的方法

遍历数组的方法：

• for循环：工作原理是通过3个表达式来控制循环

• 迭代法(for...of): 原理是通过数组内部的 iterable (可迭代对象)进⾏迭代。注意：对象内部是没有可迭代对象的。只有含有iterable 的数据可以使用迭代，

//遍历数组：迭代法 (for...of)
const arr = ['a','b','c','d']
//for循环: 利⽤三个表达式控制循环
let len = arr.length
for(let i = 0; i < len; i++)
console.log(arr[i]);
//for...of:⽤来迭代值
let i = 0
for(item of arr){
console.log(item,i);
i++
}

遍历对象的方法

遍历对象的方法

• 枚举法（for...in）：枚举（enumerable）是对象的内部属性、该属性用于控制哪些属性可遍历。

• 枚举：枚举是对象的内部属性，用于控制for...in中的输出的属性

//遍历对象：枚举法
const obj = {
name: '张三',
nickname: '法外狂徒',
age: 18,
gender: '男',
single: true,
hobbies: ['游泳','打架','拳击'],
}
//for...in循环
for(key in obj)
console.log(key);

内置对象/函数

let str = new String('hello') //创建字符串
let str2 = String(true)//普通函数调⽤：强制转换成字符串
console.log(typeof str) //object
let str2 =
let num = new Number(100) //创建数字对象
let num2 = Number(true) //普通函数调⽤ 强制转换数值

undefined和null永远没有属性和⽅法

Object是对象还是函数

//万物皆对象
let str = new String('hello') //创建字符串
console.log(typeof str) //object
let str2 = 'hello' //原始值
console.log(typeof str2);
console.log(str2.length);//5 包装对象是⼀个临时对象
let num = new Number(true) //创建数字 所有的属性和⽅法定义在了构造函数上
console.log(num);
let b = new Boolean()
//只有undefined和null没有构造函数，他们永远没有属性和⽅法
console.log(typeof null);//null表示空对象
Number()
Object()
Boolean()
Array()
Date() 

静态属性是什么？

const arr = ['a','b','c','d']
console.log(delete arr['0']);
console.log(arr[0]);
console.log(arr.length);//4
function Abc(){ //⽤来构造对象
this.name = 'hello'
}
Abc.age = 100 //添加到构造函数身上的属性称为静态属性
let obj = new Abc()
console.log(obj);
// obj.age = 100
// console.log(obj)

构造函数

什么是构造函数

构造函数就是构造器函数(constructor function）。⼀个⽤于构建多个对象的特殊函数

• 首先，他是一个函数

• 构造函数的英文：constructor function

  • 构造函数是一个构造器

• 构造函数是一个用于构造对象的函数

• 构造对象 === 创建对象

构造函数的问题：

通过构造器函数向对象添加⽅法的缺点是：当创建多个对象实例时， this.sayHi 被添加到每⼀个实例对象中，也就是说内存使⽤效率降低：每个实例的 sayHi ⽅法会在内存堆中创建存储空间。

（缺点：为每个实例对象添加方法，内存使用效率低，每个实例方法在内存堆创建空间）

可以使⽤ prototype 属性解决这个问题，把⽅法添加到构造函数的 prototype 对象身上，让所有的对象实例共享⽅法。

构造函数的工作原理

基本上，使用new调用构造函数执行了一下操作：

• 创建一个空对象，并为其分配给this

• 为this添加属性和方法

• return this

原型图示例

53f9c68878c547631eed3581f5260e8.png

阐述

• 任何构造函数内部都有 prototype 属性：该属性指向⼀个被称为 原型 的对象

• 任何 原型 对象内部都有⼀个 constructor 属性: 该属性指向构造函数 User()

• 通过关键词 new 调⽤构造函数User创建了实例对象 user1

  • 在创建实例对象的过程中，构造函数⾃动为实例对象分配了⼀个⽗级对象，这个⽗级对象就是实例对象的 原型 对象。

• 任何实例对象上都有⼀个 __proto__ 属性，该属性指向其 原型 对象。

prototype属性是什么？

-当使⽤new关键词调⽤构造函数创建对象实例时，构造函数会⾃动为实例对象分配⼀个⽗级对象，这个⽗级对象就是实例对象的原型，

-并且实例对象会拥有这个它的原型的所有属性和⽅法。

--每⼀个构造函数都有⼀个prototype属性，这个属性就是实例对象的原型对象。

• 所有的构造函数内部都有一个prototype属性

• prototype属性指向一个对象。这个叫‘原型对象’

• 构造函数使用它指向的‘原型对象’创建实例。

• ‘原型对象’：它也是一个对象！！！意味着‘原型对象’也有自身的属性和方法。

• ‘原型对象’有一个constructor属性

原型对象的constructor属性是什么？

• 所有的”原型对象“身上有⼀个 constructor 属性

• constructor 属性指向⼀个构造函数

实例对象的proto属性是什么

• 所有的实例对象身上都有⼀个⾮标准的 proto 属性

• proto 属性指向它的原型对象

null

• null表示到达了原型链的顶端

对象的方法

1.Object.getPrototypeOf()

Object.getPrototypeOf() 方法返回指定对象的原型

语法：

Object.getPrototypeOf(object)

参数object：是要指定的对象

返回值：对象的原型

2.Object.keys()

定义：将对象可以枚举的属性名返回到一个新数组

语法：

Object.keys（obj）

返回值：可枚举属性名数组

示例：

const obj = {
    key : value
}
Object.keys(obj) // [key]

3.Object.values()

定义：将对象可以枚举的属性值返回到一个新数组

语法：

Object.values（obj）

返回值：可枚举属性值数组

示例：

const obj = {
    key : value
}
Object.values(obj) // [value]

4.Object.entries()

定义：将对象可枚举的属性对返回到一个数组

语法：

Object.entries(obj)

返回值：属性对数组

示例：

const obj = {
    x ： 1
}
Object.entries(obj) // [[x,1]]

5.Object.hasOwnProperty()

定义：检测一个属性是否是自身属性

语法：

obj.hasOwnProperty(prop)

返回值：布尔值

• true:表示该属性是对象的⾃身属性

• False: 表示该属性不是对象的⾃身属性

示例

obj.hasOwnProperty(prop)
对象.hasOwnProperty(属性名)

6.Object.prototype.propertyIsEnumerable

定义：该⽅法⽤于检测⾃身属性是否可枚举。

语法：

obj.propertyIsEnumerable(prop)

返回值：布尔值

示例：

//obj.propertyIsEnumerable(prop)
const obj = {
x:1,
y:2,
z:3,
}
//请把y改成不可枚举 > 修改enumerable属性 > Object.defineProperty()
Object.defineProperty(obj,'y',{
enumerable:false
})
const r1 = obj.propertyIsEnumerable('x')
const r2 = obj.propertyIsEnumerable('y')
console.log(r1,r2)

7.Object.assign()

定义：Object.assign()⽅法将所有可枚举属性从⼀个对象复制到另⼀个对象

语法：

Object.assign(obj1,obj2)

参数：

• obj1：目标对象，接收源对象属性的对象，也是修改后的返回值。

• obj2：源对象

返回值：修改后的对象

示例：

const obj1 = { x: 1,y:5}
const obj2 = { y: 2, z: 3 }
obj2.__proto__.w = 4
Object.assign(obj1,obj2)
console.log(obj1) //输出{x:1,y:2,z:3}

新数据类型

Symbol

• Symbol是⼀种基本数据类型

• Symbol是原始值

//1. Number(任意)=>原始值 2. new Number(任意)=>对象
const n1 = Number(100)
const n111 = Number(100)
console.log(n1=== n111);//
// const n2 = Number()
// console.log(n2);
// const n3 = Number(Infinity)
// console.log(n3);
// const n4 = Number(NaN)
// console.log(n4);
// const n5 = Number('100')
// console.log(n5);
// const n6 = Number('abc')
// console.log(n6);
// const n7 = Number({x:1})
// console.log(n7);
// const n8 = Number([])
// console.log(n8);
//1.String(任意) =>原始值 2.new String(任意) =>对象
const str1 = String('hello')
const str2 = String('hello')
console.log(str1 === str2);//true
//Symbol(字符串) 返回⼀个具有唯⼀性的标识符
const sym1 = Symbol()
const sym2 = Symbol()
console.log(sym1 === sym2);//false
// const sym3 = new Symbol() //报错
const sym3 = Symbol()
const sym4 = Symbol()
const obj = {
x:1,
y:10,
 [sym3]: 'hello',
 [sym4]: 'world'
}
console.log(obj[sym3]);
console.log(obj[sym4]);

BigInt

含义：BigInt表示任意大的整数

语法：

//字⾯法定义bigint
const bi1 = 10000000000n
//内置函数法
const bi2 = BigInt(1000000);//1000000n
const bi2 = BigInt('1000000');//1000000n

⽤法

• ①symbol之间可以做运算

• ②不可以使⽤math⽅法

• ③不能和number混合运算

• ④bigint可以和number做⽐较

示例

//BigInt表示任意⼤的整数
const b1 = -10n
const b2 = BigInt(20)
console.log(b2);//20n
console.log(b1 + b2);//30n①可以做symbol运算
console.log(typeof b1);//bigint
//console.log(Math.abs(b1));//②不可以使⽤math⽅法
// console.log(b2 + 20);//③不能和number混合运算
console.log(20n === 20);
console.log(20n == 20);//④bigint可以和number做⽐较
const bi1 = bigInt(100n)
const bi2 = BigInt(100)
const bi3 = BigInt(100n)
const bi7 = BigInt('100')
const bi4 = bigInt(100)
const bi5 = bigInt('100')
const bi6 = BigInt('100n')

DOM

JS包含哪几部分？

• ES:是一门语言，负责语法部分。学习ES学习的是语法（ECMA：欧洲计算机协会 ECMAScript）

• BOM:浏览器对象模型 用途：提供给ES一个接口来操作浏览器

• DOM:文档对象模型 用途：提供ES一个接口来操作文档

BOM是什么？

• BOM：Browser Object Model 浏览器对象模型

• BOM把浏览器定义成一个对象模型。

  • Windeow：整个浏览器被定义成了window对象

    • document ： 把文档定义成一个对象

    • Histroy：把历史记录定义成一个对象

    • Screen：把显示浏览器窗口的屏幕定义成一个对象

    • Location：把地址栏定义成一个对象

    • Navigator：把浏览器的介绍定义成一个对象

• BOM：用途：允许ES操作浏览器的一切

DOM是什么？

• DOM：Docoument Object Model 浏览器对象模型

• 用途：DOM就是为了操作文档用的

• 在DOM眼里：整个文档的内容都是对象。

• DOM把文档的一切内容都定义成了对象

  • 文档对象（document）

  • 元素对象（elment）

  • 文本对象（text）

  • 属性对象（Attribute）

  • 样式对象

  • 节点对象（node）

• DOM是W3C制定的一套规则。

DOM树

微信截图_20230211085016.png

Document对象

定义

• document对象表示网页文档。

• Document对象是DOM的核心对象。

• Document对象是访问文档的入口

用途

Document对象主要用途是操作文档。具体内容如下：

• 查：获取元素

• 增：创建元素

• 删：删除元素

• 改：替换元素

获取元素的方法

• 通过传统方法

• 通过id获取元素document.getElementById('id')

window.document.getElementById('id')
// 可以不写全局对象window

• 通过标签名获取元素document.getElementsByTagName('标签名')

window.document.getElementsByTagName('标签名')
// 可以不写全局对象window

• 通过标签名获取元素element.getElementsByTagName('标签名')

Ezlement.getElementsByTagName('标签名')
// 可以不写全局对象window

操作文档内容

在获取完元素之后，接下来我们要学习元素对象hi见的关系。DOM定义了两套API：

• node PI

• Element API

Node API

定义：

Node API把文档中的一切对象看成是节点 node

用途

• 查找结点的基本信息：节点名称、节点类型、节点的值

• 查找节点之间的关系：父子、兄弟

• 操作节点：增、删、改、查

三大基本属性

Node.nodeType

定义：nodeType表示节点的类型。节点类型使用一个数字表示。Node API 把节点分为了9种

Node.nodeName

Node.nodeValue

节点定义

• 父节点：一个节点之上的直接节点就是父节点

• 子节点：一个节点之下的直接节点就是子节点

• 兄弟节点：具有相同父节点的节点

• 后代节点：一个节点之下的所有层级节点

查找节点关系

• Node.parentNode:返回当前节点的父节点对象

• Node.childNodes：返回当前节点的子节点列表

• Node.nextSibling：返回当前节点的下一个兄弟节点

• Node.previousSibling：返回当前节点的上一个兄弟节点

• Node.firstChild：返回当前节点的第一个子节点

• Node.lastChild：返回当前节点的最后一个子节点。