3、JavaScript基础

诡道炮

已于 2022-06-15 12:52:20 修改

阅读量126

点赞数

文章标签： javascript 前端 css

于 2022-06-15 12:52:12 首次发布

本文链接：https://blog.csdn.net/qq_47538417/article/details/125295048

版权

1、输入输出语句

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

2、变量

本质：变量是程序中内存申请的一块用来存放数据的空间

声明变量

var是一个js关键字，用来声明变量（variable）。使用该关键字声明变量后，计算机会自动为变量分配内存空间

var 变量名;

赋值

= 用来八右边的值赋给左边的变量空间中，这里是赋值的意思

变量名 = xxx;

变量的初始化

声明一个变量的同时并维塔赋值，是变量的初始化

var 变量名 = xxx;

同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间用英文的逗号隔开

var age = 10,name = '肖战';

变量命名规范

由字母、数字、下划线（_）、美元符号（$）组成

严格区分大小写

不能以数字开头

不能是关键字、保留字

变量名必须有意义

遵守驼峰命名发，首字母小写，后面单词的首字母需要大写

3、数据类型

js的变量数据类型只有在程序运行过程中，根据等号右边的值来确定的。javascript是一种弱类型或者动态语言，也就是说变量的数据类型是可以变化的

1、简单数据类型

1、数字型

八进制数字范围为：0-7，在数字前面加上0表示八进制

十六进制数字范围：0-9、A-F，在数字前面加上0x表示十六进制

数值中的最大值和最小值

Number.MAX.VALUE:1.7976931348623157e+308

Number.MIN.VALUE:5e-324

三个特殊值

Infinity，代表无穷大，大于任何数值

Infinity，代表无穷小，小于任何数值

NaN，Not a number，代表一个非数值

注：可以通过 isNaN()来判断一个变量是否为非数字类型，是数字返回false，不是数字返回ture

2、字符串型String

字符串引号嵌套

js可以用单引号嵌套双引号，或者用双引号嵌套单引号（外单内双，外双内单）

字符串转义符

`\n`	换行符，n是newline的意思
`\\`	斜杆\
`\'`	单引号
`\"`	双引号
`\t`	tab缩进
`\b`	空格，b是blank的意思

字符串长度

字符串是由若干字符组成，这些字符是数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度

var str='我是一个程序员';
alert(str.length);

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接的方式为字符串 + 任何类型 = 拼接之后的新字符串

3、布尔型

布尔型只有两个值

var a = ture;
var b = false;

在数字运算中，我们将ture当为1，false当为0

4、undefined和null

如果一个变量没有赋值，那么那个变量的类型就是undefined

var a = undefined;
console.log(a + 'pink'); //undefinedpink
console.log(a + 1);//NaN undefined和一个数字相加的结果就是NaN

null表示是一个空值

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

2、数据类型的检测

检测数据类型我们可以用到typeof关键字，具体用法如下

var num = 10;
console.log(typeof num);

通过以上我们可以判断用prompt取过来的值是何类型的，通过以下验证我们可以发现通过prompt取过来的值是字符型的

var age = prompt('请输入你的年龄');
console.log(typeof age);//string

3、数据类型的转换

1、转换为字符型

//1、把数字型转换为字符串类型	变量.toString()
var num = 10;
var str = num.toString();

//2、String(变量)
var str1 = String(num);

//3、利用 + 拼接字符串的方法实现，这种是隐式转换
var str2 = num + ''

2、转换为数字型

//1、parseInt(变量) 可以将字符型转换为数值型，得到的是整数
console.log(parseInt('3.14'));//3 取整
console.log(parseInt('120px'));//120 会去除掉后面的字符
console.log(parseInt('rem120px'));//NaN，如果字符在前面就无法识别

//parseFloat(变量) 可以将将字符型转换为数值型，得到的是浮点数
console.log(parseFloat('3.14'));//3.14 浮点数
console.log(parseFloat('120px'));//120 会去除掉后面的字符
console.log(parseFloat('rem120px'));//NaN，如果字符在前面就无法识别

//强制转换，利用 Number(变量)
var str = '123';
console.log(Number(str));

