JS笔记整理

这篇博客详细整理了JavaScript的基础知识,包括输入输出、变量、简单数据类型(Number、String、Boolean、undefined、Null、Symbol)、类型转换、逻辑运算和优先级、数组、冒泡排序、函数、作用域以及对象创建。此外,还介绍了内置对象Math、Date和Array的方法,DOM操作如获取元素和事件处理。
摘要由CSDN通过智能技术生成

一. JS输入输出语句

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

二. 变量

声明变量

var age;

三. 简单数据类型

1. 数字型 Number

alert(Infinity); //代表无情大,大于任何数值
alert(-Infinity); //代表无穷小,小于任何数值
alert(NaN);  //Not a Number 代表一个非数值

isNaN()

用来判断一个变量是否为非数字的类型,但会true或者false。

数字返回false;
不是数字返回true;

2 字符串型 String

转义符 解释说明
\n 换行符
\ 斜杠 \
单引号
" 双引号
\t tab缩进
\b 空格

字符串的长度 length

通过字符串length属性可以获取整个字符串的长度。

var ayy = 'yes I will!';
var count;
count = ayy.length;

字符串拼接

拼接方式为:字符串 + 任何类型 = 拼接之后新的字符串

3. 布尔型 Boolean

布尔型优两个值: ture和false,其中ture表示真,false表示假。

4. undefined

5. Null

6. sympol

转换为字符串

方式 说明 案例
toString() 转成字符串 var num=1; alert(num.toShtring());
String() 转成字符串 var num=1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num=1;alert(num+“字符串”);

转换为数字型

方式 说明 案例
parseInt(string)函数 将string类型转换为整数数值型 parseInt(‘78’)
parseFloat(string) 将string类型转换为浮点数数值型 parseFloat(‘3.14’)
Number()强制转换函数 将string类型转换为数值型 Number(‘12’)
js隐式转换(- * /) 利用算数运算隐式转换为数值型 ‘12’ - 0

等于和全等的区别

== 会把字符串类型的数据转换为数字型,值要求值相等

全等=== 要求等式两边的数据类型也相等

逻辑中断

逻辑与短路运算 如果表达式1为真,则返回表达式2 ; 如果表达式1为假,则返回表达式1;

逻辑非短路运算 如果表达式1结果为真 则返回表达式1; 如果表达式1为假则返回表达式2

优先级

在这里插入图片描述

数组

1. 利用new创建数组
var 数组名 = new Array();
2. 利用数组字面量创建数组
var arr = [];

冒泡排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr = [4, 5, 6, 2, 4, 5]
        var newLen = [];
        for (var i = 0; i < arr.length - 1; i++) {
   //外层循环的次数
            for (var j = 0; j < arr.length - i - 1; j++) {
   
                if (arr[j] > arr[j + 1]) {
   
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);





    </script>
</head>

<body>

</body>

</html>

return

function fn(num1,num2){
   
	return num1,num2; //只返回num2;
	}

//当有多个值需要返回时,可以用数组形式返回

function fo(num1,num2){
   
	return [num1*num2,num1+num2];
	}

函数如果有return,则返回的是return后面的值,如果函数没有return,则返回undefined

arguments的使用

当我们不确定有多少个参数传递的时候,可以用arguments来获取,在JavaScript中,arguments实际上它是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中储存了传递的所有实参。

arguments里面存储了所有的实参

arguments 是伪数组,并不是正真意义上的数组

  • 具有数组的length属性
  • 按照索引的方式进行存储
  • 它没有正真数组的一些方法 pop() push()等

函数中的两种声明方式

  1. 利用函数关键字自定义函数
  2. 函数表达式(匿名函数)
var fun = fn(){
   
	consloe.log('1');
}

1. fun是变量名 不是函数名
2. 函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而 函数表达式里面存的是函数

作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

在函数中没有声明的变量属于全局变量
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

  • 全局变量在代码的任何位置都可以使用
  • 在全局作用域下var声明的变量是全局变量
  • 特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)

  • 局部变呈只能在该函数内部使用
  • 在函数内部var声明的变量是局部变量函数的形参实际上就是局部变量
  1. js引擎运行js 分为两步:预解析 代码执行
    (1).预解析js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面
    (2).代码执行按照代码书写的顺序从上往下执行
    2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)
    变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

二. JS对象

1. 对象

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

对象是由属性和方法组成的

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)

2. 创建对象的三种方式

2.1 利用字面量创建对象

var obj = {
   
	username: 'www',
	age: 18,
	sex: '女',
	sayHi: function() {
   
		console.log('hi');
	};
1. 调用对象的属性 对象名.属性名
console.log(obj.age);
2. 调用对象的属性 对象名['属性名']
console.log(obj['age']);
3. 调用对象方法 对象名.方法名() 千万别忘记小括号
obj.sayHi();
}
  1. 多个属性或者方法中间用逗号隔开的
  2. 方法冒号后面跟的是一个匿名函数
    对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。{}里面采取键值对的形式表示
  • 键:相当于属性名
  • 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)
  • 多个属性或者方法中间用逗号隔开的
  • 方法冒号后面跟的是一个匿名函数

2.2 利用 new Object创建对象

var obj = new Object();
	obj.username = 'www';
	boj.age =  18;
	obj.sex = '女';
	boj.sayHi = function() {
   
		console.log('hi');
	}

2.3 利用构造函数创建对象

/* function 构造函数名() {
   
	this.属性 =;
	this.方法 = function() {
   }
}

new 构造函数名(); */

function Star(name,age,sex){
   
	this.username = name;
	this.age = age ; 
	this.sex = sex;
	this.sing = function(song){
   
		console.log(song);
	}
}

var xx = new Star('小熊',18,'男');
xx.sing('what');

构造函数首字母需要大学
构造函数不需要return就可以返回结果

2.4 遍历对象 for( 变量 in 对象);

var a = new Object();
a.name = '小熊';
a.age = 18;

for(var k in a){
   
	console.log(k); //输出的是属性名
	console.log(a[k]);//输出的是属性值
}

三、内置对象

在JS中的对象分为三种:自定义对象、内置对象、浏览器对象。

内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)

JS提供了多个内置对象:Math 、Date、Array、String等。

1.Math

1.1 Math概述

Math数学对象不是一个构造函数,所以我们不需要new来调用,二十直接使用里面的属性和方法即可

在这里插入图片描述

    <script>
        console.log(Math.log(10));
        console.log(Math.abs(-10));

    </script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //封装一个数学函数,求用户输入的最大值和最小值
        var myMath = {
   
            PI: Math.PI,
            max: function () {
   
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
   
                    if (max < arguments[i]) {
   
                        max = arguments[i];
                    }
                }
                return max;
            }
  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值