关于注释

默认的单行注释快捷键：ctrl+/
默认的多行注释和取消注释快捷键都是shift+Alt+a
默认的快捷键不是很方便，可以自己需要修改一下。改成ctrl+shift+/.(你要是不喜欢也可以不改)

js客户端的脚本语言

逐行解释。渲染引擎俗称内核

js组成

关于注释

默认的单行注释快捷键：ctrl+/
默认的多行注释和取消注释快捷键都是shift+Alt+a
默认的快捷键不是很方便，可以自己需要修改一下。改成ctrl+shift+/.(你要是不喜欢也可以不改)

JavaScript输入输出语句

alert(msg) 浏览器弹出警示框
console.log(msg)浏览器控制台打印输出信息
prompt（info）浏览器弹出输入框。用户可以输入

1.变量概述

1.1什么是变量

变量是用于存储数据的容器。本质是内存的一块空间。

一个变量应该有一个空间还有一个变量名用来找到这个空间。

1.2变量的使用

变量的使用分两步，第一步是声明变量，第二赋值。

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

var 是一个JS的关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。
赋值 = ；这不是等于号，是给的意思。用来把右边的值赋给左边的变量空间中，此处代表赋值的意思。
变量值是程序员保存到变量空间的值。

声明变量如下

var myname='pink';

意思是声明了一个名为myname的变量同时把pink赋值给这个名为myname的变量。

声明变量也叫变量初始化。
可以同时声明多个变量，用逗号隔开。
只声明不赋值，程序结果是underfined 未定义。
不声明不赋值，直接使用某个变量会报错的。
不声明，直接赋值使用，可以使用。（会变成全局变量）

变量名的命名规范

严格区分大小写。
由字母(A-Z a-z)、数字(0-9)、下划线（_）、美元符号$组成。如：usrAge,num01,_name
不能以数字开头。
不能是关键词，保留字。如：var\for\while
变量名必须由意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
推荐翻译网站：有道，爱词霸。

//交换两个变量的值。

var temp;

var apple1 = '青苹果';

var apple2 = '红苹果';

console.log(apple1, apple2);

temp = apple1;

apple1 = apple2;

apple2 = temp;

console.log(apple1, apple2);

JS的变量数据类型是只有程序在运行过程中，根据=右边的数据类型来判断的。运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型，同时也意味着相同的变量可用做不同的类型。

如：var x = 6; var x = "Bill";前面是X为数字，后面X为字符串。

Js是动态语言，变量的数据类型是可以变化的。

2.简单数据类型

Number 数字型，包含整数型和浮点型值，如21、0.21 默认值是0
Boolean 布尔值类型，如true,false,等价于1和0，默认值false
String字符串型，如“张三”注意js里面，字符串都带引号“”
Undefined var a ;声明了a变量但是没有给值，此时a=Undefined。默认值Underfined
Null var a =null；声明了变a为空值。默认值是null

如：var x = 6; var x = "Bill";前面是X为数字，后面X为字符串。

Js是动态语言，变量的数据类型是可以变化的。

2.2数字型Number

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

八进制数字序列范文：0~7；程序里面数字前面加0表示八进制。逢八进一。
十六进制 0~9 a~f ；
现阶段只要记住在JS中八进制前面加0，十六进制前面加0x

数值型的三个特殊值

infinity 代表无穷大，大于任何数值
-Infinity 代表无穷小，小于任何数值
NaN，Not a number,代表一个非数值

console.log(Number.MAX_VALUE);最大

console.log(Number.MIN_VALUE);最小

isNaN()这个方法用来判断是不也是非数字，并返回一个值。如果是数字返回的是false如果不是数字返回的是true。

console.log(isNaN('hong'));/*结果是一true*/

console.log(isNaN(12));/*结果是false*/

2.3字符串型String

字符串型可以是引号中的任意文本，其语法为双引号“”和单引号’‘

字符串是有嵌套的情况。JS可以用单引号嵌套双引号，或者双引号嵌套单引号（外双内单，外单内双）

字符串转义符

类似Html里面的特殊字符，字符串也有特殊字符，我们称之为转义符。转义符都是\开头的，嵌套时候记得要写在引号里面。常用的转义符有一下：

\n 换行符，n是newline的意思

\\ 斜杠\

\’ 单引号‘

\" 双引号”

\t tab缩进

\b 空格，b是blank的意思

（1）字符串长度length属性可以获取字符串的长度。

console.log(str.length);

字符串的拼接

（2）多个字符串之间用+号拼接。字符串型拼接后数据类型都是字符型。数值相加，字符相连。

var age = prompt('你知道我多大了吗？');

var str = '你今年已经' + age + '岁了';

alert(str);

布尔型Boolean

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

true参与加法运算当1来看，false参与运算当0来看。

Undefined和Null

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

undefined和字符相连得到字符

undefined和数字相加得NaN。

null空值。null和字符相连得到字符，和数字相加得数字。

3.获取变量数据类型

获取检测变量的数据类型

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

prompt取过来的值是字符型的。

浏览器检测也能看数据类型。黑色是字符串型的，紫色是数值型的，深蓝色是布尔型的。

字面量

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

数字字面量：8、9、10
字符串字面量：”我们是人才“
布尔字面量：true,false

4.数据类型转换

把一种数据类型的变量转换成另一种数据类型。

（1）转换为字符串3种方法

to String() 转换成字符串
String()强制转换
拼接转换

加号拼接字符串和字符串拼接的结果都是字符串。

三种转换方式，更喜欢第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换

（2）转换为数字型（重点）

parseInt(变量)；可以把字符型转换为数字型，的到的是整数。

console.log(parseInt('1.366'))//得到1.会取整。

console.log(parseInt('120px'));//得到的是120，因为会取整，同时也会去掉单位。

parseFloat（）把字符转换为浮点数数值型如 console.log(parseFloat('3.2569'));得到3.2569，会保留小数点后面的数字。console.log(parseFloat('130px'));//得到的是130，也会去掉单位

console.log(parseFloat('rem165px'));//得到NaN 空

Number()强制转换函数，将字符串型转换为数值型，Number('12');

console.log(Number('569'));//得到数字型的569

console.log(Number('16px'));//得到NaN 空

js隐式转换（-*/）利用算术运算隐式转换为数值型如：‘12’-0

