JavaScript学习笔记

最新推荐文章于 2024-05-30 16:03:48 发布

FM文文静静

最新推荐文章于 2024-05-30 16:03:48 发布

阅读量265

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/FM11101001/article/details/127388566

版权

常用输入输出语句

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

<!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>
        // 这是一个输入框
        prompt('请输入你的年龄');
        // alert 弹出警示框 给用户看
        alert('计算结果是');
        // console 控制台输出 给程序员看的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
</body>
</html>

变量的使用

<!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 name = prompt('请输入你的姓名');
        // 输出
        alert(name);
    </script>
</head>

<body>
</body>

</html>

声明变量的特殊用法

<!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>
        // 1. 只声明变量不赋值
        var sex;
        console.log(sex); // 结果为 undefined
        // 2. 不声明直接用
        console.log(age) // 结果为 报错
        // 3. 不声明直接赋值
        qq = 110111
        console.log(qq) // 结果为 1110111 js中可以使用这种写法 但是不建议使用
    </script>
</head>

<body>
</body>

</html>

JavaScript 是一中弱类型或者说是动态语言,也就是意味着不用提前声明变量的类型,在运行过程中类型或自动确认.

var age = 10; // 这是一个数字型
var areYouOk = "是的"; // 这是一个字符串

JavaScript 拥有动态类型,同时也意味着相同的变量可以有不同的类型

var x = 6; // x为数字
x = "Bill"; // x为字符串

数据类型

1. 简单数据类型: Number, String, Boolean, Undifined, Null

2. 复杂数据类型: object

Number 数字型

可以包含整数和小数

在数字前面加 0 表示八进制

在数字前面加 0x 表示十六进制

<script>
        var num1 = 010;
        console.log(num1); // 结果为8
        var num2 = 0xA; 
        console.log(num2); // 结果为10
</script>

Number最大值最小值

<script>
        console.log(Number.MAX_VALUE); // 数字型最大值 1.7976931348623157e+308
        console.log(Number.MIN_VALUE); // 数字型最小值 5e-324
</script>

数字型的三个特殊值

Infinity , 代表无穷大,大于任何数值
-Infinity , 代表无穷小,小于任何数值
NaN , Not a number , 代表一个非数值

<script>
        console.log(Number.MAX_VALUE * 2); // 结果为 Infinity
        console.log(Number.MIN_VALUE * 2); // 结果为 -Infinity
        console.log('maimai' - 100); // 结果为 NaN
</script>

isNaN()

方法用来判断非数字并且返回一个bool值如果是数字返回 false , 如果不是数字则返回 true.

<script>
        var num = 'maimai';
        console.log(isNaN(num)); // 结果为 true
        var a = 18;
        console.log(isNaN(a)); // 结果为 false
</script>

String 字符串型

js 中推荐使用单引号

字符串嵌套 外单内双,外双内单

转义符

转义符	说明
\n	换行符,n为newline 的意思
\\	斜杠\
\'	'单引号
\"	"双引号
\t	tab 缩进
\b	空格, b为blank的意思

字符串长度

检测字符串长度使用 length 属性可以获取字符串的长度

<script>
        var str = 'My name is maimai';
        console.log(str.length); // 结果为 17
</script>

字符串拼接

多个字符使用 + 进行拼接

字符串类型与其他类型相加,输出后一定是字符串型

字符串可以拼接变量

 <script>
        var age = 18;
        console.log('我的年龄是' + age + '岁'); // 结果为 我的年龄是18岁
</script>

Undefined

undefined 未定义数据类型

<script>
        var variable = undefined;
        console.log(vatiable + 'maimai'); // 结果为 undefinedmaimai
        console.log(variable + 1); // 结果为NaN
</script>

Null

null 空值

<script>
        var space = null;
        console.log(space + 'maimai'); // 结果为 nullmaimai
        console.log(space + 1); // 结果为1
</script>

检测数据类型 typeof

