JavaScript的基本使用和介绍

ui框架 ant-design 阿里巴巴出品

什么是JavaScript

是一个前端的行为 是一种流行的脚本语言
点击网页按钮会改变的一种行为

altert( ) 在页面上弹窗 console.log( ) 输出在页面上

数据类型

字符串： 正常字符串使用 单引号/或者双引号包裹

\
\n
\t
\u4e2d  \u#### Unicode字符
\x41  AscII 字符 

大小写转换

//方法
//小写转成大写STUDENT
student.toUpperCase()
//转成小写 student
student.tuLowerCase()

substring

[)
student.subString(1)//从第一个字符春截取到最后一个字符串
student.substring(1,3) //[1,3)

数组

Array 可以包含任数据类型 var arr = [1,2,3,4]

数组的大小可变化 如果复制过小，数据会丢失

indexOf() 通过元素下标索引 arr.indexIf（2） ====》1

slice() 截取 Array 的一部分 ， 类似于String中的substring

push()、pop() 尾部

push：压入到尾部 pop 弹出尾部的一个元素

unshift（）、shift（）头部

push：压入到头部 pop 弹出头部的一个元素

排序 sort（）

元素反转reverse()

concat() 拼接数组的元素 但是并没有取代原先的元素组的元素 而是新生成了一个拼接的数组

​

注意事项：并没有修改数组 ，只是返回一个新的数组

连接符： join 打印拼接数组 ，使用特定的字符串连接

多维数组 第一个元素1是0,0 2 是0，1 3 是 1,0 4 是1,1

对象

若干个键值对 定义对象名

var 对象名{
   
    属性名：属性值;
    属性名：属性值;
    属性名：属性值;
}
//定义一个person对象，他有四个属性
var person = {
   
    name:"mojiejun",
    age:3;
    email:"2496776788@qq.com",
    socre；100
}

=最后一个属性不加逗号==

js对象， { …} 键值对描述属性： xxx：xxx

定义对象不会报错 ，undefined Person.gsdfg undifned

动态的删减属性 通过delete删除属性

动态添加 直接给新的属性添加值就可以

判断属性值是否在这个对象中 xxx in xxx （这个包括继承了toString的东西 ）

判断一个属性是否是这个对象自身拥有的hasOwnProperty() toString()继承的方法

流程控制

if判断 while 、for循环 、

forEach循环

for…in num 是索引下标 index才是下标的值 for…in 的循环话语 age 才是数组 num是循环的这个数字 for …in 遍历下标

for … of 遍历他的值打印

Map 和Set集合==<ES6的新特性>==

Map 通过他的键获得他的值（通过key 获得value） 增加(map.set(key,value))、删除（Map.delete(key)） 通过一个就可以删除

Set 无序不重复的集合 （set.add（2））添加、( set.delete(1) )删除、(console.log( set.has(3) ))是否包含某个元素

Iterator 迭代器

遍历数组

遍历Map

遍历Set

什么是对象序列化？

对象序列化是指将对象的状态转换为字符串；　序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程

为什么会有对象序列化？

当这句代码运行时，对象obj的内容会存储在一块内存中，而obj本身存储的只是这块内存的地址的映射而已。简单的说，对象obj就是我们的程序在电脑通电时在内存中维护的一种东西，如果我们程序停止了或者电脑断电了，对象obj将不复存在。那么如何把对象obj的内容保存在磁盘上呢（也就是说在没电时继续保留着）？这时就需要把对象obj序列化，也就是说把obj的内容转换成一个字符串的形式，然后再保存在磁盘上。另外，我们又怎么通过HTTP协议把对象obj的内容发送到客户端呢？没错，还是需要先把对象obj序列化，然后客户端根据接收到的字符串再反序列化（也就是将字符串还原为对象）解析出相应的对象。这也正是”百度百科—序列化“中描述的两个作用——存储、传输。

内部对象：

Date 日期

JSON

什么是json：（JavaScript Notation ）是一种轻量级的数据交换格式
简介和清晰的结构层次是的JSON 成为理想的的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率

格式： 对象用{ } 数组用 [ ] 所有的键值对用key ：value

JSON和JS对象转化

var obj = {
    a:"hallo",b:"hallob"}
var json = '{"a": "hallo", "b":"hellob"}'

BSON 用于芒果DB

Ajax

原生的js写法，xhr异步请求
jQuery 封装好的方法$("#name").ajax("")
axios 请求

面向对象编程

什么是面向对象：
类 ：模板
对象：具体的实例

原型：

xiaoming.proto = student 原型对象

class继承

1、定义一个类，属性，方法

本质：查看对象原型 __ proto __ =Student
原型链Object：
prototype 在JavaScript 中，每一个函数都有一个prototype属性，整数型指向函数的原型对象

构造函数和原型和实例的关系：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的构造函数指针，而实例都包含一个指向对象的内部指针，那么假如我们让原型对象等于另一个类型的实例，结果会怎么样？显然，此时的原型对象将包含一个指向另一个圆形的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例和原型的链条，这就是基本原型链的概念

操作BOM对象

BOM 浏览器对象模型
IE 6~12 Chrome（谷歌） Safari（苹果） FireFox（火狐 普遍Linux上） Opera(欧朋) 这些都是内核 其他的市三方

window   
window.alert(1)
//浏览器的内宽高
window.innerHeight
window.innerWidth
//浏览器的外宽高
window.outerHeight
window.outerWidth 

window 代表 浏览器窗口

Navigator

Navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"浏览器的版本和内核信息"
navigator.platform
"win32"

screen

代表屏幕尺寸

screen.width
1920px
screen.height
1080px

location 代表当前页面的URL信息

document （内容 dom）
document.cookie 获取客户端的本地信息（前端获得的方式 ）

劫持cookie原理

<script>aa.js</script>
<!-- 而已人员；获取你的cookie信息上传到他的服务器-->

服务器端可以设置cookie：httpOnly

session（后端获取的方式）

history history.back（）//后退 history.forward（）//前进

操作DOM对象

动态操作一棵树

浏览器网页就是一个Dom树形结构
更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新节点
要操作一个Dom节点 ，就必须要获得这个Dom节点

获得Dom节点

更新DOM节点

操作文本

id1.innerText=’456’ 修改文本的值
id1.innerHTML=‘< strong >123</ strong>’ 可以解析HTML文本标签

操作JS

id1.style.color=‘red’//属性使用  字符串  包裹
id1.style.fontSize='20px' //驼峰命名问题
id1.style.fontSize='200px'
id1.style.padding='50px'

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">
    <h1 > 标题一</h1>
    <p id="p1"> p1</p>
    <p class="p2">p2</p>
</div>