JavaScript
什么是JavaScript
编程类语言,是一种运行在客户端的脚本语言 客户端:自己的电脑 脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行
浏览器执行JS
浏览器分为两部分:渲染引擎和JS引擎
渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink。老版本的webkit
JS引擎:也称为JS解析器,用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码时会逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行
JavaScript的组成
-
ECMAScript:JavaScript语法 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
-
DOM:页面文档对象模型
-
BOM:浏览器对象模型
JS书写位置
-
行内 在标签内部书写
-
内嵌 在head中添加script,在script中书写
-
外部 创建一个.js文件,用script引入
<script src="xxx.js">中间什么也不要写</script>
输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(msg) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
msg里面填写内容
变量
概述
白话:装东西的盒子
通俗:就是用于存放数据的容器,我们通过变量名获取数据,甚至数据可以修改
本质:变量是程序在内存中申请的一块用来存放数据的空间
使用
-
声明变量
var age; 声明一个名为age的变量
-
var是一个JS关键字,用来声明变量(variable变量的意思),使用该关键字声明变量后,计算机会自动为变量分配内存空间。
-
age是定义的变量名,我们通过变量名来访问内存中分配的空间。
-
-
赋值
age = 10; 给age这个变量赋值为10
-
=用来把右边的值赋给左边的变量空间中,此处代表赋值的意思
-
变量值是程序员保存到变量空间的值
-
变量的初始化
var age = 'skybule'; //声明变量的同时辅赋值为18
声明一个变量并赋值,我们称之为变量的初始化
语法扩展
-
更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值以最后一次赋值为准
-
声明多个变量
var age = 18, addres = '火影村', gz = 2000;
同时声明多个变量时,只需写一个var,多个变量名之间用逗号,隔开。
-
声明变量的特殊情况
-
只声明,不赋值。输出就是undefined(未定义的)
-
不声明,不赋值,直接使用。报错
-
不声明,只赋值。可以直接使用,不推荐
-
命名规范
-
由字母,数字,下划线,美元符号组成
-
严格区分大小写。var app;和varApp;是两个变量
-
不能以数字开头
-
不能是关键字,保留字。如:var,for,while
-
变量名必须有意义,
-
遵守驼峰命名法。首字母小写,后面单词首字母大写
数据类型
简介
在计算机中,不同数据所占用的空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型
js的变量数据类型是只有程序在运行过程中,根据=右边的值来确定的。js是动态语言,变量的数据类型是可以变化的
堆和栈
-
栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值等。其操作方式类似于结构数据中的栈;简单数据类型存放在栈
-
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放在堆
分类
JS把数据类型分为两类:
简单数据类型
简介
简单数据类型又叫基本数据类型或值类型
值类型:在存储时变量中存储的是值本身,因此叫做值类型
分类:string、number、boolean、undefinde、null
数字型:
在JS中,八进制前面加0,十六进制前面加0x。 数字型的最大值:Number.Max_VALUE 最小值:Number.Min_VALUE 三个特殊值:Infinty:无穷大;-Infinty:无穷小;NaN(Not a number):代表一个非数值。 isNaN():判断一个变量是否是数字类型,如果是则返回false,否则true
字符串型String
字符串型可以是引号中的任意文本,其语法为双引号“ ”或单引号’ ‘
-
字符串嵌套:js可以用单引号嵌套双引号,也可以用双引号嵌套单引号
-
字符串转义字符:
转义字符都是\开头
转义符 | 解释说明 |
---|---|
\n | 换行符 |
\ | 斜杠\ |
\ ' | 单引号 |
\ " | 双引号 |
\t | tab缩进 |
\b | 空格 |
-
字符串长度:
通过字符串的length属性可以获取整个字符串的长度
var myname = '我是xxx'; alert(myname.length);//显示5
-
字符串拼接
多个字符串之间可以用+进行拼接,连接方式为字符串+任何类型=拼接之后的新字符串
布尔值 Boolean
布尔类型有两个值:true(真)和false(假)
true参与加法运算当1来看,false当0
Undefined和Null
如果一个变量声明为赋值,就是Undefined未定义数据类型
Null:空值
复杂数据类型
简介
复杂数据类型又叫做引用类型
引用类型:在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型
分类:通过new关键字创建的对象(系统对象,自定义对象),如Object、Array、Date等
获取变量数据类型
typeof可用来获取检测变量的数据类型
var num = 10 ; console.log(typeof num);//输出number
数据类型转换
使用表单,prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型,通俗来说,就是把一种数据类型的变量转换为另外一种数据类型
转换为字符串类型
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num = 1;alert(num.toString()) |
String()强制转换 | 转成字符串 | var num = 1;alert(String(num)) |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1;alert(num + “字符串”) |
第三种方式也称隐式转换
转换为数字型
方式 | 说明 | 案例 |
---|---|---|
parseInt(string)函数 | 将string类型转成整数数值型 | parselnt(’78‘) |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(’78.21‘) |
Number()强制转换函数 | 将string类型转成数值型 | Number(’12‘) |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ’12‘ - 0 |
转换为布尔值
方式 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转换为布尔值 | Boolean(’true‘); |
-
代表空,否定的值会被转换为false,如 ’ ‘,0,NaN,null,undefined
-
其余值都会转换为true
拓展
解释型语言和编译型语言
计算机不能直接理解除机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序,程序语言翻译成机器语言的工具,称为翻译器。
翻译器的翻译方式分为两种:一个是编译,一个是解释。两种方式的区别在于翻译的时间点不同。
-
编译器是在代码执行之前进行编译,生成中间代码文件
-
解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行时,也称之为解释器)
标识符 关键字 保留字
标识符
就是指开发人员为变量、属性、函数、参数取的名字
var num1 = '';
num就是标识符
标识符不能是关键字和保留字
关键字
是指JS本身已经使用了的字,不能再用它们充当变量名,方法名
保留字
实际上就是预留的“关键字”,意思是虽然现在还不是关键字,但是未来可能成为关键字,同样不能用它们充当变量名,方法名
运算符
简介
运算符(operator)也称操作符,是用于实现赋值,比较和执行算数运算等功能的符号
常见的运算符有:
-
算数运算符
-
递增和递减运算符
-
比较运算符
-
逻辑运算符
-
赋值运算符
算数运算符
算数运算使用的符号,用于执行两个变量或值的算术运算
+ - * / %(取余数)
浮点数值的最高精度是17位小数,但在算术计算时其精准度远远不如整数。浮点数不能直接拿来运算 先乘除,后加减,有小括号先算小括号里面的
表达式和返回值
表达式:由数字,运算符,变量等以能求得数值的有意义排列方法所得的组合(是由数字,运算符,变量等组成的式子)
表达式最终都会有一个结果,返回给我们,我们称为返回值
递增和递减运算符
如果需要反复给数字变量添加或减1,可以使用递增(++)和递减(--)运算符来完成
在JavaScript中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面,放在前面时,我们称之为前置递增(递减)运算符,放在后面时,我们称之为后置递增(递减)运算符
递增和递减必须配合变量使用
前置递增(减)运算符:先+1,后返回值
后置递增(减)运算符:先返回值,再+1
比较运算符
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
<= | 小于等于号 | 3<=2 | false |
>= | 大于等于号 | 2>=2 | true |
== | 判等号(会转换数据类型) | 37==37 | true |
!= | 不等号 | 37!=37 | false |
=== !== | 全等,要求值和数据类型都一致 | 37 ===’37‘ | false |
逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。开发中经常用于多个条件的判断。
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | 逻辑与,简称与, and | true&&false |
|| | 逻辑或,简称或,or | true||false |
! | 逻辑非,简称非,not | !true |
短路运算(逻辑中断)
原理:当有多个表达式(值)时,左边的表达式(值)可以确定结果时,就不再继续运算右边
逻辑与 短路运算
语法:表达式1 && 表达式2
如果第一个值为真,则返回表达式2
如果第一个值为假,则返回表达式1
逻辑或 短路运算
语法: 表达式1 || 表达式2
如果第一个值为真,则返回表达式1
如果第一个值为假,则返回表达式2
赋值运算符
用来把数据赋值给变量的运算符
赋值运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var usrName = '值' |
+=、-= | 加、减一个数后再赋值 | var age = 10;age+= 5;//15 |
*=、/=、%= | 乘、除、取模后再赋值 | var age = 2;age*=5;//10 |
age+=5;//相当于age = age +5;
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算术运算符 | 先*/%后+ - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&& 后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
流程控制
简介
流程控制就是控制代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构,分支结构,循环结构,这三种结构代表三种代码的执行顺序。
顺序流程控制
顺序结构是程序中最简单,最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行。
分支流程控制
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
JS语言提供了两种分支结构语句:1. if语句 2. switch语句
if语句
语法结构:
if (条件表达式) { //执行语句 } //执行思路:如果条件表达式为true,则执行大括号里面的。如果条件表达式为false,则不执行大括号里面的,执行if后面的代码
if esle语句(双分支语句)
语法结构:
//条件成立,执行if里面的代码,否则执行else里面的代码 if(条件表达式){ //条件表达式成立执行的代码 }else{ //条件不成立时执行的代码 } //if和else最终只能执行一个,else后面直接跟大括号
if esle if(多分支语句)
就是利用多个条件来选择不同的语句来执行,得到不同的结果
多选一,最后只能执行一个
语法结构:
![微信截图_20220118142720](C:\Users\Administrator\Desktop\微信截图_20220118142720.png)if(条件表达式1){ //语句1 }else if(条件表达式2){ //语句2 }else if(条件表达式3){ //语句3 }else{ //最后的语句 } //如果条件表达式1满足就执行语句1,执行完毕后,退出整个if分支语句 //如果条件表达式1,不满足,就执行条件表达式2,满足就执行语句2,以此类推 //如果都不满足,就执行最后的语句
switch语句
它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值选项时,就可以使用switch
switch(表达式){ case value1: //表达式 等于value1时要执行的代码 break; case value2: //表达式 等于value2时要执行的代码 break; default: //表达式 不等于任何一个value时要执行的代码 }
if else if 语句和switch语句的区别
-
一般情况下,他们两个可以相互转换
-
switch语句通常处理case为比较确定值的情况,而if else if语句更加灵活,常用与范围判断(大于,等于某个范围)
-
switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if else if语句有几种条件,就得判断多少次
-
当分支比较少时,if else if语句的执行效率会高
三元表达式
循环
目的:在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
在js中,主要有三种类型的循环语句:
-
for循环
-
while循环
-
do while 循环
for循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
语法结构:
for (初始化变量;条件表达式;操作表达式){ //循环体 } //初始化变量 就是用var 声明一个普通变量,通常用于作为计数器使用 //条件表达式 就是用来决定每一次循环是否继续,就是终止的条件 //操作表达式 是每次循环最后一次执行的代码,经常用于我们计数器变量进行更新(递增或者递减)
比如:
for(var i = 1; i<=100;i++ ){ console.log('你好吗'); } //你好吗循环100遍
执行过程
-
首先执行里面的初始化变量(计数器变量) var i =1 但是这句话在for里面只执行一次
-
去 i<= 100来判断是否满足条件,如果满足就去执行循环体,不满足则退出循环
-
最后执行i++ i++是单独的代码,递增 第一轮结束
-
第二轮:接着去执行i <= 100,如果满足就执行循环体,不满足则退出循环,
-
再执行i++ i++是单独的代码,递增 第二轮结束
-
以此类推
while 循环
语法结构:
while (结构表达式) { //循环体 }
执行过程
当条件表达式结果为true,则执行循环体,否则退出循环
var num = 1; while (num <= 100){ console.log('nihao'); num++ } //里面也应该有计数器,初始化变量 //里面也应该有操作表达式,完成计数器的更新,防止死循环
do while
语法:
do{ //循环体 }while (条件表达式) //跟while不同的地方在于do while先执行一次循环体,再判断条件,如果条件表达式结果为真,则继续执行循环,否则退出循环
continue break关键字
continue
continue关键字是用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
语法:
for (var i = 1; i <= 5; i++){ if(i == 3){ continue;//只要遇见continue就退出本次循环,直接调到i++ } console.log('这是第' +i+ '个数')//输出1、2、4、5 } //退出本次循环,继续执行下次循环
break
break关键字用于立即跳出整个循环
for(var i = 1;i <= 5; i++){ if(i == 3){ break } console.log('这是第'+ i +'个数')//输出1、2 } //退出整个循环
数组
概念
数组就是一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的方式。
//普通变量只能存储一个值 var num = 10; //数组一次可以存储多个值 var arr = [1,2,3,4];
创建方式
-
利用new创建数组
var 数组名 = new Array(); var arr = new Array();//创建一个新的数组
-
利用数组字面量创建数组
//1.使用数组字面量方式创建空的数组 var 数组名 = []; //2.使用数组字面量方式创建带初始值的数组 var 数组名 = ['小黑','小白','大黄',12,true,12.6]; //数组中可以存放任意类型的数据
获取数组中的元素
索引(下标):用来访问数组元素的序号(数组下标从0开始) 数组可以通过索引来访问,设置,修改对应的元素,我们可以通过“数组名[索引号]”的形式来获取数组中的元素。这里的访问就是获取得到的意思
获取数组元素格式: 数组名[索引号]
var arr = ['小黑','小白','大黄',12,true,12.6]; console.log(arr[0])//输出小黑 console.log(arr[4])//输出true
遍历数组
遍历:就是把数组中的每个元素从头到尾都访问一次
var arr = [1,2,3]; for(var i = 0;i < 3;i++){ console.log(arr[i]); }
数组长度:数组名.length
上述代码中的 i=3 可以简化成 i < arr.length
数组中新增元素
-
新增数据元素,修改length长度
var arr = [1,2,3]; arr.length = 4;//把数组长度修改为4,里面应该有4个元素
-
新增数据元素,修改索引号,追加数组元素
var arr = [1,2,3]; arr[3]=4;
数组排序(冒泡排序)
是一种算法,把一系列的数据按照一定的顺序进行排列显示(从大到小,从小到大)
var arr = [5,3,1,4,2]; for(i = 0; i <= arr.length-1; i++){ for(j = 0; j <= arr.length - i - 1; j++){ if(arr[j] < arr[j+1]){ var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);
函数
概念
就是封装了一段可以被重复执行调用的代码块
目的:就是让大量代码重复使用
使用
-
声明函数
function 函数名(){ //函数体 }
-
调用函数
函数名();
函数的参数
形参和实参
在声明函数时,可以在函数名后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
形参和实参不匹配时:
相同时:输出正确结果
实参小于形参:多的定义为undefined,结果为NaN
实参大于形参:只取到形参个数
形参的默认值是undefined
arguments的使用
当不确定有多少个参数传递的时候,可以用arguments来获取。在js中,arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
function fn(){ console.log(arguments);//里面存储了所有传递过来的实参 arguments = [1,2,3] } fn(1,2,3);
arguments展示形式为一个伪数组,因此可以进行遍历。伪数组具有以下特点:
-
具有length属性
-
按索引方式存储数据
-
不具有数组的push,pop等方法
函数的返回值
return语句:
函数将值返回给调用者,只能返回一个值
语法:
function 函数名(){ return 需要返回的结果; } 函数名();
return终止函数,return之后的代码不再执行
作用域
就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性,更重要的是减少命名冲突
js作用域(es6之前):全局作用域、局部作用域
-
全局作用域:整个script标签,或者是一个单独的js文件
-
局部作用域(函数作用域):在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用
在js中,根据作用域不同,变量可以分为两种:
-
全局变量:在全局作用域下的变量。如果在函数内部没有声明直接赋值的变量也属于全局变量
-
局部变量:在局部作用域下的变量。在函数内部的变量就是局部变量。函数的形参也可以看做是局部变量
-
全局变量只有浏览器关闭的时候才会销毁,比较占内存
-
局部变量,当程序执行完毕就会销毁,比较节约内存
-
预解析
js引擎运行js分为两步:
-
预解析
js引擎会把js里面所有的var还有function提升到当前作用于最前面
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
-
变量提升:就是把所有的变量声明提升到当前作用域最前面,不提升赋值操作
-
函数提升:就是把所有的函数声明提升到当前作用域最前面,不调用函数
-
-
代码执行
按照代码书写顺序从上往下执行
对象
在js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
JS中对象分为三种:自定义对象,内置对象,浏览器对象
对象是由属性和方法组成
-
属性:事物的特征,在对象中用属性来表示(常用名词)
-
方法:事物的行为,在对象中用方法来表示(常用动词)
创建对象的方式
-
利用字面量创建
就是大括号里面包含了表达这个具体事物(对象)的属性和方法、
var obj = {};//创建了一个空的对象 var obj = { uname: '张三丰', age: 18, sex: '男', sayhHi: function(){ console.log('hi'); } }
-
利用new Object创建
var obj = new Object();//创建了一个空的对象 obj.uname = '张三丰'; obj.age = 18; obj.sex = '男'; obj.sayHai = fuction(){ console.log('hi'); }
-
利用构造函数创建
fuction 构造函数名(){ this.属性 = 值; this.方法 = fuction(){ } } new 构造函数名();//调用函数
new在执行时会做四件事:
-
在内存中创建一个新的空对象
-
让this指向这个新对象
-
执行构造函数里面的代码,给这个新对象添加属性和方法
-
返回这个新对象(所以构造函数里不需要加return)
fuction Star(uname,age,sex){ this.name = uname; this.age = age; this.sex = sex; this.sing(sang){ console.log(sang) } } var ldh = new Star('刘德华',18,'男'); console.log(ldh.name); ldh.sang('冰雨'); var zxy = new Star('张学友',19,'男') console.log(zxy.age); zxy.sang('李香兰');
-
构造函数首字母要大写
-
构造函数不需要return就可以返回结果
-
调用构造函数必须使用new
利用构造函数创建对象的过程,也称为对象的实例化
-
调用对象
-
调用对象的属性:对象名.属性名 或 对象名['属性名']
-
调用对象的方法:对象名.方法名
遍历对象属性
for in语句用于对数组或者对象的属性进行循环操作
语句:
for (变量 in 对象){ }
var obj = { name:'刘德华'; sex:'男'; age:18 } for(var k in obj){ console.log(k);//输出得到的是属性名 console.log(obj[k]);//输出得到的是属性值 }
内置对象
查文档:w3c或mdn。mdn:developer.mozilla.org/zh-CN/
内置对象就是指JS中自带的一些对象,供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
Math对象
Math.PI //圆周率 Math.floor() //向下取整 Math.ceil() //向上取整 Math.round() //四舍五入,就近取整 Math.abs() //绝对值 Math.max() //求最大值 Math.min() //求最小值 Math.random() //随机数,返回一个随机的小数 得到两个数之间的随机整数,并且包含这两个数 Math.floor(Math.random() * (max - min + 1)) + min; fuction getRandom(min,max){ return Math.floor(Math.random() * (max - min + 1)) + min; } console.lig(1,10);
日期对象 date
是一个构造函数,必须使用new来调用创建日期对象
var date = new Date();//输出的是当前时间 //参数常见写法:数字型和字符串型 var date = new Date(2022,1,22); var date = new Date('2022-1-22 13:16:00'); console.log(date.getFullYear());//返回当前日期的年份 console.log(date.getMonth());//返回当前日期的月份。js中月份只有0-11,所以返回的月份会小一个月 console.log(date.getDate());//返回当前日期的日 console.log(date.getDay());//返回当前日期的周几 周日是0 console.log(date.getHours());//返回当前小时 console.log(date.getMinutes());//返回当前分钟 console.log(date.getSeconds());//返回当前秒 var date = +new Date();//返回的是距离1970.1.1过去了多少毫秒 d = parseInt(总秒数 / 60 / 60 / 24);//计算天数 h = parseInt(总秒数 / 60 / 60 % 24);//计算小时 m = parseInt(总秒数 / 60 % 60);//计算分钟 s = parseInt(总秒数 % 60);//计算秒数
数组对象 array
检测是否为数组
var arr = []; console.log(arr instanceof Array);//instanceof检测是否为数组,输出true console.log(Array.isArray(arr))//检测是否为数组,输出true
在数组添加新元素
var arr = [1,2,3]; arr.push(4,5);//在数组后添加新元素 arr.unshift(-1,0);//在数组前添加新元素 //返回值是新数组的长度
删除数组中的元素
arr.pop();//删除数组中最后一个元素。 arr.shift();//删除数组中的第一个元素。 //没有参数。返回结果是被删除的元素
翻转数组
reverse
var arr = [1,2,3]; arr.reverse();//输出结果为[3,2,1]
冒泡排序
sort
var arr = [3,4,7,1]; arr.sort();//输出1,3,4,7 缺点:只能解决单位数 解决方案: arr.sort(fuction(a,b){ return a - b;//升序 b - a 降序 })
数组索引方法
//返回数组索引号方法 //只返回第一个满足条件的索引号 //如果在数组中未找到该元素,则返回-1 var arr = [1,2,3]; console.log(arr.indexOf(2));//输出1,是2的索引号。从0往后找 console.log(arr.lastIndexOf(2));//从后往0找
数组去重
//要求把['c','a','z','a','x','a','x','c','b']中去除重复元素 //1.目标:把旧数组里面不重复的元素选取出来放到新数组,重复的元素只保留一个,放到新数组中去重 //2.核心算法:遍历数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里没出现过,就添加到新数组,否则不添加 //3.利用新数组.indexOf(数组元素),如果返回值是-1就说明新数组里面没有该元素 fuction 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']); console.log(newArr);//输出['c','a','z','x','b']
数组转化为字符串
//1. toString() var arr = [1,2,3]; console.log(arr.toString())//输出1,2,3 字符串类型 //2.join(分隔符) var arr = ['green'.'bule','pink']; console.log(arr.join());//输出green,bule,pink console.log(arr.join('-'))//输出green-bule-pink //在join()括号中添加符号可以设置元素用设置的符号隔开,默认为逗号
合并数组
cancat()
var arr1 = [1,2,3]; var arr2 = [a,b,c]; var arr3 = arr1.concat(arr2); console.log(arr3);//输出[1,2,3,a,b,c] var arr4 = [d,e,f] var arr5 = arr1.concat(arr2,arr4);//将三个数组合并
数组删除splice(第几个开始,删除个数)
var arr = [1,2,3]; arr.splice(3,0,4);//在索引3加入,删除0个。输出[1,2,3,4] arr.splice(start,deleteCount,item); //start:从第几个开始(索引号)。如果是负值,则表示从数组倒数第几个开始 //deleteCount:可选,表示要移出数组元素的个数。如果大于start之后的元素个数,则从start后面的元素都被删除(含第start位)。如果被省略了,则start之后数组所有的元素都会被删除。如果是0或者负数,则不删除 //item:要添加进数组的元素,从start位置开始。
字符串对象
基本包装类型:就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法
字符串的所有方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
根据字符返回位置
var str = '改革春风吹满地,春天来了'; console.log(str.indexOf('春'));//输出2(索引号) console.log(str.indexOf('春',3))//3的意思是从索引号3之后查找
根据位置返回字符
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index:字符串的索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码 | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML5,IE8支持和charAt()等效 |
ASCII码就是键盘上每个键对应的一个码数。如a对应的码数是97。主要用于获取用户按了哪个键
var str = 'andy'; console.log(str.charAt(3));//输出y console.log(str[0])//输出a
字符串操作方法
连接:cancat()
var str = 'andy'; console.log(str.concat('red'));//输出andyred
截取:substr(start,length)
从start位置开始(索引号),length取得个数
var str = '改革春风吹满地'; console.log(str.substr(2,2));//第一个2是截取的位置,第二个2是截取几个字符
替换字符串及转换为数组
替换字符:replace('被替换的字符','替换为的字符');
只会替换第一个字符
var str = 'andy'; console.log(str.replace('a','b'));//输出bndy
转换为数组:
split('分隔符')
var str = 'red,pink,bule'; console.log(str.split(','));//str里面用什么隔开则分隔符就是什么。输出['red','pink','bule']
转换为大小写
大写:toUpperCase
var str = 'ABCD'; console(str.toUpperCase());//输出abcd
小写:toLowerCase