//隐式转换，利用算数运算 - * / 三个运算
console.log('12'-0);//12
console.log('123'-'120');//3
console.log('12'*1);//12

3、转换为布尔型

利用 Boolean(变量) 函数来实现，这里由如下的规则

代表空、否定的值会被转换为false ，例如：‘’ 、0 、NaN 、null 、undefined

其余的值会被转换为ture

4、运算

前置递增

++ 写在变量的前面，就是前置递增运算

var age = 10;
//++age 等效于 age = age + 1; 就是先自加一然后返回值后参与运算
console.log(++age + 10);//21

后置递增

++ 写在变量的后面，就是后置递增运算

var age = 10;
//++age 等效于 age = age + 1; 就是先返回原值参与运算，然后才自加一
console.log(age++ + 10);//20
console.log(age);//11

比较运算符

这里表示等于的符号是 ==，并且默认转换数据类型，会把字符串类型的数据转换为数字型，这是隐式转换

console.log(1 == '1');//ture

这里还有可以表示全等，===要求两侧的值数据类型和值是一样的

console.log(1 === '1');//flase

逻辑运算

逻辑与	&&	只要有一个假就为假
逻辑或	\|\|	只要有一个真就为真
逻辑非	！	取反

短路运算（逻辑中断）

短路运算就是当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式

逻辑与

语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

逻辑或

语法：表达式1 || 表达式2

如果第一个表达式的值为真，则返回表达式1

如果第一个表达式的值为假，则返回表达式2

逻辑中断会影响我们代码的执行，如下

var num = 0;
console.log(123 || num++);
console.log(num);//0

运算符的优先级

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

5、流程控制语句

if语句

语法结构：

if (条件表达式)
    {
        //条件成立执行代码
    }

if(条件表达式)
    {
        //条件成立
    }
else
    {
        //条件不成立执行代码
    }

if(条件表达式1)
    {
        //语句1
    }
else if(条件表达式2)
    {
        //语句2
    }
else if(条件表达式3)
    {
        //语句3
    }
else
    {
        //最后的语句
    }

三元表达式

//语法结构
条件表达式 ? 表达式1 : 表达式2
//如果条件表达式为真 则 返回表达式1的值
//如果条件表达式为假 则 返回表达式2的值

switch语句

//我们变量或者表达式的值 和 case 里面的值是全等的关系，必须满足值和数据类型一样
switch(表达式或者变量)
    {
        case value1:
            执行语句1;
            break;
        case value2:
            执行语句2;
            break;
        ...
        default:
        	执行最后的语句;
    }

6、循环语句

for循环

for(初始化变量; 条件表达式; 操作表达式)
    {
    //循环体
}
//以上代码的执行流程如下
//1、首先进行变量的初始化，初始化后，后面就不会再执行这句语句
//2、将初始化的变量放到条件表达式中进行运算，如果为真就继续下一步，如果为假直接退出循环
//3、上面条件表达式为真后就去执行循环体
//4、循环体执行后就会到操作表达式进行执行，这一步一般是自增或者自减，i++,后置自增，由于是独自一个表达式所有就相当于自加一
//5、操作表达式执行后，将值传递到条件表达式去判断，如果为真就继续执行循环体，如果为假直接退出循环

一行打印五个❤

var str = '';
for(var i=1;i<=5;i++)
    {
    str = str + '❤'
}

while循环

while(条件表达式)
    {
        //循环体
    }

do
    {
        //循环体
    } while(条件表达式)

continue关键字：continue关键字用于立即跳出本次循环，继续下一次的循环

break关键字：break关键字用于立即跳出整个循环

7、数组

//利用 new 关键字来创建数组
var arr = new Array();//创建了一个空数组

//利用数组字面量来创建数组 []
//数组的数据用 , 号隔开
var arr = [1,2,'pink',true];

//访问数组里面的某个元素通过数组的索引来完成 数组名[索引号];
arr[0];//1

//数组的长度 数组名.length
arr.length

冒泡排序

var a = [3,2,1,8,9,5,4,7,6];
        // var a = [3,2,1,5,4];
        // var a = [5,4,3,2,1];
        var b = 0;
        for(var j = 0;j < a.length - 1;j++)
        {
            for( var i = 0;i < a.length -j - 1;i++)
        {
            if(a[i]>=a[i + 1])
            {
                b = a[i];
                a[i] = a[i + 1];
                a[i+1] = b;
            }
            else
            {
                
            }
        }
        }

