JS入门笔记(上)

最新推荐文章于 2023-05-25 13:43:40 发布

菜鸟黄某

最新推荐文章于 2023-05-25 13:43:40 发布

阅读量294

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_62061392/article/details/123860064

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS的编写位置

1.行内

<button onclick="alert('hello');">我是按钮</button>  
<a href="javascript:alert('aaa');">超链接</a>

2.内嵌

<script type="text/javascript">  
   //编写js代码  
</script>

3.外部引用

注意:script标签引入外部文件了，该标签就不能再编写代码

<script type="text/javascript" src="文件路径"></script>

输入输出语句

浏览器弹出警告框

alert("输出的内容");

浏览器控制台打印输出信息
```
console.log("输出内容");
```

写在body标签中，并在页面中显示

document.write("要输出的内容");

浏览器弹出输入框
```
prompt("输入内容");
```
字面量和变量

字面量

字面量是一些固定的值，如 1 2 3 true false null NaN “hello”

字面量都是不可以改变的。

字面量不是很方便使用，所以在JS中很少直接使用字面量

变量

变量可以用来保存字面量，并且可以保存任意的字面量

一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述

var = age;//1.声明变量
age = 10；//2.赋值

var age = 18//变量初始化

更新变量

一个变量重新赋值后，变量值将以最后一次赋值为准。

标识符

所有的可以自主命名的内容，都可以认为是一个标识符

规范:

由字母，数字，下划线（_），美元符号（$）组成
变量区分大小写，app 和App是两个变量
不能数字开头
有意义且驼峰命名

数据类型

JS中分六种数据类型 5个基本数据类型 +object

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

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象

Number数值

1.数字型进制

0b 开头表示二进制，但是不是所有的浏览器都支持
0 开头表示八进制
0x 开头表示十六进制

//八进制数字序列范围：0-7
var num1 =07;//对应十进制的7
var num1 =019;//对应十进制的19
//十六进制数字序列范围 ：0-9以及A-F
var num = 0xA;

2.特殊值

Infinity 正无穷 a = Infinity ,能赋值
-Infinity 负无穷
NaN 非法数字（Not A Number）

alert(Number.MAX_VALUE);//最大能表示的值 1.7976931348623157e+308  
alert(Number.MIN_VALUE);//

isNaN() 判断一个变量是否为非数字类型，返回布尔值

Boolean布尔值

使用typeof检查一个布尔值时，会返回boolean

console.log(true + 1);//true参与加法运算当 1 看待
console.log(true + 1);//false参与加法运算当 0 看待

Null空值

使用typeof检查一个Null类型的值时会返回"object"

var a = null;
console.log(a + 1);// 1

Undefined未定义

undefined与数字相加最后结果是NaN

声明一个变量但没有赋值时

var a；
console.log(a);//undefined

使用typeof检查一个Undefined类型的值时，会返回"undefined"

String字符串

字符串拼接：字符串相加的任何数据类型转换为字符串，再拼接成新字符串

alert（‘11’ + 12）;  //  1122

字符串转义符

\'  ==> ' 
\"  ==> " 
\n  ==> 换行 
\t  ==> 制表符 
\\  ==> \	  
\b  ==> 空格

字符串引号嵌套：单引号嵌套双引号，或者双引号嵌套单引号

var strMsg = "我是'帅哥' 吧 ";
var strMsg = '我是 "帅哥" ';

引用数据类型

Object对象

数据类型转换

使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加减运算

此时需要数据类型转换

转化为String

方式一（强制类型转换）

调用toString方法

var a = 10; 
var b = a.toString();
//注意该方法不适用于 null 和 undefined，由于这两个类型的数据中没有方法，
//所以调用toString（）会报错

方式二（强制类型转换）

调用 String() 函数

var b = 123;
b = String(b)

方法三(隐式类型转换)

利用 + 拼接字符串方法实现转换

转化为Number

方式一（强转）

调用 Number() 函数

var s = "123";
s = Number(s);

非法数字字符串或者undefined，转换为NaN

空串，纯空格的字符串或者是null转换为0

true转换为1 false转换为0

方式二（强转）

调用parseInt() 或者parseFloat()

console.log(parseInt('3,14'));//3 取整
console.log(parseFloat('3.14'));//3.14
console.log(parseInt('3,94'));//3 取整
console.log(parseInt('120px'));//120  会去掉px
console.log(parseInt('r120px'));//NaN

对于非String调用，会先将其转化为String然后操作

