JavaScript

JavaScript 2022-10-09

JavaScript

什么是JavaScript

编程类语言，是一种运行在客户端的脚本语言 客户端：自己的电脑 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

浏览器执行JS

浏览器分为两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink。老版本的webkit

JS引擎：也称为JS解析器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码，JS引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行

JavaScript的组成

  1. ECMAScript：JavaScript语法 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

  2. DOM：页面文档对象模型

  3. BOM：浏览器对象模型

JS书写位置

  1. 行内 在标签内部书写

  2. 内嵌 在head中添加script，在script中书写

  3. 外部 创建一个.js文件，用script引入

    <script src="xxx.js">中间什么也不要写</script>

输入输出语句

方法说明归属
alert（msg）浏览器弹出警示框浏览器
console.log（msg）浏览器控制台打印输出信息浏览器
prompt（msg）浏览器弹出输入框，用户可以输入浏览器

msg里面填写内容

变量

概述

白话：装东西的盒子

通俗：就是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

本质：变量是程序在内存中申请的一块用来存放数据的空间

使用

  1. 声明变量

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

    • var是一个JS关键字，用来声明变量（variable变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间。

    • age是定义的变量名，我们通过变量名来访问内存中分配的空间。

  2. 赋值

    age = 10;  给age这个变量赋值为10

    • =用来把右边的值赋给左边的变量空间中，此处代表赋值的意思

    • 变量值是程序员保存到变量空间的值

变量的初始化 

var age = 'skybule';  //声明变量的同时辅赋值为18

声明一个变量并赋值，我们称之为变量的初始化

语法扩展

  • 更新变量

    一个变量被重新赋值后，它原有的值就会被覆盖，变量值以最后一次赋值为准

  • 声明多个变量

    var age = 18,
    addres = '火影村',
    gz = 2000;

    同时声明多个变量时，只需写一个var，多个变量名之间用逗号，隔开。

  • 声明变量的特殊情况

    1. 只声明，不赋值。输出就是undefined（未定义的）

    2. 不声明，不赋值，直接使用。报错

    3. 不声明，只赋值。可以直接使用，不推荐

命名规范

  • 由字母，数字，下划线，美元符号组成

  • 严格区分大小写。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

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

  1. 字符串嵌套：js可以用单引号嵌套双引号，也可以用双引号嵌套单引号

  2. 字符串转义字符：

    转义字符都是\开头

转义符解释说明
\n换行符
\斜杠\
\ '单引号
\ "双引号
\ttab缩进
\b空格

  1. 字符串长度：

通过字符串的length属性可以获取整个字符串的长度

var myname = '我是xxx';
alert(myname.length);//显示5

  1. 字符串拼接

    多个字符串之间可以用+进行拼接，连接方式为字符串+任何类型=拼接之后的新字符串

布尔值 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<2true
>大于号1>2false
<=小于等于号3<=2false
>=大于等于号2>=2true
==判等号（会转换数据类型）37==37true
!=不等号37！=37false
=== !==全等，要求值和数据类型都一致37 ===’37‘false

逻辑运算符

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

逻辑运算符说明案例
&&逻辑与，简称与， andtrue&&false
||逻辑或，简称或，ortrue||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语句的区别

  1. 一般情况下，他们两个可以相互转换

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

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

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

三元表达式

 

循环

目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

在js中，主要有三种类型的循环语句：

for循环

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

语法结构：

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

比如：

for(var i = 1; i<=100;i++ ){
    console.log('你好吗');
}
//你好吗循环100遍

执行过程

  1. 首先执行里面的初始化变量（计数器变量） var i =1 但是这句话在for里面只执行一次

  2. 去 i<= 100来判断是否满足条件，如果满足就去执行循环体，不满足则退出循环

  3. 最后执行i++ i++是单独的代码，递增 第一轮结束

  4. 第二轮：接着去执行i <= 100，如果满足就执行循环体，不满足则退出循环，

  5. 再执行i++ i++是单独的代码，递增 第二轮结束

  6. 以此类推

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);

函数

概念

就是封装了一段可以被重复执行调用的代码块

目的：就是让大量代码重复使用

使用

  1. 声明函数

    function 函数名(){
    //函数体
}

  2. 调用函数

    函数名（）;

函数的参数

形参和实参

在声明函数时，可以在函数名后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

形参和实参不匹配时：

相同时：输出正确结果

实参小于形参：多的定义为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之前）：全局作用域、局部作用域

在js中，根据作用域不同，变量可以分为两种：

  • 全局变量：在全局作用域下的变量。如果在函数内部没有声明直接赋值的变量也属于全局变量

  • 局部变量：在局部作用域下的变量。在函数内部的变量就是局部变量。函数的形参也可以看做是局部变量

    1. 全局变量只有浏览器关闭的时候才会销毁，比较占内存

    2. 局部变量，当程序执行完毕就会销毁，比较节约内存

预解析

js引擎运行js分为两步：

  1. 预解析

    js引擎会把js里面所有的var还有function提升到当前作用于最前面

    预解析分为变量预解析（变量提升）和函数预解析（函数提升）

    • 变量提升：就是把所有的变量声明提升到当前作用域最前面，不提升赋值操作

    • 函数提升：就是把所有的函数声明提升到当前作用域最前面，不调用函数

  2. 代码执行

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

对象

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

JS中对象分为三种：自定义对象，内置对象，浏览器对象

对象是由属性和方法组成

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

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

创建对象的方式

  1. 利用字面量创建

    就是大括号里面包含了表达这个具体事物（对象）的属性和方法、

    var obj = {};//创建了一个空的对象
​
var obj = {
    uname: '张三丰',
    age: 18,
    sex: '男',
    sayhHi: function(){
        console.log('hi');
    }
}

  2. 利用new Object创建

    var obj = new Object();//创建了一个空的对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHai = fuction(){
    console.log('hi');
}

  3. 利用构造函数创建

    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('李香兰');

    利用构造函数创建对象的过程，也称为对象的实例化

调用对象

遍历对象属性

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

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...