JavaScript&TypeScript总结

JavaScript&TypeScript总结

JavaScript总结

1.js的作用

DOM操作: 增删改查HTML元素 可以直接操作HMTL
动效: 可以通过JS完成各种动效 让网页动起来
交互: 让用户和网页形成交互 (点击、滑动、拖拽等)

2.输入与输出语法

2.1输出

document.write('hello world!')
作用：向body内输出内容
alert('hello world!')
作用：弹出一个警告框
console.log('hello world')
作用：在控制台中输出内容

2.2输入

prompt('hello world')
作用：显示一个对话框，包含一条文字信息，用来提示用户输入信息

3.变量

严格区分大小写

3.1变量关键字及作用域

关键字：var let const
(若无关键字，变量为全局变量)
var 声明的变量作用域在当前作用域
let const 声明的变量作用域在其声明的块级作用域内 声明后才能使用

3.2变量的数据类型

字符串(string)、数字(number)、布尔(boolean)、数组(array)、对象(object)、Null、Undefined、函数(function)
字符串string:字符串是存储字符（比如 “Hungry”）的变量 可以是引号中的任意文本。
数字number:JS只有一种数字类型。数字可以带小数点，也可以不带.很大或很小的数字可以通过科学（指数）计数法来写。
布尔boolean:布尔只能有两个值：true 或 false
数组array:var cars=new Array()。
对象object:JS变量均为对象。
函数function:函数对象。
Null,Undefined:可以通过将变量的值设置为 null 来清空变量。

类型转换

//转为数值
var n1 = +'123';//123和下面等效
var n2 = Number('123');//123
var n3 = parseInt('123.3blue');//123
var n4 = parseInt('blue123');//NaN
var n5 = parseInt('0123.23',8);//83
var n6 = parseFloat('123.23.12blue');//123.23
//转为字符串
var s1 = '' +123;//"123"和下面等效
var s2 = String(123);//"123"
//转为布尔值
var b1 = !!'123';//true和下面等效
var b3 = Boolean('123');//true

布尔类型转换规则

数据类型	true	false
Boolean	true	false
String	非空字符串	“”
Number	非零数字值	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

4.运算符

4.1赋值运算符

将等号右边的值赋给左边，要求左边必须为一个容器
=、+=、-=、*=、/=、%=

4.2自增运算符

前置自增 ++i 先用再增
后置自增 i++ 先增再用

4.3比较运算符

>: 左边是否大于右边
<: 右边是否小于左边
<=: 右边是否小于等于左边
>=: 左边是否大于等于右边
==: 左右两边是否相等
===: 左右两边是否类型和值都相等
!==: 左右两边是否不全等

4.4逻辑运算符

&&：符号两边都为true结果才为true否则为false
||：符号两边有一个为true结果就为true，两个都为false才为false
！：true变false，false变true

##5.函数
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。
创建一个函数，在创建Function类型实例的同时还会创建一个原型对象，函数变量的prototype属性指向该原型对象。

5.1函数声明和表达式

function xxx(){}
var xx = function(){}
var xx = newFunction(“a”,“b”,“return a+b;”);

arguments

函数内部的arguments是一个类数组对象，包含着传入函数中的所有参数。

this

函数内部的另一个特殊对象是 this ,其行为与 Java中的 this大致类似。this引用的是执行函数的环境对象。
全局范围内使用this，它指向全局对象。

6.对象

6.1对象声明语法

let xx = {}
let xx = new Object()

6.2对象组成

属性：信息或特征
方法：功能或行为

6.3对象的增删改查

查询对象：对象.属性
更改对象：对象.属性 = 更改值
增加对象：对象.新属性名 = 新值
删除对象：delete 对象名.属性名

6.4遍历对象

let arr = ['pink','red','blue']

for(let k in arr){
    console.log(k) //数组的下标，索引号(字符串型)
}

let obj = {
    uname: '老师';,
    age: '18',
    gender: '男' 
}
for(let k in obj){
    console.log(k) //属性名 'uname' 'age' 'gender'
    console.log(obj[uname]) //属性值
} 

7. Web Api

7.1作用与分类

作用：使用js操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

7.2DOM树

将html文档以树状结构直观的表现出来称之为DOM树
描述网页内容关系的名词
作用：文档树直接的体现了标签与标签之间的关系

7.3DOM对象

DOM对象：浏览器根据html标签生成的js对象

所有的标签属性都可以在这个对象是找到
修改这个对象的属性会自动映射到标签上

DOM核心思想

将这个网页当做对象来处理

document对象

是DOM里提供的一个对象
用来访问和操作网页内容的
网页所有内容都在document里面

7.4获取DOM对象

根据CSS选择器来获取DOM元素

语法：
document.querySelectorAll('css选择器')
参数：
包含一个或多个有效的css选择器 字符串
返回值：
css选择器匹配的NodeList 对象集合
如：
document.querySelectorAll('ul li')

7.5修改DOM元素内容

7.5.1 innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

7.5.2 innerHTML属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

TypeScript总结

1.typescript的优缺点

优点
它提供了可选静态类型的优点。在这里，Typescript提供了可以添加到变量、函数、属性等的类型。
Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。
它使用基于类的面向对象编程。
TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。
缺点
如果我们在浏览器中运行TypeScript应用程序，需要一个编译步骤将TypeScript转换成JavaScript。
要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的定义文件。
TypeScript不支持抽象类。

2.数据类型

2.1number类型

let num: number = 123;

2.2string类型

let name: string = “哈喽！”;

2.3布尔类型

let flag: boolean = true;

2.4null和undefined

var n = null;

var u = undefined;

n = null;

n = undefined;

在ts中 null和undefined他们是类型 也是值

2.5数组类型

let arr2: string[] = [];

let arr3 = [“xxx”,18, true];

2.6any类型

let msg: any = “1234”;

msg = 123;

msg = true;

msg = [];

msg = null;

它可以是任何类型但是它也会失去某些数据

unknown类型 只能赋值给any和unknown类型的变量
any类型 可以赋值给任意类型的变量

let flag = true;

let res: unknown;

if(flag){

res = fn1();}else {res = fn2();}

let msg:unknown = res;

console.log(res)

2.7Void类型

Void是不返回任何类型值的函数的返回类型。如果没有可用的数据类型，则使用它。

2.8枚举类型

就是将一组可能出现的值, 一个一个列举出来, 定义在一个类型中,这个类型就是枚举类型

枚举类型放常量 字符串 数字 (全大写)