javascript总结

1计算机基础

1.1计算机组成

计算机由硬件和软件组成

硬件系统:

主机部分外部设备
中央处理器:运算器,控制器输入设备:鼠标,键盘,其他
内存储器:随机存储器,只读存储器

输出设备:屏幕,音响,打印机,其他

辅助存储器:硬盘,软盘,光盘,其他

软件系统:

系统软件应用软件

操作系统

语言处理程序

数据库管理系统

其他

应用程序

工具程序

其他

1.2数据存储

  1. 计算机内部由二进制0和1表示数据
  2. 所有数据,包括图片、文件等数据最终都会以二进制数据保存在硬盘中。
  3. 所有程序,包括操作系统,本质上都是各种数据,以二进制数据的形式保存在硬盘中。平时所说的安装应用程序,就是将二进制的程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

1.3数据存储单位

  • 位(Bit):1bit可以存储一个0或1,是最小的存储单位
  • 字节(Byte):1B=8b
  • 千字节(KB):1KB=1024B
  • 兆字节(MB):1MB=1024KB
  • 吉字节(GB):1GB=1024MB
  • 太字节(TB):1TB=1024GB

1.4程序运行

计算机运行软件的过程:

  1. 打开某个程序时,先从硬盘中把程序的代码加载到内存中
  2. CPU执行内存中的代码

注意:之所以要内存的一个重要原因,是因为cpu运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)

2.编程语言

2.1编程

  • 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,最后得到结果的过程。
  • 计算机程序:计算机所执行的一系列指令的合集,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

2.2计算机语言

  • 计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。
  • 计算机语言的种类可以分成机器语言,汇编语言和高级语言三大类。
  • 计算机最终所执行的都是机器语言,它是由0和1组成的二进制数,二进制是计算机语言的基础。

2.3翻译器

高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言。

2.4解释型语言和编译型语言的区别

  • 翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译,生成中间代码文件,然后运行中间代码文件,转换成机械语言后执行
  • 解释器是在运行时进行及时解释为机械语言,并立即执行

3.Javascript的特点

  • Javascript是一个脚本语言,可跨平台,支持面向对象
  • 脚本(Script)简单地说就是一条条的文本命令,按照程序流程执行
  • 常见的脚本语言:JavaScript、VBScript、Perl、PHP、Python等
  • 非脚本语言:C、C++、Java、C#等
  • 脚本语言与非脚本语言的区别: 非脚本语言一般需要编译、链接,生成独立的可执行文件后才能运行。 脚本语言依赖于解释器,只在被调用时自动进行解释或编译
  • JavaScript语言不依赖操作系统,仅需要浏览器的支持

3.1 JavaScript的组成

JavaScript由三部分组成:ECMAScript、DOM、BOM

3.2 ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景:JavaScript

微软:JScript

定义了JavaScript的语法规范

JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

3.3 DOM(Document Object Model) - 文档对象模型

一套操作页面元素的API(API(Application Programming Interface,应用程序接口))

DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。

3.4 BOM(Browser Object Model) - 浏览器对象模型

一套操作浏览器功能的API(接口-类库-方法),通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等。

4.使用JavaScript

4.1 行内代码

  • 使用 javascript: 前缀构建执行 JavaScript 代码的 URL
<a href="javascript:alert('hello')">点我</a>

所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL,当用户触发该 URL 时,javascript: 之后的 JS 代码就会获得执行

  • 将 JS 代码写到元素的事件属性值中
<div onclick="window.alert('Hello JavaScript!')"></div>

这两种方式只适用于代码量比较少的时候,如果代码比较多,建议使用内部代码或写到单独的 JS 文件中

4.2内部代码(内嵌式)

如果页面需要中包含大量的 JavaScript 代码,则建议将这些JavaScript脚本放在 <script> 标签中。<script> 元素即可作为 <head> 的子元素,也可作为 <body> 的子元素,通常位于<body>元素闭合标签的前面。

<script type="text/javascript">
	alert('Hello JavaScript')
</script>

4.3 外部代码(外链式)