<script>
        var num = 1;
        console.log(typeof num); // 结果为number
        var str = 'maimai';
        console.log(typeof str); // 结果为string
        var flag = true;
        console.log(typeof flag); // 结果为boolean
        var variable = undefined;
        console.log(typeof variable); // 结果为undefined
        var timer = null;
        console.log(typeof timer); // 结果为object
        var age = prompt("请输入你的年龄");
        console.log(typeof age); // 结果为string 也就是说prompt输入的值是字符串型
</script>

数据类型的转换

转化为字符串

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

转换为数字型

方式	说明	案例
parseInt(string) 函数	将string类型转化为整数数值型	parseInt('18') // 结果为18 parseInt('3.74') // 结果为3 取整 parseInt('120px') // 结果为120 会去掉px字符串 parseInt('rem120px') // 结果为NaN
parseFloat(string) 函数	将string类型转化为浮点数值型	parseFloat('1.2343') parseFloat('120px') // 结果为120 会去掉px字符串 parseFloat('rem120px') // 结果为NaN
Number()强制转换	将string类型转化为数值型	Number('12')
js 隐式转化	利用运算符隐式转化为数值型	'12' - 0

转化为布尔型

方法	说明	案例
Boolean()函数	其他类型转化为布尔值	Boolean('true');

代表空, 否定的值会转换为 false ,如 '', 0 , NaN , null , undefined

其余值都会转化为 true

逻辑中断

1. 逻辑与

语法: 表达式1 && 表达式2
如果表达式1的值为真,则返回表达式2
如果表达式1的值为假,则返回表达式1

2. 逻辑或

语法: 表达式1 || 表达式2
如果表达式1的值为真,则返回表达式1
如果表达式1的值为假,则返回表达式2

数组

数组：就是一组数据的集合，存储在单个变量下的方式

<script>
        //利用 new 创建数组
        var arr = new Array(); // 创建了一个空数组
        //利用数组字面量创建数组 []
        var arr = [];
        //可以存任意数据类型,数据必须用逗号隔开
        var arr1 = [1, 2, 3, 'maimai', true];
        //访问数组元素
        console.log(arr1[1]); // 索引 格式为:数组名[索引号]. 如果索引元素不在数组中,返回undefined

        for (var i = 0; i < arr1.length; i++) { // 遍历数组
            console.log(arr1[i]);
        }
        //数组新增元素
        //1. 修改数组长度
        var arr = ['red', 'blue', 'green'];
        arr.length = 4; //通过修改数组长度，数组会追加empty
        console.log(arr[3]); // 结果为 undefined
        //2. 修改索引号追加数组
        var arr1 = ['red', 'blue', 'green'];
        arr1[3] = 'pink'; // 在数组末尾追加元素
        console.log(arr1); // 结果为 ['red', 'blue', 'green', 'pink']
        arr1[arr1.length] = 1 //通过length方法可以快速获取数组长度，在索引时是末尾追加的索引号
</script>

函数

<script>
        // 声明函数
        // function 函数名(形参,形参) {
        //     函数体
        //     return 需要返回的结果;
        // }
        function sayHi() {
            return 'Hi~';
        }
        // 函数调用
        // 函数名(实参,实参)
        console.log(sayHi()); // 结果为 Hi~
        // 1. function 声明函数的关键词 全部小写
        // 2. 函数时做某事,函数名一般为动词 例如:sayHi 用小驼峰命名规则
</script>
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//第二种声明函数的方式__函数表达式声明函数(匿名函数)
var func = function() {
    console.log('Hi~')
}
// 注:func 是变量名不是函数名!

js 中的函数形参个数和实参个数可以不匹配

参数个数	说明
实参个数等于形参个数	输出正确的值
实参个数多于形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

return只能返回一个值,若想返回多个值可以使用数组的形式

<script>
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        console.log(getResult(1, 2)); // 结果为 [3, -1, 2, 0.5]
</script>

