JS基础篇

1.1 初识JavaScript

三种写法

1、行内式

2、内嵌式

3、外联式

<script src=""></script>

1.2 JS注释

1、单行注释//

2、多行注释/**/

1.3 JS输入输出语句

1、输入输出语句

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

2、变量

（1）声明变量：var age；

（2）更新变量：多次赋值以最后一次为准

3、数据类型

（1）简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如“张三”，在js中，字符串都带引号	“”
Undefined	var a;声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null;声明了变量a为空值	null

①数字型

• 最大值：Number.MAX_VALUE

• 最小值：Number.MIN_VALUE

• 无穷大：Infinity

• 无穷小：-Infinity

• 非数值：NaN

isNaN（）：判断是否为数字，若是则为false

②字符串型：可以是单引号，也可以是双引号，推荐是单引号。

转义字符：用“\”

字符串长度：str.length

字符串的拼接：用“+”

（2）获取数据类型：typeof num

（3）数据类型的转换

• 转换为字符串

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

• 转换成数字型

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt('78')
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat('78.21')
Number()强制转换函数	将string类型转成数值型	Number('12')
js隐式转换（-*/）	利用算术运算隐式转换成数值型	'12'-0

• 转换成布尔型

使用Boolean（）函数，代表空和否定的转化为false，其余为true

1.4 js运算符

（1）比较运算符中有：===全等 !==不全等

全等要求数据类型也要相等，判断相等是会转换数据类型

（2）运算符的优先级：

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++、--、！
3	算术运算符	先*/%后+-
4	关系运算符	<=、>=、<、>
5	相等运算符	==、!=、===、!==
6	逻辑运算符	先&&后||
7	赋值运算符	=
8	逗号运算符	,

1.5 流程控制分支结构

1、if（多分支语句：if-else if）

if(条件表达式){
//为真继续进行，为假不执行
}

2、三元表达式（？：）

条件表达式 ？表达式1 ：表达式2（若条件表达是为真是表达式1，假是表达式2）

3、switch

switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    case value3:
        执行语句3;
        break;
    default:
        执行最后的语句;
}

4、switch语句和if else if语句区别

• 一般情况下，他们两个语句可以相互替换

• switch语句通常处理case为比较确定值的情况，而if语句更加灵活，常用于范围判断

• switch语句进行判断后直接执行到程序的条件语句，效率更高，if语句需要逐条判断

• 分支较少，使用if执行效率高

• 分支较多，使用switch执行效率高

1.6 循环

1、for循环

2、while循环

3、do...while循环

1.7 数组

1、数组的创建

（1）用new创建数组

var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组
var arr = new Array(2);//数组长度为2
var arr = new Array(2,3);//数组的数为2,3

（2）利用数组字面量创建数组

//使用数组字面量方式创建空数组
var 数组名 = [];
//使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑',1,true];

2、数组的索引

数组名[数组下标]

3、数组新增元素

（1）修改数字长度：arr.length

（2）修改数组索引新增数组元素：arr[3]='pink';

1.8 函数

1、声明函数：

function 函数名() {
    //函数体
    //函数名为动词
}
​
function 函数名(形参1，形参2) {
    //函数体
    //函数名为动词
}

函数表达式（匿名函数）
var 变量名 = function(){};

2、调用函数：

函数名();
函数名(实参1，实参2);

变量名();

3、形参与实参个数不匹配

• 如果实参的个数和形参的个数一致，则正常输出结果

• 如果实参的个数多于形参的个数，则，会取到形参个数

• 如果实参的个数少于形参的个数，则，结果是NaN

4、函数的返回值

在函数体中调用return语句，在后期调用函数的时候使用alert等语句。

return语句：return 返回的结果;

return返回数组：return [结果1，结果2];

5、arguments的使用

arguments存储了传递的所有实参，是一个伪数组（只有函数有arguments）

function fn(){
   console.log(arguments);
}
fn(1,2,3);

伪数组：

• 具有数组的length属性

• 按照索引的方式进行存储

• 没有数组的一些方法：pop()、push()等

1.9 JS作用域和预解析

1、JS作用域：代码名字在某个范围内起作用和效果

目的：提高程序的可靠性，减少命名冲突

2、全局变量：在全局作用下的变量，在全局下都可以使用

局部变量：在函数内部的变量

注：在函数内部，没有声明直接赋值的变量也属于全局变量

3、预解析

（1）js引擎运行js分两步：预解析和代码执行

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

• 变量提升：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作

• 函数提升：把所有的函数声明提升到当前作用域的最前面。不调用函数

1.10 JS对象

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

• 属性：事物的特征，在对象中用属性来表示（常用名词）

• 方法：事物的行为，在对象中用方法来表示（常用动词）

2、创建对象

• 利用字面量创建对象（{}）

var obj = {
    uname: '张三丰',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('hi~');
    }
}
​
console.log(obj.uname);//对象名.属性名
console.log(obj['age']);//对象名['属性名']
obj.sayHi();//对象名.方法名

• 利用new Object创建对象

var obj =new Object();//创建了一个空对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
    console.log('hi~');
};
​
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

• 利用构造函数创建对象

/*function 构造函数名() {//函数名首字母大写
    this.属性 = 值;
    this.方法 = function() {}
}
new 构造函数名();*/
​
function Star(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}
var ldh = new Star('刘德华',18,'男');
console.log(ldh.uname);
console.log(ldh['age']);

new关键字执行过程

• new构造函数可以在内存中创建一个空对象

• this指向创建的空对象

• 执行构造函数的代码，给空对象添加属性和方法

• 返回这个对象

3、遍历对象

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