为了让 HTML 页面和 JavaScript 脚本更好地分离,我们可以将 JavaScript脚本单独保存在一个 .js 文件中,HTML 页面导入该 .js 文件即可

<script src="test.js" type="text/javascript"></script>

注意:

  • 由于现代网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式
  • 存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)
  • 解决的办法:对于不需要提前执行的代码,将<script>标签放在<body>标签的底部,可以减少对整个页面下载的影响

5.Window对象

Window 对象表示浏览器中打开的窗口。

在页签浏览器(比如 Chrome)中,浏览器会为 HTML 文档创建一个 window 对象,每个页签具有自己的 window对象。同一个窗口的页签之间不会共享一个 window 对象。window对象给我们提供了一些方法、属性和事件

5.1 Window对象的方法

// 警告框
window.alert('哈哈');
// 确认框
window.confirm('确认退出该应用吗?');
// 输入框
window.prompt('请输入密码?');

5.2 window对象的属性

window对象是BOM的顶层(核心)对象,其他对象都是以属性的方式添加到window对象下,称为window的子对象。

  • window对象的console属性也是一个对象,它提供了几个可以在控制台输出信息的方法。

  • 再例如:window对象的document属性是非常重要的对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。

  • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

// 日志信息
window.console.log('日志信息');
// 显示一个对象的所有属性和方法
window.console.dir(window);
//document对象输出的方法,使用该方在文档中输出 HTML
window.document.write("输出到文档");

6. JavaScript语法

6.1 标识符

标识符就是指变量、函数、属性、或者函数参数的名字

定义规则:

  • 由大小写字母、数字、下划线和美元符号($)组成。
  • 不能以数字开头
  • 不能使用JavaScript中的关键字命名
  • 严格区分大小写
  • 尽量见名知意

6.2 注释

// 单行注释
/*
这是内容比较多的,
多行注释。
*/
/* 多行注释 /* 不能嵌套使用, */ 

6.3 关键字

这些标识符已经被 ECMAScript 收录(使用)了,它们被赋予特殊的意义(功能)了,所有我们不能使用它们作为标识符。

break

casecatchclassconstcontinue
debuggerdefaultdeletedoelseexport
extendsfalsefinallyforfunctionif
importininstanceofnewnullreturn
superswitchthisthrowtrytrue
typeofvarvoidwhilewithyield

6.4 保留字

虽然这些标识符并没有被 ECMAScript 收录,但是将来的某个时候,可能会被ECMAScript 收录,变成关键字,也就是说,这些标识符已经被预定了,因此我们也不能使用它们。

abstractargumentsawaitbytebooleanchar
doubleenumevalfinalfloatgoto
implementsintinterfaceletlongnative
packageprivateprotectedpublicshortstatic
synchronizedthrowstransientvolatile

6.5 代码规范

  1. JavaScript对换行、缩进、空格不敏感。也就是说:
    <script>
    	alert("今天蓝天白云");
    	alert("哈哈哈,我很高兴");
    </script>
    
    <!--等价于-->
    
    <script type="text/javascript">
        alert("今天蓝天白云");
        alert("哈哈哈,我很高兴");
    </script>
    
    <!--等价于-->
    
    <script type="text/javascript">
        alert("今天蓝天白云");alert("哈哈哈,我很高兴");
    </script>

  2. 每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行了。
  3. 所有的符号,都必须是是英文的。比如括号、引号、分号。

7.变量

7.1 定义变量

  • 变量是一种使用方便的占位符,用于引用计算机内存地址,该地址可以存储Script运行时可更改的程序信息,存放数据的容器。

  • 语法:JavaScript中变量通常利用var关键字声明,并且变量名的命名规则与标识符相同。要声明一个变量你需要首先使用关键字 var,然后输入任何你想要的名称,但是要符合标识符的命名规则

  • 命名规则:当标识符中需要多个单词进行表示时,常见的表示方式有下划线法(如user_name)、驼峰法(如userName)和帕斯卡法(如UserName)。读者可根据开发需求统一规范命名的方式,如下划线方式通常应用于变量的命名,驼峰法通常应用于函数名的命名等。

