js基础

    科技2025-06-09  10

    JS基础

    一. js基础-01-day1. 计算机语言1.1 编程语言 2. 计算机基础2.1 计算机组成2.2 计算机存储单位 3. JavaScript 介绍3.1 JavaScript 三大组成3.2 JS 的三种写法3.3 JS的注释 4. 输入输出语句5. 变量5.1 变量的使用5.1.2 变量声明的同时赋值(初始化)5.1.3取出变量数据5.1.4 是否加引号 5.2 变量声明与赋值的一些细节5.3 变量的命名规则和规范 6. 数据类型6.1 数字类型 Number6.1.1 数字型进制6.1.2数值型范围:6.1.3 数字型三个特殊值6.1.4 isNaN() 6.2字符串 String(加引号)6.2.1 字符串写法6.2.2 字符串嵌套6.2.2 转义符:6.2.3 字符串长度和拼接 6.3 布尔类型6.4 undefined6.5 null6.6 获取变量数据类型6.7 变量值的交换 7. 数据类型之间的转换7.1 转换成字符串类型7.2 转换成数字类型parseInt和parseFloatNumber 和 隐式转换 7.3 Boolean转换成布尔类型7.4 控制台打印数据的颜色来判断类型 二. js基础-02-day1. 运算符分类1.1 算术运算符1.2 自增运算符1.3 比较运算符1.4 逻辑运算符逻辑运算符中的短路和运算结果 1.5 赋值运算符1.6 运算符的优先级 2. 分支结构2.1 if语句2.1.1 分支之if语句2.1.2 if elase 双分支结构2.1.3 if else if 多分支语句 2.2 三元表达式2.3 switch语句 3.字符串比较大小 三. js基础-03-day1. for循环1.1 for循环语法1.2 for循环的案例 2. 双重for循环2.1 双重for循环语法双重for循环的案例 3. while循环4. do-while循环6. for / while / do while的区别5. continue和break 四. js基础-04-day1. 数组1.1 声明数组1.2 访问数组元素(获取数组中的元素)1.3 遍历数组1.4 数组元素拼接成字符串1.5 数组扩容(数组中新增元素) 2. 函数2.1 函数的概念2.2 函数的使用2.2.1 声明函数两种方式(函数的名字用动词,因为他是为了实现功能)2.1.2 调用函数 2.3 函数的参数2.3.1 函数参数语法2.3.2 函数形参和实参数量不匹配时 2.4 函数的返回值2.4.1 return 语句2.4.2 break ,continue ,return 的区别 2.5. arugments2.6. 函数内也可以调用函数 五. js基础-05-day1. 作用域1.1全局作用域1.2 局部作用域 2. 全局变量和局部变量3. 作用域链4.预解析4.1 变量预解析4.2 函数预解析4.3 函数表达式(匿名函数)的预解析 5. 对象创建对象的三种方法5.1 字面量创建对象{}5.1.1 对象的创建5.1.2 对象的使用5.1.3 变量、属性、函数、方法的区别 5.2 利用 new Object 创建对象5.3 利用构造函数创建对象5.3.1 构造函数语法5.3.2 new 关键字做的事 六. js基础-06-day1. 遍历对象 一. 内置对象2. Math 对象2.1 属性:2.2 方法: 3. 日期对象2.1 使用,new一个对象2.2 方法:2.3获得毫秒数(时间戳) 4. 数组对象4.1 检测是不是数组4.2 添加数组元素4.3 数组删除元素4.4 数组的排序方法4.5 数组根据元素查找下标4.6 转换成字符串 5. 字符串5.1 基本包装类型5.2 字符串的不可变5.3 根据字符返回位置(下标)5.4 根据位置找到字符5.5 concat:连接字符串,5.6 substr:截取字符串5.7 replace: 替换字符5.8 split:切割成数组 二. 值类型和引用类型

    一. js基础-01-day

    1. 计算机语言

    机器语言:0和1的组合

    1.1 编程语言

    汇编语言:加入了一些英文单词符号 add jump等高级语言:更像人类的语言,JavaScript

    2. 计算机基础

    2.1 计算机组成

    计算机所有软件都称之为数据,数据本质是0和1的二进制计算机有硬件和软件 硬件:CPU、内存、硬盘软件:电脑打开能用的东西

    2.2 计算机存储单位

    计算机最小存储单位是:位(bit)1Byte(字节) 等于 8bit1Kb(千字节) = 1024byte1Mb(兆字节) = 1024kb1Gb(吉字节) = 1024mb1Tb(太字节) = 1024gb…

    3. JavaScript 介绍

    html、css是标记语言 由渲染引擎来解析,标记没有逻辑,写什么就是什么,它不会思考, JS是脚本语言 有逻辑,能独立思考 JS的执行:逐行解释(一行一行往下执行),由js引擎来解析

    3.1 JavaScript 三大组成

    ECMAScript 简称ESJS的语法规范,由ES定义了JS里有什么数据类型、怎么运算、哪些关键字ES也是有版本的,ES5、ES6、ES7 DOM 文档对象模型控制html元素的 BOM 名字:浏览器对象模型控制浏览器的

    3.2 JS 的三种写法

    行内式:现在只要了解有这种写法就可以了

    内嵌式:

    <script> // JS代码 </script>

    外联式:

    <script src="js文件的路径"></script>

    以.js结尾的文件,再把JS代码写在文件里

    页面要用必须引入

    script标签里面不要再写JS代码了(写了代码也没用)

    3.3 JS的注释

    单行注释

    // 单行注释

    多行注释

    /* 多行注释 */

    默认快捷键: ctrl + shift +a

    可以修改

    4. 输入输出语句

    prompt:

    给用户输入的

    prompt('提示语')

    alert:

    弹出警示框

    alert('提示语')

    console.log:

    给程序员看的,输出在控制台,页面是看不到的

    console.log('输出的内容')

    5. 变量

    变量作用:用来存储数据的变量的本质: 内存可以存数据变量其实就是在内存里申请一块空间用来放数据怎么找到空间?给空间起一个名字,这个名字就叫变量名

    5.1 变量的使用

    变量的声明(变量名用名词) var 变量名 变量的赋值 变量名 = 数据

    例:

    var age; age = 18;

    5.1.2 变量声明的同时赋值(初始化)

    var 变量名 = 数据

    例:

    var age = 18;

    5.1.3取出变量数据

    直接写变量名,就可以取出来 alert(变量名) var age = 16 alert(age) // 弹出16

    5.1.4 是否加引号

    注意: ① 如果是数字直接写; ② 其他的除了true/false/undefined/null;必须全部加引号,否则js里没有这种语法,会报错

    5.2 变量声明与赋值的一些细节

    变量可以重新赋值,赋值后,以最后一次的为准

    可以同时声明多个变量,用英文逗号隔开

    var 变量名1,变量名2,....; var myname,age; // 声明了2个变量,分别是myname和age

    只声明,不赋值 如果变量只声明,不赋值,变量也有值,只不过值是undefined

    不声明,不赋值 变量不声明不赋值不能用,会报错

    不声明,只赋值 变量不声明,直接赋值,可以用(不推荐)

    5.3 变量的命名规则和规范

    规则: 必须要遵守,不遵守就会报错规范: 建议你遵守,但是不遵守也不会报错规则有: – 不能用关键字:在JS里有特殊含义的字符,例如var – 只能用字母、数字、下划线、$,并且数字不能开头规范有: –起名要有意义 – 遵守驼峰命名法:如果多个单词第一个单词的首字母小写,后面每个单词的首字母大写变量名区分大小写

    6. 数据类型

    基本类型:number、string、boolean、null、undefined

    类型特点number(数字)直接写数字就是number,例如10、20、20.32string(字符串)只要是被单引号或者双引号包起来的都是字符串,例如:‘abc’、‘10’boolean(布尔型)只有两个:true、false,不用加引号,直接写undefined只有一个值就是undefinednull只有一个值就是null

    复杂类型:Object(后面才学)

    6.1 数字类型 Number

    6.1.1 数字型进制

    二进制:0b开头八进制:0开头十六进制:0x开头十进制:正常写数字

    6.1.2数值型范围:

    最大范围 Number.MAX_VALUE最小范围 Number.MIN_VALUE

    6.1.3 数字型三个特殊值

    无穷大: Infinity无穷小:-InfinityNaN(Not a number): 代表不是一个数字

    6.1.4 isNaN()

    作用:它是判断一个数据是不是 非数字所以如果传的是 数字 得到是 false所以如果传的不是 数字 得到是 true

    6.2字符串 String(加引号)

    6.2.1 字符串写法

    加引号:要用 单引号 或者 双引号 包起来就叫字符串 ,推荐用 单引号

    6.2.2 字符串嵌套

    字符串引号嵌套:外单内双、外双内单

    6.2.2 转义符:

    注意: ① 都以\开头; ② 转义符必须要加在字符串的引号里面。 转义符解释说明\n换行符,n 是 newline 的意思\ \斜杠 \’’ 单引号"”双引号\ttab 缩进(水平制表符)\b空格 ,b 是 blank 的意思

    6.2.3 字符串长度和拼接

    字符串.length 来取

    var str = 'hello' console.log(str.length) // 5

    字符串拼接用 +

    + 两边只要有一个是字符串,那么得到的结果也一定是字符串(结果就是把内容拼接)

    + 号两边只要有一个是字符串,那么都是拼接

    undefined + ‘pink’ 也是在拼接

    6.3 布尔类型

    布尔类型(Boolean):只有两个值,用来代表对立的两个状态例:对和错、真和假、开和关布尔类型的值:true 和 falsetrue也可以当数字1,false当数字0

    6.4 undefined

    undefined:代表未定义(系统也不知道是什么类型) undefined + 10 得到 NaN 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果) var variable; console.log(variable); // undefined console.log('你好' + variable); // 你好undefined //和数值相加得到非数值 console.log(11 + variable); // NaN console.log(true + variable); // NaN

    6.5 null

    null: 代表空 null + 10 得到 10 一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null) ```js var vari = null; console.log('你好' + vari); // 你好null console.log(11 + vari); // 11 console.log(true + vari); // 1

    6.6 获取变量数据类型

    typeof

    var num = 18; console.log(typeof num) // 结果 number

    6.7 变量值的交换

    apple 1 的值和apple 2的值交换

    7. 数据类型之间的转换

    7.1 转换成字符串类型

    1.变量.toString() 要打括号 2.String(变量名)3.利用 + 空字符串 数据 + ''‘’ + 数据

    7.2 转换成数字类型

    parseInt和parseFloat

    parseInt(数据) 能把数据转成数字类型(只是整数)如果第一个字符不是数字,得到NaN到非数字的地方就把数据切断,得到结果 parseFloat(数据) 跟上面是一样的,只不过遇到小数也能转成小数

    Number 和 隐式转换

    用法 :Number(数据)

    内容必须是纯数字,如果带有非数字,都会得到NaN(所以不经常使用) 例: Number(‘10px’) 也会得到NaN

    隐式转换:通过参与数学运算隐式转换成数字

    -: 数据 - 0*: 数据 * 1/ :数据 / 1注意:+绝对不可以转成数字,因为+遇到字符串得到的也是字符串(是做拼接),但是字符串前面加上+变成数字

    7.3 Boolean转换成布尔类型

    用法: Boolean(数据)只有0、空字符串(’’)、NaN、undefined、null 会转成false,其他的都是true

    7.4 控制台打印数据的颜色来判断类型

    如果打印黑色,是字符串类型如果是蓝色就是数字类型(布尔类型也是蓝色)

    二. js基础-02-day

    1. 运算符分类

    运算符:用来做运算的符号;表达式:由运算符组成的式子;返回值:表达式右边的结果。这个值返回给左边

    1.1 算术运算符

    + - * / 余%

    注意: ① 余数: 可以判断是否能整除(余数为0就代表整除) ② 除了 + 以外的算术运算符,都会把数据隐式转换成数字类型 ③ 优先级:先乘除、后加减、有括号的先算括号里面的(同级从左往右依次计算)

    1.2 自增运算符

    符号: ++(自增) 、 --(自减)

    ++:让自身+1

    –: 让自身-1

    前置和后置的异同:

    ① 相同点:不管前还是后,最终都会让自己+1或者-1 ② 不同点:

    前置是先自增或自减再返回后置是用原值返回再自增或自减 var num1 = 10 var sum = num1++ + 10 console.log(num1) // 11 console.log(sum) // 20 var num1 = 10 var sum = ++num1 + 10 console.log(num1) // 11 console.log(sum) // 21

    1.3 比较运算符

    > 使用: 判断左边是否大于右边,如果大于得到true,否则得到false 例: 10 > 10 得到false< 使用:判断左边是否小于右边,如果小于得到true,否则得到false>= 使用:判断左边是否大于或者等于右边,如果大于或者等于得到true,否则得到false 例: 10 >= 10 得到true<= 使用: 判断左边是否小于或者等于右边,如果小于或者等于得到true,否则得到false== 使用:判断两边是否值相等 注意:只判断值,不管类型!= 判断两边的值是否不等 === 读作全等判断两边的值与类型是否都相等,只要有一个不等就会得到false注意:既判断值又判断类型 细节: null == undefined 为true但是 null === undefined 为falseNaN 不等于任何值,包括它自身,所以 NaN == NaN 得到false那么如何判断一个数据是不是NaN呢? isNaN(数据)

    1.4 逻辑运算符

    &&: 逻辑与,也可以读作并且 10 > 3 && 10 < 50 两边都要为真,结果才为真,只要有一个为假,结果就是假口诀:一假则假 ||: 逻辑或,也可以读作或者 10 > 5 || 10 < 3两边都要为假,结果才是假,只要一个为真,结果就是真口诀:一真则真 !: 逻辑非,也可以读作取反真变假,假变真

    逻辑运算符中的短路和运算结果

    短路:右边的式子不执行什么时候触发短路? 通过左边能确定整个式子的结果,就没必要看右边了,所以就短路。如果不能取右边,逻辑运算符的结果,要么是左边要么是右边。 &&:一假则假 所以如果左边为假,就短路 ||: 一真则真 所以如果左边为真,就短路 var num1 = 10; var sum = num1 > 2 && num1 + 10 console.log(sum) //20 var num1 = 10; var sum = num1 > 20 && num1++ console.log(num1) //10(因左边是false,是假的,右边短路不执行,那么自增运算没有效果) console.log(sum) //false var num1 = 10; var sum = num1++ && 10 * 3 console.log(num1) //11 console.log(sum) //30 var num1 = 1; var sum = num1-- && 10 * 3 console.log(num1) //0 console.log(sum) //30 var num1 = 1; var sum = --num1 && 10 * 3 console.log(num1) //0 console.log(sum) //0

    1.5 赋值运算符

    = : 给某个变量赋值

    +=:在自己本身值的基础上再加一个值

    var num = 10 num += 5 // 在自己本身10的基础上再加5

    -=:在自己本身值的基础上再减一个值

    *=:在自己本身值的基础上再乘以一个值

    /=:: 在自己本身值的基础上再除以一个值

    var num = 10 num /= 5 // 最后num的值为2 因为这句话相当于是 num = num / 5

    %=: 在自己本身值的基础上再求一个余数

    var num = 10 num %= 3 // num最终为1,因为相当于写的是 num = num % 3

    1.6 运算符的优先级

    2. 分支结构

    流程控制 程序的结构:

    顺序结构:按顺序,一行一行执行下来;分支结构:程序有选择的执行或者不执行某段代码;循环结构:重复执行某段代码。

    2.1 if语句

    2.1.1 分支之if语句

    第一种使用:

    if(条件表达式) { 代码 } // 当条件表达式为true才执行代码,否则不执行

    2.1.2 if elase 双分支结构

    语法

    if (条件表达式) { 代码1 } else { 代码2 }

    解析:条件表达式如果为 true 执行代码1,如果为 false 执行代码2

    if (true) { alert (123) // 只弹出123 } else { alert (456) } if (false) { alert (123) } else { alert (456) // 只弹出456 }

    2.1.3 if else if 多分支语句

    ```js if (条件1) { 代码1 } else if (条件2) { 代码2 } else if (条件3) { 代码3 }else { } // 从上往下依次判断,满足哪个条件就进入哪个大括号里执行代码,后面条件的都不执行 ```

    2.2 三元表达式

    条件表达式 ? 表达式1 : 表达式2var num = 10 > 5 ? 88 : 12 // num为88

    (相当于if else双分支结构)

    条件表达式结果为true,执行表达式1,否则执行表达式2

    2.3 switch语句

    switch (表达式) { case1: 代码1 break; case2: 代码2 break; ..... default: 代码n break; } // 表达式里的值是几,就直接跳到对应的case里去执行

    细节:

    switch里的判断是全等判断,所以一定要注意类型要相等

    break:跳出它所在的switch语句

    break可以防止穿透

    穿透:从一个case穿到下一个case

    也可以合理利用穿透

    case后面加:

    3.字符串比较大小

    原理:字符串比较本质上是比较他们所对应的ASCII码(每个字符串对呀一个数值)数字字符串比较 ① 字符串比较,先比较第一位; console.log('8' > '24') //true

    ② 如果第一位一样比较第二位,再一次类推。

    console.log('2' < '24') //true 字母字符串的比较 ① 后面的字母比前面的字母大 console.log('a' > 'd') //false console.log('A' > 'D') //false

    ② 小写大于大写

    console.log('a' > 'Z') //true

    三. js基础-03-day

    循环语句:循环体及循环的 终止条件组成的语句,被称之为 循环语句

    1. for循环

    1.1 for循环语法

    for ( 声明计数变量; 循环条件; 操作计数变量 ) { 循环体 } 声明计数变量:就是声明一个变量,一般从0开始或者从1开始,初始化操作在整个 for 循环只会执行一次。循环条件:控制循环的次数,例如: 变量 <= 9 代表9次(要从1开始),如果为true,则执行循环体语句,否则退出循环,循环结束。操作计数变量:变量++,更新计数器循环体:就是要重复执行的代码 for (var i = 1; i <= 9; i++) { console.log('hello') // hello打印9次 }

    1.2 for循环的案例

    ① 由用户输入循环次数,然后再打印你怎么这么好看 var num = prompt('请您输入数字'); for (var i = 1; i <= num; i++) { console.log('我怎么这么好看'); } ② 计算1-100的和 // 声明一个总和的变量 var sum = 0; for (var i = 1; i <= 100; i++) { sum += i } console.log('sum'); ③ 计算1-100的奇数和以及偶数和 // 求1-100之间所有偶数和奇数的和;even(偶数) odd(奇数) var even = 0; var odd = 0; for (var i = 1; i <= 100; i++) { if (i % 2 == 0) { even += i; } else { odd = odd + i; } } console.log('1-100之间所有偶数的和是:' + even); console.log('1-100之间所有奇数的和是:' + odd); ④ 计算1-100的除了3的倍数以外的总和 // 求1-100之间所有能被3整除的数字的和 var result = 0; for (var i = 1; i <= 100; i++) { if (i % 3 == 0) { result += i; } } console.log('1-100之间所有能被3整除的数字的和:' + result); ⑤ 让用户输入班级人数,然后依次输入每个人的成绩,计算出总成绩和平均成绩 // 1. 先输入班级总人数 var count = prompt('请输入班级总人数'); // 声明一个总分变量 var sum = 0; // 声明一个平均分变量 var average = 0; // 2. 依次输入每个人的成绩,重复代码,用for for (var i = 1; i <= count; i++) { // 输入每个人的成绩,并且保存下来 var score = +prompt('请输入第' + i + '个同学的成绩'); sum += score; } average = sum / count; alert('总分是' + sum); alert('平均分是' + average); ⑦ 一行打印5颗星星 var str = ''; for (var i = 1; i <= 5; i++) { // 用字符串拼接 str = str + '★'; } console.log(str);

    2. 双重for循环

    2.1 双重for循环语法

    for(var i = 1; i <= 次数; i++) { for(var j = 1; j <= 次数; j++) { } } 也叫for循环的嵌套外层控制大循环,内层控制每层的小循环对于我们今天的学的案例而言,外层控制行,内层控制列

    双重for循环的案例

    打印5行5列的星星(由用户输入行和列) var str = '' for (var j = 1; j <= 5; j++) { //外层写五行星星 for (var i = 1; i <= 5; i++) { // 里层写一行五颗星星 str = str + '★'; } // 每行后换行 str = str + '\n' } 打印倒三角 var str = ''; for (var i = 1; i <= 10; i++) { //循环行 // 每一行从他的行数开始计数 for (var j = i ; j <= 10; j++) { //循环列 str += '★'; } str += '\n' } console.log(str); 打印正三角 var str = ''; for (var i = 1; i <= 10; i++) { //行循环10次 // 列数和行数相等,因此给j <= i for (var j = 1; j <= i; j++) { // str += '★'; } str += '\n' } console.log(str); 打印九九乘法表 // 一共有9行,但是每行的个数不一样,因此需要用到双重 for 循环 // 外层的 for 循环控制行数 i,循环9次,可以打印9行 // 内层的 for 循环控制每行公式 j // 核心算法:每一行公式的个数正好和行数一致,j <= i; // 每行打印完毕,都需要重新换一行 var str = ''; for (var i = 1; i <= 9; i++) { //外层循环控制行数,循环9次 for (var j = 1; j <= i; j++) { // 内层循环控制列数(即每一行的个数),每行,行数=列数 str += j + 'x' + i + '=' + i * j + '\t'; } str += '\n' } console.log(str); </script>

    以表格形式

    <style> table { border-collapse: collapse; } td { padding: 10px; border: 1px solid #000; text-align: center; } </style> <script> document.write('<table>') // 不用声明变量 // var str = ''; for (var i = 1; i <= 9; i++) { //外层 for 循环控制行数,循环9次 document.write('<tr>') for (var j = 1; j <= i; j++) { // 内层 for 循环控制列数,每行,行数=列数 document.write('<td>') document.write(j + 'x' + i + '=' + i * j); document.write('</td>') } // str += '\n' document.write('<tr>') } document.write('</table>') </script>

    3. while循环

    语法: 当条件为true执行循环体,直到条件为false,跳出循环

    while (条件) { 循环体 }

    例:

    var i = 1 while (i <= 3) { console.log(i) i++ // 不要忘记写i++ }

    while循环主要用在不确定次数的循环,for循环主要用在确定次数的循环(区别)

    例:

    var answer = prompt('你爱我吗') while (answer != '我爱你') { answer = prompt('你爱我吗') }

    1加到100案例

    var i = 1; var sum = 0; // 2.条件表达式为真,就一直执行, while (i <= 100) { sum = sum + i; // 3. 不加操作表达式,让计数器变量自增,会进入死循环(所以要加) i++; } console.log(sum);

    4. do-while循环

    语法:

    do { 循环体 }while(判断条件)

    如果某个循环体至少需要执行一次,可以用do-while循环

    do { var answer = prompt('你爱我吗') } (answer != '我爱你')

    输入密码案例

    do { var user = prompt('请输入用户名'); var password = prompt('请输入密码'); } while (user != 'hhha' && password != '123456');

    6. for / while / do while的区别

    for:用于具体的次数;while 和 do while:用于不确定次数的循环;while:先判断,在执行,可能一次都不执行;do while:先执行,在判断,一定会执行一次。

    5. continue和break

    continue:结束本次循环,继续下次循环 例子:吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子 for (var i = 1; i <= 5; i++) { if (i == 3) { console.log('这个包子有虫子,扔掉'); continue; // 跳出本次循环,跳出的是第3次循环 (continue 以下的代码一定不会被执行,执行下一个循环) } console.log('我正在吃第' + i + '个包子呢'); } 运行结果

    break:立即跳出所在的循环 例子:吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了 for (var i = 1; i <= 5; i++) { if (i == 3) { break; // 直接退出整个for 循环,跳到整个for下面的语句 } console.log('我正在吃第' + i + '个包子呢'); } 运行结果

    四. js基础-04-day

    1. 数组

    数组是一种数据类型,它是一种可以存放一组数据的数据类型可以存放任意类型的数据数组元素:数组中存放的,数据的名字

    1.1 声明数组

    // 1. 利用new 创建数组 var 数组名 = new Array() // 声明了一个空的数组,记得加 // 2. 利用数组字面量创建数组 var 数组名 = [] // 声明了一个空的数组 var 数组名 = new Array(10, 'abc', true) // 声明了有三个数组元素的数组 var 数组名 = [10, 'abc', true] // 声明了有三个数组元素的数组 // 中括号这种形式叫字面量表示法,用的多 数组的初始化:声明数组并赋值称为

    1.2 访问数组元素(获取数组中的元素)

    通过 索引(下标)来访问什么是下标? 数组中每个数据的编号,从0开始 数组名[下标] // 就可以访问对应的元素

    特殊例子:访问不存在的下标 var arrr = [1,2,3]; console.log(arr[3]); // 输出:undefined

    1.3 遍历数组

    数组的长度 数组.length // 获取的是数组元素的个数 var age =[1,2,3]; console.log(age.length); // 结果是:3

    什么叫遍历数组?就是把数组中每个元素访问

    for (var i = 0; i < 数组.length; i++){ 数组[i] }

    数组最大下标 = 数组.length - 1

    1.4 数组元素拼接成字符串

    var names = ['刘德华', '张学友', '郭富城', '周彦祖'] // 需要把数组的名字展示出来 // 需求是展现成这个样子: 刘德华-张学友-郭富城-周彦祖 var str = '' for (var i = 0; i < names.length; i++) { // 判断是不是最后一个元素 if (i == names.length - 1) { // 如果是最后一个元素则后面不要加- str += names[i] } else { // 其他元素最后要加 - str += names[i] + '-' } } console.log(str)

    1.5 数组扩容(数组中新增元素)

    通过直接修改length可以改变数组长度

    ① length增加了则是增加数组长度(用empty补齐)

    ② length减少了则是减少数组长度(会从最后面的数组删起)

    var nums = [10, 20,30, 40] nums.length-- console.log(nums) // 删掉了最后一个元素40

    也可以通过下标增加元素,例:

    var nums = [10,20,30,40] nums[4] = 50 // 最后增加了个50 console.log (nums); // 输出:nums = [10,20,30,40,50]

    2. 函数

    2.1 函数的概念

    语义化:就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用。

    2.2 函数的使用

    2.2.1 声明函数两种方式(函数的名字用动词,因为他是为了实现功能)

    自定义函数方式(命名函数) ① 语法(这样子叫,是因为他给函数命名了) // 声明定义方式 function fn() {...} // 调用 fn(); 函数表达式(匿名函数) ② 语法(没有命名的) // 这是函数表达式写法,匿名函数后面跟分号结束 var 变量名 = function() {...} // 调用的方式,函数调用必须写到函数体下面

    注意: ① function是声明函数的关键字,必须小写

    ② 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum

    2.1.2 调用函数

    // 调用函数 函数名(); // 通过调用函数名来执行函数体代码 注意: ① 一定要加(); ② 函数不调用,自己不执行

    2.3 函数的参数

    2.3.1 函数参数语法

    形参:函数定义时设置接收调用时传入, 注意:在JavaScript中,形参的默认值是undefined。

    实参:函数调用时传入小括号内的真实数据

    函数参数的运用:

    // 带参数的函数声明 function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔 // 函数体 } // 带参数的函数调用 函数名(实参1, 实参2, 实参3...); 调用的时候实参值是传递给形参的形参简单理解为:不用声明的变量实参和形参的多个参数之间用逗号(,)分隔

    2.3.2 函数形参和实参数量不匹配时

    总结: ① 参数可加可不加; ② 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配。

    2.4 函数的返回值

    2.4.1 return 语句

    返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回 。 // 声明函数 function 函数名(){ ... return 需要返回的值; } // 调用函数 函数名(); // 此时调用函数就可以得到函数体内return 后面的值

    return后面的代码不会被执行return 只能返回一个值,如果有多个值,返回最后一个值return想返回多个数据,用数组在使用 return 语句时,函数会停止执行,并返回指定的值如果函数没有 return ,返回的值是 undefined

    2.4.2 break ,continue ,return 的区别

    break :结束当前的循环体(如 for、while)continue :跳出本次循环,继续执行下次循环(如 for、while)return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

    2.5. arugments

    使用是因为有些时候不知道会传递多少个实参过来

    是一个伪数组

    伪数组:有长度、下标,但是没有数组的那些方法

    注意:只能用在函数内

    它里面保存的是调用函数时传递过来的所有实参(实参用数据,切莫用数组)

    2.6. 函数内也可以调用函数

    函数内也可以调用函数不要来回调,容易死循环

    五. js基础-05-day

    1. 作用域

    语义化:一段程序代码中所用到的名字(变量名)并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域

    1.1全局作用域

    整个( script 标签内部 ) 或者一个独立的 js 文件。

    1.2 局部作用域

    函数里面,因为跟函数有关系,所以也称为函数作用域。

    2. 全局变量和局部变量

    全局变量:声明在全局作用域里的变量就是全局变量 所有地方都可以使用,访问,浏览器关闭才销毁;特殊值:不声明,直接赋值的变量是全局变量。 例子: age = 18; // 即使在局部作用域里,也是全局变量 局部变量:声明在函数内的变量 只在所在的函数内可以使用,函数调用完毕就销毁形参相当于局部变量

    3. 作用域链

    作用域链:

    默认就是0级作用域声明一个函数可以开辟作用域(只有函数可以开辟)0级作用域里声明的函数是1级作用域,1级里面声明的函数开辟的是2级作用域,以此类推如果在2级作用域里访问一个变量,先找自己,自己没有,再找1级,1级没有再找0级,0级没有就报错了统称为:就近原则

    4.预解析

    语义化: JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。

    4.1 变量预解析

    变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。注意:变量的声明一直在函数的声明的上面 console.log(num); // 结果是多少? var num = 10; // // 预解析后的代码 var num; console.log(num); num = 10; // 结果是 undefined

    4.2 函数预解析

    函数的声明会被提升到当前作用域的最上面,但是不会调用函数。 fn(); function fn() { console.log('打印'); } // 预解析后的代码 function fn() { console.log('打印'); } fn(); // 结果是 打印

    4.3 函数表达式(匿名函数)的预解析

    fn(); var fn = function() { console.log('打印'); } // 预解析后代码 // 相当于变量,把变量的声明提前 var fn; fn(); fn = function() { console.log('打印'); } // 结果是:报错提示 ”fn is not a function"

    5. 对象

    语义化:对象是一组无序的相关属性和方法的集合,就是JS里的一种数据类型。

    为什么需要变量: 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。

    如果要保存一个人的完整信息呢?要用到对象

    相同点不同点对象都是把一堆数据保存在一起比数组取值清晰,放属性和方法数组只放属性

    例:保存一个人的姓名、年龄、身高

    var arr = ['蔡徐坤', 22, '183'] arr[0] // 你能一眼看过去就知道取姓名吗? arr[1] // 也无法一眼看过去就知道事取年龄 arr[2] var p = { name:'蔡徐坤', age: 22, height:183 , doSkill: function() { console.log('唱歌'); } } p.name; p.age; p.height; p.doSkill;

    对象的属性

    对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项

    对象的方法

    对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项

    创建对象的三种方法

    5.1 字面量创建对象{}

    5.1.1 对象的创建

    怎么创建:{ } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示 ;代码 var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } }; // star 是创建的对象 特点: ① 里面的属性我们采取键值对的方式,键:属性,值:属性值;有点像css代码 ② 不同的是,每个属性之间用,隔开 ③ 冒号后面跟的是一个匿名函数

    5.1.2 对象的使用

    调用对象的属性(对象名加属性) console.log(star.name) // 调用名字属性,用`.`代表的 console.log(star['name']) // 调用名字属性 调用对象的方法(对象名.方法()) star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号

    5.1.3 变量、属性、函数、方法的区别

    变量和函数,就比较独立,直接声明,也是直接调用

    属性和方法,更有归属感,它们属于某个对象,所以要使用先得先找到这个对象,再点属性或者点方法

    var dog = { name: '可可', age: 5, type:'阿拉斯加', bark: function () { console.log('one one one') } } dog.name dog.age dog.type dog.bark()

    5.2 利用 new Object 创建对象

    1.创建空对象 var andy = new Object(); // Object,首字母大写 2.给空对象添加属性和方法 var andy = new Object(); // Object,首字母大写 andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); }

    5.3 利用构造函数创建对象

    5.3.1 构造函数语法

    语义化:我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面

    构造函数的封装格式:

    function 构造函数名(形参1,形参2,形参3) { //构造函数名首字母大写;形参接受实参传递过来的值,并把他们依次赋值给属性和方法 this.属性名1 = 参数1; this.属性名2 = 参数2; this.属性名3 = 参数3; this.方法名 = 函数体; }

    构造函数的调用格式

    var obj = new 构造函数名(实参1,实参2,实参3) (一定要用new调用格式)

    以上代码中,obj即接收到构造函数创建出来的对象。

    例:

    function Person (name, age, sex) { this.name = name this.age = age this.sex = sex this.sing = function (song){ console.log('唱歌:' + song) } } var ldh = new Person('刘德华',16,'男') ldh.sing('冰雨')

    5.3.2 new 关键字做的事

    1.创建了一个新的空对象2.提供this关键字找到这个对象(让this指向这个对象)3.在函数最后返回这个对象(所以构造函数对象中不用加return) function f1 () { } var res1 = f1() // res1最终是 undefined var res2 = new f1() // res2 最终是一个空的对象 因为new创建了空对象,并返回了这个对象

    六. js基础-06-day

    1. 遍历对象

    for…in语法

    for (var key in 对象名) { console.log(key); console.log(对象名[key]) // key 拿到的是所有属性名 // 对象名[key] 就拿到所有的属性值 }

    数组也可以用,数组的key 代表索引号,值代表索引号对应的值

    一. 内置对象

    js中的对象:自定义对象 、内置对象、 浏览器对象作用:帮助我们快速开发查阅文档:MDN

    2. Math 对象

    Math 对象提供了方便做数学运算的一些功能

    2.1 属性:

    Math.PI: 获得圆周率

    2.2 方法:

    Math.abs(): 得到绝对值Math.max(): 找出一堆数字中的最大值Math.min(): 找出一堆数字中的最小值 取整Math.ceil(): 向上取整,也就是取整后的结果比原来的值要大Math.floor():向下取整,也就是取整后的结果比原来的值要小Math.round():四舍五入取整,如果小数点是.5那么往大了取,其他其他都是四舍五入 随机数Math.random(): 随机数,获得0-1之间不包括1的随机数 [0,1) 如果要得到任意范围的随机数算法: Math.floor( Math.random() * ( max - min + 1 ) ) + min

    3. 日期对象

    2.1 使用,new一个对象

    Date构造函数

    所以如果要拿到日期对象,需要 new 出一个对象来

    var now = new Date() // 获取当前时间 var time = new Date(2020,10,11) // 指定了一个日期,但是这个日期是2020年11月11日 var time = new Date('2020-10-11') // 就是2020年10月11日,也可以写成'2020/10/11'

    2.2 方法:

    日期对象.getFullYear() : 获取年日期对象.getMonth(): 获取月,这是获得从0开始的月,要转成现实中用的月份,记得要 + 1日期对象.getDate() : 获取日日期对象.getDay(): 获取星期几,星期一到星期六就是获取1-6,只有星期天获取0日期对象.getHours(): 获取时日期对象.getMinutes(): 获取分日期对象.getSeconds(): 获取秒

    2.3获得毫秒数(时间戳)

    获得1970年1月1日0点到现在已经过了多少的毫秒数

    如何获取?

    // 实例化Date对象 var now = new Date(); // 1. 用于获取对象的原始值 console.log(date.valueOf()) console.log(date.getTime()) // 2. 简单写可以这么做 var now = + new Date(); // 3. HTML5中提供的方法,有兼容性问题(用的最多) var now = Date.now();

    课堂案例1:拿到当前时间,输出: 今年是:XXX年XX月XX日 星期几

    课堂案例2:拿到当前时间,输出 时:分:秒 (不足10的要在前面补齐0)

    // 格式化日期 时分秒 var date = new Date(); console.log(date.getHours()); // 时 console.log(date.getMinutes()); // 分 console.log(date.getSeconds()); // 秒 // 要求封装一个函数返回当前的时分秒 格式 08:08:08 function getTimer() { var time = new Date(); var h = time.getHours(); h = h < 10 ? '0' + h : h; var m = time.getMinutes(); m = m < 10 ? '0' + m : m; var s = time.getSeconds(); s = s < 10 ? '0' + s : s; return h + ':' + m + ':' + s; } console.log(getTimer());

    4. 数组对象

    4.1 检测是不是数组

    数据 instanceof Array

    如果是得到true,否则得到false console.log(10 instanceof Array) // false console.log([10] instanceof Array) // true

    Array.isArray()

    如果是得到true,否则得到false console.log(Array.isArray(10)) // false console.log(Array.isArray([10])) // true

    4.2 添加数组元素

    数组.push()

    传入要添加的元素,如果有多个元素,用逗号隔开

    var arr = [10,20,30] arr.push(40) // 在最后添加了40 arr.push(50,60) // 在最后添加了50和60,变成了 [10,20,30,40,50,60]

    它是往数组最后添加

    返回值是添加后的数组新长度

    数组.unshift()

    传入要添加的元素,如果有多个元素,用逗号隔开

    var arr = [10,20,30] arr.unshift(100) // 在前面添加了100 arr.unshift(1000,2000) // 在前面添加了1000和2000 变成 [1000,2000,100,10,20,30] console.log(arr.unshift(1000,2000)) // 6,返回的是数组的新长度 console.log(arr) // 返回 [1000,2000,100,10,20,30]

    它是往数组最前面添加

    返回值是添加后的数组新长度

    案例 筛选数组

    // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面 var arr = [1500, 1200, 2000, 2100, 1800]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] < 2000) { // newArr[newArr.length] = arr[i]; newArr.push(arr[i]); } } console.log(newArr);

    4.3 数组删除元素

    数组.pop() 删除数组的最后一个元素返回值是被删除的元素注意:不要加参数 数组.shift() 删除数组第一个元素返回值是被删除的元素注意:不要加参数

    4.4 数组的排序方法

    数组.reverse()

    反转数组 var arr = ['pink', 'red', 'blue']; arr.reverse(); console.log(arr);

    数组.sort()(冒泡排序)

    排序数组,按从小到大排列

    默认情况下,它比较的不是数字大小,而是先比较第一位,小的放前面,如果一样就比较第二位,小的放前面,还一样就比较第三位,以此类推

    如果希望按照数字大小从小到大排列

    数组.sort( function (a, b) { // return a - b // 从小到大 return b - a // 从大到小 } )

    4.5 数组根据元素查找下标

    数组.indexOf(元素) 从前往后找,找到第一个匹配的元素的下标如果找不到返回-1 数组.lastIndexOf() 从后往前找,找到从后往前第一个匹配的元素的下标如果找不到返回-1 案例:数组去重 // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。 // 1.目标: 把旧数组里面不重复的元素选取出来放到新数组中, 重复的元素只保留一个, 放到新数组中去重。 // 2.核心算法: 我们遍历旧数组, 然后拿着旧数组元素去查询新数组, 如果该元素在新数组里面没有出现过, 我们就添加, 否则不添加。 // 3.我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素 // 封装一个 去重的函数 unique 独一无二的 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']) var demo = unique(['blue', 'green', 'blue']) console.log(demo);

    4.6 转换成字符串

    数组.toString()

    可以把数组每个元素用逗号连接,转成字符串

    例:

    var arr = ['red','blue','green'] var str = arr.toString() console.log(str) // 'red,blue,green'

    数组.join()

    可以把数组每个元素用你传入的符号连接,转成字符串

    如果不传符号就是逗号连接

    例:

    var arr = ['red','blue','green'] var str = arr.join('-') console.log(str) // red-blue-green

    5. 字符串

    5.1 基本包装类型

    原理:基本包装类型就是把简单数据类型(Number,String,Boolean)包装成为复杂数据类型,这样基本数据类型就有了属性和方法js 会把基本数据类型包装为复杂数据类型,其执行过程如下 : // 1. 生成临时变量,把简单类型包装为复杂数据类型 var temp = new String('andy'); // 2. 赋值给我们声明的字符变量 str = temp; // 3. 销毁临时变量 temp = null;

    5.2 字符串的不可变

    字符串不可改 (给他改值,相当于在内存中创建了一个新的空间,因此,一定赋值,才有用) // 字符串的不可变性 var str = 'andy'; str[0] = 'b' console.log(str[0]); // a ,字符串相当于一个伪数组,根据下标改他的字符,结果不变 console.log(str); // andy 大量拼接字符串耗性能

    5.3 根据字符返回位置(下标)

    indexOf('查找的字符',开始的位置) ① 开始的位置:就是下标; ② 如果没有这个字符,返回-1; ③ 只返回,从开始的位置到找到的第一个相匹配的字符的下标 案例:求某个字符出现的位置和次数 // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数 // 核心算法:先查找第一个o出现的位置 // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找 // 因为indexOf 只能查找到第一个,所以后面的查找,一定是当前索引加1,从而继续查找 var str = "oabcoefoxyozzopp"; var index = str.indexOf('o'); var num = 0; // console.log(index); while (index !== -1) { console.log(index); num++; index = str.indexOf('o', index + 1); } console.log('o出现的次数是: ' + num);

    5.4 根据位置找到字符

    str[i]

    var str = 'andy'; str[index] console.log(str[0]); // a 案例:统计一个字符串中出现次数最多的字符 // 有一个对象 来判断是否有该属性 对象['属性名'] var o = { age: 18 } if (o['sex']) { console.log('里面有该属性'); } else { console.log('没有该属性'); } // 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数。 // o.a = 1 // o.b = 1 // o.c = 1 // o.o = 4 // 核心算法:利用 charAt() 遍历这个字符串 // 把每个字符都存储给对象, 如果对象没有该属性,就为1,如果存在了就 +1 // 遍历对象,得到最大值和该字符 var str = 'abcoefoxyozzopp'; var o = {}; for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); // chars 是 字符串的每一个字符 if (o[chars]) { // o[chars] 得到的是属性值 o[chars]++; } else { o[chars] = 1; } } console.log(o); // 2. 遍历对象 var max = 0; var ch = ''; for (var k in o) { // k 得到是 属性名 // o[k] 得到的是属性值 if (o[k] > max) { max = o[k]; ch = k; } } console.log(max); console.log('最多的字符是' + ch); </script>

    5.5 concat:连接字符串,

    concat(str1,str2...)

    将多个字符串相连相当于+,+更常用

    5.6 substr:截取字符串

    字符串.substr(start,length) - 参数1:从哪个下标开始截 - 参数2:截取多少个长度

    5.7 replace: 替换字符

    作用:replace() 方法用于在字符串中用一些字符替换另一些字符,语法:replace(被替换的字符串, 要替换为的字符串) 参数1:要被替换的内容参数2:替换成什么内容默认只能替换到第一个 l案例:如何全部替换 // 1. 替换字符 replace('被替换的字符', '替换为的字符') 它只会替换第一个字符 var str = 'andyandy'; console.log(str.replace('a', 'b')); // 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 * var str1 = 'abcoefoxyozzopp'; while (str1.indexOf('o') !== -1) { str1 = str1.replace('o', '*'); } console.log(str1);

    5.8 split:切割成数组

    // 2. 字符转换为数组 split('分隔符') 前面我们学过 join 把数组转换为字符串 var str2 = 'red, pink, blue'; console.log(str2.split(',')); // 中间用什么隔开,就用什么符号 var str3 = 'red&pink&blue'; console.log(str3.split('&')); - 切割成数组 - 根据你传入的符号来切割成数组

    二. 值类型和引用类型

    所有的基本数据类型都是值类型所有的复杂数据类型都是引用类型值类型: 传递数据时,传递的就是值 引用类型: 传递数据时,传递的是地址 只要遇到 new Array() 或者 [] 都会在堆里开辟新空间只要遇到 new Object() 或者 {} 都会在

    Processed: 0.010, SQL: 8