8、函数

//1、函数声明，利用function 声明函数的关键词
function 函数名()
{
    //函数体
}

//2、调用函数
函数名();

//3、行参和实参
function 函数名(行参1,行参2...)
{
    //函数体
}
函数名(实参1,实参2...);

//return 只能够返回一个值，并且如果多个值用 , 号隔开，我们只返回最后一个值
//如果要返回多个值，我们要用到数组

//在每个定义好的函数中都内置了一个 arguments 对象，这里面存储了所有传过来的实际参数
//arguments 是一个伪数组
//1、具有数组的 length 属性
//2、按照索引的方法进行存储
//3、它没有真正数组的一些方法 pop() push()
function fn()
{
    console.log(arguments);//arguments = [1,2,3]
}
fn(1,2,3);

//函数表达式（匿名函数）
//1、fun是变量名，不是函数名
//2、函数表达式也可以进行传递参数
var fun = function(aru)
{
    console.log('我是函数表达式');
    console.log(aru);
}
fun('pink');

9、作用域

//js的作用域：全局作用域 局部作用域
//全局作用域：整个script标签 或者一个单独的js文件
//局部作用域（函数作用域）：在函数内部就是局部作用域

//变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量
//1、全局变量：在全局作用域下的变量，在函数内部没有声明的直接赋值的变量也是全局变量
//全局变量只有浏览器关闭的时候才会销毁，比较占用内存资源
//2、局部变量：在局部作用域下的变量，函数内部的变量就是局部变量
//局部变量当我们程序执行完毕就会销毁，比较节约内存资源


//作用域链：内部函数访问外部函数对变量，采用的是链式查找的方式来决定 就近原则
var num = 10;
function fn()//外部函数
{
    var num = 20;
    function fun()//内部函数
    {
        console.log(num);//20
    }
    fun();
}
fn();

10、预解析

1、js引擎运行js代码：预解析代码执行

（1）预解析中 js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的前面

（2）代码执行按照代码书写顺序从上往下执行

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

（1）变量提升就是把所有的变量声明提升到当前作用域的最前面不提升赋值操作

（2）函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

11、对象

在javascript中，对象是一组无序的相关属性和方法的集合

对象是由属性和方法组成

属性：事物的特征

方法：事物的行为

创建对象的方法

利用对象字面量来创建对象 {}

//1、利用对象字面量来创建对象 {}
//（1）里面的属性和方法采用键值对的形式 属性名:属性值
//（2）多个属性或者方法间可以用 , 号隔开
//（3）方法冒号后面是一个匿名函数
var obj ={
    uname:'张三丰',
    age:18,
    sex:'男'
    sayHi:function()
    {
        console.log('hi~');
    }
}
//2、如何使用对象
//（1）调用对象的属性，我们采用 对象名.属性名
console.log(obj.uname);
//（2）调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//（3）调用对象的方法是 对象名.方法名()
obj.sayHi();

利用 new Object 创建对象

//利用 new Object 创建对象
//（1）利用 等号 = 赋值的方法来添加对象的属性和方法
//（2）每个属性和方法之间 ; 分号结束
var obj = new Object();//创建一个空对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function()
{
    console.log('hi~');
}
obj.sayHi();//属性和行为的使用方法和上面一样

利用构造函数创建对象

//利用构造函数创建对象
//构造函数的语法
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
//如何使用构造函数
new 构造函数名();

//1、构造函数名字首字母要大写
//2、构造函数不需要 return 
//3、构造函数要用 new
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}

var ldh = new Star('刘德华',18,'男');//调用函数返回一个对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');

遍历对象

var obj = {
    name:'pink',
    age:18,
    sex:'男'
}

//for in 遍历对象
//语法
for( 变量 in 对象){
    
}

for(var k in obj){
    console.log(k);//输出得到我们的属性名
    console.log(obj[k]);//输出得到我们的属性值
}

12、数组的方法

检测数组的方法

1、instanceof 运算符

