devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS笔记（js基础）

作者：盐析白兔 | 2024-03-16 18:45:55

赞

踩

JS笔记（js基础）

数据存储单位

bit<byte<kb<GB<TB<......

  • 位（bit）：1bit可以保存一个0或者1（最小的存储单位）

  • 字节（Byte）：1B=8b

  • 千字节（KB）：1KB=1024B

  • 兆字节（MB）：1MB=1024KB

  • 吉字节（GB）:1GB=1024MB

  • 太字节（TB）：1TB=1024GB

  • ......

JS组成

JavaScript：ECMAScript、DOM（文档对象模型）、BOM（浏览器对象模型）

JS初体验

js有三种书写位置，分别为行内、内嵌和外部。

1.行内式JS

<input type="button" value="点我试试" οnclick="alert('Hello World')"/>

  • 可以将单行或者少量的JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick

  • 注意单双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号

  • 可读性差，在html中编写大量的代码时，不方便阅读；

  • 引号易错，引号多层嵌套匹配时，非常容易弄混；

  • 特殊情况下使用

2.内嵌式js

<script> alert('Hello Word~!'); </script>

  • 可以将多行js代码写到<script>标签中

  • 内嵌JS是学习时常用的方式

3.外部JS文件

<script src="my.js"></script>

  • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用

  • 引用外部JS文件的script标签中间不可以写代码

  • 适用于JS代码量比较大的情况

JS注释

单行注释

Ctrl+/

多行注释

shift+alt+A

JS输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

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

变量

1.变量概述
1.1什么是变量

变量就是一个装东西的盒子。变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。

1.2变量在内存中的存储

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

2.变量的使用

变量在使用时分为两步：1.声明变量 2.赋值

2.1.声明变量

//声明变量

var age; //声明一个名称为age的变量

  • var是一个js关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

  • age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2.2.赋值

age=10；//给age这个变量赋值为10

  • =用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

  • 变量值是程序员保存到变量空间里的值

2.3.变量的初始化

var age=18；//声明变量同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化。

3.变量语法扩展
3.1更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age=18；

age=81；//最后结果就是81，因为18被覆盖了

3.2同时声明多个变量

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

var age=10,name='lty',sex=2;

3.3声明变量特殊情况
情况说明结果
var age;console.log(age);只声明不赋值undefined
console.log(age)不声明不赋值 直接使用报错
age=10；console.log(age)不声明 只赋值10
4.变量命名规范

  • 由字母（A-Z a-z）、数字（0-9）、下划线（_）、美元符号（$）组成，如：usrAge、num01等

  • 严格区分大小写。var：app；和var:APP;是两个变量

  • 不能以数字开头。18age 是错误的。

  • 不能是关键字、保留字。例如：var、for、while

  • 变量名必须有意义。MMD BBD nl->age

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

数据类型

1.数据类型简介
1.1为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分为所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

数据类型就是数据的类别型号。

1.2变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

js是一种弱类型或者说动态语言。

js的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定的

JavaScript拥有动态类型，同时也意味着看相同的变量可用作不同的类型：

var x=6; //x为数字

var x="aill"; //x为字符串

1.3数据类型的分类

js把数据分为两类：

  • 简单数据类型（Number,String,Boolean,Undefined,Null）

  • 复杂数据类型（object）

2.简单数据类型
2.1简单数据类型（基本数据类型）
简单数据类型说明默认值
Number数字型，包含整型值和浮点型值，如21/0.210
Boolean布尔值类型，如true、false，等价于1和0false
String字符串类型，如“张三” 注意咱们js里面，字符串都带引号""
Undefinedvar a;声明了变量a但是没有给值，此时a=undefinedundefined
Nullvar a=null; 声明了变量a为空值null
2.2数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）

var age=12; //整数

var Age=21.3747; //小数

1.数字型进制

最常见的有二进制、十进制、十六进制。

//1.八进制数字序列范围：0-7

var num1=07; //对应十进制的7

var num2=019; // 对应十进制的19

var num3=08; //对应十进制的8

// 2.十六进制数字序列范围：0-9以及A-F

var num=0xA；

在js中八进制前边加0，十六进制前面加0x

2.数字型范围

JavaScript中数值的最大和最小值

alert（Number.MAX_VALUE）; //1.7976931348623157e+308

alert(Number.MIN_VALUE); //5e-324

3.数字型三个特殊值

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

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

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

4. isNaN()

用来判断一个变量是否为非数字类型，返回true或者false

2.3字符串型String

字符串型可以是引号中的任意文本，其语法为双引号""和单引号''

1.字符串引号嵌套

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

2.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是\开头的，常用的转义符及其说明如下：

转义符解释说明
\n换行符，n是newline的意思
\ \斜杠\
\'' 单引号
\"" 双引号
\ttab 缩进
\b空格，b是blank的意思
3.字符串长度

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