7.1.1 如何使用变量

  • var声明变量

    var age;
  • 变量的赋值

    var age;
    age = 18;
  • 变量初识化

    var fname = 'xiaogu';
    //省略var
    name = 'xiaohao';
  • 同时声明多个变量

    var age, name;
    age = 10;
    name = 'xiaogu';
  • 同时声明多个变量并赋值

    var age = 10, name = 'xiaogu'; 

注意点:不声明,直接省略var关键字为变量赋值不会发生错误,但是在函数内部不用var的变量是全局变量

7.1.2 变量在内存中的存储

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

7.2 变量声明提升

变量被定义之后,你可以通过变量名称读取变量的值:

var myVariable = 'Hello';
console.log(myVariable);

在变量定义代码之前,通过变量名称读取变量的值

console.log(myVariable); // undefined
var myVariable = 'Hello';

由于变量的声明会被提升到当前作用域的最顶端,而赋值并不会被提升,因此上面的代码输出 undefined。等价于:

var myVariable;
console.log(myVariable); // undefined
myVariable = 'Hello';

8. 数据类型

  • 为什么需要数据类型?

在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。 简单来说,数据类型就是数据的类别型号。比如姓名“张三”,年龄18,这些数据的类型是不一样的。

  • 变量的数据类型

变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

  • JavaScript是一种弱类型或者说动态类型的语言。在声明变量时,我们不要指定变量的类型,在程序运行过程中,类型会被自动确定。这意味着JS变量的内存空间中可以存放任意类型的数据。

  • 基本数据类型:Undefined、 Null、 String、 Number、 Boolean

  • 复合数据类型:Object

8.1原始类型

8.1.1 Boolean 类型

布尔类型表示一个逻辑值,有两个值:true 和 false。

8.1.2 Number类型

数字类型用于表示数值,整数、浮点数(小数),还有一些带符号的值:+Infinity(正无穷大),-Infinity(负无穷大)和 NaN (非数值,Not a Number)。

8.1.3 String类型

字符串类型用于表示文本数据,使用单引号或双引号括起来

声明字符串时,可使用双引号,也可使用单引号,但是推荐使用单引号

转义字符:

在字符串中使用换行、Tab等特殊符号时,也需要利用转义符“\”的转义。

特殊字符含义特殊字符含义
\'单引号\"双引묵
\n回车换行\v跳格(Tab、水平)
\tTab符号\r换行
\f换页\\反斜杠(\)
\b退格\0Null字节
\xhh由两位16进制数字hh表示的ISO-8859-1字
符。如“\x61”表示“a”
\uhhhh由四位16进制数字hhhh表示的Unicode字
符。如“\u597d”表示“好”

8.1.4 Undefined类型

Undefined 类型只有一个值,即 undefined。任何一个只声明而没有赋值的变量都会被隐式的(自动的)赋值为 undefined

8.1.5 Null类型

Null 类型也只有一个值,即 null。

null是表示缺少的标识,指示变量未指向任何对象。把 null作为尚未创建的对象,也许更好理解。

  • 注意点: 与null不同的是,undefined表示没有为变量设置值,而null则表示变量(对象或地址)不存在或无效

8.2复杂数据类型(引用类型)

在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。

在 Javascript里,引用类型的数据指的是各种对象,他们在内存中的存储方式与原始类型的数据不同。

以Object对象为例,Object对象是一组属性的集合。属性包含一个属性名和一个属性值,如下所示:

var person = {
    uname: "张美丽",
    age: 18,
    sex:false
};

person变量的存储空间的数据如下:

8.3 检测数据类型

  • typeof操作符
// 基本类型或原始类型
var myName = '张三';
var age = 18;
var gender = false;
var weight = undefined;
var phone = null;

// 检查原始数据的类型
console.log(typeof myName); // 'string'
console.log(typeof age); // 'number'
console.log(typeof gender); // 'boolean'
console.log(typeof weight); // 'undefined'
console.log(typeof phone); // 'object'

