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枚举类型
就是将一组可能出现的值, 一个一个列举出来, 定义在一个类型中,这个类型就是枚举类型
枚举类型放常量 字符串 数字 (全大写)