var str = 'my name is tom';
​
console.log(str.length);
4.字符串拼接

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

  • 拼接前会把与字符串相加的任何类型转为字符串，再拼接成一个新的字符串

alert('hello' + '' + 'world');//hello world
console.log('pink老师' + 18);// pink老师18

+号口诀总结：数值相加，字符相连

5.字符串拼接加强

  • 我么经常会将字符串和变量来拼接，因为变量可以很方便的修改里面的值

  • 变量是不能添加引号的，因为加引号的变量会变成字符串

  • 如果变量两侧都有字符串拼接，口诀“引引加加”，删掉数字，变量写加中间

变量和字符串相连的口诀：引引加加

console.log('pink老师' + age + '岁')；
<body>
    <script>
        var age = prompt('请输入你的年龄');
        var str = '你的年龄是' + age + '岁';
        alert(str);
    </script>
</body>
2.4 布尔型Boolean

布尔类型有两个值：true和false，其中true表示真（对），而false表示假（错）。

布尔型和数字型相加的时候，true的值为1，false的值为0

console.log(true + 1); //2
console.log(false + 1); //1
2.5 undefined和Null

一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或相加时，注意结果）

var variable;
​
console.log(variable);    //undefined
​
console.log('你好' + variable);     //你好undefined
​
console.log(11 + variable);       //NaN
​
console.log(true + variable);    //NaN

一个声明变量给nall值，里面存的值为空

var vari = null;
console.log('你好' + vari);  //你好null
comsole.log(11 + vari); //11
console.log(true + vari); //1
console.log(NaN === NaN); //false

NaN不等于任何人，包括他自己

3.获取变量数据类型
3.1 获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

var num = 10;
console.log(typeof num);   // number
var str = 'pink';
console.log(typeof str);   //String
var flag = true;
console.log(typeof flag);   //boolean
var vari = undefined;
console.log(typeof vari);  // undefined
var timer = null;
console.log(typeof timer);  //Object
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);   //String
3.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8，9，10

  • 字符串字面量：'黑马程序员',"大前端"

  • 布尔字面量：true，false

4. 数据类型转换
4.1什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转变变量的数据类型。通俗来说，就是把一种数据类型的变量转换为另一种数据类型。

我们通常会实现3种方式的转换：

  • 转换为字符串类型

  • 转换为数字型

  • 转换为布尔型

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

  • toString()和String() 使用方式不一样

  • 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也成为隐式转换。

     <script>
        // 1.把数字类型转换为字符串型 变量.toString()
        var num = 10;
        console.log(typeof num);
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
​
        // 2.我们利用String()
        console.log(String(num));
        console.log(typeof String(num));
​
        // 3.利用+拼接字符串的方法实现转换效果
        console.log(num + '');
    </script>

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

  • 注意parseInt和parseFloat单词的大小写，这2个是重点

  • 隐式转换是我们在进行算术算法的时候，JS自动转换了数据类型

    // 1.parseInt(变量) 可以把字符型的转换为数字型 得到的是整数
        var age = prompt('请输入您的年龄');
        console.log(parseInt(age));
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('3.94')); // 3 取整
        console.log(parseInt('120px')); // 120 会去掉这个px单位
        console.log(parseInt('rem120px')); // NaN
        // 2.parseFloat(变量)可以把 字符型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('123.66')); //123.66
        console.log(parseFloat('120px')); //120会去掉这个px单位
        console.log(parseFloat('rem120px')); // NaN
        // 3.利用Number(变量)
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        // 4. 利用了算数运算 - * / 隐式转换
        console.log('12' - 0);
        console.log('123' * 1);
        console.log(+'122');
    </script>
4.4转换为布尔型
方式说明案例
Boolean()函数其他类型转成布尔值Boolean('true')

  • 代表空、否定的值会被转换为false，如''、0、NaN、null、undefined

  • 其余值都会被转换为true

拓展
基本数据类型和引用数据类型

堆栈空间分配区别

1.简单类型的内存分配

2.复杂类型内存分配

图解：

javascript基础语法

1.解释型语言和编译型语言
1.概述

2.执行过程

2.标识符、关键字、保留字
1.标识符

标识（zhi）符：就是指开发人员为变量、属性、函数、参数取的名字

标识符不能是关键字或保留字

2.关键字

关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。

3.保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，同样不能使用他们当变量名或方法名

包括：Boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

JS运算符

1.1赋值运算符

目标：能够使用赋值运算符简化代码

赋值运算符：对变量进行赋值的运算符

1.2一元运算符

目标：能够使用一元运算符做自增运算

众多的JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符：

  • 一元运算符

    例：正负号、自增（n++/++n）、自减（n--/--n）

  • 二元运算符

