JavaScript基础总结(一)-CSDN博客

本文链接：https://blog.csdn.net/weixin_50233139/article/details/131413593

文章目录

一、初始JavaScript

1.1JavaScript的创作者

布兰登·艾奇(Brendan Eich, 1961年~)

神奇的大神用了10天就完成了JavaScript设计
最初命名为LiveScript，后来在sun合作之后将其改名为JavaScript

1.2JavaScript是什么

JS是WEB开发领域一种强大的编程语言，主要用于开发交互式的WEB页面。HTML CSS JS 分别代表了结构，样式，和行为。结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑。

浏览器内核分为两部分：渲染引擎和JS引擎。渲染引擎负责解析HTML与CSS。JS引擎是JS的解析器，用于读取网页的JS代码

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译，运行过程中由js解释器(js的引擎)逐步来进行解释并执行
现在也可以基于Node.Js技术进行服务器端的编程

1.3JavaScript的作用

表单动态校验(密码强度检测)(这是当时研发js最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
APP(Cordova)
控制硬件-物联网(Ruff)
游戏开发 (cocos2d-js)

1.4 HTML/CSS/JS 的关系

HTML/CSS 标记语言–描述类语言

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。

2、CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})

也可以这样理解

HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆

JS 脚本语言–编程类语言

实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

1.5 浏览器执行 JS 简介

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

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

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

1.6JS的组成

js由

ECMAscript :JavaScript语法
DOM :页面文档对象模型
BOM :浏览器对象模型

ECMAscript

ECMAScript是由网景的布兰登·艾奇开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。ECMA Script是ECMA-262标准化的脚本语言的名称。尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMA Script的功能。

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”

DOM ——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM ——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

1.7JS初体验

JS 有3种书写位置，分别为行内、内嵌和外部。

行内式js

<input type="button"value="点击有惊喜"onclick="javascript:alert('哈哈哈哈')"> 
<!--onclick:点击触发一个事件，alert：弹出一个对话框-->

可以将单行或少量的js 代码写在HTML标签的事件中(以on开头的属性)
注意单双引号的使用:在HTML中我们推荐使用双引号，js中我们推荐使用单引号
可读性差，在HTML中编写js大量代码时，不方便阅读
引号易错
特殊情况下使用

2.内嵌式js

 <script>
    alert('Hello  World~!');
 </script>

3.外部js文件

<script src="m01.js"></script>

利于HTML页面代码结构化，把大段js代码独立到HTML页面之外，即美观，也方便文件级别的复用
引用外部js 文件的script标签中间不可以写代码
适合于代码量较大的情况

二、JavaScript的注释

2.1JavaScript单行注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。

单行注释的注释方式如下：

// 不想被 JS引擎 执行，所以就注释起来

// 用来注释单行文字（快捷键 ctrl + / ）

2.2JavaScript多行注释

/*我是一大段代码我想用多行注释*/

/* */ 用来注释多行文字（默认快捷键 alt + shift + a ）

快捷键修改为： ctrl + shift + /

vscode - 首选项按钮 - 键盘快捷方式 - 查找原来的快捷键 - 修改为新的快捷键 - 回车确认

三、JavaScript输入输出语句

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

四、变量的概述

1.什么是变量

用我们的平常话说: 变量就是一个装东西的盒子

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

2.变量在内存中的存储

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

类似我们住酒店的房间，一个房间就可以看做是一个变量。

3.变量的使用

变量在使用时分为两步:1声明变量 2赋值

3.1.声明变量

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

var 是一个js关键字，用来声明变量(variable变量的意思)。使用关键字声明变量后，计算机会自动分配内存空间，不需要程序员管理
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

3.2.赋值

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

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3.3.变量的初始化

var age  = 18;  // 声明变量同时赋值为 18

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

4、变量语法扩展

4.1.更新变量

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

var age = 18
age = 81 //最后的结果就是81因为18被覆盖掉了

4.2. 同时声明多个变量

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

var age = 10,  name = 'zs', sex = 2;

4.3.声明变量特殊情况

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age)	不声明不赋值，直接使用	报错
age= 10; console.log (age);	不声明只赋值	10

5、变量的命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $)组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

六、数据类型简介

1.为什么我们需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

2.变量的数据类型

变量用来存储值得所在处，它们有名字和数据类型变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; //这是一个数字型
var name = "张三"; //这是一个字符串

在代码运行时，变量的数据类型是由js 引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

3.数据类型的分类

js 把数据类型分为两类:

简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(Object)

4、简单数据类型

4.1简单数据类型(基本数据类型)

JavaScript中的简单数据类型及其书名如下

简单数据类型	说明	默认值
Number	数字型，包含整形和浮点型	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，字符串带引号	“”
Undefined	var a; 声明了变量a但是没有赋值,此时的a就是undefined	undefined
Null	var a = null; 声明了变量a为空值	Null