//for(变量 in 对象){}
​
var obj = {
    uname: '张三丰',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('hi~');
    }
}
for(var k in obj) {
    console.log(k);//得到属性名
    console.log(obj[k]);//得到属性值
}

1.11 内置对象

1、JS中的对象：自定义对象、内置对象、浏览器对象

自定义对象：JS语言自带的对象

2、使用MDN、W3C

3、Math对象

Math.PI            //圆周率
Math.floor()       //向下取整
Math.ceil()        //向上取整
Math.round()       //四舍五入
Math.abs()         //绝对值
Math.max()         //最大值
Math.min()         //最小值
Math.random()      //随机数，[0,1)
​
//得到两数之间的随机数
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}
//得到两数之间随机整数
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
//得到两数之间随机整数（包含两数）
function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}

4、日期对象

（1）Date()是一个构造函数，用new来创建日期对象

new Date();     //返回当前时间
new Date(value);
new Date(dateString);
//标准格式：2022-3-4 13:00:00

方法名	说明
getFullYear()	获取当年
getMonth()	获取当月（0-11）
getFDate()	获取当天日期
getDay()	获取星期几（周日0-周六6）
getHours()	获取当前小时
getMinutes()	获取当前分钟
getSeconds()	获取当前秒钟

（2）Date总的毫秒数（时间戳）：距离1970年1月1日的时间

//valueOf()方法和getTime()方法
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
​
//简单写法（最常用的写法）
var date1 = +new Date(); //+new Date()返回总的毫秒数
console.log(date1);
​
//H5新增的方法
console.log(Date.now());

//倒计时的案例
​
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);
    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 +'秒';
}
​
console.log(countDown('2022-3-4 13:00:00'));

5、数组对象

（1）检测是否为数组

• instanceof运算符

• Array.isArray()

var arr = [];
var obj = {};
//方法一
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false
console.log(obj instanceof Object);//true
​
//方法二
console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj));//false

（2）添加删除数组元素的方法

方法名	说明	返回值
push(参数1...)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1 无参数、修改原数	返回它删除的元素的值
unshift(参数1...)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1 无参数、修改数组	并返回一个元素的值

//push()在数组末尾添加一个或多个数组元素
//方法1
var arr = [1,2,3];
arr.push(4,'pink');
console.log(arr);//[1, 2, 3, 4, 'pink']
//方法2
var arr = [1,2,3];
console.log(arr.push(4,'pink'));//5
console.log(arr);//[1, 2, 3, 4, 'pink']
​
//unshift在数组开头添加一个或多个数组元素
//方法1
arr.unshift('red','black');
console.log(arr);//['red', 'black', 1, 2, 3, 4, 'pink']
//方法2
console.log(arr.unshift('red','black'));//7
console.log(arr);//['red', 'black', 1, 2, 3, 4, 'pink']
​
//pop() 可以删除数组的最后一个元素
//方法1
arr.pop();
console.log(arr);// ['red', 'black', 1, 2, 3, 4]
//方法2
console.log(arr.pop());//pink
console.log(arr);// ['red', 'black', 1, 2, 3, 4]
​
//shift在数组开头删除一个元素
//方法1
arr.shift();
console.log(arr);// ['black', 1, 2, 3, 4]
//方法2
console.log(arr.shift());//red
console.log(arr);// ['black', 1, 2, 3, 4]

（3）数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组 返回新数组
sort()	对数组元素进行排序	该方法会改变原来的数组 返回新数组

//reverse()
var arr = ['red','pink','blue'];
console.log(arr.reverse());
​
//sort()
//sort对一位数可以，有双数不行
var arr1 = [3,4,7,1,5,6];//一位数字可以
arr1.sort();
console.log(arr1);
//正确实现方式
var arr1 = [3,14,77,61,5,6];//一位数字可以
arr1.sort(function(a,b) {
    return a - b;//升序
    return b - a;//降序
});
console.log(arr1);

（4）数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号 如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个索引	如果存在返回索引号 如果不存在，则返回-1

var arr = ['red','pink','blue'];
console.log(arr.indexOf('blue'));//2，只返回第一个索引号
console.log(arr.lastIndexOf('blue'));//3,最后一个

//数组去重案例
function unique(arr) {
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        if(newArr.indexOf(arr[i])===-1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c','a','z','a','x','a','x','c','b']);
console.log(demo);

（5）数组转化为字符串

方法名	说明	返回值
toString()	把数组转换为字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	方法用于把数组中所有元素转换为一个字符串	返回一个字符串

var arr = [1,2,3];
console.log(arr.toString());//1,2,3
console.log(arr.join('-'));//1-2-3

6、字符串对象

（1）JS提供三种引用类型（基本包装类型）：String、Number、Boolean

（2）字符串的不可变（认为变了其实是新开了一个地址）

（3）根据字符返回位置

方法名	说明
indexOf('要查找的字符',开始的位置)	返回指定内容在字符串中的位置，如果找不到就返回-1，开始位置是index索引号
lastIndexOf()	从后往前找，只找第一个

（4）根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符（index 字符串的索引号）	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码（index索引号）	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML5、IE8+支持和charAt()等效

（5）判断是否有该属性：对象['属性名']

（6）字符串操作方法

方法名	说明
concat(str1,str2...)	concat()方法用于连接两个或多个字符串，拼接字符串
substr(start,length)	从start开始（索引号），length取得个数
slice(start,end)	从start开始，截取到end位置，end取不到（都是索引号）
substring(start,end)	从start开始，截取到end位置，end取不到（都是索引号），不接受负值

替换字符:replace('被替换的字符','替换为的字符')

字符转换为数组：split('分隔符')