JavaScript基础-笔记

JavaScript基础

输出输入语句

alert('输出内容');//弹出警示框
console.log('输出内容');//控制台打印
console.dir(对象);//控制台打印，用于打印对象
var 变量 = prompt('输出内容');//弹出提示框

Undefined

未定义的，没有赋值的变量则为undefined。

类型查询

查询变量的数据类型。

语法：

typeof  变量名

JavaScaript函数

函数的概念：就是封装一段可被重复被调用执行的代码块。

函数的目地：就是让大量代码重复使用。

函数的使用

函数的使用分为两个部分：申明函数和调用函数。

一、函数的申明

function 函数名(参数1,参数2,参数3...){
    方法体;
    return 返回值;
}

二、调用函数

函数名(参数1,参数2,参数3...);

名词分析

参数分为形参和实参，形参是我们在定义函数时，传递的参数。也可以认为是一种特殊的占位符。实参就是我们调用函数时千真万确传递的参数。

参数的作用：对函数内部不确定的值，进行赋值。降低代码冗余。

function、return关键字，分别是申明函数和用于停止函数（或返回值）。

return关键字只能返回一个值，如果有多个值不妨使用数组返回。

arguments关键字

arguments关键字用于确定当前函数传递参数个数以及参数值的伪数组。它具备数组length属性，也是根据索引存储参数值。（它并没有数组的一些方法）

作用域

作用域的概念：一段代码中的变量可用的范围。

作用域的目的：目的是提高程序的可靠性，降低命名冲突。

作用域的分类：全局作用域和局部作用域。

全局作用域：整个Script标签内、或者是整个单独的js文件。

局部作用域：在函数内部的就是局部作用域，这个代码的名字只在函数的内部起效果（也称函数的作用域）。

变量根据作用域分类：

全局变量：在全局作用域下的变量。

局部变量：在局部作用域下的变量。

注意事项

1. 函数的形参也算是局部变量。
2. 内部函数可以访问外部函数的变量，采取的是链式查找。这种结构称为作用域链。（就近原则）

new关键字

在JavaScript中，将右侧创建的函数返回（赋值）给左侧的函数名。

for in循环

作用：遍历数组后对象。

语法格式：

for (变量名 in 对象) {
    
    console.log(变量名);//输出的是属性名
    console.log(对象【变量名】);//输出的属性值
    
}

内置对象

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

前两者对象是js的基础内容，属于ECMAScript；第三个浏览器对象属于js独有的。

内置对象就是JavaScript自带的对象，这些对象为开发者使用，提供一些基础的方法。内置对象大大提高了我们的开发效率。

Math对象

概述：Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math常用方法

Math.PI;获取π的值

Math.max();求最大值。返回值：传参的最大值，如果有无法转换成数字的元素。那么就返回NaN

Math.min();求最小值。返回值：传参的最小值，如果有无法转换成数字的元素。那么就返回NaN

Math.floor();向下取整。如果有无法转 换成数字的元素，那么就返回NaN。

Math.ceil();向上取整。如果有无法转换成数字的元素，那么就返回NaN。

Math.round();四舍五入，注意-3.5的四舍五入的值为-3。如果有无法转换成数字的元素，那么就返回NaN。

Math.abs();绝对值。如果有无法转换成数字的元素，那么就返回NaN。

Math.random();获取随机数，获取**[0-1)**的一个浮点数【包含0，不包含1】，是伪随机的。

//获取两个数之间的随机整数（包含开头和结尾）        
	function getRandom(min, max) {
        
            return Math.floor(Math.random() * (max - min)) + min;
        
        }

案例：猜数字游戏

//获取随机范围整数函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        //获取随机数字
        var number = getRandom(1, 100);
        alert('你好，欢迎游玩猜数字游戏。\n游戏规则：\n系统自动生成1-100的整数，在网页输入框输入你的数字。');
        //循环
        while (true) {
            var intNumber = prompt('请输入整数：');
            if (intNumber > number) {
                alert('猜错了，大了。');
            } else if (intNumber < number) {
                alert('猜错了，小了。');
            } else {
                alert('恭喜猜对了！');
                break;
            }
        }

Date日期对象

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。

构造方法

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

简介

• 如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Date对象。
• 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
• JavaScript的时间由世界标准时间（UTC）1970年1月1日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
• Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。
• Date 对象支持多个处理 UTC 时间的方法，也相应地提供了应对当地时间的方法。UTC，也就是我们所说的格林威治时间，指的是time中的世界时间标准。而当地时间则是指执行JavaScript的客户端电脑所设置的时间。
• 以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。