5、强制类型转换

强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean

5.1.转换为String类型

将其它数值转换为字符串有三种方式 : toString()、String()、拼串

方式一:调用被转换数据类型的toString() 方法，该方法不会影响到原变量，它将会转换的结果返回，但是注意:null和undefined这两个值没有toString方法，调用它们的方法，会会报错

var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);

方式二:调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将null直接转换成 “null”，将undefined转换为 “undefined”

var a = 123;
a = String(a);
console.log(a); //"123"
console.log(typeof a);//string

var b = undefined;
b = String(b);
console.log(b);// "undefined"
console.log(typeof b);//string

var c = null;
c = String(c);
console.log(c);// "null"
console.log(typeof c);//string

方式三：为任意的数据类型 +“”

var a = 123;
a = a + "";
console.log(a); // "123"
console.log(typeof a);// string

5.2.转换为Number类型

有三个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

方式一：使用Number()函数

字符串 --> 数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

布尔 --> 数字
true 转成 1
false 转成 0

null --> 数字
null 转成 0
undefined --> 数字
undefined 转成 NaN

方式二：这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数

var a = "123";
a = parseInt(a);
console.log(a);//123
console.log(typeof a);//number

方式三:这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

var a = "123.456";
a = parseFloat(a);
console.log(a);//123.456
console.log(typeof a);//number

5.3转换为Boolean类型

将其它的数据类型转换为Boolean，只能使用Boolean()函数。

使用Boolean()函数

数字 —> 布尔

除了0和NaN，其余的都是true

字符串 —> 布尔

除了空串，其余的都是true

null和undefined都会转换为false
对象也会转换为true

七、运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。

比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）

1.算术运算符

算术运算符用于表达式计算。

y=5，下面的表格解释了这些算术运算符

运算符	描述	例子	X运算结果	y运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（求余数）	x=y%2	1	5
++	自增	x=++ y x=y ++	6 5	6 6
–	自减	x=–y x=y–	4 5	4 4

2.关系运算符

关系运算符在逻辑语句中使用，以测定变量或值是否相等。

x=5，下面的表格解释了比较运算符：

运算符	描述	比较	返回值
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

3.赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

4.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
ll	or	(x==5 ll y == 5) 为 false
!	not	!(x==y) 为 true
关于逻辑运算符我们可以具体探讨一下：

&& 与：&&可以对符号两侧的值进行与运算并返回结果，运算规则如下：

两个值中只要有一个值为false，就返回false，只有两个值都为true时，才会返回true
JS中的“与”属于短路的与，如果第一个值为false，则不会检查第二个值
非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false，则返回靠前的false的值

|| 或：||可以对符号两侧的值进行或运算并返回结果，运算规则如下：

两个值中只要有一个true，就返回true，只有两个值都为false，才会返回false
JS中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值
非布尔值时：如果两个都为false ，则返回第二个值，如果两个值中有true，则返回靠前的true的值

! 非：!可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作，true变false，false变true，运算规则如下：

如果对一个值进行两次取反，它不会变化
非布尔值时：先会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其它的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

3.5、比较运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

使用 == 来做相等运算

当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较

使用 != 来做不相等运算

不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

使用 === 来做全等运算

用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

使用 !== 来做不全等运算

用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

6.条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法：variablename=(condition)?value1:value2;

举例：result=(age<18)?“年龄太小”:“年龄合适”;

执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

7.逗号运算符

使用逗号可以在一条语句中执行多次操作。

比如：var num1=1, num2=2, num3=3;

使用逗号运算符分隔的语句会从左到右顺序依次执行。

8.运算符的优先级

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
l	按位或
&&	逻辑与
ll	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

八.流程控制语句

1.语句

前边我所说表达式和运算符等内容可以理解成是我们一门语言中的单词，短语。而语句（statement）就是我们这个语言中一句一句完整的话了。语句是一个程序的基本单位，JavaScript的程序就是由一条一条语句构成的，每一条语句使用;结尾。

JavaScript中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

2.代码块

代码块是大括号{}中所写的与，以此将多条语句的集合视为一条语句来使用
例如:

{
    var a = 123;
    a++;
    alert(a);
}

3.条件语句

条件语句是用过判断指定表达式的值来决定还是跳过某些语句，最基本的条件语句

if — else
switch — case

3.1.if—else

if—else语句是一种最基本的控制语句，它让JavaScript可以有条件的执行语句。

var age = 18;
if (age < 18) {
    console.log("小于18岁了");
} else if (age == 18) {
    console.log("已经18岁了");
} else {
    console.log("大于18岁了")
}

3.2.switch…case

switch语句更适用于多条分支使用同一条语句的情况。