方式三（隐式转换）

利用算数运算（除了 +）

console.log('12' - 0);//12
var a = "123";

a = + a;

转换为布尔值

方式一（强制类型转换）

使用Boolean（）函数

var s = "fa";
s = Boolean(s);//true

代表空、否定的值会被转换成false ，如 ’ ’ (空串) 、0、NaN、 null、undefined

其余值都会转换为true

方式二（隐式类型转换）

为任意的数据类型做两次非运算，即可将其转换为布尔值

var a = "hello";
a = !!a;//true

运算符

注意：与java，c语言差不多的不详写

`typeof`运算符

语法： typeof 变量

算数运算符

自增自减运算符

赋值运算符

关系（比较）运算符

如果比较的两个值是非数值，会将其转换为Number然后再比较。
如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

三元运算符

条件表达式？语句1 ：语句2;

相等运算符

== !=

相等和不等

会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较

===
全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换，如果两个值的类型不同，则直接返回false

!==
不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true

特殊的值：
null和undefined
由于undefined衍生自null，所以null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN不与任何值相等， NaN == NaN //false

逻辑运算符

!
非运算可以对一个布尔值进行取反，true变false false边true
当对非布尔值使用!时，会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值

&&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
与是一个短路的与，如果第一个值是false，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为false，则返回第一个值
2.如果第一个值为true，则返回第二个值

||
||可以对符号两侧的值进行或运算
只有两端都是false时，才会返回false。只要有一个true，就会返回true。
或是一个短路的或，如果第一个值是true，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为true，则返回第一个值
2.如果第一个值为false，则返回第二个值

运算符优先级

未看

流程控制语句

条件判断语句if

if(条件表达式){  
 	语句...  
 }

if(条件表达式){  
	语句...  
}else{  
	语句...  
}

if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else{  
	语句...  
}

条件分支语句switch

switch(条件表达式){  
	case 表达式:  
		语句...  
		break;  
	case 表达式:  
		语句...  
		break;  
	case 表达式:  
		语句...  
		break;  
	default:  
		语句...  
		break;  
}

while循环

while(条件表达式){  
    语句...  
}

do…while循环

do{  
语句...  
}while(条件表达式)

for循环

for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){  
    ③语句...  
}

死循环

while(true){  

}  

for(;;){  

}

对象（Object）

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

对象是JS中的引用数据类型

使用typeof检查一个对象时，会返回object

创建对象的三种方式

利用字面量创建

var obj {
    uname:'黄帅哥',
    age: 18,
    sayHi:function(){
        console.log('hi~');
    }
}//方法冒号后面跟的是一个匿名函数

利用new Object创建对象

var obj = new Object();
obj.uname = '黄帅哥';
obj.sayname = function(){
    console.log(obj.uname);//也可以用  对象["属性名"]
}

new关键字执行流程

new构造函数可以在内存中创建一个空的对象
this就会指向刚创建的空对象
执行构造函数里面的代码给这个空对象添加属性和方法
返回这个对象

利用构造函数创建对象

前两种方法一次只能创建一个函数

而构造函数就是把不同对象里面一些相同的属性和方法封装到函数里

利用构造函数创建对象的过程也称为对象的实例化

function 构造函数名(){
    this.属性名 = 值;
    this.方法名 = function(){
    }
}
  new 构造函数名();//调用函数返回的是一个对象
  //构造函数名首字母要大写
  //构造函数不需要return  就可以返回结果

删除对象中的属性

delete 对象.属性名  
delete 对象["属性名"]

遍历对象属性

for …in语句用于对数组或者对象的属性进行操作

var obj = {'0':'a','1':'b','2':'c'};  
  
for(var i in obj) {  
     console.log(i,":",obj[i]);  
}  
//0 : a
//1 : b      输出 i 得到的是属性名
//2 : c		 输出 obj[i]得到的是属性值

对象的分类

自定义对象
浏览器（宿主）对象
- 由JS运行环境提供的对象，目前来讲主要是指浏览器提供的对象
- 比如 BOM DOM
内置对象

JS语言自带的一些对象如 Math，Date，Array，String等

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法

Math.PI					//圆周率
Math.floor()			//向下取整
Math.ceil()				//向上取整
Math.round()			//四舍五入取整 3.5->3
Math.abs()              //绝对值
Math.max()/Math.min		//求最大最小值

随机数方法random()

这个方法里面不跟参数

random()返回 0—9随机小数