简单的使用

        var date = new Date();//实例化，不传参就是计算器当前时间
        console.log(date);
        var date2 = new Date(2020, 9, 29); //9月 并不是中国的九月，是外国的十月
        console.log(date2);
        var date3 = new Date('2020-10-1 8:00:00');//使用字符串实例化Date对象 -最常用
        console.log(date3);

常用方法

getFullYear();方法根据本地时间返回指定日期的年份。

getMonth();根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。

getDate();获取当前计算机日期。

getHours();获取当前的小时，24小时制。

getMinutes();获取当前的分钟。

getSeconds();获取当前的秒钟

代码演示

//创建获取格式为 hh：mm：ss
function getTimes(connect) {
    var date = new Date(); //创建Date时间时期对象
    var hours = date.getHours(); //获取当前的小时
    var minutes = date.getMinutes(); //获取当前的分钟
    var seconds = date.getSeconds(); //获取当前的秒钟
    var connect = connect; //创建连接符，并赋值
    //当时分秒小于10时，在前面补充一个0
    hours = supplement(hours);
    minutes = supplement(minutes);
    seconds = supplement(seconds);
    return hours + connect + minutes + connect + seconds; //函数返回值（使用字符拼接）
}
//创建补0的函数
function supplement(number) {
    number = number < 10 ? "0" + number : number;
    return number;
}
console.log(getTimes(":")); //打印结果

时间戳

获取当前时间总的毫秒数【1970年1月1日至今】也称为时间戳。

getTime();获取当前总得毫秒数。

getValueOf();获取当前总得毫秒数。

+new Date();获取当前总得毫秒数。

Date.now();获取当前总得毫秒数。

代码演示

var date = new Date(); //创建Date时间时期对象
console.log(date.valueOf()); //获取时间戳，并打印
console.log(date.getTime()); //获取时间戳，并打印
var dateTwo = +new Date(); //简化版，获取时间戳
console.log(dateTwo); //打印时间戳
console.log(Date.now()); //H5新增方法获取时间戳，并打印

案例：倒计时

function conutDown(time) {
    //第一步：获取当前时间 和 用户输入的时间 之间的差（秒）
    var seconds = +new Date();
    var inputSeconds = +new Date(time);
    var time = (inputSeconds - seconds) / 1000; //计算当前时间距离用户输入时间的好秒差
    //第二步：转换时间
    var d = parseInt(time / 60 / 60 / 24); //计算天数
    var h = parseInt(time / 60 / 60 % 24); //计算小时
    var m = parseInt(time / 60 % 60); //计算分数
    var s = parseInt(time % 60); //计算秒数
    d = supplement(d);
    h = supplement(h);
    m = supplement(m);
    s = supplement(s);
return d + "天" + h + "时" + m + "分" + s + "秒";
}
    //创建补0的函数
    function supplement(number) {
    number = number < 10 ? "0" + number : number;
    return number;
}
console.log(conutDown("2020-10-6 00:00:00"));

数组对象

概念

存储多个数据或对象的容器，在JavaScript中数组可以同时存储不同内容的数据或对象。

创建数组

一、通过字面量创建数组

数据类型 数组名 = [元素1,元素2,元素3...];

二、利用new关键字创建数组

数据类型 数组名 = new Array();

添加元素

根据索引添加元素

数组名[索引]  = 元素值;
注意事项：
1.当索引不存在时，数组自动扩充容量存储元素值。
根据这一特点添加元素可以简化为：
数组名[数组名.length] = 元素值;

检查是否为数组

一、instanceOf 运算符

boolean 变量名 = 测试对象 instanceOf Array;

二、Array对象的isArray函数

boolean 变量名 = Array.isArray(检测对象);

注意事项

1. isArray函数会优先余instanceOf，isArray是H5新增的特性。

添加删除数组元素

push(参数列表);在数组的尾部添加元素。返回值为新数组的长度。

unshift(参数列表);在数组的头部添加元素。返回值为新数组的长度。

pop();删除数组最后一个元素，返回值为被删除的元素。

shift();删除数组第一个元素，返回值为被删除的元素。

代码演示：增删元素

//创建数组
var arr = new Array();
//添加元素
//单个添加
arr.push(1); //在数组的尾部添加元素，返回值为数组长度。
arr.unshift(0); //在数组的头部添加元素，返回值为数组长度。
//多个添加
arr.push(2, 3, 4); //在数组的尾部添加元素，返回值为数组长度。
arr.unshift(-2, -1); //在数组的头部添加元素，返回值为数组长度。
//删除元素
var pop = arr.pop(); //删除数组最后一个元素，返回值为被删除的元素。
var shift = arr.shift(); //删除数组第一个元素，返回值为被删除的元素。

案例：筛选数组

