JS(基础)

67iam

已于 2023-05-12 00:19:32 修改

阅读量59

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

于 2023-04-07 12:55:07 首次发布

本文链接：https://blog.csdn.net/m0_73369512/article/details/130009671

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS

语法

添加js

行内式 直接写到元素的内部
内嵌式

输入输出语句

alert(msg) 浏览器弹出警示框（展示给用户）
console.log(msg) 浏览器控制台打印输出信息（给程序员测速）
prompt(info) 浏览器弹出输入框，用户可以输入

声明变量 var(关键字)

简单数据类型

数字型number
isNaN() 判断非数字，如果是数字返回false，如果不是数字返回true
parseInt() 字符型转化为整数数值型 **parseFloat()**字符型转化为浮点数
隐式转换字符串 - * / 数字 = 数字 eg. ‘12’ - 0 = 12 ‘123’ - ‘120’ = 3

字符串长度string
转化为字符串类型 变量.toString() String(变量)
length 检测获取字符串长度检测获取数组元素个数
eg.console.log(str.length)

字符串拼接 字符串+任何类型=拼接之后的字符串
接触到字符串后，接下来都为字符串类型相加 eg.‘12’+12=1212 12+12+‘12’=2412

字符串和变量用+相接，变量可以很方便的修改值

布尔值Boolean

Boolean() 代表空，否定的值都会转化为false；其余值转化为true
ture参与加法运算当1来看 flase当0来看

Undefined 变量声明未定义数据类型

Full 变量为空值

(typeof 数据类型) 监测数据类型

逻辑运算

逻辑中断，如果表达式1以及为真，则表达式1之后的不运行，直接返回结果

逻辑&短路运算 如果表达式1为真，则返回表达式2
如果表达式1为假，则返回表达式1

逻辑||短路运算 如果表达式1为真，则返回表达式1
如果表达式1为假，则返回表达式2

数组

存放的数据可以是任何类型
var 数组名 = new Array();
var 数组名 = [1,2,3,4]

函数

声明函数

1.var 变量名 = function(){}; 函数表达式，没有名字

2.function 函数名(形参 ) function 声明函数的关键字
arguments 代替形参，把所有实参(任何形式)存起来
eg. function nidi(arguments) {}

作用域

全局变量 在全局都可以使用如果在函数内部没有声明直接赋值的变量是全局变量
局部变量 在函数里面的变量函数的形参也可以看作局部变量

全局变量在浏览器关闭后才消失，局部变量在代码块完毕后消失

对象（类似于c的结构体）

对象是一组无序的相关属性和方法的集合，由属性和方法组成

自定义对象

创建对象(object)三种方式
1.用字面量({})

	 var obj = {				//var 对象名 = {
			uname:  ,         	//属性名：属性值 (多个属性用，隔开)
			age:  ,
			sayHi: function(){       		//方法：匿名函数
					console.log('hi');
			}
	 }

2.用new Object 创建对象

var boj = new Object();		//创建了一个空对象
obj.uname =  ;					//对象名.属性名 = 属性值；
obj.age = ;
sayHi: function(){       		//方法：匿名函数
   console.log('hi');
   }

3.构造函数创建对象 (一次创建多个相同属性的对象,泛指某一大类)
function 构造函数名(){ 构造函数名首字母大写
this.属性 = 值;
this.方法 = function(){}
}
var 对象名 = new 构造函数名(); 只要调用构造函数,就创建了一个对象

function Star(uname,age,sex) {
   	this.name = uname;
   	this.age = age;
   	this.sex = sex;
   	}
   	var nidi = new Star('陆小涛',18,'男');

调用对象三种方式
1.对象名.属性值名 eg. console.log(obj.uname);
2.对象名[‘属性名’] eg. console.log(obj[‘age’]);
3.对象名.方法名() eg.obj.sayHi();

遍历对象 for in

for (变量 in 对象) {}
eg var obj = {
name: ,
age: ,
sex: ,
}

for (var k in obj) {
		console.log(k);           //变量k  输出得到的是	属性名
		console.log(obj[k]);	 //对象名[变量]  输出得到的是属性值
}

使用for in 里面的变量喜欢写k或key

内置对象

指js语言自带的一些对象，这些对象供开发者使用，并提供了一些功能
(别人写好的，拿过来用)
eg. Math Date Array String… …

Math()
Math.max()/Math.min() 最大值/最小值
Math.abs() 取绝对值
Math.floor()/Math.ceil()/Math.round 向下取整/向上取整/就近取整
Math.random() 随机数
不跟参数返回一个随机的小数(0 <= x < 1)
Math.floor(Math.random() * (max - min + 1)) + min; 返回两个数之间的随机整数，包括这两个整数

日期对象

Date()
Date()是一个构造函数，要用new来调用
eg. var date = new Date(); 如果没有参数，返回当前系统的当前时间
参数常见写法：字符串型 ‘2019-10-1 8:8:8’

var date = new Date();
var year = date.getFullYear();	//返回年
var month = date.getMonth();	//返回月份小一月，记得+1
var dates = date.getDate();	//返回几号
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
var day = date.getDay();	//返回日期	周一放回的是1，周日返回的是0
console.log(year + '年' + month + '月' + dates + '日' + arr[day]);

数组对象

Array()
构造函数，单一参数为创建空数组元素数量，多个参数为创建数组元素
var arr = new Array(2,3) 等价于 [2,3]

检测是否为数组
1.instanceof 运算符
eg. console.log(变量 instanceof Array)
2.Arrar.isArray()
参数里如果是数组返回true