<script>var num = 10;//var str = num.toString();console.log(num);//console.log(typeof str);console.log(String(num));console.log(typeof num);var age = prompt('请输入您的年龄');console.log(parseInt(age));console.log(parseInt('1.366'))//得到1.会取整。console.log(parseInt('120px'));//得到的是120，因为会取整，同时也会去掉单位。console.log(parseFloat('3.2569'));//得到3.2569，会保留小数点后面的数字。console.log(parseFloat('130px'));//得到的是130，也会去掉单位console.log(parseFloat('rem165px'));console.log(Number('569'));console.log(Number('16px'));//得到NaN  空

注意

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

隐式转换是我们在进行算数运算的时候，JS自动转换为数据类型。

案例

计算年龄

   <script>//弹出一个输入框（prompt），让用户输入出生年份（用户输入）//把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄//弹出警示框（alert）,把计算的结果输出。var year = prompt('请输入您的出生年分');var age = 2022 - year;//year是字符型但是这里用减法有隐式转换alert('您今年已经' + age + '岁了');</script>

简单加法

思路是先输入一个加数，再输入一个加数，然后两个数相加，在输出结果。每一个数都要声明一个变量来保存它。因为prompt得到的是一个字符串，所以转变数值型。因为输入的数字有可能是带有小数点的。所以用了parseFloat（）

<script>var Addend1 = prompt('请输入第一个加数');var Addend2 = prompt('请输入第二个加数');var And = parseFloat(Addend1) + parseFloat(Addend2);alert('他们的和为' + And);
</script>

（3）转换为布尔型

Boolean()函数，其他类型转换成布尔值。案例 Boolean('true');

代表空，否定的值会被转换成false，如‘’、0、NaN、null、undefined
其余值都被转换为true

解释型语言和编程型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须把程序员所写的程序语言翻译成机器语言才能执行程序，程序语言翻译成机器语言的工具成为翻译器

翻译器翻译的方式有两种：一种是编译，另一种是解释。两种方式之间的区别在于翻译的时间点不同。

编译器是在代码执行之前进行编译，生成中间代码文件（Java语言就是）
解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器），JS就是解释型语言

案例作业

弹窗获取用户姓名性别年龄

JavaScript运算符

运算符也被称作操作符，是用于实线赋值，比较和执行算数运算等功能的符号

算数运算符

加（+）、减（-）、乘（*）、除（/）、取余（%）

浮点数算数运算里面会有问题，尽力避免直接小数去运算，后面会有办法。如下面：

console.log(0.1+0.2);//0.30000000000000004

console.log(0.07*100);//7.000000000000001

不能直接拿浮点数来进行相比较是否相等。

var num = 0.1 + 0.3;

console.log(num == 0.3);//false

问：我们怎么判断一个数能不能够被整除呢？

答：它的余数是0就说明这个数能被整除，这就是%取余运算符的主要用途。

问：请问1+2*3结果是？

答：7.算数运算符有优先级的，先乘除后加减，有小括号先算小括号里面的。

表达式和返回值

由数字、运算符、变量等组成的式子就是表达式如1+1；

表达式最终会有一个结果返回给我们，我们称之为返回值。

程序里的书写是这样的： 2=1+1 把右边的表达式计算完毕把返回值给左边。

var num=1+1;

递增和递减运算符

如果需要反复给数字变量添加或者减去1，可以使用递增（++）和递减（--）运算符来完成。

在js中递增++和递减--既可以放在变量前面也可以放在变量后面，放在变量前面时，我们称之为前置递增（递减）运算符，放在变量后面时，我们称之为后置递增（递减）运算符；

注意：递增和递减运算符必须和变量配合使用。

++num前置递增，就是自加1，类似于num=num+1,但是++num写起来更简单。口诀"先自加1.再返回值。"

num++后置递增。

前置自增和后置自增如果单独使用效果是一样的，

后置自增口诀："先返回原值后自加1"

总结

前置递增和后置递增运算符可以简化代码编写，让变量的值+1比以前写法更简单
单独使用时，运行结果相同
与其他代码连用时候执行结果不同
后置：先原值运算后自加（先人后己）
前置：先自加后运算（先己后人）
开发时大多数用后置递增/递减，并且代码独占一行。如：num++;num--

比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后会返回一个布尔值（true/false）作为比较运算的结果。

< 小于

> 大于

>= 大于等于（大于或者等于）

<= 大于等于（小于或者等于）

== 判等号（会转型）

!= 不等号

=== !== 全等号要求值和数据类型都一致。

console.log(3 === 5);//false

console.log(3 > 5);//false

console.log(3 <= 5);//true

console.log(3 !== 5);//true

console.log(3 === '5');//false

逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断。

&& 逻辑与简称与 and ，两侧都是ture结果才是true，只要有一侧是false，结果就是false

|| 逻辑或，简称或 or ，两侧都是false结果才是false，只要有一个侧是true，结果就是true.

! 逻辑非，简称非 not 也叫取反，用来取一个布尔值相反的值。如true的相反之是false。

短路运算（逻辑中断）

是值或者是表达式参与逻辑运算的时候，

当多个表达式（值）时，左边的表达式可以确定结果时，就不再运算右边表达式的值；

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

逻辑与短路运算

如果表达式1结果为真，则返回表达式2.如果表达式1结果为假，'那么返回表达式1.

如果有空的或者否定的为假其余是真的。0 ‘’ null undefined NaN 这几个都是假。其余是真。

逻辑或短路运算

如果表达式1结果为真，则返回的是表达式1.如果表示1结果为假，则返回表达式2.

赋值运算符

用来把数据赋值给变量的运算符。

= 直接赋值

+=、-= 加、减一个数后再赋值

*=、/=、%= 乘除取余后再赋值

var a = 10;

a += 2;//相当于a=a+2

a -= 2;//相当于 a=a-2

a *= 3;//相当于 a =a*3

a /= 3;//相当于a=a/3

运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

JavaScripe流程控制---分支

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是控制代码按照什么结构顺序执行。

流程控制主要有三种结构，分别是顺序结构、分支结构、循环结构。

顺序流程控制

顺序结构没有特定的语法结构，程序会按照代码的先后顺序依次执行。

分支结构控制if语句

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同结果。

JS语言提供了两种分支结构语句

if语句
switch语句

if语句