// 引用类型
var car = {
    color: '金色',
    brand: '宝马'
};

// 检查引用数据的类型
console.log(typeof car); // 'object'

8.4 数据类型转换

强制转换:编程人员编写代码强制对数据进行转换

隐式转换:不是编程人员刻意去转换的,而是浏览器(JS 解析引擎)帮我们自动转换的

8.4.1其他类型转成Boolean

使用 Boolean( ) 方法将其他类型的数据转换成 Boolean 类型。

下面这些值将被转换成 false

  • undefined

  • null

  • 0

  • NaN(不是一个数值)

  • ''

下面这些值将被转换成 true。

  • 非空字符串

  • 非零数字

  • 对象

8.4.2其他类型转成Number

转数值型的函数在使用时有一定的区别

待转数据Number()parseInt()parseFloat()
纯数字字符串转成对应的数字转成对应的数字转成对应的数字
空字符串0NaNNaN
数字开头的字符串NaN转成开头的数字转成开头的数字
非数字开头的字符串NaNNaNNaN
null0NaNNaN
undefinedNaNNaNNaN
fasle0NaNNaN
true1NaNNaN

8.4.3其他类型转成String

  • 使用 String() 方法将其他类型的数据转换成 String 类型。

  • String()函数可以将任意类型转换为字符型;

  • 使用toString()将其他类型的数据转换成 String 类型。

  • 除了null和undefined没有toString()方法外,其他数据类型都可以完成字符的转换。

8.4.4隐式类型转换

  • 利用隐式转换将字符串类型的数据转换成Number类型
// 当非数字类型的字符串相减时,结果都等于NaN
console.log('abc' - '18'); // NaN

// 当数字类型的字符串进行
// 减、乘、除、取余运算时,首先会将字符串转换成数字,然后再进行运算,最终的结果返回的是数值型。
console.log('28' - '18'); // 10 
console.log('3' * '4'); // 12 
console.log('32' / '4'); // 8 
console.log('12' % '5'); // 2 
  • 使用方法时进行隐式类型转换

用于检查其参数是否是非数字值(isNaN() 函数)

isNaN()函数将测试值转换为数字,然后对其进行测试,判断是否=NaN

  • 利用隐式转换将其他类型的数据转换成 String类型。
console.log(12 + ''); // '12' 最终的结果返回的是字符型
console.log(12 + 3 + '4'); // '154'
console.log( '4'+ 12 + 3); // '4123'

9. 操作符

9.1 算数运算符

算数运算符和我们在数学中的学的一样,主要用于数值的运算,JavaScript中提供的算数运算符有下面这些:

操作符作用
+
-
*
/除(斜杠)
%取余数
( )提高优先级
  • 特殊情况-字符型数据运算
//减、乘、除、取余运算时,首先会将字符串转换成数字,然后再进行运算。
console.log('28' - '18'); // 10 
console.log('32' / '4'); // 8 
console.log('3' * '4'); // 12 
console.log('12' % '5'); // 2 
// 数值和字符运算
console.log(12 + ''); // '12'
console.log(12 + 3 + '4'); // '154'相邻两个相加,有一个是字符串类型就进行拼接
console.log('4'+ 12 + 3); // '4123'
//特殊情况
console.log('123abc' - '123'); //NaN
  • 特殊情况-浮点数进行运算
    console.log(0.1 + 0.2) //0.30000000000000004

    在计算机中四则运算会先将数转成二进制数,再进行运算,有些小数转换成二进制是无限不循环,相加后再转成十进制,计算机显示的位数有限所以会有精度丢失

9.2赋值运算符

简单的赋值操作符由等号(=)表示,它的作用就是把右侧的值赋值给左侧的变量,如下所示:

var num = 7;
//如果在等号(=)前面再添加算术运算符的话,就可以完成复合赋值操作
num = num + 9;
//第二行代码可以用一个复合赋值来代替:
num += 9;

每个算术操作符都有对应的复合赋值操作符,如下表所示:

操作普通写法简写形式
普通赋值var age = 20var age = 20
加法赋值age = age + 1age += 1
减法赋值age = age - 1age -= 1
乘法赋值age = age * 2age *= 2
除法赋值age = age / 2age /=2
求余赋值age = age % 3age %= 3

9.3自增自减操作符

i++  ++i

  • 在不参与运算的情况下:它们都是自增1
  • 在参与运算的情况下,++写在后面,先参与运算,然后加1;++写在前面,在参与运算前,i先加1,然后再参与运算

i-- --i

  • 在不参与运算的情况下,都是自减1

  • 在参与运算的情况下,--写在后面,先参与运算,然后减1;--写在前面,在参与运算前,i先减1,然后再参与运算

9.4逻辑运算符

运算符含义
&&与(且)
||
!

逻辑与(&&)

逻辑与操作符由符号 && 表示,有两个操作数,逻辑与的真值表如下:

第一个操作数第二个操作数结果
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

逻辑与的操作数不仅仅是布尔值,还可以应用于任何类型的操作数。此时,它遵循下列规则:

  • 如果两个操作数被转换成布尔值第一个是 true,则返回第二个操作数;

  • 如果两个操作数被转换成布尔值第一个为false,则返回第一个操作数;

console.log(false && true); // false
console.log('abc' && 1); // 1,非空字符串转Boolean返回true

逻辑与操作属于短路操作,即如果第一个操作数是 false,那么无论第二个操作数是什么值,结果都不可能是true了,即第二个操作数就不进行操作。

逻辑或(||)

逻辑或操作符由两个竖线符号(||)表示,由两个操作数,如下所示:

var result = true || false;  //true

逻辑或的真值表如下:

第一个操作数第二个操作数结果
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

与逻辑与操作符一样,逻辑或的操作数也不仅限于布尔值,它也可以是其他类型的操作数。此时,它遵循下列规则:

  • 如果两个操作数被转换成布尔值第一个是 true,则返回第一个操作数;

  • 如果两个操作数被转换成布尔值第一个为false,则返回第二个操作数;

console.log(false || true); // true
console.log('abc' || 1);    // 'abc'
console.log('' || 0);       // 0

与逻辑与操作符一样,逻辑或操作符也是短路操作符。也就是说,如果第一个操作数的求值结果为true,就不会对第二个操作数求值了。

逻辑非(!)

逻辑非操作符由一个叹号(!)表示,可以应用于 ECMAScript 中的任何值。无论这个值是什么数据类型,这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。逻辑非操作符遵循下列规则:

  • 如果操作数被转换成布尔值之后是true,直接返回布尔值:false;

  • 如果操作数被转换成布尔值之后是false,直接返回布尔值:true;

alert(!"");               //true
alert(!"hello world");    //false
alert(!0);                //true
alert(!23);               //false

9.5关系运算符

操作符作用
>大于号
<小于号
>=大于或等于
<=小于或等于
==等于
===全等于
!=不等于
!==不全等于

小于(<)、大于、小于或等于、大于或等于这几个关系操作符用于对两个值进行比较,比较的规则与我们在数学课上学的一样。这几个操作符都返回一个布尔值,看下面的例子:

    var result = 5 > 3;  //true
    var result = 5 < 3;  //false

当参与比较的操作数是非数值类型时,则会先进行数据类型转换,然后再参与比较。比较规则如下:

  • 如果两个操作数都是数值,则执行数值比较。

  • 如果两个操作数都是字符串,则比较两个字符串对应的字符编码值。

  • 如果一个操作数是数值,则将另一个操作数转换为一个数值,然后执行数值比较。

==和===的用法

  • 对于基本数据类型来说: ==当类型相等时,判定值是否相等,当类型不相等时,转换成相同的类型后,比较值是否相等。 ===只有当类型相等时,判定值是否相等。

9.6条件运算符(三元运算符)

语法:

表达式 ? 如果表达式结果为true,执行这里的代码1 : 如果表达式结果为false,执行冒号后面的代码2 ;

