1.1 JavaScript历史1.2 JavaScript是什么1.3 JavaScript的作用1.4 HTML/CSS/JS的关系浏览器执行 JS 简介 1.5 JS的组成1. ECMAScript2.DOM——文档对象模型3.BOM——浏览器对象模型 1.6 JS 初体验1.行内式 JS2.内嵌 JS3.外部 JS 文件 2. JavaScript注释3. JavaScript输入输出语句 二、变量1.变量概述1.1 什么是变量1.2 变量在内存中的存储 2.变量的使用3. 变量语法扩展1.更新变量2.同时声明多个变量3.声明变量的特殊情况 4. 变量命名规范 三、数据类型1.数据类型简介1.1 为什么需要数据类型1.2 变量的数据类型1.3 数据类型的分类 2. 简单数据类型2.1 简单数据类型(基本数据类型)2.2 数字型Number2.2.1数字型进制（二进制、八进制、十进制、十六进制）2.2.2 数字型范围2.2.3 数字型三个特殊值2.2.4 isNaN() 2.3 字符串型String2.3.1 字符串引号嵌套2.3.2 字符串转义符2.3.3 字符串长度2.2.4 字符串拼接2.3.5 字符串拼接加强 2.4 布尔型Boolean2.5 Undefined 和Null 3.获取变量数据类型3.1 获取检测变量的数据类型3.2 字面量 4.数据类型转换4.1 什么是数据类型转换4.2 转换为字符串类型4.3 ==转换为数字型(重点)==4.4 转换为布尔型 扩展阅读1.解释型语言和编译型语言1.1概述1.2 执行过程 2. 标识符、关键字、保留字2.1 标识符2.2 关键字2.3 保留字 四、JavaScript运算符1. 运算符2. 算术运算符2.1 算术运算符2.2 浮点数的精度问题2.32.4 表达式和返回值 3. 递增和递减运算符3.1 递增和递减运算符概述3.2 递增运算符3.2.1 前置递增运算符3.2.2 后置递增运算符 4. 比较运算符4.1 比较运算符概述4.2 等号小结 5.逻辑运算符5.1 逻辑运算符概述5.2 短路运算（逻辑中断）5.2.1 逻辑与5.2.2 逻辑或5.2.3 逻辑中断（短路 *** 作） 6. 赋值运算符7. 运算符优先级 五、JavaScript流程控制-分支1. 流程控制2. 顺序流程控制3. 分支流程控制 if 语句3.1 分支结构3.2 if 语句3.3 if else 语句(双分支语句)3.4 if else if 语句(多分支语句) 4. 三元表达式5. 分支流程控制 switch 语句switch 注意事项switch语句和 if else if 语句的区别 六、JavaScript流程控制-循环1. 循环2. for 循环断点调试：案例1：求1-100之间所有整数的累加和 3. while循环4. do while循环循环小结5. continue / break5.1 continue 关键字5.2 break关键字 七、JavaScript 命名规范以及语法格式1. 标识符命名规范2. *** 作符规范3. 单行注释规范 八、数组1. 数组的概念2. 创建数组利用new创建数组利用数组字面量创建数组数组元素的类型 3. 获取数组中的元素3.1 数组的索引 4. 遍历数组数组的长度 5. 数组中新增元素通过修改 length 长度新增数组元素通过修改数组索引新增数组元素 6. 数组案例案例3：冒泡排序 九、函数1. 函数的概念2. 函数的使用函数的封装 3. 函数的参数3.1 形参和实参3.2 函数形参和实参个数不匹配问题3.3 小结 4. 函数的返回值4.1 return语句4.2 return终止代码4.3 函数没有 return ，返回 undefined4.4 break / continue / return区别 5. arguments的使用案例：利用函数求任意个数的最大值 6. 函数案例案例1：利用函数封装方式，翻转任意一个数组案例2：利用函数封装方式，对数组排序——冒泡排序案例3：判断闰年函数可以调用另外一个函数 7. 函数的两种声明方式 十、作用域1. 作用域块级作用域 2. 变量的作用域3. 作用域链 十一、JavaScript预解析1. 预解析2. 变量预解析和函数预解析3. 预解析案例 十二、JavaScript对象1. 对象2. 创建对象的三种方式2.1 利用字面量创建对象变量、属性、函数、方法的区别2.2 利用 new Objcet创建对象2.3 利用构造函数创建对象2.4 构造函数和对象 3. new关键字4. 遍历对象属性小结 十三、JavaScript内置对象1. 内置对象2. 查文档2.1 MDN2.2 如何学习对象中的方法
看视频学习JavaScript其相关笔记记录，欢迎指正！
一、JavaScript初识导读 1.初识Javascript
1.1 JavaScript历史
布兰登.艾奇在1995年利用10天完成Javascript设计，最初叫LiveScript，后来与Sun公司合作，改名叫Javascript。
1.2 JavaScript是什么JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言：不需要编译，运行过程由 js 解释器( js 引擎)逐行来进行解释并执行
<script>
alert("我是编程语言")
script>
现在也可以基于Node.js 技术进行服务器端编程
1.3 JavaScript的作用 表单动态校验(密码强度检测)(JS产生最初目的)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)1.4 HTML/CSS/JS的关系
HTML / CSS标记语言——描述类语言
HTML决定网页结构和内容(决定看到什么)，框架CSS决定网页呈现给用户的模样JS 脚本语言——编程类语言
实现业务逻辑和页面控制(决定功能)，相当于人的各种动作 浏览器执行 JS 简介浏览器分为两部分 渲染引擎、JS 引擎
渲染引擎：用来解析 HTML 与 CSS ，俗称内核，比如 chrome 浏览器的blinkJS 引擎： 也称为 JS 解释器，用来读取网页中的 JavaScript 代码，对其处理后运行，比如chrome浏览器的V8浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器)来执行 JS 代码。
JS 引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以Javascript语言归为脚本语言，会逐行解释执行。
1.5 JS的组成 1. ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript ，但实际上两者是ECMAScript语言的实现和扩展
文档对象模型(Document Object Model,DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上各种元素进行 *** 作(大小、位置、颜色等)
3.BOM——浏览器对象模型
浏览器对象模型(Browser Object Model,BOM)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以 *** 作浏览器窗口，比如d出框、控制浏览器跳转、获取分辨率等。
1.6 JS 初体验
JS 有3种书写位置：行内、内嵌、外部
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>style>
<script>
alert("沙漠骆驼")
script>
<script src="my.js">script>
head>
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香')">
body>
html>
2. JavaScript注释
单行注释
多行注释
// 1. 单行注释 ctrl+/
/* 2. 多行注释
2. 多行注释 ctrl+ shift +/ */
3. JavaScript输入输出语句
<script>
//d出输入框
prompt('请输入您的年龄');
//d出警示框
alert("沙漠骆驼");
//控制台输出控制 给程序员测试用的
console.log('程序员能看到的');
script>
二、变量 1.变量概述 1.1 什么是变量
变量就是一个装东西的盒子
用于存放数据的容器。通过变量名获取数据，数据可以修改
1.2 变量在内存中的存储变量是程序在内存中申请的一块用来存放数据的空间
2.变量的使用
变量在使用时分为两步：
声明变量
赋值
<script>
//声明变量
var age;//var 是 JS 关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间
age=10;
//输出结果
console.log(age);
script>
变量的初始化（声明变量并赋值)
var age = 18;//声明的同时进行赋值
变量的使用案例：
输入用户姓名并d出
<script>
var name = prompt('请输入姓名');
alert(name);
script>
3. 变量语法扩展 1.更新变量
一个变量被重新赋值后，原有的值就会被覆盖，以最后一次赋值为准
<script>
var age = 10;
age = 13;
script>
<script>
var age = 10,
name = 'zs',
sex = 1;
script>
在计算机中，不同数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
1.2 变量的数据类型变量是用来存储值的，它们有名字和数据。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或动态语言。意味着不用提前声明变量的类型，在程序运行中，类型会被自动确定。
<script>
var age;//这里的 age不确定属于哪种数据类型
var age=10;//这里才确定 age 属于数字型
// JS 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定数据类型
script>
在代码运行时，变量的数据类型是由JS引擎根据等号右边变量值的数据类型来判断，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时意味着相同的变量可用作不同的类型。
<script>
var x=6;//数字型
var x='Bill';//字符串型
script>
1.3 数据类型的分类
JS 把数据类型分为两类：
简单数据类型（Number，String，Boolean，Undefined，Null）复杂数据类型（Object）2. 简单数据类型 2.1 简单数据类型(基本数据类型)
<script>
var age=21;//整型
var Age=21.3747;//浮点型
script>
<script>
//八进制数字序列范围:0~7
var num1 = 07;//对应十进制的7
var num2 = 012;//对应十进制的10
//十六进制
var num3 = 0x9;//对应十进制的9
var num4 = 0xa;//对应十进制的10
script>
在JS中，八进制前面加0，十六进制前面加0x
2.2.2 数字型范围
JavaScript中数值的最大值和最小值
<script>
alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324
script>
<script>
alert(Infinity);//Infinity 代表无穷大，大于任何值
alert(-Infinity);//-Infinity 代表无穷小，小于任何值
alert(NaN);//NaN ,Not a number，代表一个非数值
script>
用来判断非数字，并且返回一个值，如果是数字，返回False，否则返回true
<script>
var usrAge=21;
var isOk=isNaN(usrAge);
console.log(isOk); //false ,21不是一个非数字
var usrName="andy";
console.log(isNaN(usrName));// true，"andy"是一个非数字
script>
2.3 字符串型String
字符串型可以是引号中的任意文本，语法为双引号”“和单引号’‘
由于HTML标签里面的属性使用的是双引号，JS推荐使用单引号
2.3.1 字符串引号嵌套
JS 可以使用单引号嵌套双引号，或者双引号嵌套单引号。
2.3.2 字符串转义符
转义符都是以 \ 开头的
通过字符串的length属性可以获取整个字符串的长度
<script>
var str='hello world';
alert(str.length);
script>
2.2.4 字符串拼接 多个字符串直接可以使用 + 进行拼接，拼接方式为字符串 + 任何类型 = 拼接之后的新字符串拼接前会把字符串相加的任何类型转换成字符串，再拼接成新的字符串
<script>
console.log('hello'+'world');//'helloworld'
console.log('hello'+ 112);//'hello112'
console.log('112'+ 112);//'112112'
console.log('hello'+true);//'hellotrue'
console.log(12+ 12);//24
script>
数值相加，字符相连
2.3.5 字符串拼接加强
<script>
var age=12;
alert('我今年'+age+'岁啦！');
script>
2.4 布尔型Boolean
布尔类型包含 true / false 两个值。
布尔型与数字型相加的时候，true为1，false为0
<script>
console.log(true+1);//2
console.log(false+1);//1
script>
2.5 Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值undefined
3.获取变量数据类型 3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
<script>
var num = 10;
alert(typeof num);//number类型
script>
3.2 字面量
字面量是在源代码中一个固定值的表示法，就是字面量表示如何表达这个值。
数字字面量：8，9，10字符串字面量：‘hello world’布尔字面量：true，false4.数据类型转换 4.1 什么是数据类型转换
把一种数据类型的变量转换成另外一种数据类型
通常会实现3种方式的转换
转换为字符串类型转换为数字型转换为布尔型4.2 转换为字符串类型 toString()与String()使用方式不一样拼接字符串转换方式，称之为隐式转换
<script>
//利用 toString()
var num=10;
var str=num.toString();
alert(typeof str);
//利用String()
alert(typeof String(num));
//利用字符串拼接
var str=num+''
alert(typeof str);
script>
4.3 转换为数字型(重点) 隐式转换是在进行算术运算时，JS 自动转换了数据类型
<script>
//parseInt(变量) 可以将字符型转换为 number型，得到整数
var age=prompt('请输入您的年龄');//此时是字符型
alert(parseInt(age));//转换为数字型
alert(parseInt('3.15'));//向下取整 3
alert(parseInt('120px'));//120,将单位去掉
alert(parseInt('rem120px'));//NaN
//parseFloat(变量) 把 字符型转换为number型，得到浮点数
alert(parseFloat('3.14'));//3.14
alert(parseFloat('120px'));//120,将单位去掉
alert(parseFloat('rem120px'));//NaN
//Number(变量)
var str = '123';
alert(Number(str));
//算术运算 - * / 隐式转换
alert('12'-0);//12
alert('123'-'120');//3
script>
案例1：计算年龄
要求在页面中d出一个输入框，输入出生年份后，计算出年龄。
<script>
var year = prompt('请输入出生年份');
var age = 2022-year;
alert('您今年已经'+age+'岁了');
script>
案例2：简单加法器
计算两个数的值，用户输入第一个值后，继续d出第二个输入框并输入第二个值，最后通过d出窗口显示两次输入值相加的结果。
<script>
var num1=prompt('请输入一个数');
var num2=prompt('请再输入一个数');
var count=(num1/1)+(num2/1);
alert(num1+'+'+num2+'='+count);
script>
4.4 转换为布尔型 代表空、否定的值都会被转换为false，如：‘’，0，NaN，null，undefined其余值都会被转换为true
<script>
alert(Boolean(''));//false
alert(Boolean(0));//false
alert(Boolean(NaN));//false
alert(Boolean(null));//false
alert(Boolean(undefined));//false
alert(Boolean('小白'));//true
alert(Boolean(12));//true
script>
计算机不能直接理解除机器语言以外的语言，必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
翻译器翻译的方式：编译和解释，两者直接的区别在于翻译的时间点不同编译器在代码执行之前进行编译，生成中间代码文件解释器在运行时进行及时解释，并立即执行(当编译器以解释方式运行时，也称之为解释器) 1.2 执行过程2. 标识符、关键字、保留字 2.1 标识符
指开发人员为变量、属性、函数、参数取的名字
标识符不是关键字或保留字
2.2 关键字
指 JS 本身已经使用了的字，不能再用它们充当变量名、方法名
包括：break 、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等
2.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等。
运算符(operator)也被称为 *** 作符，用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
算术运算符递增递减运算符比较运算符逻辑运算符赋值运算符2. 算术运算符 2.1 算术运算符
概念：算术运算使用的符号，用于执行两个变量或值的算术运算
2.2 浮点数的精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精度远远不如整数。
所以：不要直接判断两个浮点数是否相等
2.3
怎么判断一个数能否被整除？余数是0就能被整除。
1+2*3的结果？7，算术运算符有优先级，先乘除，后加减，有小括号先算小括号里面的。
2.4 表达式和返回值
表达式：由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
即由数字、运算符、变量等组成的式子。
表达式最终的返回结果是返回值
需要反复给数字变量添加或减去1，可以使用==递增(++)和递减(–)==运算符来完成
在JavaScript中，递增(++)和递减(–)既可以放在变量前面，也可以放在变量后面。
放在变量前面时，为前置递增（递减）运算符
放在变量后面时，为后置递增（递减）运算符
递增和递减运算符必须和变量配合使用。
3.2 递增运算符 3.2.1 前置递增运算符
++num前置递增，自加1，先自加1，后返回值
3.2.2 后置递增运算符
==num++==后置递增，自加1，先返回值，后自加1
前置递增与后置递增单独使用时，运行结果相同。
概念：比较运算符(关系运算符)是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。
<script>
// == 会转型，会将字符串型是数据转换为数字型
alert(18==10);//false
alert(18==18);//true
alert(18=='18');//true,==会转型
//=== 要求两侧的值 与 数据类型 完全一致
alert(18===18);//true
alert(18==='18');//false
script>
4.2 等号小结
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
<script>
alert(3>5&&3>2);//false
alert(3<5&&3>2);//true
script>
5.2 短路运算（逻辑中断）
短路运算原理：当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
5.2.1 逻辑与语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
假 1 真 2
5.2.2 逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
5.2.3 逻辑中断（短路 *** 作）
<script>
//逻辑中断会影响程序的运行结果
var num = 0;
console.log(123||num++);//123 中断了num++
console.log(num);//0
script>
概念：用来把数据赋值给变量的运算符
<script>
var num = 10;
num += 2;// 相当于 num = num + 2
script>
在一个程序执行的过程中，各条代码是执行顺序对程序的结果是有直接影响的。可通过控制代码的执行顺序来实现要完成的功能。
流程控制就是来控制代码按照什么顺序结构来执行。
流程控制主要有三种结构：顺序结构、分支结构和循环结构。分别代表三种代码执行的顺序。
程序按照代码的先后顺序，依次执行。
3. 分支流程控制 if 语句 3.1 分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。
JS 提供了两种分支结构语句：
if 语句switch语句 3.2 if 语句语法结构：
<script>
if(条件表达式){
//条件成立执行的代码语句;
}
script>
语法结构：
<script>
if(条件表达式){
//[如果]执行的代码;
}else{
//[否则]执行的代码;
}
script>
语法规范：
<script>
if(){
}else if{
}else if{
}else if{
}else{
}
script>
由三元运算符组成的式子称为三元表达式。
语法结构：
条件表达式 ？ 表达式1 ： 表达式2;
如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值。
<script>
var num=3;
var result = num > 5 ? 'Yes' : 'No';
alert(result);
console.log(result);
script>
5.1 switch 语句也是多分支语句，用于基于不同的条件来执行不同的代码。
当要针对变量设置一系列的特定值的选项时，就可以使用 switch
<script>
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
script>
利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句，如果没有匹配上，就执行default里面的语句
switch 注意事项 表达式经常写成变量表达式的值与case的值相匹配必须是全等，必须是值和数据类型一致才可以break 如果当前的case里面没有break，则不会退出switch，而是继续执行下一个case，直到break<script>
var fruit = prompt('请输入您要查询价格的水果');
switch (fruit) {
case '苹果':
alert('苹果的价格是3.5/斤');
break;
case '榴莲':
alert('榴莲28.9/斤');
break;
default:
alert('没有这个水果');
}
script>
在 JS 中，主要有3种类型的循环语句
for 循环while 循环do … while 循环 2. for 循环for循环主要用于把某些代码循环若干次，通常跟计数有关系。
语法结构：
for(初始化变量;条件表达式; *** 作表达式){
//循环体;
}
<script>
for(var i=1;i<100;i++){
}
script>
断点调试可以帮我们观察程序的运行过程
浏览器中按F12（或者右键，点检查）–>sources–>找到需要调试的文件–>在程序的某一行设置断点
watch:监视，通过watch可以减少变量变化的值
点击这个位置，可以让程序一行一行的执行，这个时候可以观察watch中变量的值的变化。
for 循环重复相同的代码
for 循环可以重复执行不同的代码
因为有计数器变量i的存在， i每次循环值都会改变
for循环因为有计数器的存在，还可以重复的执行某些相同 *** 作
案例1：求1-100之间所有整数的累加和<script>
var sum=0;
for(var i=1;i<=100;i++){
sum +=i;
}
alert(sum);
script>
双重for循环，外层循环一次，内层 for 循环全部执行
for 循环是循环条件和数字直接相关的循环
3. while循环
语法结构：
while(条件表达式){
//循环体
}
当条件表达式结构为true时，则执行循环体，否则退出循环
<script>
var num=1;
while(num<=100){
num++;
}
script>
4. do while循环
语法结构：
do{
//循环体
}while(条件表达式)
与while 不同的地方在于 do while 先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环。即do while循环语句至少执行一次循环体代码。
<script>
var i=1;
do{
i++
}while(i<=10)
script>
循环小结 JS 中的三个循环 for 、while、 do while在很多情况下可以相互替代使用如果是用来计数，跟数字相关的，三者使用基本相同，for更方便while和do while可以做更复杂的判断条件，比for循环灵活一些while和do while执行顺序不一样，while 先判断后执行，do while 先执行一次，再判断执行while和do while执行次数不一样，do while至少会执行一次循环体，而while可能一次也不执行实际工作中，更常使用for循环语句，更简洁
continue 关键字用于立即跳出本次循环，继续下一循环(本次循环体中continue之后的代码就会少执行一次)。
<script>
for(var i=1;i<=5;i++){
if(i==3){
continue;//遇到continue 就退出本次循环，直接到下一次循环
}
console.log('现在执行第'+i+'次');
}
script>
<script>
//求 1~100之间，除了能被 7 整除之外的整数
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
script>
5.2 break关键字
break关键字用于立即跳出整个循环(循环结束)
<script>
//break
for(var i =1;i<=5;i++){
if(i==3){
break;
}
console.log('现在执行第' + i + '次');
}
< /script>
2. *** 作符规范
<script>
// *** 作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('现在执行第' + i + '次');
}
script>
3. 单行注释规范
<script>
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; //单行注释前面注意有个空格
}
console.log('现在执行第' + i + '次');
}
script>
数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。
<script>
var arr=[1,2,3,4,5];
script>
2. 创建数组
JS 中创建数组有两种方式：
利用 new 数组利用数组字面变量创建数组 利用new创建数组<script>
var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组
script>
<script>
//使用数组字面量方式创建空的数组
var 数组名 = [];
//使用数组字面量方式创建带初始值的数组
var arr = ['小白','小黑','大黄','瑞奇'];
script>
数组中可以存放任意类型的数据，例如字符串、数字、布尔值等。
索引(下标)：用来访问数组元素的序号(数组下标从0开始)。
数组可以通过索引来访问、设置、修改对应的数组元素。
通过==数组[索引]==的形式来获取数组中的元素。
<script>
//定义数组
var arrStus=[1,2,3];
//获取数组中的第2个元素
alert(arrStus[1]);
script>
4. 遍历数组
将数组中的元素从头到尾访问一次
<script>
var arr = ['小白','小黑','大黄','瑞奇'];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
script>
数组的长度
使用==“数组名.length”==可以访问数组元素的数列(数组长度)。
案例：求数组[2，6，1，7，4]里面所有的元素的和以及平均值
<script>
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var avg = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
avg = sum / arr.length;
alert('和为' + sum + '平均值为' + avg);
script>
案例：求数组[2,6,1,77,52,25,7]中的最大值。
<script>
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = 0;
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
alert('最大值为' + max);
script>
案例：数组转换为分割字符串
要求：将数组[‘red’,‘green’,‘blue’,‘pink’]转换为字符串，并用 | 或其他符号分割
输出：‘red|green|blue|pink’
<script>
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + '|';
}
alert(str);
script>
通过修改length长度以及索引号增加数组元素
通过修改 length 长度新增数组元素 通过修改 length 长度来实现数组扩容的目的length 属性是可读写的<script>
var arr = ['red', 'green', 'blue']; // length = 2
arr.lenght = 5;
alert(arr[3]);// undefined
alert(arr[4]);// undefined
script>
通过修改数组索引新增数组元素 通过修改数组索引的方式追加数组元素不能直接给数组名赋值，否则会覆盖掉以前的数据
<script>
var arr = ['red', 'green', 'blue', 'pink']; // length = 3
arr[3] = 'pink';// ['red', 'green', 'blue', 'pink'];
script>
也可以通过索引替换元素
案例：数组新增元素
新建一个数组，里面存放10个整数(1~10)
<script>
var arr = new Array();
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
alert(arr);
script>
案例：筛选数组
要求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
方法一：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
arr1[j] = arr[i];
j++;
}
}
alert(arr1);
script>
方法二：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
//刚开始 arr1.length 就是 0
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
//新数组索引号 从 0 开始 依次递增
arr1[arr1.length] = arr[i];
j++;
}
}
alert(arr1);
script>
案例1：将数组[2,0,6,1,77,0,52,0,25,7]中的 0 去掉后，形成一个不包含 0 的新数组
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
arr1[arr1.length] = arr[i];
j++;
}
}
alert(arr1);
script>
案例2：翻转数组
要求：将数组[‘red’, ‘green’, ‘blue’, ‘pink’,‘purple’]的内容反过来存放
输出：[‘purple’, ‘pink’,‘blue’, ‘green’,‘red’ ]
<script>
var str = ['red', 'green', 'blue', 'pink', 'purple'];
var newStr = [];
for (var i = str.length-1; i >= 0; i--) {
newStr[newStr.length] = str[i];
}
alert(newStr);
script>
案例3：冒泡排序
冒泡排序 重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误，就把它们交换过来。
走访数列的工作就是重复地进行，直到没有再需要交换，也就是说，该数列排序已经完成。
从大到小排序
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-i;j++){
if(arr[j]<arr[j+1]){
arr[j]=arr[j]+arr[j+1];
arr[j+1]=arr[j]-arr[j+1];
arr[j]=arr[j]-arr[j+1];
}
}
}
alert(arr);//77,52,25,7,6,2,1,0,0,0
script>
函数：封装了一段可能被重复调用执行的代码块。通过此代码块可实现大量代码的重复使用。
<script>
//求10~50的整数的累加和
function getSum(num1,num2){
var sum=0;
for(var i=num1;i<=num2;i++){
sum+=i;
}
alert(sum)
}
script>
2. 函数的使用
函数在使用时分为两步：声明函数 调用函数。
//声明函数
function 函数名(){
//函数体;
}
//调用函数
函数名();
声明函数本身不会执行代码，只有调用函数时才会执行函数体代码
函数的封装
函数的封装是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
函数可以重复相同的代码
可以利用函数的参数实现重复不同的代码
3.1 形参和实参在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用函数时，同样也需要传递相应的参数，这些参数被称为实参。
function 函数名(形参1,形参2,...){
}
函数名(实参1,实参2,...);
参数的作用：在函数内部某些值不能固定，可以通过参数在调用函数时传递不同的值进去。
3.2 函数形参和实参个数不匹配问题
如果实参的个数和形参的个数一致，则正常输出结果
如果实参的个数多于形参的个数，会取到形参的个数
如果实参的个数小于形参的个数，多余的形参定义为undefined 最终结果是 NaN
3.3 小结 函数可以带参数也可以不带参数声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined调用函数的时候，函数名括号里面的是实参多个参数中间用逗号隔开形参的个数可以和实参个数不匹配，但结果不可预计，要尽量匹配
函数是做某件事或者实现某种功能
4.1 return语句function 函数名(){
return 需要返回的结果;
}
函数名();
<script>
//利用函数 求两个数的最大值
function getMax(num1,num2){
return num1>num2?num1:num2;
}
getMax(1,5);//5
//利用函数求数组中最大值
function getMax(arr){
var max=0;
for(var i=0;i<arr.length;i++){
if(max<arr[i]){
max=arr[i];
}
}
return max;
}
var arr=[2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var max = getMax(arr);
alert(max);
script>
4.2 return终止代码
return只能返回一个值，如果用逗号隔开多个值，以最后一个为准。
4.3 函数没有 return ，返回 undefined
函数如果有return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined
4.4 break / continue / return区别 break ：结束当前的循环体continue：跳出本次循环，继续执行下次循环return：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
5. arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。
在JavaScript中，arguments实际上是当前函数的一个内置对象 。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
<script>
function fn(){
alert(arguments);
}
fn(1,2,3);
script>
console.log的结果如下：
arguments展示形式是一个伪数组，因此可以进行遍历。
伪数组具有以下特点：
具有 length 属性按索引方式存储数据不具有数组的push，pop等方法只有函数才有arguments对象，而且每个函数都内置号了这个arguments
案例：利用函数求任意个数的最大值<script>
function getMax() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(1, 3, 5, 2, 7)); //7
console.log(getMax(2, 0, 6, 1, 77, 0, 52, 0, 25, 7)); //77
script>
<script>
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
alert(reverse([1, 3, 5, 2, 7]));
script>
案例2：利用函数封装方式，对数组排序——冒泡排序
<script>
function bubbleSort(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j + 1]) {
arr[j] = arr[j] + arr[j + 1];
arr[j + 1] = arr[j] - arr[j + 1];
arr[j] = arr[j] - arr[j + 1];
}
}
}
return arr;
}
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr = bubbleSort(arr);
alert(arr);//[0,0,0,1,2,6,7,25,52,77]
script>
案例3：判断闰年
<script>
function isLeapYear(num) {
if (num % 4 == 0 && num % 100 !== 0 || num % 400 == 0) {
return 1;
} else {
return 0;
}
}
var year = prompt('请输入想要判断的年份');
var num=isLeapYear(year);
if(num==1){
alert('是闰年');
}else{
alert('是平年');
}
script>
函数可以调用另外一个函数
由于每个函数都是独立的代码块，用于完成指定任务，因此经常会用到函数相互调用的情况。
<script>
function fn1() {
alert('这里执行fn1函数');
fn2();
}
function fn2() {
alert('这里执行fn2函数');
}
fn1();
script>
7. 函数的两种声明方式
函数有两种声明方式
利用函数关键字自定义函数（命名函数）
<script>
function fn(){
alert('1');
}
fn();
script>
函数表达式（匿名函数）
<script>
// var 变量名 = function(){}
var fn2 = function(str){
alert('2');
alert(str);//hello
}
fn2('hello');
script>
注意：
fn2是变量名，不是函数名函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数函数表达式也可以进行传递参数通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript作用域：就是代码名字（变量）在某个范围内起作用和有效果。JS 的作用域(es6之前)：全局作用域 局部作用域 全局作用域：整个script标签 或者一个单独的js文件局部作用域（函数作用域）：在函数内部就是局部作用域，变量名只在函数内部起作用块级作用域
在es6的时候新增的块级作用域
块级作用域：
if{
}
for(){
}
2. 变量的作用域
在JavaScript中，根据作用域的不同，变量可用分为两种：全局变量，局部变量
全局变量(在函数外部定义的变量)：在全局作用域下的变量 全部变量在代码的任何位置都可以使用在全局作用域下var声明的变量是全局变量在特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用) 局部变量：在局部作用域下的变量 局部变量只能在该函数内部使用在函数内部var声明的变量是局部变量函数的形参师姐上就是局部变量从执行效率来看，全局变量和局部变量：
全局变量只有浏览器关闭的时候才会销毁，比较占用内存资源局部变量 当程序执行完毕就会销毁，比较节约内存资源3. 作用域链
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中又有一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链
案例：结果是几？
<script>
function f1() {
var num = 123;
function f2() {
console.log(num);//站在目标出发，一层一层往外查找
}
f2();
}
var num = 456;
f1();//console.log(num)的结果是123 因为就近原则，选取了f1中的局部变量num
script>
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
预解析 js 引擎会把 js 里面所有的 var 还有 function提升到当前我作用域的最前面
代码执行 按照代码书写顺序从上往下执行
2. 变量预解析和函数预解析预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
变量提升：把所有的变量声明提升到当前的作用域的最前面 不提升赋值 *** 作
<script>
console.log(num);//undefined
var num=10;//提升了变量名
//相当于执行了 var num; console.log(num); num=10;
fn();
var fn=function(){
console.log(22);
}
//相当于执行了
/* var fn;
fn();
fn=function(){
console.log(22);
}*/
script>
函数提升：把所有的函数声明提升到当前的作用域的最前面 不调用函数
<script>
function fn(){
console.log(11 );
}
fn();
//先执行 fn(); 然后执行函数体
//函数表达式，调用必须写在函数表达式后面
script>
3. 预解析案例案例1：结果是几？
<script>
var num = 10;
fn();
function fn(){
console.log(num);// undefined
var num = 20;
}
script>
案例2：结果是几？
<script>
var num = 10;
function fn() {
console.log(num);// undefined
var num = 20;
console.log(num);// 20
}
fn();
script>
对象是一个具体的事物。
在JavaScript中，对象是一组无序的相关属性的方法和集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）2. 创建对象的三种方式
在JavaScript中，采用三种方式创建对象(Object)：
利用字面量创建对象利用 new Object 创建对象利用 构造函数创建对象 2.1 利用字面量创建对象对象字面量：就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法
<script>
var obj = {};//创建了一个空的对象
var obj1 = {
uname:'张三',
age:13,
sex:'男',
sayHai: function(){
console.log('hi~');
}
}
script>
使用对象：
调用对象的属性： 对象名.属性名
<script>
console.log(obj1.uname);
script>
调用对象的属性还有一种方法：对象[‘属性名’]
<script>
console.log(obj1['age']);
script>
调用对象的方法：对象名.方法名()
<script>
obj1.sayHi();
script>
变量、属性、函数、方法的区别
变量：单独声明并赋值，使用的时候直接写变量名 ，变量是单独存在的
属性：在对象里面的不需要声明的，使用的时候必须是 对象.属性
函数：是单独声明，并且调用的，函数名( ) 单独存在的
方法：在对象里面，调用的时候 对象.方法( )
<script>
var obj = new Object();//创建了一个空的对象
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
console.log('hi~');
}
script>
2.3 利用构造函数创建对象
因为前面两种创建对象的方式一次只能创建一个对象
利用函数的方法，重复相同的代码，就把这个函数称为 构造函数，这个函数里面封装的不是代码，而是 对象
构造函数就是将对象里面的一些相同的属性和方法抽象出来，封装到函数里面
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总预 new 运算符一起使用。我们可以将对象中一些公共的属性和方法抽取出来，封装到这个函数里面。
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
<script>
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(){
console.log();
}
}
var zhangsan = new Star('张三',15,'男');//调用函数返回的是一个对象
console.log(typeof zhangsan);//Object
console.log(zhangsan.name);//张三
console.log(zhangsan['sex']);//男
console.log(zhangsan.sing('hello'));
script>
2.4 构造函数和对象
构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类
创建对象：特指某一个，通过new 关键字创建对象的过程被称为对象实例化
3. new关键字
new 关键字执行过程：
new 构造函数 可以在内存中创建一个空对象this 就会指向刚才创建的空对象执行构造函数里面的代码 给这个空对象添加属性和方法返回这个对象(构造函数里不需要return)4. 遍历对象属性
for … in语句用于对数组或对象的属性进行循环 *** 作
<script>
var obj = {
uname:'张三',
age:13,
sex:'男',
sayHai: function(){
console.log('hi~');
}
}
for(var k in obj){
console.log(k);//k 变量输出得到的是属性名
console.log(obj[k]);//输出得到的是属性值
}
script>
小结 对象可以让代码结构更清晰对象复杂数据类型Object本质：对象就是一组无序的相关属性和方法的集合构造函数泛指某一大类对象实例特指某一个事物for … in语句用于对对象的属性进行循环 *** 作
内置对象：指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或最基本而必要的功能（属性和方法）
内置对象最大的优点就是能帮助开发者快速开发
JavaScript提供了多个内置对象：Math、Date、Array、String等
2. 查文档 2.1 MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可。可以通过查文档学习，可通过 MDN / W3C来查询
Mozilla开发者网络(MDN)提供了有关开放网络技术的信息。
MDN：https://developer.mozilla.org/zh-CN/
2.2 如何学习对象中的方法 查阅该方法的功能查看里面的参数的意义和类型查看返回值的意义和类型通过 demo 进行测试欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）