var arr = [10, 20, 5, 0, 34, 456, 1233]; //创建数组
var newArr = new Array(); //创建筛选之后存储数据的数组
for (var i = 0; i < arr.length; i++) { //遍历数组
	if (arr[i] > 10) { //判断当前的元素值是否大于10
	newArr.push(arr[i]); //将元素值添加至筛选存储数据数组
	}
}
console.log(newArr); //打印结果

reverse();反转数组。

sort();数组排序。

代码演示：数组排序

//1.反转数组
var arr = [1, 5, 10];
arr.reverse();
console.log(arr);
//2.冒泡排序
var arr1 = [1, 15, 45, 12, 31, 31, 3];
arr1.sort(function(a, b) {
	//return a - b;//升序排序
	return b - a;//降序排序
});
console.log(arr1);

indexOf();查询数组中给定元素的第一个索引，索引（元素）不存在，返回-1。

lastIndexOf();查询给定元素在数组中最后一个索引，索引（元素）不存在，返回-1。

代码演示：获取数组元素索引

var arr = ['red', 'green', 'blue', 'pink'];
console.log(arr.indexOf('blue')); //查询给定元素在数组的第一个索引
console.log(arr.lastIndexOf('blue')); //查询给定元素在数组的最后个索引

toString();将数组转换为字符串，逗号分隔每一项。

join(分隔符);方法用于把数组中的所有元素转换成为一个字符串。

代码演示：数组转换成字符串

var arr = [1, 2, 3]; //创建数组
console.log(arr.toString()); //打印，数组toString转换成字符串
console.log(arr.join('-')); //打印，数组join('分隔符')转换成字符串

concat(数组);拼接数组。

slice(开始索引,截取个数);截取数组中的元素，返回存储截取元素的新数组。

splice(开始索引,删除个数);删除数组中的元素，返回存储删除元素的新数组。

代码演示:数组的拼接、截取和删除

var arr = ['red', 'green', 'blue', 'pink'];//创建演示数组
var arr2 = ['blank'];//创建演示数组
var arr3 = arr.concat(arr2);//拼接数组
console.log(arr3);//打印，观察
var arr4 = arr.slice(0, 2);//截取数组元素
console.log(arr4);//打印，观察
var arr5 = arr.splice(3, 1);//删除数组元素
console.log(arr5);//打印，观察
console.log(arr);//打印，观察

字符串对象

基本包装类型

将简单数据类型包装（转换）成复杂的数组类型，这样就有了对象属性和函数可供调用。

字符串不可变

在我们改变字符串的值时，其实在内存中新开辟了一个空间。但是原来存储在内存的字符串仍然在。

注意事项

字符串的方法都是不改变原先的字符串，而是返回一个新的字符串。

常用方法

indexOf(‘要查询的字符’，查询起始位置索引);查询字符串中给定字符的第一个索引，不存在，返回-1。

lastIndexOf(‘要查询的字符’);查询给定字符在字符串中最后一个索引，不存在，返回-1。

charAt(索引);根据索引查询字符串中对应的字符，并返回。

charCodeAt(索引);获取指定位置处字符的ASCII码

String[索引]：根据索引查询字符串中对应的字符，并返回。

concat(字符串对象);拼接字符串。

replace(被替换字符，替换字符);将字符在字符串中第一次出现替换成指定字符。

split(分隔符);按指定分隔符分隔，将字符串转换成数组。

substr(起始位置,截取字符个数);截取字符串。

代码演示：字符替换和转换

var str = 'andy'
console.log(str.replace('a', 'b')); //替换字符，出现多次，只替换第一个
var str2 = 'andyandy'
while (str2.indexOf('a') !== -1) {
	str2 = str2.replace('a', '*');
}
console.log(str2);
var str3 = '1,2,3,4,5,6,7';
console.log(str3.split(',')); //将字符串转换成数组

toUpperCase();转换成大写

toLowerCase();转换成小写

简单类型和复杂类型

简单类型又叫做基本类型，复杂类型也叫引用类型。

值类型（简单类型）：在存储是存储的是值本身，因此叫做值类型。

引用类型（复杂类型）：在存储是变量中存储的仅仅是地址值，因此叫做引用类型。通过new关键字创建的对象（系统对象、自定义对象）。

栈和堆

栈：有操作系统自动分配释放函数的参数，局部变量的值等，其他操作方式于数据结构中的栈相似。简单数据类型存放在栈中。

堆：一般由程序员分配释放，若是程序员不释放，则有垃圾回收机制回收，复杂数据类型存放在堆中。

注意：JavaScript是没有栈和堆的概念，通过栈和堆的方式，可以进一步了解一些代码的运行机制。便于学习其他编程语言。

简单数据类型的传参：值传递

复杂数据类型的传参：引用传递