执行顺序:

  1. 判断条件表达式是否为 true

  2. 如果为 true,执行问号(?)后面的代码

  3. 如果为 false,执行冒号(:)后面的代码

9.7运算符优先级

结合方向运算符
()
[] new (有参数,无结合性)
new (无参数)
++(后置)  --(后置) 
! ~ -(负数)+(正数)++(前置)--(前置)typeof  void  delete
**
*  /  %
+  -
<<  >>  >>>
<  <=  >  >=  in  instanceof
==  !=  ===  !==
&
^
|
&&
||
?:
=  +=  -=  *=  /=  %=  <<=  >>=  >>>=  &=  ^=  |=

常用运算符优先级从高到底

  1. ( )优先级最高
  2.  一元运算符 ++ -- !
  3. 算数运算符 先* / % 后 + -
  4. 关系运算符 > >= < <=
  5. 相等运算符 == != === !==
  6. 逻辑运算符 先&& 后||
  7. 赋值运算符

10流程控制语句

10.1 if-else语句

根据条件返回的结果(真或假或其它预定义的),来判断下一步要执行的语句,条件可以是任何返回结果是 truefalse 的表达式。如果条件表达式返回的是 true,语句1 会被执行;否则,语句2 被执行。

if (判断条件) {  

	语句一
}else {

	语句二
}

10.2 switch语句

switch 语句允许用一个表达式的值或一个变量和 case 标签后面的值相匹配。如果匹配成功,就执行这个 case 标签后面的代码。

switch (一个表达式的值或一个变量) {

   case 常量1:
      要执行的代码1
      break;
   case 常量2:
      要执行的代码2
      break;
   ...
   default:
      要执行的代码
      break;
}

执行顺序:

  1. 首先会判断第一个 case 后面的值是否与表达式的结果相等;

  2. 如果相等,就会执行 case 后面代码,当遇到 break 时,switch 语句停止执行;

  3. 如果不匹配,接着判断下一个 case 后面的值;

  4. 如果所有的 case 都不匹配, 程序会去执行 default 后面的代码;

  5. switch比较的值是===等关系。

注意:default 语句不是必须的,在不需要的时候可以不写。如果需要的话,应该写在switch语句的最后。

10.3 break语句

break语句可以在循环体或判断语句中,只要代码遇到break,就会立马结束当前循环或者判断。

10.4 for语句

语法:

for(var i = 0; i <= 10; i++){

    循环体代码
}

执行顺序:

  1. 首先进行变量初始化(var i = 0),通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数。;

  2. 判断条件表达式是否成立(i <= 10);

  3. 如果条件成立,则执行循环体内的代码,执行完之后,执行 i++,让 i 自增 1 ,接着再次判断条件表达式是否成立,如此循环往复,直到条件表达式不成立为止;

  4. 如果条件不成立,则循环体内的代码不会执行,循环结束。

10.5 continue语句

continue语句的作用是终止本次循环,接着进行下一次循环。

10.6 while语句

语法:

while(条件表达式){

	循环体内的代码
}

执行顺序:

  1. 首先判断条件表达式是否成立;

  2. 如果成立,执行大括号中的代码,然后再次判断条件表达式是否成立;

  3. 如果不成立,就不执行大括号中的代码,循环结束。

10.7 do-while语句

语法:

do{
  循环体;

}while(条件表达式);

执行顺序:

  1. 程序一开始,直接进入循环体内,执行一遍循环体内的代码;

  2. 判断条件表达式是否成立,如果条件成立,那么继续执行循环体内的代码;

  3. 如果条件表达式是否成立,那么循环体内的代码就不再执行,循环结束;

10.8 布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

  • 转换为true   非空字符串  非0数字  true 任何对象
  • 转换成false  空字符串  0   null  undefined NaN  false

11.数组

概念:数组是存储一系列值的变量集合,可以存储多个值。

11.1语法

数组构成:数组由一个或多个数组元素组成的,各元素之间使用逗号“,”分割。

数组元素:每个数组元素由“索引下标”和“值”构成。