例：

let num = 10 + 20
1.3比较运算符

比较运算符有隐式转换 把'2'转换为2

console.log(2 == '2')  //true
console.log(2 === '2')  //false

1.4逻辑运算符
符号名称日常读法特点口诀
&&逻辑与并且符号两边都为true，结果才为true一假则假
||逻辑或或者符号两边只有一个true就是true一真则真
！逻辑非取反true变false，false变true真变假，假变真
1.5运算符优先级

2.1表达式和语句

2.1.1 if语句
<script>
        var year = +prompt('请输入年份');
        if (year % 4 === 0 && year % 100 !== 0) {
            alert(`${year}年是闰年`);
        } else {
            alert(`${year}年是平年`)
        }
    </script>

2.1.2 三元运算符
 <script>
        let num = +prompt('请输入一个数字');
        // num >= 10 ? alert(num) : alert(`0${num}`)
        num >= 10 ? alert(num) : alert('0' + num)
    </script>

2.1.3 switch语句
<script>
        var num1 = +prompt('请输入第一个数');
        var num2 = +prompt('请输入第二个数');
        var operator = prompt('请输入操作符');
        switch (operator) {
            case '+':
                alert(num1 + num2)
                break;
            case '-':
                alert(num1 - num2)
                break;
            case '*':
                alert(num1 * num2)
                break;
            case '/':
                alert(num1 / num2)
                break
            default:
                alert('请输入正确的操作符')
        }
    </script>
2.2.1 断点

f12 => sourse => 文件 => 所需断点的行头点击

2.2.2 while循环

 <script>
        let i = 1;
        while (i <= 3) {
            document.write('李亭瑶月薪百万<br/>');
            i++
        }
    </script>
2.3 循环退出

 while (true) {
            let str = prompt('你爱我吗？');
            if (str === '爱') {
                break;
            }
        }
if多分支语句和switch区别：

佛如

for循环

<script>
        for (let i = 1; i <= 5; i++) {
            document.write('⭐')
        }
​
        // 打印数组
        let arr = ['黎明', '刘德华', '郭富城', '张学友'];
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
    </script>
for循环和while循环区别

for循环嵌套
// 打印自定义行列星星
        // let row = +prompt('请输入需要打印的行数：');
        // let col = +prompt('请输入需要打印的列数：');
        // for (let i = 1; i <= row; i++) {
        //     for (let j = 1; j <= col; j++) {
        //         document.write('⭐')
        //     }
        //     document.write('<br>')
        // }
        for (let i = 1; i <= 5; i++) {
            for (let j = 1; j <= i; j++) {
                document.write('⭐')
            }
            document.write('<br>')
        }
数组
1.数组的基本使用

2.数组求最大值
 <script>
        let arr = [2, 6, 1, 7, 4]
        let max = arr[0];
        for (let i = 1; i < arr.length; i++) {
            max = max > arr[i] ? max : arr[i];
        }
        console.log(max);
    </script>
3.数组增删改查

操作数组-新增

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）

语法：

arr.push(元素1，元素2，······，元素n)