if (表达式) {

//执行语句

}

如果if表达式结果为真则执行大括号里面的语句，如果if里面的表达式为假则执行if语句后面的代码。

if else双分支语句

if (条件表达式）{

//执行语句1

} else {

//执行语句2

}

执行思路：如果条件表达式结果为真，那么执行语句1否则执行语句2.

if else if 语句（多分枝语句）

就是利用多个条件选择不同的语句执行得到不同的结果多选一的过程。

if（条件表达式1）{

//语句1;

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

//语句2；

} else if(条件表达式3){

//语句3；

} else {

//最后的语句

}

执行思路：

如果条件表达式1满足就执行语句1，执行完毕退出整个if分支语句
如果条件表达式1不满足，则判断条件表达式2，满足的话执行语句2 以此类推
如果上面的所有条件表达式都不成立，则执行else里面的语句

注意：

多分支语句还是多选一最后只能有一个语句执行
else if 里面的条件理论上是可以任意多个的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var mark = prompt('请输入一个分数');if (mark >= 90) {alert('A')} else if (mark >= 80) {alert('b')} else if (mark >= 70) {alert('C')} else if (mark >= 60) {alert('D')} else {alert('E')}var de = 20;var result = de < 10 ? '是的' : '不是';console.log(result);var time = prompt('请输入一个0-59之间数字');var result1 = time < 10 ? '0' + time : time;alert(result1);</script>
</head><body></body></html>

三元表达式

三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式。

条件表达式？表达式1 ：表达式2

执行思路

如果条件表达式为真，返回表达式1的值，如果条件表达式结果为假则返回表达式2的值。

var de = 20;

var result = de < 10 ? '是的' : '不是';

console.log(result);

案例

数字补0，用户输入数字，如果数字小于10则在前面补0，比如01 09 如果数字大于10则不需要补比如20.可以用于倒计时使用

var time = prompt('请输入一个0-59之间数字');

var result1 = time < 10 ? '0' + time : time;

alert(result1);

分支流程控制switch语句

switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。

语法结构

switch (表达式) {

case value1:

执行语句1;

bresk;

case value2:

执行语句2;

bresk;

......

default:

执行最后的语句;

}

执行思路

利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句，如果都没有匹配上就执行default里面的语句。

switch语句和if else if语句的区别

1.一般情况下他们两个语句可以互相替换

2.switch...case语句通常处理case为比较确定值的情况，if...else...语句更加灵活，常用于范围判断（大于等于某个范围）

3.switch语句进行条件判断后直接执行程序的条件语句，效率更高。而if else语句有几种条件，就得判断多次。

4.当分支较少的时候，if else语句执行效率比switch语句高。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2022-11-14------------------------------------------------------------------

JS循环结构

循环：可以重复执行某些代码

for循环（重要）

一组被重复执行的语句称之为循环体。能否继续重复执行取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

for执行某些代码通常跟计数有关系

for （初始换变量；条件表达式；操作表达式）{

//循环体

}

初始变量就是用var声明一个普通变量。通常用于作为计数器使用
条件表达式就是用来决定每一次循环是否继续执行就是终止的条件
操作表达式是每次循环最后执行的代码经常用于我们计数器变量进行更行（递增或者递减）

执行过程

首先执行计数变量 var i=1,但是这句话在for循环里只执行一次 index。去i<=100来判断是否满足条件，如满足条件果就去执行循环体，不满足条件就跳出循环体。这里i满足小于等于100的条件，所以执行循环体打印出“不要懒”，最后执行i++ i++是单独写的代码，递增之后i变成了2，到这里第一轮结束。

接着上面的第一轮循环之后i变成了2，再去执行i<=100，满足条件继续往下走执行循环体打印“不要懒”，这是第二次打印了。然后执行i++。这是第二轮循环了，此时的i=3.

重复上面的循环i=3去执行i<=100条件.....

以此类推第100次循环的时候，i=100，满足i<=100的条件。执行循环体打印“不要懒”。再执行i++，i++后i就变成了101了。

上面的i为101了继续执行i<=100，发现此时不满足条件了。就跳出循环体，终止循环。

下面是控制台输出的结果

可以看住打印了100次不要懒，最后的i的值为101.

断点调试

断点调试可以帮助我们观察程序的运行过程

浏览器按f12------->sources------>找到需要调试的文件------->在程序的某一行设置断点

Watch：监视，，通过Watch可以监视变量的值的变化，非常的有用。

双重for循环

单程循环无法满足开发需求，比如我们要打印5行5列的图形，打印一个直角三角形等，此时就可以通过循环嵌套来实现。

循环嵌套是指在一个循环语定义句中再一个循环语句的语法结构，列入再for循环语句中再嵌套一个for循环，这样的for循环语句我们称之为双重for循环。

循环练习

JS循环练习_YuKing_HONG的博客-CSDN博客

for循环小结

for循环可以重复执行某些相同的代码
for循环可以重复执行些许不同的代码，因此我们有计数器
for循环可以重复执行某些操作比如算术运算符加法操作
随着需求增加，双重for循环可以做更多更好看的效果。
for循环条件和字数直接相关的循环
双重for循环外层循环一次，内层for循环全部执行
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它的执行过程

while循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

当......的时候

while语句的语法结构如下

while（条件表达式）{

//循环体代码

}

执行思路：

先执行条件表达式，如果结果为true则执行循环体代码；如果条件表达式为false则退出循环执行后面代码
执行循环体代码
循环体代码执行完毕后程序会继续执行条件表达式，如果仍然为true则继续执行循环体直到循环条件为false时，整个循环过程才会结束
里面应该也有计数器初始化变量
里面应该也有操作表达式，完成计数器的更新防止死循环。

代码练习

do while循环

do ...while循环语句其实是while语句的一个变体。。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执循环体，否则对此循环体。

do {

//循环体

} while (条件表达式)

执行思路

跟while循环体不同的地方在于do while先执行一次循环体判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环体。

注意：先执行循环体再判断，do while 至少执行一次循环体代码。

continue break

continue关键字用于立即跳出本次循环，继续下一次循环体（本次循环体中continue之后的代码就会少执行一次。）

     <script>for (var num = 1; num <= 5; num++) {if (num == 3) {continue;//只要遇到continue就跳出本次循环，直接跳到num++;}console.log('我在吃第' + num + '个包子');}//打印出来结果少了第3个包子</script>

//求1-100之间，除了被7整除之外的整数和

 <script>
//求1-100之间，除了被7整除之外的整数和var sum1 = 0;for (var n = 1; n <= 100; n++) {if (n % 7 == 0) {continue;}sum1 += n;}console.log(sum1);</script>

break关键字

break关键字用于立即跳出整个循环（循环结束）

//打印出来结果到第二个包子，后面就没有了

记住;break是退出整个循环，碰到了break之后后面的循环不再继续了。所以上面打印出了第二个包子，后面就不再继续了。

JavaScript命名规范已经语法格式

标识符命名规范

变量，函数的命名必须要有意义
变量的名称一般用名词，sum
函数的名称一般用动词，如getsum
操作符的左右两侧各保留一个空格
单行注释前面注意有个空格

---------------------------2022-11-22---------------------------------------------------------------

数组

1.什么是数据

Array 是一组数据的集合，存储在单个变量下的优雅方式。

2.创建数组

(1) 利用new创建数组

var 数组名=new Array();

var arr = new Array(); //创建了一个空数组

注意Array（），A要大写

（2）利用数组字面量创建数组 [ ] 常用这种方式

var arr=[ ];

（3）数组里面的数据用逗号,隔开。数组里面的数据成为数组元素，数组元素可以是任何数据类型。

var arr = [1, 2, 3, 4, 5, 'pink'];

（4）声明数组并赋值称为数组的初始化

3.获取数组元素

3.1数组的索引

索引（下标）：用来访问数组元素的序号（数组序号从0开始）。

获取数组元素，格式：数组名[索引号]

var arr = [1, 2, 3, 4, 5, 'pink'];

console.log(arr[5]); //控制台得到的是pink

数组可以通过索引来访问，设置，修改对应的数组元素，我们可以通过“数组名[索引]”的形式老获取数组中的元素

这里的访问就是获取得到的意思

4.遍历组数

可以通过“数组名[索引号]”的方式一项项的取出数组每一项。但是比较麻烦。

遍历：就是把数组中的每一个元素从头到尾都访问一次。

数组的长度是元素个数，不要和索引号混淆

.length 动态检测数组元素的个数

课堂练习

<script>//求数组所有元素的总和，数组的平均数var le = [2, 6, 1, 7, 4];var sum = 0;var vag = 0;for (var i = 0; i < le.length; i++) {sum = sum + le[i]}vag = sum / le.length;console.log(sum);console.log(vag);//求数组最大值var arr = [2, 6, 1, 77, 52, 25, 7];var max = arr[0];for (j = 0; j < arr.length + 1; j++) {if (arr[j] > max) {max = arr[j];}}console.log(max);//数组转换为分割字符串//要求：将数组'red', 'green', 'blue', 'pink'输出为：'red|green|blue|pink'var color = ['red', 'green', 'blue', 'pink'];var str = '';for (var n = 0; n < color.length; n++) {str += color[n] + '|';}console.log(str)</script>

5.数组中新增元素

可以通过修改length长度以及索引号增加数组元素

可以通过修改length长度来实现数组扩容的目的
length属性是可读写的
可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

<script>var arr = [2, 6, 1, 77, 52, 25, 7];arr.length = 10;//把数组长度扩充到10；arr[7] = 66;//新增数组元素，修改索引号追加数组元素arr[8] = 56;arr[9] = 8;console.log(arr);arr[0] = 3;//这里原本数组就有arr[0]这元素，现在又重新赋值了一遍，就是替换掉原来的了console.log(arr);arr = '有点意思';console.log(arr);//注意不要直接给数组名赋值否则里面的元素都没有了//数组转换为分割字符串//要求：将数组'red', 'green', 'blue', 'pink'输出为：'red|green|blue|pink'var color = ['red', 'green', 'blue', 'pink'];var str = '';for (var n = 0; n < color.length; n++) {str += color[n] + '|';}console.log(str);//新建一个数组，里面存放10个整数（1-10）var str1 = [];for (var k = 0; k < 10; k++) {str1[k] = parseInt(prompt('请输入一个整数'));}console.log(str1);for (var b = 0; b < 10; b++) {str1[b] = b + 1;}console.log(str1);</script>

将数组中大于等于10的数组元素选出来放入新的数组

删除指定元素

冒泡排序

js 数组-冒泡排序，把数组元素按从小到大重新排序。http://t.csdn.cn/Dm9he

---------------------------------2022-11-24---------------------------------------------------------------

函数

封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.1声明函数

function 函数名（）{

//函数体代码

}

调用的时候千万不要忘记添加小括号；
口诀：函数不调用，自己不执行。
调用方法，函数名（）；

注意：声明函数本身不会执行代码，只有调用函数时才会执行函数代码。

3.1函数的参数

可以利用函数的参数实现函数重复不同的代码

function 函数名(形参1，形参2, ...) {

//函数体代码

}

函数名(实参1，实参2, ...);

形参类似一个变量，形参接受实参。函数的参数可以有也可以没有，，个数不限。

形参：形式上的参数函数定义的时候传递的参数当前并灭有知道是什么

实参：实际上的参数函数调用的时候传递的参数实参传递给形参的

注意：

多个参数用逗号隔开
形参可以看作是不用声明的变量

函数形参实参个数匹配

如果参数的个数和形参的个数一直，正常输出结果
如果实参的个数多于形参的个数会取到形参的个数。
如果实参的个数小于形参的个数，多余的形参定义为undefined 最终结果是NaN

形参可以看作是不用声明的变量，当多余的形参也就是多余的变量没有接收到值，结果就是undefined

4函数的返回值

return语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现。

function 函数名() {

return 需要返回的结果;

}

函数名();

函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()；通过return实现

只要函数遇到return就会把后面的结果返回给函数调用者函数名（）=return后的结果

 <script>   /* function 函数名(){return 需要返回的结果;} *///利用函数  求两个数的最大值function Max(a, b) {/*    if (a > b) {return a;} else {return b;} */return a > b ? a : b;};console.log(Max(611, 9));//利用函数求任意一组函数中的最大值function getMax(str) {var max = str[0];for (var i = 0; i < str.length; i++) {if (str[i] > max) {max = str[i];}} return max;}// console.log(getMax([5, 2, 99, 101, 67, 77]))//实参是一个数组传送过去var re = getMax([5, 2, 99, 101, 67, 77]);//实际开发中是这样书写的console.log(re);</script>

return 终止函数

return语句之后的代码不被执行

return只能返回一个值，如果用逗号隔开多个值，以最后一个为准。如果想要返回多个值，可以考虑用数组形式。

函数如果有return 则返回的是return 后面的值，如果函数没有return 则返回undefined

通过榨汁机看透函数

pink老师-函数作业

1、写一个函数，用户输入任意两个数字的任意算术运算（简单的计算器小功能），并能弹出运算结果。

2.写一个函数，用户输入任意两个数字的最大值，并能弹出运算后的结果

3.写一个函数，用户输入任意三个不同的数字的最大值，并能弹出运算后的结果

4.写一个函数，用户输入一个数，判断是否是素数，并弹出回值（又叫质数，只能被1和自身整除的数）

代码在下面链接

函数作业http://t.csdn.cn/ouzWc

5.arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。JavaScript中，arguments实际上它是当前函数的一个内置对象，所有函数内置了一个arguments对象，arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有length属性
搜索索引方式存储数据
不具有数组的push,pop等方法

并不是真正意义上的数组

arguments 是一个对应于传递给函数的参数的类数组对象。只有函数才有arguments对象，而且是内置好了。

案例：

1.利用函数求任意个数的最大值

<script>
function getMax() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;}console.log(getMax(2, 9, 6, 8, 45, 36, 5, 2, 66));
</script>

2.利用函数反转任意数组 reverse 反转

<script>
function reverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;}console.log(reverse([8, 6, 5, 9, 10]));var arr2 = reverse(['red', 'blue', 'pink'])console.log(arr2);
</script>

5.用户输入年份，输出当前2月份的天数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//用户输入年份，输出当前2月份的天数function backDay() {var year = prompt('请您输入年份：')if (isRunYear(year)) {alert('当前年份是闰年2月份是29天')} else {alert('当前年份是平年2月份是28天')}}backDay();//判断是否为闰年的函数function isRunYear(year) {//如果是闰年返回true否则返回falsevar flag = false;if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {flag = true;}return flag;}</script>
</head><body></body></html>

6.函数声明的两种方式

1.利用函数关键字自定义函数

function fn( ）{

}

fn( );

2.函数表达式(匿名函数)

var 变量名=function( ）{ };

var fun=function( ）{

console.log('我是函数表达式');

}

fun( );

此处的fun是变量名不是函数名
函数表达式声明方式更声明变量差不多，只不过变量里面存的是值函数表达式里面存函数
函数表达式也可以进行传递参数

作用域

1.什么是作用域

js作用域：就是代码名字（变量）在某个范围内起作用和效果目的是为了提高程序的可靠性，更重要的是减少命名冲突。

JS的作用域（es6）之前：全局作用域局部作用域

全局作用域：整个script标签或者是一个单独的js文件。

局部作用域（函数作用域）：在函数内部就是局部作用域这个代码的名字只在函数内部其效果和作用。

2.变量的作用域的分类

变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量

全局变量：在全局作用域下的变量，在全局下都可以使用
局部变量：在局部作用域下的变量后者在函数内部的变量就是局部变量
注意：函数的新参也是可以看作是局部变量

从执行效率来看全局变量和局部变量

全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。
局部变量，当程序执行完毕就会销毁，比较节约内存资源。

JS中没有块级作用域，JS的作用域：全局作用域，局部作用域，现阶段我们JS没有块级作用域

我们JS也是在ES6的时候新增的块级作用域

块级作用域{ } ；如 if{ } for { }的花括号里面声明的变量，在外面也可以使用。没有块级作用域。如下，num一样会被打印出来

3.作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

最后结果是123，站在目标出发，一层一层的往外查找

预解析

1.什么是预解析？

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

预解析： JS引擎会把js里面的所有var 还有function提升到当前作用域的最前面

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

先预解析后执行

变量预解析（变量提升），函数预解析（函数提升）

变量提升：只是把变量声明提升到作用域的最前面，不提升赋值操作；

函数提升：把所有的函数声明提升到前面，但是不调用。

预解析代码提升案例

下面代码他的预解析过程是，先把var ，function 提升到当前作用域前面

就相当于下面这样的代码

<script>f1();console.log(c);console.log(b);console.log(a);function f1() {var a = b = c = 9;/* 相当于var a;a=9;b=9;c=9;b c是没有声明的。不是集体声明变量。b c 当作全局变量使用 *///集体声明变量应该是逗号隔开 var a=9,b=9,c=9;console.log(c);console.log(b);console.log(a);}//相当于function f1() {var a;a = b = c = 9;console.log(c);console.log(b);console.log(a);}f1();console.log(c);console.log(b);console.log(a);
</script>

集体声明变量应该是逗号隔开 var a=9,b=9,c=9;

----------------------2022-12-7

对象

1.什么是对象

对象是一个具体事物。JS中对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串，数值，数组，函数等。

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

2.创建对象

2.1利用字面量创建对象

对象字面量：就是花括号{ }里面包含了表达这个具体事物（对象）的属性和方法。

var ojb = {

uname:'张三丰',

sex:'男',

sayHi:function(){

console.log('hi~');

}

} //创建了一个空的对象

（1）里面的属性或者方法用键值对的形式键属性名：值属性值

（2）多个属性或者方法中间用逗号隔开

（3）方法冒号后面跟一个匿名函数

使用对象

（1）调用对象的属性对象名.属性

console.log(ojb.uname);

(2）调用属性还有一个种方法对象名['属性名’]

console.log(ojb['uname']);//一定要注意中括号里面有

(3)调用对象的方法对象.方法名() 注意千万不要忘记小括号

ojb.sayHi();

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

1.变量和属性的相同点他们都是用来存储数据的

var num = 10;

var obj = {

age: 18

}

变量单独声明并赋值使用的时候直接写变量名单独存在

属性在对象里面的不需要声明的使用的时候必须是对象.属性

2.函数和方法的相同点，都是实现某种功能做某件事

//函数是单独声明并且调用的时候函数名() 单独存在的

//方法是对象里面调用的时候对象.方法()

2.2 利用new Object创建对象

var obj = new Object();//创建一个空的对象

obj.uname = '李伟';

obj.sayHi = function () {

console.log('hi')

}

(1)我们是利用=等级赋值的方法，添加对象的属性和方法

(2)每个属性和方法之间用分号结束

2.3利用构成函数创造对象

为什么需要用构造函数创造函数？

因为我们前面两种创建对象的方式一次只能创建一个对象

函数可以重复一段代码，可以重复使用创建多个对象，这个函数我们称为构造函数。因为这个函数里面封装的是不是普通代码，而是对象。

构造函数就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面。

构造函数语法结构，特点是用this

function 构造函数名() {

this.属性 = 值;

this.方法 = function () { }

}

new 构造函数名();

//1.构造函数名字首字母要大写。

//2.构造函数不需要return就可以返回结构。

//3.调用构造函数一定要使用new。调用构造函数后，就创建一个对象

2.4构造函数和对象

构造函数，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类。

创建对象，特指某一个，通过new关键字创建对象的过程我们称之为对象实列化。

3.new关键词

(1)在内存种创建一个新的空对象

(2)让this指向这个新的对象

(3)执行构造函数里面的代码给这个新对象添加属性和方法

(4)返回这个新对象(所以构造函数里面不需要return)

对象小结

对象可以让代码结构更清晰
对象复杂数据类型object
本质：对象就是一组无序的相关属性和方法的集合
构造函数泛指某一类，比如苹果，不管是红色还是绿色的苹果都是统称为苹果 */
对象实例特指一个事物，比如这个苹果，正给你讲课的皮克老师等等
for in语句用于对象的属性进行循环操作

----------------------------------------------------------------------------------------------------

js内置对象

自定义对象，内置对象，浏览器对象

内置对象:就是指is语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者最基本而必要的功能（属性和方法）

Math--数学对象

Math它是一个具有数学常数和函数的属性和方法。不是一个函数对象。

Math.max()

Math.max()函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity

如下面

Math.max(10, 20); //  20
Math.max(-10, -20); // -10
Math.max(-10, 20); //  20

语法

Math.max()

Math.max(value0)

Math.max(value0, value1)

Math.max(value0, value1, /* … ,*/ valueN)

//利用对象封装一个数学对象，里面又PI 最大值和最小值

      <script>  //利用对象封装一个数学对象，里面又PI 最大值和最小值var myMath = {PI: 3.141592653,max: function () {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;},min: function () {var min = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] < min) {min = arguments[i];}}return min;}}console.log(myMath.PI)console.log(myMath.max(6, 9, 8, 7));console.log(myMath.min(6, 9, 8, 7));</script>

Math.PI //圆周率

Math.floor//向下取整

Math.ceil//向上取整

Math.round//四舍五入

Math.abs//绝对值

Math.max//求最大值

Math.min//求最小值

Math.random()//函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），

随机数方法random()

Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

返回一个浮点型伪随机数字，在0（包括 0）和1（不包括）之间。

点名案例

<script>
//随机点名function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}var mingzi = ['例比', '涨价', '李四', '宏斌', '要离'];console.log(mingzi[getRandom(0, 4)])
</script>

得到一个两数之间的随机整数，包括两个数在内

function getRandomIntInclusive(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}

日期对象

Date()日期对象是一个构造函数必须使用new 来调用创建我们的日期对象

var date = new Date();

console.log(date);

1.Date如果没有参数返回系统当前时间

2.参数常用写法数字型，2019,10,12 或者是字符串行 '2019-10-1 8:8:8'

var date1 = new Date('2019-10-1 8:8:8');

console.log(date1);

var date2 = new Date(2019, 10, 10);

console.log(date2);

日期格式化

常用的几个

getFullYear()	//返回当前日期的年
getMonth()	//getMonth()返回的是0-11，所以月份小1.所以要+1.
getDate()	//获得当前几号
getDay()	//返回星期几（周日0到周六6）
getHours()	//获得当前时间几时
getMinutes()	//获得当前时间几分
getSeconds()	//获得当前时间几秒

案例：获得当前的日期，同时展示XXXX年X月x日星期X。

      <script>//获得当前的日期，同时展示XXXX年X月x日  星期X。var date = new Date();var years = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]var day = date.getDay();console.log(years + '年' + month + '月' + dates + '日 ' + week[day]);console.log(date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒')</script>

封装一个函数放回当前时间时分秒00:00:00

    <script>//封装一个函数 放回当前时间时分秒00:00:00function getTime() {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(getTime());</script>

获取日期的总的毫秒形式---时间戳

Date对象基于1970年1月1日（世界标准世界）起的毫秒数，也叫做时间戳，永远不会重复。

我们经常用毫秒数来计算时间，这样比较精确。

获得总毫秒数的方法

valueOf( )

getTime( )

+new Date( ) //返回的就是总毫秒数

Date.now( )//h5的新增的

代码实现：

var day = date.getDay();

console.log(date.getTime());

console.log(date.valueOf());

var date4 = +new Date();

console.log(date4);

//h5新增的获得总毫秒数的

console.log(Date.now());

倒计时案例（很重要）

//核心算法：输入的时间减去现在的时间就是剩余的时间，即是倒计时。但是不能直接拿时分秒相减，比如05分减去25分结果会是负数的。

//用时间戳来做。用户输入时间总的毫秒数减去现在的时间的毫秒数，得到的就是剩余时间的毫秒数

//剩余时间总的毫秒数转换为天，时，分，秒（时间戳转化为时分秒）

//转换公式如下

d=parseInt(总秒数/60/60/24);计算天数

h = parseInt(总秒数 / 60 / 60 % 24); 计算小时

m = parseInt(总秒数 / 60 % 60); 计算分数

s = parseInt(总毫秒数 % 60); 计算当前秒数

    <script>function conuDown(time) {var nowTime = +new Date();//返回的是当前时间总的毫秒数var inputTime = +new Date(time);//返回的是用户输入的总的时间毫秒数var times = (inputTime - nowTime) / 1000;//time是剩余时间总的毫秒数var d = parseInt(times / 60 / 60 / 24);d = d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24);h = h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60);m = m < 10 ? '0' + m : m;var s = parseInt(times % 60);s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';}console.log(conuDown('2022-12-12 18:00:00'));</script>

数组元素

检测是否为数组

1.instanceof 运算符，它可以用来检测是否为数组。

2.Array.isArray()

用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

添加删除数组元素方法

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

(1)push 是可以给数组追加新的元素

(2)push()参数直接写数组元素就可以了

(3)push完毕之后，返回的结果是新数组的长度

(4)原来数组也会发生变化

2. unshift是在我们数组的开头添加一个或者多个数组元素+

(1)unshift是可以给数组追加新元素

(2)nushift()参数直接写数组元素就可以了

(3)nushift完毕之后返回的结果是新的数组长度

(4)原来数组也会发生变化

3.pop()可以删除数组最后一个元素，后面是不跟参数的

(1)pop是可以删除最后一个元素

(2)pop()没有参数

(3)pop完毕之后返回的结果是被删除的最后一个元素

(4)原来数组也会发生变化

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

(1)shift是可以删除第一个元素

(2)shif()没有参数

(3)shift完毕之后返回的结果是被删除的第一个元素

(4)原来数组也会发生变化

    <script>var arr = [1, 3, 9, 4];arr.push('pink');console.log(arr);arr.unshift('red');console.log(arr);console.log(arr.pop());//返回但是被删除的元素console.log(arr);//数组的最后一个pink元素没有了console.log(arr.shift());console.log(arr);</script>

数组排序

1.反转数组

reverse()反转数组元素重新排序

2.sort() 方法用原地算法对数组的元素进行排序，并返回数组。/* 默认将数组中的所有元素转为字符串后再排列(默认是升序)，用来排列字符串类型的元素 */

语法：

// 无函数
sort()

// 箭头函数
sort((a, b) => { /* … */ } )

// 比较函数
sort(compareFn)

// 内联比较函数
sort(function compareFn(a, b) { /* … */ })

如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。
如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；
如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
compareFn(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

可能有的朋友会疑问：为啥compareFn(a, b) 大于 0，b 会被排列到 a 之前？因为大于0，说明a比b大。因为是升序的，排前面的是小的。所以b 会被排列到 a 之前。

var arr = [1500, 1200, 2000, 2100, 1800];

arr.sort(function (a, b) {

//return a - b;//升序顺序排列

return b - a;//降序

})

console.log(arr);

//结果是[1200, 1500, 1800, 2000, 2100]

上面的代码可以简写如下

var arr = [1500, 1200, 2000, 2100, 1800];

arr.sort((a, b) => a - b);

console.log(arr);

//结果是[1200, 1500, 1800, 2000, 2100]

数组索引方法

indexOf(数组元素) 从前面开始查找，返回第一个元素索引号

lastIndexOf(数组元素) 从后面开始找，返回第一个元素索引号

indexOf(数组元素) 作用是返回数组元素的索引号
如果由多个一样的元素，只返回第一个满足条件的索引号
如果在该数组中找不到元素则返回-1
indexOf(数组元素) 从前面开始查找，返回第一个
lastIndexOf(数组元素) 从后面才是查找，如果找到满足条件的就返回第一个找到的元素的索引号。

数组转换为字符串

(1)toString()

把数组转为字符串，逗号分隔每一项，返回一个字符串

console.log(demo.toString());

(2)join('分隔符')

用于把数组中的所有元素转换为一个字符转，返回一个字符串。

console.log(demo.join('&'));

其他数组方法

concat()

链接两个或多个数组，不影响原数组，返回一个新的数组。

var demo =["c", "a", "z", "x", "b"];

var arr1 = [3, 9, 6, 8, 7, 4];

var arr2 = arr1.concat(demo);

console.log(arr2); //[3, 9, 6, 8, 7, 4, "c", "a", "z", "x", "b"]

slice()

数组截取slice(begin,end),返回被截取项目的新的数组

语法：

slice()
slice(start)
slice(start, end)

var arr1 = [3, 9, 6, 8, 7, 4];

var arr3 = arr1.slice(3);

var arr4 = arr1.slice(1, 5);

console.log(arr3); //[8, 7, 4]

console.log(arr4); //[9, 6, 8, 7]

splice()

数组删除splice(第几个开始，要删除的个数)，返回被删除项目的新数组，这个会影响原数组。

var color = ['pink', 'red', 'yellow', 'green', 'black', 'white', 'golden'];

var newColor = color.splice(1, 4);

console.log(newColor); //结果 ["red", "yellow", "green", "black"]

console.log(color); //结果["pink", "white", "golden"]

字符串对象

基本包装类型

根据之前的学习，对象才有属性和方法，复杂数据类型才有属性和方法

var str = 'andy';

console.log(str.length); //结果是 4

简单的数据类型为什么会有length属性嗯?

基本包装类型：就是把简单的数据类型包装成为了复杂数据类型

按道理基本数据类型没有属性和方法，对象才有。但是上面的代码却可以执行，这是因为JS会把基本数据类型包装成为复杂数据类型。

过程是这样的：

(1)把简单数据类型包装为复杂数据类型

var temp = new String('andy'); //会生成一个临时变量并包装

(2)把临时变量的值给str

str = temp;

(3)销毁这个临时变量

temp = null;

为了方便操作基本数据类型，js还提供了三个特殊的引用类型：String, Number和Boolean

基本包装类型：就是把简单的数据类型包装成为复杂的数据类型，这样基本数据类型就有了属性和方法。

字符串的不可变

指的是里面的值不可变，虽然看上去可以改变，但是其实是地址变了，内存中新开辟了一个内存空间。

所以不要大量的对字符串重新赋值也不要大量的拼接字符串，占内存。

 <script>var capur = '';for (var i = 1; i <= 1000000; i++) {capur += i;   //反复重新赋值拼接}console.log(capur);  //可以看到i的取值范围越大，需要的时间越久。</script>

根据字符返回位置indexOf（）

字符串所有的方法都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。返回字符位置str.indexOf('要查找的字符',[起始位置] )，中括号是可以有也可以没有

var seasons = '春夏秋冬,春来大地，春意盎然';

console.log(seasons.indexOf('秋'));

console.log(seasons.indexOf('春', 3));

案例

查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数

  <script>
//查找字符串"abcefoxyozzopp"中所有o出现的位置以及次数var str = 'abcoefoxyozzopp';var i = str.indexOf('o');var sum = 0;while (i !== -1) {console.log(i);i = str.indexOf('o', i + 1);sum += 1;}console.log('o出现的次数为' + sum);</script>

求red出现的位置和次数['red', 'bule', 'red', 'green', 'pink', 'red']

<script>
//求red出现的位置和次数['red', 'bule', 'red', 'green', 'pink', 'red']var arr = ['red', 'bule', 'red', 'green', 'pink', 'red'];var indxe = arr.indexOf('red');var num = 0;while (indxe !== -1) {console.log('位置是 ' + indxe);indxe = arr.indexOf('red', indxe + 1);num += 1;}console.log('red出现总次数为 ' + num);
</script。

charAt()g根据位置返回字符

var str = 'abcoefoxyozzopp';

console.log(str.charAt(8)); //结果是：y

console.log(str.charCodeAt(8)); //121

console.log(str[9]); //o

方法名	说明	使用
charAt ( index )	返回指定位置的字符（index字符串的索引号）	str.charAt(0)
charCodeAt（index ）	获取指定位置处字符的ASCII码（index字符串的索引号）	str.charCodeAt(0)
str [index ]	获取指定位置处的字符	HTM5,IE8+支持charAT()

案例-判断一个字符串出现最多次的字符，并统计其次数。

判断一个字符串出现最多次的字符，并统计其次数。

/* 1.用charAt( )遍历一遍对象

2.把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1

3. 遍历对象，得到最大值和该字符

<script>var str1 = 'abcoefoxyozzopp';var o = {};for (var i = 0; i < str1.length; i++) {var chars = str1.charAt(i);if (o[chars]) {o[chars] += 1;} else {o[chars] = 1;}}console.log(o);var max = 0;var ch = '';for (var k in o) {  //k得到的是属性名if (o[k] > max) {  // o[k] 得到是属性值max = o[k];ch = k;}}console.log(max);console.log('最多的字符是' + ch + '出现次数为' + max);
</script>

字符串其他方法---拼接以及截取字符串

substr()重要

方法返回一个字符串中从指定位置开始到指定字符数的字符。

注意一点：Microsoft's JScript 不支持负的 start 索引。

语法：

str.substr(start[, length])

var str = "abcdefghij";

//start 位置开始提取字符，提取 length 个字符（或直到字符串的末尾）。

console.log("(1,2): " + str.substr(1, 2)); // (1,2): bc

//这里start 索引为负值的时候，是字符串倒数计算起

console.log("(-5,2): " + str.substr(-5, 2)); // (-5,2): hi

console.log("(-3): " + str.substr(-3)); // (-3): hij

console.log("(1): " + str.substr(1)); // (1): bcdefghij

console.log("(-20, 2): " + str.substr(-20, 2)); // (-20, 2): ab

//start 索引位置超过了字符串的长度，后面取的长度后返回空了。

console.log("(20, 2): " + str.substr(20, 2)); // (20, 2):

concat( )

方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。和+号串联字符一样的效果。 concat 方法并不影响原字符串。

`substring()` 注意是对字符串使用，对数组无效。

方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。

(1)从star位置开始，截取到end位置，end取不到，基本和slice相同，star不接受负值。结束位置可以是负值

(2)如果任一参数小于 0 或为 NaN，则被当作 0。如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样,下面代码substring(4, -3)相当于是substring(0,4)

(3)如果 indexStart 等于 indexEnd，substring 返回一个空字符串。

(4)运用 length 属性来使用 substring()

运用 length 属性来使用 substring()

slice(`begin`,end)

slice(star,end)从star位置开始，截取到end位置，end取不到（他两都是索引号）。并返回一个新的字符串，且不会改动原字符串。

beginIndex

从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如，如果 beginIndex 是 -3 则看作是：strLength - 3）

endIndex

可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度 (例如，如果 endIndex 是 -3，则是，strLength - 3)。

字符串其他方法---替换字符串

replace('a'，'b')

替换字符串replace('被替换的字符'，'替换为的字符')

var str1 = 'str.slice';

console.log(str1.replace('.', '$')); //str$slice

该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。

console.log(str1.replace('s', 'o')); //otr.slice

如果想要替换掉字符串里面的所有s字母，可以用循环来做

split()

split将字符转换为数组，前面我们学过join将数组转为字符串

toUpperCase()

方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。

语法 str.toUpperCase()

返回转为大写形式的字符串。此方法不会影响原字符串本身的值，因为 JavaScript 中字符串的值是不可改变的。

var sur = 'red&pink&blue';

console.log(sur.toUpperCase()); //RED&PINK&BLUE

toLowerCase()

会将调用该方法的字符串值转为小写形式，并返回。

语法 str.toLowerCase() 不会影响字符串本身的值。

var low = 'ERTERTR BRTTRYTYT HTYT DD TT';

console.log(low.toLowerCase()); //ertertr brttrytyt htyt dd tt

数据类型

简单数据类型和复杂数据类型

简单数据类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，再存储时变量中存储的是值本身，因此叫做值类型。

值类型有：string,number,boolen,undefined,null */

简单数据类型null 返回的是一个空对象 object

如果有一个变量我们以后打算存储为对象，暂时没想好放啥，这个时候给null

var time = null;

console.log(typeof time); //object

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象，自定义对象），如Object,Array,Date等。

通过new关键词创建的对象（系统对象，自定义对象），如Object,Array,Date等。

简单数据类型和复杂数据类型存储方式不一样

1.简单数据类型存在栈里面开辟一个空间吗，存放的是值

2.复杂数据类型存在堆里面。先是在栈里面存放地址，十六进制表示，然后这个地址指向存放数据的堆。

简单类型传参：函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时候，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部的变量。

复杂类型传参：函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参的时候，其实是把变量在空间里面保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

-------------------------------------------------------------------------------------------

APIs

JS基础语法为后面做铺垫，web APIs是JS应用，大量使用JS基础语法做交互效果。

API和Web API

API 是给程序员提供的一种工具，是一些预先定义的函数。可以更轻松的实现想要完成的功能。

web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和DOM）

总结

//对于AIP我们会使用就可以了不必纠结内部如何实现

//web AIP主要是针对浏览器提供接口，主要针对于浏览器做交互效果

//Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

//学习Web API可以结合前面学习内置对象方法的思路学习如，是干什么的，需要参数吗，返回值是什么，代码验证。

DOM

不打算些写这里了，移步另一篇。

JS学习笔记（坚持！）相关推荐

ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...