索引下标:简称下标,以数字表示,默认从0开始依次递增,用于识别元素。

值:元素的内容,可以是任意类型的数据,如数值型、字符型、数组、对象等。

11.2创建数组

使用数组直接量是创建数组最简单、最直观的方法,在方括号中将数组元素用逗号隔开即可

var empty = []; // 没有元素的空数组
​
var num = [1, 3, 5, 7, 9]; // 有 5 个数值的数组
​
var mix = ['Bob', 20, true]; // 3 种不同元素的数组
调用构造函数 Array() 是创建数组的另一种方法。
// 元素值类型为字符串
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();   或    var arr2 = new Array; //等同于数组直接量 [ ]
// 指定长度的数组
var len = new Array(5); //这种方式用来创建指定长度的数组。当预先知道所需元素个数时,这种方式可以用来预先分配一个数组空间。注意,数组中没有存储值,不能认为它是包含 5个值为 undefined 元素的数组
//含有3个空储存位置
var emptyPlace1 = ['abc', , , ,'123']; 
//会报语法错误
var emptyPlace2 = new Array(56, 68, , , ,98);

注意:

  1. 在创建数组时,最后一个元素后的逗号可以省略,也可以存在。
  2. 直接法“[]”与Array()对象在创建数组时的区别在于,前者可以创建含有空存储位置的数组,而后者不可以。

11.3访问和修改数组元素

数组创建完成后,我们可以 [ ] 操作符访问数组中的元素,数组的引用位于方括号左边。 方括号中是一个返回非负整数的任意表达式。使用该语法即可以访问数组中的元素,又可以修改数组中的元素,添加元素。

var letters = ['a', 'b', 'c', 'd'];

console.log(letters[0]); // 访问索引为 0 的元素 'a'

console.log(letters[4 - 2]); // 访问索引为 2 的元素 'c'

letters[1] = 1; // 修改索引为 1 的元素 ['a', 1, 'c', 'd']

letters[1 + 2] = 3; // 修改索引为 3 的元素 ['a', 1, 'c', 3]

letters[4]='A';//添加一个元素,放在索引为4的位置

delete关键字只能删除数组中指定下标的元素值,删除后该元素依然会占用一个空的存储位置

var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu);	// 输出结果:(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1];	// 删除数组中第2个元素
console.log(stu);	// 输出结果:(3) ["Tom", empty, "Lucy"]

11.4 数组长度

  • 每个数组都有一个 length 属性,length 属性值代表数组中元素的个数。
  • 修改数组长度

数组的 length 属性不仅可以用于获取数组长度,还可以修改数组长度。

在利用 length 属性指定数组长度是,有以下三种情况

  • 设置的length 属性
  • 等于数组长度:不变
  • 大于数组长度:在后面会出现empty
var arr1 = [];
arr1.length = 5;
console.log(arr1);      // 输出结果:(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4; 
console.log(arr2);      // 输出结果:(4) [1, 2, 3, empty]

11.5 数组遍历数组

  • 使用 for 循环遍历数组

var heroes = ['刘邦', '张良', '韩信', '萧何','刘备'];
var len = heroes.length;
for (var i = 0; i < len; i++) {
	console.log(heroes[i])
}

11.6 二维数组

数组还可以根据维数划分为一维数组、二维数组、三维数组等多维数组

创建二维数组

// 使用“[]”创建数组
var num = [[1, 3], [2, 4]];
var empty = [[], []];		            // 空二维数组
// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr = new Array(new Array, new Array);// 空二维数组

二维数组遍历

二维数组只需在遍历数组后,再次遍历数组的元素即可

var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9, 0]];
// 遍历外层
for (var i = 0; i < arr.length; i++) {
    // console.log(arr[i]);
    // 遍历里层
    for (var j = 0; j < arr[i].length; j++) {
        console.log(arr[i][j]);
    }
}

11.7 数组排序

1.7.1 最大值和最小值

if (arr[i] > max) {    // 当前元素比最大值max大,则修改最大值
      max = arr[i];
    }
    if (arr[i] < min) {    // 当前元素比最小值min小,则修改最小值
      min = arr[i];
    }

