Javascript学习 基本语法与概念汇总

Javascript

01-输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

02-变量的使用（变量：空间和变量名）

变量的声明：var (variable) 驼峰命名法：首字母小写，后面每个单词的首字母大写

不能以数字开头 单词中间不能加空格

03-数据类型

js–>弱类型语言/动态语言 意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

变量声明好了 类型也就确定了 不过作为动态类型，相同的变量可以用作不同的类型

var x = 10;
x = "pink";

简单数据类型：Number，String，Boolean，Undefined，Null

Number

八进制：0 ；十六进制：0x开头 ；Infinite :无穷大 NAN：不是一个数字

//数字型的最大值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log('pink老师'-100);//NAN
//判断一个变量是否为数字 isNaN 如果是数字则返回false 不是数字返回ture
//isNaN（x）-->x是一个非数字类型
console.log(isNaN(12));//false

String

length函数：计算字符串长度

var str="my name is andy";
console.log(str.length);//15
//字符串的拼接：“+” 不同类型的数据类型可以 拼接起来
console.log("pink"+18);//pink18
console.log("沙漠"+“骆驼”)；

Boolean

布尔型：真或者假 可以参与整数运算

Undefined and null

undefined 是指未定义

null 指向的是空值 null+1=1

复杂数据类型：object

获取数据类型

typeof 函数 还可以通过控制台显示变量的颜色来判断变量的类型

var num=10;
console.log(typeof num);//number
//prompt 取过来的值属于字符型！
var age = prompt('请输入你的年龄')；
console.log(age);//是你输入的数字
console.log(type of age);//String

字面量 ：字面量是在源代码中一个固定值的表示法，通俗来说就是字面量便是如何表达这个值

数据类型转换 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3MDkKt5L-1679192114819)(C:\Users\杨卓\AppData\Roaming\Typora\typora-user-images\image-20230308234857003.png)]

var age = prompt('请输入你的年龄')；
//1.parseInt(变量) 可以把字符型的转换为数字型 得到是整数
console.log(parseInt(age));
//parseInt 函数如果输入的是小数 将会将数字取整！
console.log(parseInt('3.98'));//3 取整
console.log(parseint('120px'));//120 会去掉px这个单位
//2.parseFloat(变量) 可以把字符型转换为数字型的导师小数 浮点数
console.log(parseFloat(3.14));//3.14
//3.Number(变量)
console.log(Number('3.14'));
//利用算数运算- * / 隐式转换
console。log('120'-0);//120

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R6kqIp1k-1679192114820)(C:\Users\杨卓\AppData\Roaming\Typora\typora-user-images\image-20230309002020326.png)]

04-运算符

算数运算符

加减乘除 取余 取模

（对于浮点数，计算精度会有变化 计算结果会有误差）

递增运算符

逻辑运算符

比较运算符

赋值运算符

运算符优先级

05-函数

argument的使用（不清楚实参个数）

function fn{
	console.log(arguments);//3
	//Arguments中存储了所有的实参 
}
fn(1,2,3);

其中的argument是为数组元素 有以下三个特点

1.具有数组的length属性

2.按照索引方式进行存储的

3.没有真正数组的一些方法 pop() push()等等

变量

根据作用域的不同可以分为全局变量和局部变量；局部变量在函数内部使用

特例：在函数中未经声明就赋值的变量属于全局变量

全局变量与局部变量区别：1.全局变量只有在浏览器关闭时才会销毁，比较占内存

​ 2.局部变量当函数执行完毕就会销毁

块级作用域（花括号{}）es6之前没有块级作用域

作用域链：内部函数访问外部函数的变量，采用的是链式查找的方式来决定取哪个值 这种结构我们称作作用域链（就近原则）

var num=10;
function fn(){
	var num=20;
	function fun(){
		console.log(num);//20 链式查找
	}
}

06-预解析

**我们js引擎运行js分为两步：预解析->代码执行 **

（1）.预解析 js引擎会把js里面国有的var还有function提升到当权作用域的最前面

console.log(num);
var num=10;//undefined
//相当于执行了以下代码
var num;
console.log(num);
num=10;

fun();//报错
var fun=function(){
	console.log(22);
}
//相当于执行了一下代码
var fun;
fun();
fun=function(){
	console.log(22);
}

（2）.代码执行 按照代码书写数码徐从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

（1）变量提升就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作；

（2）函数提升就是把函数声明提升到当前作用域的最前面 同样不提升赋值操作

预解析案例

//案例1
var num=10;
fun();
function fun(){
	console.log(num);
	var num=20;
}
//相当于下面的代码
var num;
function fun(){
	var num;
	console.log(num);
	num=20;
}
num=10;
fun();//故结果应该输出一个undefined