添加数组元素
.push()
在数组末尾添加一个或多个数组元素，返回值是新数组的长度
eg.var arr = [1,2,3];
arr.push();
.unshift()
在数组前面添加

删除数组元素
.pop()
没有参数，删除最后一个元素，一次只能删一个，返回值为删掉的元素
.shift()
没有参数，删除第一个元素，返回值为删掉的元素

数组排序
.reverse() 翻转数组
.sort() 冒泡排序(只能排个位数)
数组名.sort(function(a,b) {
return a - b; 升序 (b - a) 降序
})；

数组索引方法
.indexOf(‘要查找的字符’,起始位置) 返回第一次出现的数组元素的索引号，若没有返回-1
.lastIdexOf(‘要查找的字符’) (不常用) 从后面开始查找

数组转化为字符串
.toString() 参数为数组
.join() (toString强大版)默认为逗号(,) 参数为符号，则元素直接为该符号

字符转换为数组
.split(‘分隔符’)

var str = 'red, pink, blue';
		console.log(str.split(‘ , ’));

字符串对象

根据位置返回字符 index为数组下标
.charAt(index) 根据位置返回字符,可以用for遍历输出数组元素
.charCodeAt(index) 返回相应索引号的字符ASCII值可以判断用户按下了哪个键

连接字符串
.concat() 等效于+，+更常用

截取字符串
.substr(截取的起始位置,截取几个字符)

替换字符
.replace(‘被替换的字符’,'替换为的字符‘) 只替换遇到的第一个字符
替换所有就遍历循环
eg.while(str.indexOf(’字符‘)){
str = str.replace(‘字符’,'替换的字符’);
}

数据类型

两种数据类型

简单数据类型(值类型)：string , number , boolean , undefined , null (返回的是一个空的对象)
null使用场景：如果有个变量我们以后打算储存为对象，暂时不知道放啥，这个时候就给null

复杂数据类型(引用类型)：通过new创建的对象，Object,Array,Date

堆和栈

栈：由系统自动分配释放存放函数的参数值、局部变量的值等，
简单数据类型存放到栈，开辟一个空间，存放的是值

堆：存储复杂数据类型，由程序员分配释放，若不释放则由垃圾回收机制回收
复杂数据类型存放到堆，在栈里面存放地址，地址指向堆里面的数据

注意！！好好理解 函数的形参看作一个变量，当我们把引用类型变量传给形参时，其实是把复杂变量在栈空间里保存的堆地址复制给了形参，形参和实参此时保存的是同一个堆地址，操作的是同一个对象

API

API(应用编程接口)

API是一种工具，只要找到接口，就可以实现具体功能

Web API

浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
eg.alret 弹出提示窗口

DOM

文档对象模型 通过DOM接口可以改变网页的内容、样式和结构

获取元素

根据ID获取
document.getElementById(id) 返回一个匹配到ID的DOM Element对象(元素对象)
将

<div id="time">2019-9-9</div>
<script>
    document.getElementById('time'); //参数id为字符串
</script>

console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法

根据标签名获取
document.getElementsByName() 返回带有指定标签名的对象的集合(伪数组)
document指的是整个文档

<ul>
    <li></li>
	<li></li>
</ul>
<script>
    var lis = document.getElementsByName('li');	
		//获取5个li，以伪数组形式存储
</script>

获取父元素内部所有指定标签名的子元素
document.getElementsByName(‘标签名’) 指定父元素(element)
父元素必须是单个对象(必须指明是哪一个元素对象)

var ol = document.getElementsByTagName('ol')  //[ol]
console.log(ol[0].getElementsByTagName('li'));//此时ol[0]才是对象

//常用id来获取	给ol设置id = ol
var ol = document.getElementsByTagName('ol')  //[ol]
console.log(ol.getElementsByTagName('li'));//指定id,此时ol是对象

根据类名获取
document.getElementsByClassName(‘类名’) 根据类名返回元素对象集合(伪数组)
document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象(伪数组)

<div class="box">	</div>
<div class="box">	</div>
<div id="nav">
    <ul>
    	<li></li>
    	<li></li>
	</ul>
</div>
var boxs = document.getElementsByClassName('box');	//类名

var	firstBox = document.querySelector('.box');	//类选择器
var	nav = document.querySelector('#nav');	//id选择器
var li = document.querySelector("li");	//标签选择器

var allBox = document.querySelectorAll('.box');//得到所有div

获取body
document.body 返回body元素对象

获取html
document.ducumentElement 返回html元素对象

事件触发机制

<button id="btn"></button>	
//1.事件源	事件被触法对象
var btn = document.getElementById('btn');	//获取事件源
//2.事件类型 如何触发eg.鼠标点击(onclick) 鼠标经过(onmouseover) 键盘按下
//获取焦点(onfoucus) 失去焦点(onblur)
//3.事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {	//绑定事件	添加事件处理程序
    alert('你弟')
}	//事件源.事件类型 = 事件处理程序(函数)

操作元素

改变普通元素内容
element.innerText 不识别html标签去除空格和换行
element.innerHTML 识别html标签保留空格和换行(常用)
这两个属性是可读写的可以获取元素里的内容

<button>显示当前事件</button>
<div></div>
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
//3.事件处理程序
btn.onclick = function() {
    div.innerText = getDate();
}
function getDate() {
	var date = new Date();
	var year = date.getFullYear();	
	var month = date.getMonth();	
	var dates = date.getDate();	
	var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
	var day = date.getDay();	
	return (year + '年' + month + '月' + dates + '日' + arr[day]);
}