var arr = [];
console.log(arr instanceof Array);//返回 ture

2、Array.isArray(参数); H5新增加

var arr = [];
console.log(Array.isArray(arr));//返回 ture

末尾添加数组的方法

push() 在我们数组的末尾添加一个或者多个数组元素

var arr = [1,2,3];
//arr.push(4,'pink');
console.log(arr.push(4,'pink'));//5，返回的是数组的长度
console.log(arr);//[1,2,3,4,'pink']

开头添加数组的方法

unshift();在数组的开头添加一个或者多个数组元素

var arr = [1,2,3];
//arr.unshift(4,'pink');
console.log(arr.unshift(4,'pink'));//5，返回的是数组的长度
console.log(arr);//[4,'pink',1,2,3]

删除数组末尾元素

pop() 是可以删除数组的最后一个元素

var arr = [1,2,3];
//arr.pop();没有跟参数
console.log(arr.pop());//3，返回的是数组被删除的那个元素
console.log(arr);//[1,2]

删除数组开头元素

shift() 是可以删除数组的第一个元素

var arr = [1,2,3];
//arr.shift();没有跟参数
console.log(arr.shift());//1，返回的是数组被删除的那个元素
console.log(arr);//[2,3]

数组排序

//1、翻转数组
var arr = [1,2,3];
arr.reverse(arr);
console.log(arr);//[3,2,1]

//2、数组排序（冒泡排序）
var arr1 = [13,4,77,1,7]
arr1.sort( function(a,b){
    return a - b;//升序的顺序排列
    return b - a;//降序的顺序排列
});

查找元素，返回索引号

//返回数组元素索引号 indexOf(数组元素) 作用就是返回该数组元素的索引号
//从开头往末尾查找
//如果不在数组里返回值是 -1
//如果有两个相同的数组元素则返回从开头算起的第一个
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));//2

//lastIndexOf(数组元素)
//从末尾往开头查找
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));//4

数组转换为字符串

//数组转换为字符串
//1、toString() 将数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString());//1,2,3

//2、join(分隔符)
var arr = [1,2,3];
console.log(arr.join());//1,2,3
console.log(arr.join('-'));//1-2-3

13、字符串

字符串不可变

如果将原来赋值好的字符串重新赋值一个字符串，那么原来字符串里面的值是不会变得，重新赋值相当于在内存中新开辟了一个空间，将新字符串存进去，是地址变了

根据字符返回位置

var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春'，3));//从索引号3的位置开始查找，8

根据位置返回字符

//1、charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));//e

//2、charCodeAt(index) 返回相应索引号的字符ASCII值
console.log(charCodeAt(0));//97

//3、str[index] H5新增
console.log(str[0]);//a

字符串操作

//1、concat('字符串1','字符串2'...)
var str = 'andy';
console.log(str.concat('red'));//andyred

//2、substr('截取的起始位置','截取几个字符');
console.log(str.substr(2,2));//dy

替换与转换

//1、替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符
var str = 'andyandy'
console.log(str.replace('a','b'));//bndyandy

//2、字符转换为数组 split('分隔符')
var str ='red,pink,blue';
console.log(str.split(','));//[red,pink,blue]

新赋值一个字符串，那么原来字符串里面的值是不会变得，重新赋值相当于在内存中新开辟了一个空间，将新字符串存进去，是地址变了

根据字符返回位置

var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春'，3));//从索引号3的位置开始查找，8

根据位置返回字符

//1、charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));//e

//2、charCodeAt(index) 返回相应索引号的字符ASCII值
console.log(charCodeAt(0));//97

//3、str[index] H5新增
console.log(str[0]);//a

字符串操作

//1、concat('字符串1','字符串2'...)
var str = 'andy';
console.log(str.concat('red'));//andyred

//2、substr('截取的起始位置','截取几个字符');
console.log(str.substr(2,2));//dy

替换与转换

//1、替换字符 replace('被替换的字符','替换为的字符') 只会替换第一个字符
var str = 'andyandy'
console.log(str.replace('a','b'));//bndyandy

//2、字符转换为数组 split('分隔符')
var str ='red,pink,blue';
console.log(str.split(','));//[red,pink,blue]