//案例2
var num=10;
functinon fn (){
	console.log(num);
	var num=20;
	console.log(num);
}
fn();
//相当于一下代码
var num;
function fn(){
	var num;
	console.log(num);
	num=20;
	console.log(num);
}
fn();//故输出结果应该为undefined和20

07-对象

对象是一组无序的相关属性和方法的集合，所有的是事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法构成的 属于一中特殊的数据类型

创建对象的方法

利用对象字面量创建对象{}

1.里面的属性或者方法我们采用键值对的形式 键：属性名 : 值：属性名

2.多个属性或者方法之间用逗号隔开

3.方法冒号后面跟的是一个匿名函数

var obj={
	uname='张三',
	age:18,
	sex:'男',
	sayHi:function(){
		console.log('hi-');
	}
}
//调用对象的属性两种方法
console.log(obj.uname);
console.log(obj['age']);
//调用对象的方法 sayHi 对象名.方法名()
obj.sayHi ();

利用object创建对象

var obj=new object();
obj.uname='鸣人';
obj.sayHi=funtion(){
	alert("hello");
}

构造函数创建对象

为了满足同时创建很多个属性与方法类似的对象**

构造函数：将对象里面的一些相同的属性和方法抽象相出来封装到函数里面 需要搭配new使用

//创建对象实例 相同属性：名字 年龄 性别 相同的方法：唱歌
function 构造函数名(){
this.属性=值；
this.方法=function(){}
}
function Star(uname,age,sex){
	this.name=uname;
	this.age=age;
	this.sex=sex;
}
var ldh=new Star('liudehua',18,'nan');

注意事项：1.构造函数名字首字母要大写

​ 2.我们构造函数不需要return就可以返回结果

​ 3.我们调用构造函数 必须使用new

​ 4.我们只要new Star（） 调用函数就创建一个对象

​ 5.我们的属性和方法前面必须添加this

new关键字的执行过程

1.在内存中创建一个新的空对象

2.让this指向这个新的对象

3.执行构造函数里面的代码，给这个新对象添加属性和方法

4.返回这个新的对象（所以构造函数里面不需要return）

遍历对象

方法：for in 循环

//for(变量 in 对象){
}
for(var k in obj){
	console.log(k);//k 变量输出 得到的是属性名
	console.log(obj[k]);//obj[k]得到的是属性值
}//一般使用k或者key来遍历对象

08-内置对象

js中的对象分为三种：自定义对象、内置对象、浏览器对象

内置对象：就是js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是基本的功能（属性与方法）

查文档

MDN官方网址:https://developer.mozilla.org/zh-CN/

Math内置对象

**Math.abs->绝对值 **

Math.floor()->向下取整

**Math.ceil()->向上取整 **

Math.round()->四舍五入版 就近取整 注意Math.round(-3.5)->-3

Math.random():随机数 随机返回【0，1）中的小数；

//得到两个数之间的随机整数 并且包含这两个整数
function getRandom(min,max){
	return Math.floor(Math.random()*(max-min+1)+min);
}
//随机点名实现
var arr=['张三','李四','王五']；
function getRandom(min,max){
	return Math.floor(Math.random()*(max-min)+min);
}
var num=getRandom(0,arr.length-1);
console.log(arr[num]);

日期对象

日期对象是一个构造函数 必须使用new来调用创建我们的日期对象

使用Date() 如果没有参数 返回当前系统时间

var date=new Date();
console.log(date);

格式化日期 年月日 时分秒 获得Date总的毫秒数 从1970年1月1日(时间戳)；

var date=new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);//记得月份+1
console.log(date.getDate());//几号
console.log(date.getDay());//星期几
console.log(date.getHours);
console.log(date.getMinites);
console.log(date.getSeconds);
//获得总毫秒个数
//1.通过valueOf() getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
2.简单的写法（最常用的写法）
var date1=+new Date();//+new Date() 返回的就是总的毫秒数
console.log(date1);
3.H5新增的 获得的总的毫秒数
console。log(Date.now());

倒计时案例

<script>
        //倒计时
        function countDown(time){
            var nowTime=+new Date();
            var goalTime=+new Date(time);
            var times=(goalTime-nowTime)/1000;
            var d=parseInt(times/60/60/24);
            d=d<10?'0'+d:d;
            var h=parseInt(times/60/60%24);
            h=h<10?'0'+h:h;
            var m=parseInt(times/60%60);
            m=m<10?'0'+m:m;
            var s=parseInt(times%60);
            s=s<10?'0'+s:s;
            return d+'天'+h+'时'+m+'分'+s+'秒';
        }
        alert(countDown('2023-12-1 12:00:00'));
    </script>

数组对象