//1.想要两个数之间的随机整数  并且包含这两个整数
function getRandom(min, max){
    return Math.floor(Math.random() * (max -min + 1)) + min;
}
console.log(getRandom(1,10));
//2.不包含这两个整数

日期对象

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

var date = new Date();
console.log(date);//没有参数 返回当前系统的时间

name	return
`getDate`()	当前日期对象是几日（1-31）
`getDay`()	返回当前日期对象时周几（0-6） 0 周日 1 周一。。。
getMonth()	返回当前日期对象的月份（0-11） 0 一月 1 二月。。。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回当前日期对象的时间戳时间戳，指的是从1970年月1日 0时0分0秒，到现在时间的毫秒数计算机底层保存时间都是以时间戳的形式保存的。
Date.now()	可以获取当前代码执行时的时间戳

参数常用写法

数字型 2019, 10, 01 字符串型 ‘2019-10-1’

var date1 = new Date(2019, 10, 1);
console.log(date1);//返回的是11月  不是10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);//这个不会

未完

数组对象

创建数组

//1.利用数组字面量
var arr = [1,2,3];
//2.利用new Array()
var arr1 = new Array(); //创建了空数组
var arr2 = new Array(2); //创建了长度为2的数组
var arr3 = new Array(2,3);//创建了[2,3]数组

检测是否为数组

//1.instanceof运算符
var arr = [1, 2, 3];
console.log(arr instanceof Array);//true
//2.Array.isArray(参数);  H5新增方法   ie9以上版本支持
console.log(Array.isArray(arr));

增加删除数组元素的方法

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素	返回新长度
pop() 没有参数	删除数组最后一个元素	返回删除的函数的值
unshift(参数1…)	向数组开头添加一个或者多个元素	返回新的长度
shift() 没有参数	删除第一个元素	返回第一个元素的值

var arr = [1, 2, 3];
arr.push(4);
arr.pop();

数组排列方法

方法名	说明	返回值
reverse()	颠倒数组中元素的顺序，无参数	返回新数组
sort()	对数组的元素进行排序（冒泡排序）	返回新数组
`concat`()	连接两个或多个数组，它不会影响原数组	返回新数组
slice(begin,[end])	从一个数组中截取指定的元素该方法不会影响原数 1.截取开始位置的索引（包括开始位置） 2.截取结束位置的索引（不包括结束位置）第二个参数省略不写则一直截取到最后参数可以传递一个负值，如果是负值则从后往前数	返回截取的新数组
splice()	用来删除数组中指定元素,并用新元素替换（改变原数组） 1.删除开始位置的索引 2.删除的个数 3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边	返回删除的元素封装到新数组

翻转数组

var arr = ['pink', 'red', 'blue'];
arr.reverse();

数组排序

var arr = [3, 4, 7, 1];
arr.sort();//如果数组元素是含有两位数的会因只识别第一个数错排
//解决
var arr = [3, 34, 17, 1];
arr.sort(function(a,b){
    //return a - b;升序的顺序排列
    return b - a;//降序
})

字符串对象

//基本包装类型
var str = 'andy';
console.log(str.length);
//对象才有属性方法    复杂数据类型才有属性和方法
//那么简单数据String为什么会有length属性呢？

//简单包装类型： 就是吧简单数据类型  包装成为了  复杂数据类型
//(1)把简单数据类型包装成复杂数据类型
var temp = new String('andy');
//(2)把临时变量的值  给 str
str = temp;
//(3)销毁这个临时变量
temp = null;

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中开辟了一个内存空间

因为字符串的不可变所以不要大量的拼接字符串

根据位置返回字符

方法	说明	使用
charAt（index)	返回指定位置的字符	判断用户按下哪个键
charCodeAt(index)	获取指定位置处的ASCII码
str[index]	获取指定位置处字符	H5新增与charAt()等效

console.log(str.charCodeAt(0));//97
c0nsole.log(str[0]);//a
//遍历所有的字符
for (var i = 0; i < str.lengthl;i++){
    console.log(str.charAt(i));
}

字符串操作方法

concat（str1,str2,str3…)	用于连接两个或多个字符串。等于 +
substr(start,length)	从start位置开始（索引号），length取的个数
slice(satrt,end)	从start位置开始，截取到end位置，end取不到（索引号）
substring(start,end)	基本与slice相同但不接受负值