1.7.2 冒泡排序

实现原理:在冒泡排序的过程中,按照要求从小到大排序或从大到小排序,不断比较数组中相邻两个元素的值,将值大的元素或最小的元素交换至右端。

算法步骤

  1. 比较相邻的元素。如果第一个比第二个大,就交换他们两个。
  2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。
  3. 针对所有的元素重复以上的步骤,除了最后一个。
  4. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
 var arr = [10, 2, 5, 27, 98, 31];
  console.log('待排序数组:' + arr);
  for (var i = 0; i < arr.length-1; i++) {          // 控制需要比较的轮数
    for (var j = 0; j < arr.length - i-1; j++) {    // 控制参与比较的元素
      if (arr[j] > arr[j + 1]) {                  // 比较相邻的两个元素
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];//解构交换
      }
    }
  }
  console.log('排序后的数组:' + arr);

12.数组操作方法

改变原数组方法
arr.push()将一个或多个元素添加到数组的末尾
arr.pop()从数组的末尾删除一个元素。
arr.unshift()将一个或多个元素添加到数组的开头
arr.shift()从数组的开头删除一个元素。
arr.splice()通过删除或者替换现有元素或者原地添加新的元素来修改数组。
arr.reverse()数组中元素的位置颠倒,并返回该数组。
不改变原数组方法
arr.includes()用于确定数组中是否含有某个元素。
arr.indexOf()检测当前值在数组中第一次出现的位置索引。
arr.join()将数组的所有元素连接到一个字符串中。
arr.toString()返回包含所有数组值的字符串,以逗号分隔。
arr.slice()复制原数组的部分内容。
arr.concat()用于连接两个或多个数组。

12.1 栈方法和队列方法

12.1.1 push()

push()
功能描述将一个或多个元素添加到数组的末尾
语法arr.push(element1, ..., elementN)
参数被添加到数组末尾的元素。
返回值返回数组的新长度。
改不改变原数组改变原数组

12.1.2 pop()

pop()
功能描述从数组的末尾删除一个元素。
语法arr.pop()
参数
返回值返回数组中删除的元素,若是空数组则返回undefined
改不改变原数组改变原数组

12.1.3 unshift()

unshift()
功能描述将一个或多个元素添加到数组的开头
语法arr.unshift(element1, ..., elementN)
参数要添加到数组开头的元素或多个元素。
返回值返回数组的新长度。
改不改变原数组改变原数组

12.1.4 shift()

shift()
功能描述从数组的开头删除一个元素。
语法arr.shift()
参数
返回值返回数组中删除的元素,若是空数组则返回undefined
改不改变原数组改变原数组
  • 栈结构特点:先进后出 push() pop()

  • 队列结构特点:先进先出 unshift() shift()

12.2 检索方法

12.2.1 includes()

includes()
功能描述用于确定数组中是否含有某个元素。
语法array.includes(item, [start])
参数item是查找的元素,start可选,规定在数组中开始检索的位置(包含本身的位置)。
返回值true或false。
改不改变原数组不改变原数组

不同参数情况分析:

  • 如果start为负值,则从最后一项开始算起,-1为最后一项,-2为倒数第二项。

  • 如果 array.length + start为负值,则整个数组都会被搜索。

  • 如果start大于等于数组长度 ,则返回 false 。该数组不会被搜索。

12.2.2 indexOf()

indexOf()
功能描述检测当前值在数组中第一次出现的位置索引。
语法indexOf(item,[start])
参数item是查找的元素,start可选,规定在数组中开始检索的位置(包含本身的位置)。
返回值返回值是在数组中可以找到给定值的第一个索引,如果不存在,则返回-1。
改不改变原数组不改变原数组

不同参数情况分析:

  • 如果start为负值,则从最后一项开始算起,-1为最后一项,-2为倒数第二项。

  • 如果 array.length + start为负值,则整个数组都会被搜索。

  • 如果start大于等于数组长度 ,则返回-1 。该数组不会被搜索。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值