创建数组的两种方式

//1.利用数组字面量
var arr=[1,2,3];
console.log(arr[0]);
//2.利用new Array（）
var arr1=new Array(2);//创建了一个长度为2的空数组
var arr2=new Array(2,3);//创建了【2，3】这样的数组

---

检测是否为数组的两种方式

//1.instanceof 运算符 注意instanceof不是一个函数 所以不需要加() 并且不需要大写
console.log(arr instanceof Array);//Ture
console.log(obj instanceof Array);//False
//2.Array.isArray(参数) H5新增 ie9以上版本支持
console.log(Array.isArray(arr));

添加和删除数组元素的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPkxCICy-1679192114821)(C:\Users\杨卓\AppData\Roaming\Typora\typora-user-images\image-20230311170053492.png)]

如果执行的是删除操作：那么会返回删除的元素

如果执行的是添加操作：那么会返回新数组的长度

数组排序

1. 反转数组 reverse（）

2. 数组排序（冒泡排序）sort（）

   sort排序只能调整个位数的顺序 如果要真正实现升序/降序排列

   var arr=[12,2,3,44,5];
   arr.sort();//12,2,3,44,5
   arr.sort(function(a,b){
   	return a-b;//升序
   	return b-a;//降序
   })
   

获取数组元素索引的方法

1. indexOf(数组元素)，作用就是返回该数组元素的索引号 并且只返回第一个满足条件的索引号（从前到后）找不到返回-1
2. ladtIndexOf(数组元素)，逆序！也只会返回第一个满足条件的索引号 找不到返回-1

数组转换为字符串

//1.toString
var arr=[1,2,3];
console.log(arr.toString());
//2.join(分隔符)
var arr1=['green','blue','pink'];
console.log(arr1.join());//默认分隔符为’，‘
console.log(arr1.join('-'));//green-blue-pink

字符串对象

基本包装类型

var str='happy';
console.log(str.length);
//相当于以下的代码
var temp = new String ('Andy');//生成临时变量，把简单类型包装为复杂数据类型
str = temp;//赋值给我们声明的字符变量
temp=null;//销毁临时变量

一般来说 只有对象这种复杂数据类型才有属性和方法 字符串这种简单的类型也会具有.length属性 这就来源于基本包装类型 将字符串类型包装成复杂数据类型 这样基本数据类型也就有了属性和方法

字符串的不可变性

字符串本身的值是不可变的，每次给字符串赋值或者是字符串拼接，实际上都是在内存中开辟了新的内存存放值，再让变量指向新的值

查找字符串所出现位置的索引

与数组类似，只需要调用indexOf（）函数，其中可以传递两个参数，indexOf(‘查找的字符串类型’，number（从哪一个位置开始查找）)

根据数组的位置返回字符

//1.charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
//遍历所有的字符
for(var i = 0; i < str.length;i++ ){
	console.log(str.charAt(i));
}
//2.charCodeAt(index) 返回相应索引号的字符ASCII值 目的：判断用户按下了哪个键
//3.str.[index];

统计出现最多的字符和次数

var str='akjhdgfiuagbdg';
var o={};
for(var i=0;i<str.length;i++){
	var chars=str.charAt(i);
	if(o[chars]){//o[chars]取的是对象中属性的值
		o[chars]++;
	}else{
		o[chars]=1;
	}
}
console.log(o);
var ch='';
var max;
for(var k in o){
	if(o[k]>max){
	max=o[k];
	ch=k;
	}
}
console.log(max);
console.log(‘出现最多的字符是：’+ch);

字符串操作方法

1. replace(‘被替换的字符’，‘替换为的字符’) 它只会替换第一个字符

   var str1='ajhgdfk';//要求用*替换掉所有的o
   while(str1.indexOf('o')!==-1){
   	str1=str1.replace('o','*');
   }
   console.log(str1);
   

2. split(’分隔符‘) 前面我们学过用join把数组转换为字符串

3. toUpperCase()//转换大写

4. toLowerCase()//转换小写

简单数据类型与复杂数据类型

简单数据类型又叫做值类型，复杂类型又叫做引用类型

1. 值类型：简单主句类型/基本数据类型，再存储时变量存储的是值本身，因此叫做值类型：string，number，Boolean，undefined，null
2. 引用类型：复杂数据类型，在存储中变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过new关键字创建的对象（系统对象、自定义对象），比如我们的Object,Array,Date等

堆和栈

堆：复杂数据类型 栈：简单数据类型

简单数据类型传参：实际上是把值给传递过去

复杂数据类型传参：实际上是把变量在栈空间里保存的堆地址赋值给了形参，形参和实参其实保存的是同一个堆地址，所以在库函数内外操作的是同一个对象