初识JavaScript
因为文章字数的影响，无法展示全部内容，更多内容，请跳转至我的CSDN或者我的个人站点。 我的CSDN 我的个人站点-JavaScript+Jquery知识点速查
浏览器执行js简介
- 渲染引擎：解析css和html
- js引擎：编译js代码，逐行解析
- js是基于对象和事件驱动的松散性，解释性语言。
<script type="null">
alert('我是编程语言，用来控制电脑网页弹出你好'); alert('我是编程语言，用来控制电脑网页弹出你好');
</script>
各个浏览器的js引擎也不相同，所以也会有兼容行问题。
js组成
- EcmaScript:JavaScript基本语法
- DOM：页面文档对象模型（对页面中的文档进行操作）
- BOM：浏览器对象模型（对浏览器窗口做出操作）
书写位置
- 行内式
<!-- 1.行内式的js 直接写到元素内部 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
- 内嵌式
- 最好放到html下部分
<script>
// alert('沙漠骆驼');
</script>
- 外部
- 结构更加易读。
<!-- 3.外部js写法 双标签 -->
<script src="my.js"></script>
javascript标签中无需写代码，否则会被忽略！
思维导图
JS中 let和var的区别
- ES6 新增了
let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。 先看个var的常见变量提升的面试题目：
题目1：
var a = 99; // 全局变量a
f(); // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。
console.log(a); // a=>99, 此时是全局变量的a
function f() {
console.log(a); // 当前的a变量是下面变量a声明提升后，默认值undefined
var a = 10;
console.log(a); // a => 10
}
// 输出结果：
undefined
10
99
ES6可以用let定义块级作用域变量
在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。 例如：
{
var i = 9;
}
console.log(i); // 9
ES6新增的let，可以声明块级作用域的变量。
{
let i = 9; // i变量只在 花括号内有效！！！
}
console.log(i); // Uncaught ReferenceError: i is not defined
let 配合for循环的独特应用
let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。看一个常见的面试题目：
for (var i = 0; i <10; i++) {
setTimeout(function() { // 同步注册回调函数到 异步的 宏任务队列。
console.log(i); // 执行此代码时，同步代码for循环已经执行完成
}, 0);
}
// 输出结果
10 共10个
// 这里面的知识点： JS的事件循环机制，setTimeout的机制等
如果把 var改成 let声明：
// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i); // i 是循环体内局部作用域，不受外界影响。
}, 0);
}
// 输出结果：
0 1 2 3 4 5 6 7 8 9
let没有变量提升与暂时性死区
用let声明的变量，不存在变量提升。而且要求必须 等let声明语句执行完之后，变量才能使用，不然会报Uncaught ReferenceError错误。
console.log(aicoder); // 错误：Uncaught ReferenceError ...
let aicoder = 'aicoder.com';
// 这里就可以安全使用aicoder
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。 总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
let变量不能重复声明
let不允许在相同作用域内，重复声明同一个变量。否则报错： Uncaught SyntaxError: Identifier 'XXX' has already been declared
例如：
let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared
总结
ES6的let让js真正拥有了块级作用域，也是向这更安全更规范的路走，虽然加了很多约束，但是都是为了让我们更安全的使用和写代码。
字面量
在计算机科学中，字面量（Literal）是在计算机中描述 事/物
javascript是否写分号结尾
- 根据具体情况实际选择
- 写和不写都可以
javaScript输入输出语句
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
| doucument.write() | 页面输出内容，识别标签 | 浏览器 |
注意：
alert主要用来显示消息给用户，console.log()用来给程序员查看自己运行时的消息。
prompt取过来的值是字符类型的
变量
- 属性值：var(variable的缩写)
- 装数据的盒子
变量语法拓展
- 更新变量：变量值以最后一次赋的值为准
- 同时声明多个变量：声明一个变量后，中间用逗号隔开
- let声明变量 let即关键字（let:允许，许可，让，要），所谓关键字是系统专门提供的用来声明的变量的词语
var myfirstname = 99,
kjlj = 54;
声明变量的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age;console.log(age); | 只声明不赋值 | undefined（未定义） |
| console.log(age); | 不声明，不赋值，直接使用 | 报错 |
| age = 10;console.log(age); | 不声明，只赋值 | 10 |
变量的命名规范
- 由
字母，数字，下划线，美元符号组成 - 严格区分大小写
- 不能以数字开头。18age是错误的
- 不能是
关键字，保留字命名：var,fo,while - 变量名必须有意义
- 遵循
驼峰命名，首字母小写，后面单词的首字母大写:myFirstName - 推荐翻译网站：
有道
常量
- 概念：使用const声明的变量为‘常量’
- 使用场景：当一个变量永远不会改变的时候，使用 const来声明，而不是let.
- 命名规范：和变量一致
注意：常量不允许重新赋值，声明的时候必须赋值（初始化） 小技巧：不需要重新赋值的数值用const
变量声明关键字总结
let - 现在实际开发的声明方式（2022） var - 以前的声明变量的方式，会有很多问题（2019） const -类似于let ,但是变量值无法被修改
数据类型
- js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的。
- js是动态语言，变量的数据类型是可以变化的。
- typeo检测变量的数据类型
- 可以通过控制台输出的字体颜色来判断到底是哪个字符类型（蓝色，数字；黑色，字符串；灰色 ，未定义）
数据类型的分类
简单数据类型（Number,String,Boolean,Underfined,Null）引用数据类型（object）
简单数据类型（栈）
| 简单数据类型 | 说明 | 默认值 | typeof结果 |
|---|---|---|---|
| Number | 数字型，包含整型值和浮点型值，如：21，0.21 | 0 | |
| Booolean | 布尔值类型，如true,false，等价于0，1 | false | |
| symbol | 定义的值具有唯一性 | ||
| string | 字符串类型 | “” | |
| Undefined | var a;声明了变量a,但没有给值，此时a=undefined | undefined | undefined |
| Null | var a= null;声明了变量a为空值 | null | object |
数字型Number
- 可以是整数，小数，正数，负数。
- 最常见的有二进制，八进制，十六进制。
isNaN（）:这个方法用来判断非数字，并且返回一个值，如果是数字返回 false ，如果不是返回的是true。
特殊值
Infinity，无穷大-Infinity, 无穷小Number.Max_Value，数字型最大值Number.Min_Value，数字型最小值NaN，缩写：not a number，代表一个非数值
//1.八进制 0~7
var num1 = 010;
console.log(num1);
//2.十六进制 0~9 a~f
var num2 = 0x9;
console.log(num2);
//数字型最大值
console.log(Number.MAX_VALUE);
//无穷大
console.log(Number.MAX_VALUE * 2); //Infinity
//数字型的最小值
console.log(Number.MIN_VALUE);
//无穷小
console.log(Number.MIN_VALUE * 2); //-Infinity
//非数字 NaN
NaN代表一个计算错误。它是一个不正确的或者未定义的数学操作所到的的结果
NaN是
粘性的。任何对NaN的操作都会返回NaN在Js中八进制前面加
0，十六进制前面加0X
未定义类型（undefined）
未定义是比较特殊的类型，只有一个值 undefined.
- 什么情况下出现未定义类型 只声明变量，不赋值的情况下，变量默认值为 undefined,一般很少【直接】为某个变量赋值为
字符串型String
- 字符串可以是引导中的任意文本，其语法为双引号（“ ”），和单引号（' '）或反引号包裹的数据( ``` `)
html使用双引号，js推荐使用单引号- 字符串嵌套（外单内双）
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符 |
| \ | 斜杠| |
| ' | '单引号 |
| '' | ''双引号 |
| \t | tab缩进 |
| \b | 空格，b是blank的意思 |
注意事项：
- 引号必须成对出现
- 单引号和双引号可以相互嵌套，口诀
外双内单，或者外单内双- 必要时可以使用转义符
\,输出单引号或双引号
引用数据类型（堆）
- 包括：
1、对象（Object）类型，是一组由键、值组成的无序集合；数据类型 object
2、数组（Array）类型，是一组按顺序排列的数据的集合；数据类型 object
3、函数（Function）类型，是一段具有特定功能的代码块。数据类型 function
字符串拼接
引号拼接字符串(ES5)
场景：+运算符可以实现字符串的拼接。
口诀：数字相加，字符相连
<script>
//1.检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.length); //15
//2.字符串拼接+,'数值相加，字符相连'
console.log('沙漠' + '骆驼');
console.log('小李' + 18 + '岁');
var age = 18;
console.log('小李' + age + '岁');
console.log(24 + 24); //48
</script>
模板字符串(ES6)
- 使用场景： 拼接字符串和变量 在没有它之前，要拼接字符串比较麻烦
- 语法
反引号··内容拼接变量时，用${}包住变量
<script>
let age = 18
document.write(`我今年${age}岁了`)
var nan = 10 ,nv = 44;
console.log(`本班男生${nan}人,女生${nv}人，共计${nan + nv}人`);
</script>
数据类型的转换
隐式转换
某些运算符（除加法四则运算），if条件被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
- 规则：
+号两边只要有一个是字符串，就会把另外一个转成字符串（拼接） 除了+以外的算术运算符，比如 - * /等都会把数据转换成数据类型。 - 缺点 转换类型不明显，靠经验总结
- 小技巧
+号作为正号解析可以转换成字符串类型 任何数据和字符串相加的结果都是字符串
加法：操作数是number型；
操作数是undefined,null,boolean,隐式调用
Number()进行数据类型的转换
强制转换
转换为字符串
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转换成字符串 | var vm = 1;alert(num.toString（）) |
| String()强制转换 | 转换成字符串 | var num =1;slert(String(num)); |
| 加号 拼接字符串 | 和字符串拼接的结果都是字符串 | var num =1;alert(num+"我是字符串") |
<script>
// 1.把数字类型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2.利用String(变量)
console.log(String(num));
//3.利用+拼接字符串的方法实现转换效果，隐式转换
console.log(num + '');
</script>
转换为数字型（重点）
| 方式 | 说明 | 案例 |
|---|---|---|
| parselnt(string) | 将stirng类型转成整数数值型 | parselnt('78') |
| parseFloat(string) | 将string类型转换成浮点数数值型 | parseFloat('78.21') |
| Number()强制转换函数 | 将string类型转换成数值型 | Number('12') |
| js隐式转换（. * / ） | 利用算数运算隐式转换为数值型 | '12'-0 |
转换为布尔型
- 代表
空，否定的值会被转换成false，如''（空字符串），0，NAN,null,underfined - 其余值都会转换成true
- 隐式转换：
- 有字符串的加法
""+1，结果是"1" - 减法 - （像大多数运算一样）只能用于数字，它会使空字符串""转换为 0
- null经过数字转换后会变为
0 - underfined经过数字转换后会变为
NaN
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean（）函数 | 其他类型转换成布尔值 | Boolean('true') |
运算符
前置递增
- 变量先加一，然后返回结果
var num = 0
++num
后置递增
- 先表达式返回原值，后面变量再自加一
var num = 0
num++
比较运算符
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| == | 判断号（会转型） | 37 == 37 | true |
| === !== | 全等要求值和数据类型都一致 | 37 === ‘37’ | false |
逻辑运算符
| 逻辑运算符号 | 说明 | 案例 |
|---|---|---|
| && | 逻辑与，and | true&&false |
| || | 逻辑或，or | true||or |
| ! | 逻辑非，not | !true |
逻辑中断
- 短路运算的原理：当有多个表达式时，左边的表达式可以确定结果时，就不再继续运算右边表达式的值；
逻辑与
- 语法：表达式1&&表达式2
- 如果第一个表达式值为真，则返回表达式2
- 如果第一个表达式值为假，则返回表达式1
逻辑或
- 语法：表达式1 | | 表达式2
- 如果第一个表达式值为真，则返回表达式1
- 如果第一个表达式值为假，则返回表达式2
赋值运算符
- 概念：用来把数据赋值给变量的运算符
| 赋值运算符号 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var user='sss' |
| +=，-= | 加，减一个数后再赋值 | var age=10;age+=5;//5 |
| * =，/=,%= | 乘，除，取模后赋值 | var age=2;age * =5//10 |
运算符优先级
| 优先级 | 运算符 | 顺序 | ||
|---|---|---|---|---|
| 1 | 小括号 | （） | ||
| 2 | 一元运算符 | ++，-，！ | ||
| 3 | 算数运算符 | 先 * / %后+ - | ||
| 4 | 关系运算符 | > >= < <= | ||
| 5 | 相等运算符 | == != === !== | ||
| 6 | 逻辑运算符 | **先&& 后 | ** | |
| 7 | 赋值运算符 | = | ||
| 8 | 逗号运算符 | . |
注意：
&&的权重比||高
不同数字类型运算符之间的操作
比较运算符 ： > ,< >= , <= ,== ,!=, ===, !==,返回值是布尔类型
- 都是number型，大小进行比较
- 都是string型，按位按照
ASCII表1进行比较- number,string :隐式调用Number()把string 转为number进行计算
==:值相等===:值相等，数据类型相同
console.log(2 > "100"); //false "100"转为 100 与2进行比较
console.log("234" > "100"); //true 这种比较为ASCII码比较，依次取每个字符，字符转为ASCII码进行比 较
console.log("15" > "9"); //false
console.log(15 > 9); //ture
console.log(12 == "12"); //true
console.log(1 == true); //ture Number(true)转换成1
console.log(0 === false); //false
console.log(0 == undefined); //false Number(undefined)转换成NaN
console.log(0 == ""); //true
console.log(0 == " "); //true
算术运算符：+，-，*，/，%，++，--，**
console.log(1 + 133); //134
console.log(1 + "133"); //1133
console.log(1 - "133"); //-132
console.log(1 - "abc"); //NAN 直接是非数字类型
逻辑运算符：隐式调用Boolean（）判断真假
0,false,null,undefined,NaN,""这些为假&&：返回第一个假值，运用（短路原则）会返回第一个假值||: 返回第一个真值（短路原则）
var num = 10, bool = true, str = "abc";
console.log(num && bool && 0); //0
console.log(num && str); //"abc"
console.log(bool && str); //"abc"
console.log(0 && str); //0
console.log(false && num); //false
console.log(undefined && num); //undefined
console.log(str && false); //false
console.log(0 && ""); //0
console.log("" && 0); // ""
console.log(num || bool || 0); //10
console.log(num || str); //10
console.log(bool || str); //true
console.log(0 || str); //"abc"
console.log(false || num); //10
console.log(undefined || num); //10
console.log(str || false); //10
console.log(0 || ""); //"" 没真值，只能返回第二个
console.log("" || 0); //0
取反：！
真变假，假变真
var num = 10, bool = true, str = "abc";
console.log(!true); //false
console.log(!0); //true
console.log(!str); //false
短路的代码不会执行
console.log(str && num++); //10 && 期望返回第一个假值,没有假值，就返回最后一个真值,两个都是真值，返回第二个num++
console.log(num); //11
console.log(false && ++num); //false
console.log(num); //11 被短路的代码不运行了，所以还是11
console.log(num++ || 0); //11 最后做自增运算 12
console.log(0 || ++num); //13
console.log(0 || str > num); //fales 返回 str>num 的结果NaN
console.log(num); //13
表达式和语句
- 表达式： 表达式是可以被求值的代码，javaScript引擎会计算出一个结果
let x = 7
3+4
num++
- 语句； 语句是一段可以执行的代码。 比如：prompt( )可以弹出一个输入框，还有if语句 for循环语句等等
区别： 表达式：表达式可以被求值，所以它可以写在赋值语句的右侧 语句：而语句不一定有值，比如alert()for 和break等语句就不能用于赋值。
流程控制
- 顺序结构
- 分支结构
- 根据不同的条件，执行不同的路径，得到不同的结果。
if语句
<script>
//1. if 的语法结构
// if (条件表达式) {
// //执行语句
// }
if (3 > 5) {
alert('沙漠骆驼');
}
</script>
案例（判断闰年）
- 算法：可以被4整除且不能整除100的为润年或者可以被400整除的就是润年
三元表达式
条件表达式？表达式1：表达式2
- 如果条件表达式结果为正，则返回表达式一的值，否则返回表达式二的值
数字补零案例
<script>
var time = prompt('输入数字')
var resule = time < 10 ? '0' + time : time;
alert(resule);
</script>
switch语句
- switch语句是多分支语句，可以实现多对一。
<script>
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句
}
在判断条件中，条件为真的情况
- 如果是数字：0是否，1是真
- 如果是字符串：字符串不空是真，字符串空是假
if/else和switch的区别
- 一般情况下可以相互替换
- switch...case语句通常在处理case为比较确定值的情况，而if...else..语句更加灵活，通常用与范围判断（大于，等于某个范围）
- switch语句进行条件判断后直接执行程序的条件语句，效率更高是。而if...else.语句有几种条件，就得判断多次。
- 分支比较小的情况下，if...else语句执行效率比switch高。
- 分支比较多的情况下，switch语句执行效率高，而且结构清晰。
- 循环结构
- 执行规律任务，重复执行多次语句
for循环
掌握 for 循环语句，让程序具备重复执行能力
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
- 实现循环的 3 要素
<script>
// 1. 语法格式
// for(起始值; 终止条件; 变化量) {
// // 要重复执行的代码
// }
// 2. 示例：在网页中输入标题标签
// 起始值为 1
// 变化量 i++
// 终止条件 i <= 6
for(let i = 1; i <= 6; i++) {
document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
}
</script>
-
变化量和死循环，
for循环和while一样，如果不合理设置增量和终止条件，便会产生死循环。 -
跳出和终止循环
<script>
// 1. continue
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
// 2. break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break // 退出结束整个循环
}
console.log(i)
}
</script>
结论：
JavaScript提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。- 起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
- 当如果明确了循环的次数的时候推荐使用
for循环,当不明确循环的次数的时候推荐使用while循环
注意：
for的语法结构更简洁，故for循环的使用频次会更多。
循环嵌套
利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。
实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：
// 1. 外面的循环 记录第n天
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
// 2. 里层的循环记录 几个单词
for (let j = 1; j < 6; j++) {
document.write(`记住第${j}个单词<br>`)
}
}
记住，外层循环循环一次，里层循环循环全部
倒三角
// 外层打印几行
for (let i = 1; i <= 5; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
document.write('★')
}
document.write('<br>')
}
九九乘法表
样式css
span {
display: inline-block;
width: 100px;
padding: 5px 10px;
border: 1px solid pink;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
background-color: rgba(255, 192, 203, .1);
text-align: center;
color: hotpink;
}
javascript
// 外层打印几行
for (let i = 1; i <= 9; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
// 只需要吧 ★ 换成 1 x 1 = 1
document.write(`
<div> ${j} x ${i} = ${j * i} </div>
`)
}
document.write('<br>')
}
while循环
- 条件为true，执行循环语句，否则推出循环
do while循环
- do while循环其实是while循环的一个变体，该循环会先执行一次代码块，然后对条件表达式进行判断，如果为真，就会重复执行循环体，否则退出循环。
continue关键字
- 用于立即跳出本次循环，继续下一次循环（本次循环中，continue之后的代码就会少执行一次）
break关键字
- 立即跳出整个循环（循环结束）
数组（Array）
知道什么是数组及其应用的场景，掌握数组声明及访问的语法。
- 数组就是一组数据的集合，存储在单个变量下的优雅方式。
- 数组里面的数据一定要逗号隔开
- 数组里面的数据比如，1，2，我们称为数组元素。
- 任意数据类型都可以放入
- 数组在 JavaScript 中并不是新的数据类型，它属于对象类型。
<script>
// 1. 语法，使用 [] 来定义一个空数组
// 定义一个空数组，然后赋值给变量 classes
// let classes = [];
// 2. 定义非空数组
let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>
通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。
创建数组
- 利用new 创建数组
<script>
var arry = new Array(); //创建了个一空数组
</script>
- 利用数组字面量创建数组
<script>
var arr = []; //创建了一个空数组
var arr1 = [1, 2, 'pingk老师', true];
//数组里面的数据一定要逗号隔开
//数组里面的数据比如，1，2，我们称为数组元素。
</script>
- 进阶
<script>
var arr = new Array(2);//这个2表示数组长度为2，里面有两个空值
var arr1 = new Array(2,3);//等价于[2,3]
console.log(arr1);
</script>
获取数组元素
1.数组的索引
- 下标：用来访问数组元素的序号（数组下标从零开始）
console.log(arr1[2]);
检测数组方法
- Instanceof 运算符 它可以用来检测是否是数组
<script>
var arr = [];
var obj ={};
console.log(arr instanceof Array);//true
console.log(ogj instanceof Array);//false
</script>
- Array.isArray(参数)；H5新增的方法，ie9以上版本支持
console.log(Array.isArray(arr));//true
遍历数组
<script>
var arr = ['red', 'green', 'blue'];
for (var i = 0; i <= 2; i++) {
console.log(arr[i]);
}
</script>
案例（求数组最大值）
<script>
var max = 1;
var arr = [1, 2, 3, 66, 78, 234, 123, 12, 345, 435];
for (var i = 0; i <= arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
console.log(max);
案例（数组转换为分割字符串）
<script>
var str = '';
var arr = ['red', 'blue', 'green'];
var step = '|'
for (var i = 0; i < arr.length; i++) {
str += arr[i] + step;
}
console.log(str);
</script>
数组长度
- 数组名后面加**.length**属性可以得到数组长度；
- 数组长度是元素个数，不要跟索引号混淆；
- arr.length是动态检测数组元素的个数；
<script>
var arr = ['red', 'green', 'blue'];
for (var i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}
</script>
数组新增元素
- 可以通过修改length长度新增数组元素。
<script>
var arr = ['red', 'blue', 'green'];
console.log(arr.length);
arr.length = 5; //数组长度修改为5
console.log(arr);//修改后最后两个元素没有给值，所以是undefined
</script>
- 可以通过修改数组索引新增数组元素（追加数组元素）
<script>
var arr1 = ['red', 'blue', 'green'];
arr1[3] = 'pink';
console.log(arr1);
arr1[0] = 'yellow'; //替换原来的数组元素
</script>
筛选数组
- 方法一
<script>
var arr = [2, 0, 1, 22, 121, 454, 3, 35, 435, 45];
var newArry = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArry[j] = arr[i];
j++;
}
}
console.log(newArry);
</script>
- 方法二
- 注意：方法二用新数组的长度来代替方法一中的j变量；
<script>
var arr1 = [2, 0, 1, 22, 121, 454, 3, 35, 435, 45];
var newArry1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr1[i] >= 10) {
newArry1[newArry1.length] = arr[i];
}
}
console.log(newArry1);
</script>
操作数组
数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：
- push 动态向数组的尾部添加一个单元
- unshit 动态向数组头部添加一个单元
- pop 删除最后一个单元
- shift 删除第一个单元
- splice 动态删除任意单元
使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 1. push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
arr.push('Vue')
// 2. unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// 3. splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// 4. pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
冒泡排序
- 是一种算法，把一系列的数据按照一定的顺序进行排列显示（从小到大，或者从大到小），一次比较两个元素，如果顺序错误就把他们交换过来，走访数列的工作是重复进行的，直到没有需要再交换，也就是说该数列已经排序完成。
<body>
<script>
let arr = [6, 23, 1, 56, 78, 86]
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 + 1]
arr[j + 1] = arr[j]
arr[j] = temp
}
}
}
console.log(arr);
</script>
</body>
注意：一共需要的趟数是 arr. length-1,每一趟需要交换的次数是 arr.length -i - 1。i是外侧循环
数组重要方法操作
<script>
var arr = [1, 2, 3, 4, 5]
console.log(arr);
// forEach 遍历
arr.forEach(function (v, i) {
// console.log(v);
// console.log(i);
})
//push向数组末尾添加一个或者多个元素,会改变原数组
arr.push("a", "b", "10")
console.log(arr);
//every() 当元素全部满足条件的时候返回true，有一个不满足就会返回false
var result = arr.every(function (v, i) {
return v > 5;
})
//some()只要有一个满足就返回true
console.log(result);
var result1 = arr.some(function (v, i) {
return v > 5;
})
console.log(result1);
//splice(位置(元素下标)，删除的元素个数) 删除 会影响原数组
arr.splice(2, 2)
console.log(arr);
//findIndex返回满足条件的元素，首次出现的位置 ,如果没有就返回-1
var result2 = arr.findIndex(function (v, i) {
return v == 5;
})
console.log(result2);
//join() 把数组转换成字符串,不会影响原数组
console.log(arr.join("-"));
//filter（） 过滤 返回满足条件的元素，构成新数组
var result3 = arr.filter(function (v, i) {
return v < 5;
})
console.log(result3);
//map() 映射
var result4 = arr.map(function (v, i) {
return v * 4
})
console.log(result4);
</script>
函数
- 封装了一段可以重复执行的代码块
- 实例（求num1~num2的累加和）
<script>
//函数
function getSum(num1, nmu2) {
var sun = 0;
for (var i = num1; i <= nmu2; i++) {
sun += i;
}
console.log(sun);
}
getSum(1, 100)//调用函数
</script>
函数分类
具名函数
funcation fn(){}
fn()
匿名函数
没有名字的函数，无法直接使用。 使用方式：
- 函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称这个为
函数表达式。 语法：
let fn = function(){
//函数体
}
- 立即执行函数 场景介绍：避免全局变量之间的污染 语法：
//方式一
(function () { console.log(11); }());
//方式二
(function () { console.log(11); })();
//不需要调用，立即执行
(function (x, y) { console.log(x + y); })(1, 2);
注意：多个立即执行函数需要用分号
;隔开
注意： 函数表达式和具名函数不同，如果是具名函数，那它的
调用可以用在任何位置（函数体上下都可以） 函数表达式不行，因为let的关系，只能在声明后才可以调用。
函数使用
- 声明函数
<script>
function 函数名() {
函数体
}
</script>
- funcation是声明函数的关键字，全部小写
- 函数是做某件事情，函数名一般是动词
- 函数不调用自己不执行
- 调用函数
- 调用函数时，一定不要忘记添加小括号！
函数名();
函数的参数
形参
- 在声明函数的小括号里面是形参（形式上的参数）
- 形参是用来接受实参的，形参类似于变量（不用声明的变量）
function 函数名(形参1, 形参2...) {
}
实参
- 在函数调用的小括号里是实参（实际的参数）
函数名(实参1, 实参2...);
函数形参和实参匹配问题
<script>
function getSum(num1, nmu2) {
console.log(num1 + num2);
}
getSum(1, 2); //实参个数和形参个数一致，正常输出结果
getSum(1, 2, 3); //实参个数多于形参的个数，会取到形参的个数
getSum(1); //形参可以看作是不用声明的变量， num2是一个变量但是没有接收值 结果就是undefined
</script>
注意：
- 实参多于形参， 多的不参与运算，多的会保存到
arguments对象中（数组类型）- 实参少于形参，少的就时undefined
retuen语句
- 函数只是实现某种功能，最终的结果需要返回函数的调用者，通过return实现的
retuen 终止函数，retuen后面的代码不会被执行。
function 函数名() {
return 需要返回的结果;
}
function fn() {
return 20;
}
console.log(fn())
注意：当函数（fn）调用时，相当于调用者 fn( ) = 返回值 console.log( fu( ) )才能拿着到20 函数有返回值时，就返回该值，没有返回值就返回 undefined
arguments使用
- arguments对象中存储了传递过来的实参。
- argunmets是伪数组：1.具有数组的length属性，按照索引的方式进行存储。
- 可以按照数组的方式遍历arguments
作用域
- javaScript作用域：就是代码名字在某个范围内起作用和效果，是为了提高程序的可靠性，更重要的是减少命名冲突。
作用域（es5）分为两种
-
全局作用域：整个script标签，或者是单独的js文件
全局有效 -
局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字就只在函数内部起效果。
局部有效
注意： 变量有一个坑
如果函数内部，变量没有声明，直接赋值，也会当全局变量来看，但是强烈不推荐。
变量的作用域
- 全局变量：在全局作用下的变量分为
用var声明的和不用var声明的（不推荐） - 局部变量：在局部作用域下的变量，后者在函数内部的变量就是局部变量,
形参属于局部变量
执行效率
全局变量只有浏览器关闭时才会销毁，比较占用内存资源局部变量当程序执行完毕就会销毁，节约内存资源
块级作用域
- 现阶段我们js，我们没有块级作用域（2015年已经有了ES6）
- es6后新增块级作用域
作用域链（就近原则）
- 内部函数访问外部函数的变量，采取的是链式查找的方式来决定值，这种结构我们称为作用域链
变量的访问原则
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就可以诞生一个作用域
- 访问原则：
在能够访问到的情况下，先局部，局部没有在找全局
附录
ASCII表
ECMAScript6
Footnotes
-
附录ASCLL表 ↩
