ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript

2022-01-23 17:01:49  阅读:4517  来源: 互联网

标签:arr console log JavaScript 运算符 数组 var


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循环

  • while循环

  • do while 循环

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之前):全局作用域、局部作用域

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

  • 局部作用域(函数作用域):在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用

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

    • 构造函数首字母要大写

    • 构造函数不需要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

标签:arr,console,log,JavaScript,运算符,数组,var
来源: https://blog.csdn.net/Koite/article/details/122653478

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有