//1.替换字符  replace（'被替换的字符','替换字符') 它只会替换第一个字符
var str = 'andyandyandy';
//可以通过循环 替换所有'a'
while(str.indexOf('a') !== -1){
    str = str.replace('a','p');
}
//2.字符转换为数组 split('分隔符')  
var str1 = 'red, pink, blue';
console.log(str1.split('&'));

var str = '是的春天，春天来了';
console.log(str.indexOf('春'，3))//从索引 3 的位置开始往后查找

函数（Function）

函数也是一个对象，也具有普通对象的功能（能有属性）

使用typeof检查一个函数时会返回function

函数声明

//1.声明函数
function 函数名([形参1...]){
    //函数体
}
//2.调用函数
函数名([形参1...]);

//函数表达式(匿名函数)
var 函数名 = function([形参1,形参2...形参N]){  
	语句...  
};

立即执行函数

函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次

(function(a,b){  
    console.log("a = "+a);  
    console.log("b = "+b);  
})(123,456);

函数的封装

把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

形参和实参

形参是接受实参的，形参在被调用时才会被赋值

形参可以看做是一个不用声明的变量

形参实参个数匹配

function getSum(n1, n2){
    console.log(n1 + n2);
}
//1.如果实参形参个数相等 ，则正常输出结果
getSum(1, 2);
//2.如果实参 > 形参 ，会取形参的个数
//3.如果形参 < 实参 , 多余的形参定义为undefined，最终结果是NaN

return语句

返回值&终止函数

function getSum(num1, num2){
    return num1 ， num2;//只会返回一个值，若逗号隔开返最后一个值
    alert('我不会被执行')//return后面的代码不会被执行
}


//return [num1 + num2,num1 - num2]
//var a = getSum(1, 2);//返回的是数组

如果return后不跟值，或者是不写return则函数默认返回undefined

break、continue和return

break
退出循环
continue
跳过当次循环
return
退出函数

方法（method）

可以将一个函数设置为一个对象的属性，
当一个对象的属性是一个函数时，
我们称这个函数是该对象的方法。

arguments的使用

当我们不确定有多少参数传递的时候，可以使用arguments来获取。

arguments和this类似，都是函数中的隐含的参数（函数内置对象，只有函数有）
arguments是一个类数组元素，它用来封装函数执行过程中的实参

所以即使不定义形参，也可以通过arguments来使用实参

function fn(){
    console.log(arguments);// arguments = [1,2,3]
    //类数组，所以可进行遍历
    for (var i = 0; i < arguments[i]; i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);

函数可以调用另一个函数

function fn1(){
    console.log(111);
    fn2();                 
    console.log('fn1');
}

function fn2(){
    console.log(222);
    console.log('fn2');
}
fn1();//   111 222 fn2 fn1

作用域

JS作用域 : 就是代码名字（变量）在某个范围内起作用的效果

var num = 10;//全局作用域  整个script标签 或者是一个单独的js文件
function fn(){
    //局部作用域  在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用   
}

全局变量：在如何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存。注意：如果在函数内部没有声明直接赋值的额变量也属于全局变量
局部变量：只在函数内部使用，当其所在代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省空间。 注意：函数的形参也可以看做是局部变量

JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {}  if{} for{}

作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

var num = 10;
function fn(){//外部函数      
    var num = 20;
    	function fun(){//内部函数
            console.log(num);
        }
}//一层一层的找函数里的函数可以调用的变量

在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域。

预解析

我们JS引擎运行js分两步：预解析代码执行

预解析：js引擎会把js里面所有的var和function 提升到当前作用域的最前面
代码执行：安装顺序上到下执行

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

变量提升:就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
函数提升:就是把所有的函数声明提升到当前的作用域最前面不调用函数

console.log(num);// undefined 坑1
var num = 10;
 
fun();//报错  坑2   放下面才可以（此时fun变量赋值完）
var fun = function(){
    console.log(22);
}

数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
}


1. 全局变量：在如何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存 。**注意：如果在函数内部  没有声明直接赋值的额变量也属于全局变量**
2. 局部变量 ：  只在函数内部使用，当其所在代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省空间  。 **注意：函数的形参也可以看做是局部变量**

JS现阶段没有块级作用域
js也是在es6的时候新增的块级作用域
块级作用域 {} if{} for{}


##### 作用域链

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

```js
var num = 10;
function fn(){//外部函数      
    var num = 20;
    	function fun(){//内部函数
            console.log(num);
        }
}//一层一层的找函数里的函数可以调用的变量