arguments 的使用

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

arguments 展示形式是一个伪数组,因此可以进行遍历. 伪数组具有以下特点:

具有 length 属性
按索引方式存储数据
不具有数组的 push, pop 等方法

<script>
        function func() {
            console.log(arguments);
        }
        func(1, 2, 3); // 结果为 [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
</script>

// 遍历 索引
<script>
        function func() {
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        func(1, 2, 3); // 结果为 1 2 3
</script>

JavaScript作用域

JavaScript就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性,更重要的是减少命名冲突

全局作用域

整个script标签或是单独的js文件

局部作用域

在函数内部就是局部作用域

全局变量

在全局作用域下的变量,在全局下都可以使用

局部变量

在局部作用域下的变量,在函数内部的声明的变量就是局部变量,在函数内部直接赋值没有声明的变量属于全局变量.

预解析

1. js引擎执行 js 分为两步: 预解析 -> 代码执行

预解析: js引擎会把 js 里面所有的 var 还有function提升到当前作用域的最前面
代码执行: 按照代码书写顺序从上到下执行

2. 预解析分为变量预解析(变量提升) 和函数预解析(函数提升)

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

对象

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

对象由属性和方法组成.

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

创建对象

1. 利用字面量创建对象

<script>    
        // 创建对象
        // var obj = {}; // 使用字面量创建一个空对象
        var obj =  {
            uname: 'maimai',
            age: 18,
            sex: '女',
            sayHi: function() {
                console.log('Hi~');
            }
        }
        // 1. 里面的属性或者方法我们使用键值对的形式 键 属性名 : 值 属性值
        // 2. 多个属性用逗号隔开
        // 3. 方法冒号跟一个匿名函数
        // 使用对象
        console.log(obj.uname);
        obj.sayHi();
        // 调用对象的属性或方法使用点语法 对象名.属性名或函数名
        console.log(obj['uname']);
        // 调用对象的属性还有一种方法 对象名['属性名']
</script>

2. 利用 new Object() 创建对象

<script>
        var obj = new Object(); // 利用new Object创建一个空对象
        obj.name = 'maimai';
        obj.age = 18;
        obj.sex = '女';
        obj.sayHi = function () {
            console.log('Hi~');
        }
        // 利用等号赋值的方式添加对象的属性和方法
</script>

3. 利用构造函数创建对象

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

<script>
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Student(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.say = function(what) {
                console.log(what);
            }
        }
        var maimai = new Student('maimai', 18, '女'); // 调用函数返回的是一个对象
        var mingming = new Student('mingming', 19, '男');

        console.log(maimai.age); // 结果为 18
        maimai.say('你好'); // 结果为 '你好'
        console.log(mingming['uname']); // 结果为 'mingming'
        // 1.构造函数的函数名首字母要大写
        // 2.调用构造函数要用 new
</script>

new 在执行时会做的四件事

在内存中创建一个空对象.
让 this 指向这个新的对象
执行构造函数里面的代码, 给这个新对象添加属性
返回这个新对象(所以构造函数里不需要return)

遍历对象属性

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

<script>
        // 创建对象
        var obj = {
            name: 'maimai',
            age: 18,
            sex: '女',
            func: function() {}
        }
        // for ... in 遍历对象
        // for (变量 in 对象) {} 
        for (var k in obj) {
            console.log(k); // k 输出 得到的是 属性名
            console.log(obj[k]); // obj[k] 得到的是 属性值
        }
        // 我们使用 for in 里面的变量 我们喜欢 k 或者 key
</script>

文档学习

MDN Web Docs (mozilla.org)

内置对象

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

JavaScript 提供了多个内置对象: Math, Date, Array, String等

Math

Math数学对象,不是一个构造函数,所以不需要 new ,直接使用里面的方法和函数.

属性及方法	描述
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 .5 特殊,它往大的取例如 -1.5 结果为 -1
Math.abs()	绝对值
Math.max()/Math.min()	求最大值或最小值
Math.random()	返回一个随机小数 [0, 1) 无参数

Date

Date是一个构造函数,需要 new

创建Date实例用来处理日期和时间.Date对象基于1970年1月1日(世界标准时间)起的毫秒.

<script>
        // 1.使用Date 如果没有参数,返回当前系统时间
        var date = new Date();
        console.log(date);
        // 2.参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 12:30:15'
        var date1 = new Date(2019, 10, 1);
        console.log(date1); 
        // 返回的是 Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
        // 返回的是11月 不是10月(因为西方月份从0开始算)
        var date2 = new Date('2019-8-8');
        console.log(date2); 
        // 返回的是Thu Aug 08 2019 00:00:00 GMT+0800 (中国标准时间)
</script>

Date 格式化日期年月日星期

方法	描述
getFullYear()	获取当年
getMonth()	获取当月(0-11)
getDate()	获取当天日期
getDay()	获取星期几(周日0 到周六6)
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒种

Date 获取总毫秒数（时间戳）

<script>
        // 1. 通过 valueOf() getTime() 获得总毫秒数(时间戳)
        var date = new Date();
        console.log(date.valueOf()); // 返回值是 1666185993099
        console.log(date.getTime()); // 返回值是 1666185993099
        // 就是 我现在时间 距离1970年1月1日 总的毫秒数
        // 2. 简单写法 (最常用的写法)
        var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
        console.log(date1); // 返回值是 1666185993099
        // 3. H5新增的 获得总毫秒数
        console.log(Date.now()); // 返回值是 1666185993099
</script>

秒和毫秒之间差了1000倍

秒数转换公式如下

d = parseInt(总秒数/60/60/24); // 计算天数

h = parseInt(总秒数/60/60%24); // 计算小时

m = parseInt(总秒数/60%60); // 计算分数

s = parseInt(总秒数%60); // 计算当前秒数

倒计时案例

<script>
        // 倒计时案例
        function countDown(time) {
            var nowTime = +new Date();// 获取当前总的毫秒数
            var inputTime = +new Date(time); // 返回用户输入的时间总毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的毫秒数
            var d = parseInt(times / 60 / 60 / 24); // 返回天数
            var h = parseInt(times / 60 / 60 % 24) // 返回小时
            var m = parseInt(times / 60 % 60) // 返回分钟
            var s = parseInt(times % 60) // 返回秒数
            return '剩余时间:' + d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-1-1')); // 结果为 '剩余时间:72天14时4分23秒'
</script>

Array

利用new Array创建数组

<script>
        // 利用new Array 创建数组
        var arr = new Array(); // 创建了一个空数组
        var arr1 = new Array(2) // 创建了一个长度为2的空数组
        var arr2 = new Array(2, 3) // 等价于var arr2 = [2, 3] 这样写是与两个数组元素 是2和3
</script>

检测是否为数组

<script>
        // 1. instanceof 运算符用于检测构造函数的属性是否出现在某个实例对象的原型链上。
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); // 结果为 true
        console.log(obj instanceof Array); // 结果为 false
        // 2. Array.isArray(参数) H5新增的方法
        console.log(Array.isArray(arr)); // 结果为 true
        console.log(Array.isArray(obj)); // 结果为 false
</script>

添加删除数组元素的方法

方法名	描述	返回值
push(参数1...)	末尾添加一个或多个元素	并返回新的长度
pop()	删除数组最后一个元素,把数组长度减1,无参数	返回被删除的元素值
unshift(参数1...)	向数组的开头添加一个或更多元素	返回新的长度
shift()	删除数组的第一元素,数组长度减1,无参数	返回第一个元素的值

<script>
        // 1. push() 在数组的末尾 添加一个或多个元素
        var arr = [1, 2, 3];
        console.log(arr.push(4 , 5)); // 结果为 5 // push 会返回追加后的数组长度
        console.log(arr); // 结果为[1, 2, 3, 4, 5]
        
        // 2. unshift() 在数组的开头 添加一个或多个元素
        var arr1 = [5, 2, 3];
        console.log(arr1.unshift(4 , 7)); // 结果为 5 // unshift 会返回追加后的数组长度
        console.log(arr1); // 结果为[4, 7, 5, 2, 3]

        // 3. pop() 删除数组最后一个元素
        var arr2 = [6, 7, 8];
        console.log(arr2.pop()); // 结果为 8 // pop 会返回删除的元素
        console.log(arr2); // 结果为[6, 7] 

        // 4. shift() 删除数组开头一个元素
        var arr3 = [7, 6, 5];
        console.log(arr3.shift()); // 结果为 7 // shift 会返回删除的元素
        console.log(arr3); // 结果为[6, 5]
</script>

数组排序

方法名	描述
reverse()	颠倒数组中元素的顺序,无参数
sort()	对数组的元素进行排序

<script>
        var arr = [14, 1, 77, 4, 23];
        arr.sort(function (a, b) {
            return a - b; // 升序 a-b 降序 b-a
        })
        console.log(arr);
</script>

数组元素索引

方法名	描述	返回值
indexOf()	数组中查找给定元素从第一个开始索引	如果存在返回索引号,不存在返回-1
lastIndexOf()	数组中查找给定元素从最后一个开始索引	如果存在返回索引号,不存在返回-1

indexOf(指定元素,索引号) 从索引号开始找指定元素

数组转化为字符串

方法名	描述	返回值
toString()	把数组转化为字符串,逗号分隔每一项	返回一个字符串
join('分隔符')	把数组中的所有元素转化为一个字符串,中间用'分隔符'相连,默认是逗号	返回一个字符串

数组连接与分割

方法名	描述	返回值
concat()	连接两个或多个数组	返回一个新的数组
slice()	数组截取slice(begin, end)	返回被截项目的新数组
splice(开始索引数,删除数,添加)	数组删除splice(第几个开始, 删除几个)如果删除数为0则为添加,如果删除数为1则为修改.	返回被删除项目的新数组

String

根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.charAt(0)
charCodeAt(index)	返回指定位置的字符的ASCII码(index 字符串的索引号)	str.charCodeAt(0)
str[index]	获取指定位置处的字符	H5才有,用法和charAt()等效

示例: 统计重复的字符个数并求个出现次数最大的字符

<script>
        var str = 'asdzxsadzxsxsazd';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            chars = str.charAt(i);
            if (o[chars]) {
                o[chars] += 1;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o); //结果为 {a: 3, s: 4, d: 3, z: 3, x: 3}
        var max = -Infinity;
        var ch;
        for (var k in o) {
            if (o[k] > max) {
                max = o[k];
                ch = k
            }
        }
        console.log('出现最多的字符是' + ch + ' 出现次数为:' + max + '次');
        // 结果为 出现最多的字符是s 出现次数为:4次
</script>

字符串操作方法

方法名	描述
concat(str1, str2, str3...)	concat()方法用于连接两个或多个字符串.拼接字符串,等效于+
substr(start, length)	从start位置开始(索引号),length 取的个数
slice(start, end)	从start位置开始,截取到end位置,end取不到(他们都是索引号)
substring(start, end)	从start位置开始,截取到end位置,end取不到,基本和slice相同,但不接受负值

<script>
        var str = '改革春风吹满地';
        console.log(str.concat(',中国人民真争气')); //结果为 改革春风吹满地,中国人民真争气
        console.log(str.substr(2,3)); // 结果为 春风吹 2是从索引号2开始, 3是取3个字符
        console.log(str.slice(2,3)); // 结果为 春 2是从索引号2开始,3是到索引号3结束
        console.log(str.substring(2,3)); // 结果为 春 2是从索引号2开始,3是到索引号3结束
</script>