语法格式：

switch (语句) {
    case 表达式1:
        语句...
    case 表达式2:
        语句...
    default:
        语句...
}

例1:

var today = 1;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入错误");
}

例2:

var month = 10;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log("31天");
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log("30天");
        break;
    case 2:
        console.log("28天");
        break;
    default:
        console.log("输入错误");
}

九.循环语句

循环语句和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

while
do…while
for

1.while

while语句是一个最基本的循环语句，while语句也被称为while循环。
语法格式：

while(条件表达式){
    语句...
}

案例：输出1-10

var i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

2.do–while

do…while和while非常类似，只不过它会在循环的尾部而不是顶部检查表达式的值，因此，do…while循环会至少执行一次。相比于while，do…while的使用情况并不是很多。

语法格式：

do{
    语句...
}while(条件表达式);

案例：输出1-10

var i = 1;
do {
    console.log(i);
    i++;
} while (i <= 10);

3.for循环

for语句也是循环控制语句，我们也称它为for循环。大部分循环都会有一个计数器用以控制循环执行的次数，计数器的三个关键操作是初始化、检测和更新。for语句就将这三步操作明确为了语法的一部分。
语法格式：

for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

案例演示：输出1-10。

for (var i = 1; i <= 10; i++) {
    console.log(i);
}

4.双重for循环

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

for(外循环的初始;外循环的条件;外形循环的操作表达式){
    for(内循环的初始;内循环的条件;内循环的操作表达式){
        需执行的代码;
    }
}

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

4.1 打印五行五列星星

核心：

内层循环负责一行打印五个星星
外层循环负责打印五行

var star = '';
for(var j = 1;j<=5;j++)
{
   for (var i = 1; i <= 5; i++)
   {
     star += '☆'
   }
    //每次满5个星星就加一次换行
    star +='\n'  
}
console.log(star);

4.2.打印n行n列的星星

要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星

var star = '';
var row = prompt('请输入行数');
var col = prompt('请输入列数');
for (var j = 1; j <= col; j++) {
    for (var i = 1; i <= row; i++) {
        star += '☆';
    }
    star += '\n';
}
console.log(star);

4.3.打印倒三角形

一共有10行，但是每行的星星个数不一样，因此需要用到双重 for 循环
外层的 for 控制行数 i ，循环10次可以打印10行
内层的 for 控制每行的星星个数 j
核心算法：每一行星星的个数： j = i ; j <= 10; j++
每行打印完毕后，都需要重新换一行

var star = '';
var row = prompt('请输入行数');
var col = prompt('请输入列数');
for (var i = 1; i <= row; i++) {
    for (var j = i; j <= col; j++) {
        star += '☆';
    }
    star += '\n';
}
console.log(star);

5、continue 关键字

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

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
     console.log('这个包子有虫子，扔掉');
     continue; // 跳出本次循环，跳出的是第3次循环 
  }
  console.log('我正在吃第' + i + '个包子呢');
}

6、break 关键字

break 关键字用于立即跳出整个循环

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的也不吃了

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }

十、数组

数组(Array)是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

//普通变量一次只能存储一个值
var num = 10;
//数组一次可以存储多个值
var arr =[1,2,3,4,5];

1、创建数组

JavaScript 中创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

1.1利用 new 创建数组

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

1.2利用数组字面量创建数组

// 1.利用数组字面量方式创建空的数组 
var 数组名 =[];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 =['小白','小黑','小黄','瑞奇'];
// 3.数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
var arrStus =['小白'，12,true,28.9];

数组的字面量是方括号 []
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

2、数组的索引（下标）

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

//定义数组
var arrStus = [1,2,3];
//获取数组中的第2个元素
alert(arrStus[1]);

3.遍历数组

我们可以通过 for 循环索引遍历数组中的每一项

// 数组索引访问数组中的元素
var arr = ['red','green', 'blue'];
console.log(arr[0]) // red
console.log(arr[1]) // green
console.log(arr[2]) // blue

// for循环遍历数组
var arr = ['red','green', 'blue'];
for (var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

4、数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

注意：

此处数组的长度是数组元素的个数，不要和数组的索引号混淆
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化

5、数组中新增元素

5.1通过修改 length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined

5.2通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据
这种方式也是我们最常用的一种方式

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

6.删除指定数组元素

将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];   // 空数组的默认的长度为 0 
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
    // 找出大于 10 的数
    if (arr[i] != 0) {
        // 给新数组
        // 每次存入一个值，newArr长度都会 +1  
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);

7、翻转数组

// 把旧数组索引号的第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length)

var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){
    newArr[newArr.length] = arr[i];
}
console.log(newArr);

8、数组排序

冒泡排序
将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外层循环管趟数，5个数共交换4躺
    for (var 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);