arr.unshift(新增内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

语法：

arr.unshift(元素1，······，元素n)
操作数组-删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

语法：

arr.pop()

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

语法：

arr.shift()

数组.splice()方法 删除指定元素

语法：

arr.splice(start, deleteCount)
arr.splice(起始位置, 删除几个元素)

// let arr = [];
        // console.log(arr);
        // arr[0] = 1;
        // arr[1] = 52;
        // console.log(arr);
        // 修改
        // let arr = ['pink', 'red', 'green']
        // arr[0] = 'hotpink';
        // console.log(arr);
        // for (let i = 0; i < arr.length; i++) {
        //     arr[i] = arr[i] + '老师';
        // }
        // console.log(arr);
​
        // 新增
        // 末尾加元素
        let arr = ['pink', 'hotpink']
        console.log(arr.push('deeppink', 'blackpink')); 
        console.log(arr);
​
        // 开头加元素
        arr.unshift('black', 'green');//返回新数组长度
        console.log(arr);
        // 删除
         // 最后一个删除
        arr.pop()
        console.log(arr.pop()); //返回被删除的元素
        console.log(arr);
​
         // 删除前面的一个
​
        arr.shift(); //返回被删除的元素
        console.log(arr);
​
         // 删除指定元素
        console.log(arr.splice(1, 1)); //返回删除的元素数组
        console.log(arr);
冒泡排序

 let arr = [45, 6, 8, 2, 5, 54, 15, 14];
        // for (let i = 0; i <= arr.length - 1; i++) {
        //     for (let j = 0; j < arr.length - i - 1; j++) {
        //         if (arr[j] > arr[j + 1]) {
        //             let temp = arr[j];
        //             arr[j] = arr[j + 1];
        //             arr[j + 1] = temp;
        //         }
        //     }
        // }
数组排序

数组.sort()方法可以排序

语法：

let arr = [4, 2, 5, 1, 3]
//升序排序写法
arr.sort(function(a, b) {
    return a - b
})
console.log(arr)   //[1, 2, 3, 4, 5]
//降序排序写法
arr.sort(function(a, b) {
    return b - a
})
console.log(arr)  //[5, 4, 3, 2, 1]

函数

函数意义

函数使用

函数传参

参数默认

函数返回值

break和return区别：

break中断的是循环

return中断的是函数

总结

函数细节补充

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局限性，增强了程序的可靠性，减少了名字冲突。

形参是函数的局部变量

变量的访问原则

  • 只要是代码，就至少有一个作用域

  • 写在函数内部的局部作用域

  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

  • 访问原则：在能够访问到的情况下先局部，局部没有再找全局

作用域链：采取就近原则的方式来查找变量的最终的值

匿名函数

1.函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个成为函数表达式

语法：

let fn = function() {
    //函数体
}

调用：

fn()  //函数名()

函数表达式和具名函数的不同：

  1. 具名函数的调用可以写到任何位置

  2. 函数表达式，必须先声明函数表达式，后调用

2.立即执行函数

场景介绍：避免全局变量之间的污染

语法：

// 方式1
(function() { console.log(11) })();
​
// 方式2
(function() { console.log(11) }());
//不需要调用，立即执行

逻辑中断

开发中，会见到以下写法：

function getSum(x, y) {
    x = x || 0
    y = y || 0
    console.log(x + y)
}
getSum(1, 2)

其实类似参数的默认写法

1.逻辑运算符里的短路

  • 短路：只存在于&&和||中，当满足一定条件会让右边的代码不执行

    符号短路条件
    &&左边为false就短路
    ||左边为true就短路

  • 原因：通过左边能得到整个式子的结果，因此没必要再判断右边

  • 运算结果：无论&&还是||，运算结果都是最后被执行的表达式，一般用在变量赋值

let age = 18
console.log(false && age++)
console.log(age)  //18
​
console.log(11 && 22) //22
console.log(11 || 22) //11
2.转为Boolean型
显示转换：

1.boolean

记忆：''、0、undefined、null、false、NaN转换为布尔值后都是false，其余则为true

隐式转换

  1. 有字符串的加法"" + 1，结果是"1"

  2. 减法-（像大多数数学运算一样）只能用于数字，他会使空字符串""转换为0

  3. null经过数字转换之后会变成0

  4. undefined经过数字转换之后会变成NaN

注意（null和undefined）

null === undefined //false

对象

对象使用
对象增删改查

//查总结：
//(1) 对象名.属性名  obj.age
console.log(obj.num)
//（2）对象名['属性名'] (适合属性名是字符串的)
console.log(obj['num'])
对象中的方法

遍历对象

let obj = {
                uname: 'pink老师',
                age: 18,
                gender: '男'
            }
            // 遍历对象
        for (let k in obj) {
            console.log(k); //属性名 'uname' 'age' 'gender'
            // console.log(obj.k); //undefined 错误的写法
            console.log(obj[k]);
        }

内置对象

内置对象-Math

Math.sqrt,，平方根

//属性
console.log(Math.PI)  //3.14159265358
//方法
//ceil 天花板 向上取整
conaole.log(Math.ceil(1.1))  //2
conaole.log(Math.ceil(1.5))  //2
conaole.log(Math.ceil(1.9))  //2
//floor 地板 向下取整
console.log(Math.floor(1.1)) //1
console.log(Math.floor(1.5)) //1
console.log(Math.floor(1.9)) //1
//四舍五入 round
console.log(Math.round(1.1)) //1
console.log(Math.round(1.5)) //2
console.log(Math.round(1.9)) //2
console.log(Math.round(-1.1)) //-1
console.log(Math.round(-1.5)) //-1
console.log(Math.round(-1.51)) //-2
​
//max
console.log(Math.max(1, 2, 3, 4, 5))  //5
//min
console.log(Math.min(1, 2, 3, 4, 5))  //1
内置对象-生成任意范围随机数

<script>
        //左闭右开 能取到0但是取不到1 中间的一个随机小数
        console.log(Math.random());
​
        //0~10之间的整数
        console.log(Math.floor(Math.random() * 11));
​
        let arr = ['red', 'green', 'blue']
        let random = Math.floor(Math.random() * arr.length)
        console.log(arr[random]);
        console.log('-------华丽的分割线-------');
        //取到N-M的随机整数
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        console.log(getRandom(4, 8));
    </script>

备注：该笔记视频为黑马程序员出版（pink老师忠实粉丝~）黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/251403
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号