javascript基本语法学习（一）

最新推荐文章于 2023-08-06 08:23:15 发布

豆沙包(干饭王)

最新推荐文章于 2023-08-06 08:23:15 发布

阅读量739

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/linziwang/article/details/121640817

版权

一、编程语言

1.1、编程

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
计算机程序:就是计算机所执行的—系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
从事编程的人员，就是程序员。但是般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农或者“程序猿”/“程序媛
注意:上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓Pl、服务器等等。

1.2、计算机语言

计算机语言指用于人与计算机之问通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类实际上计算机最终所执行的都是机器语言，它是由“0°和“1”组成的二进制数，二进制是计算机语言的基础
在这里插入图片描述

1.3、编程语言

可以通过类似于人类语言的”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做侖程语言（ ProgrammingLanguage）。
编程语言是用来控制计算机的系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不-样），必须遵守。如今通用的编程语言有两种形式:汇编语言****和高级语言。
汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C＃、Python、PHP、 JavaScript、Go语言、 Objective-C、Swif等。

1.4、翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。记住1和0

1.5、编程语言和标记语言区别

编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else、for while等具有逻辑性和行为能力的指令，这是主动的。
标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的。

1.6、总结

计算机可以帮助人类解决某些问题
程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
编程语言有机器语言、汇编语言、高级语言
高级语言需要一个翻译器转换为计算机识别的机器语言
编程语言是主动的有很强的逻辑性

二、计算机基础

2.2、数据存储

1.计算机内部使用二进制0和1来表示数据。
2.所有数据，包括文件、图片等最终都是以一进制数据（0和1）的形式存放在硬盘中的。
3.所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形试式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中
4.硬盘、内存都是保存的二进制数据

2.3、数据存储单位

bit byte< kb GB< TB<
位（bt）:1bit可以保存一个0或者1（最小的存储单位）
字节（Byte）:1B=8b
千字节（KB）:1KB=1024B
兆字节（MB）:1MB=1024KB
吉字节（GB）:1GB=1024MB
太字节（B）:1TB=1024GB

2.4、程序运行

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

注意:之所以要内存的个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）
在这里插入图片描述

三、初识JavaScript

3.1、javascript是什么

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

3.2、javascript的作用

表单动态校验（密码强度检测）（JS产生最初的目的）
网页特效
服务端开发（ Node js）
桌面程序（Electron)
App（cordova）
控制硬件-物联网（Ruff)
游戏开发（ COCOS2djs）

3.3、HTML/CSS/JS的关系

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

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

JS脚本语言-编程类语言
实现业务逻辑和页面控制（决定功能），相当于人的各种动作

3.4、浏览器执行Js简介

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

渲染引擎∶用来解析HM与CSS，俗称内核，比如 chrome浏览器的 blink，老版本的 webkit
JS引擎:也称为JS解释器。用来读取网页中的 Javascripρt代码，对其处理后运行，比如 chrome浏览器的ν8

浏览器本身并不会执行丿S代码，而是通过内置 JavaScript引擎（解释器）来执行JS代码。S引擎执行代码时逐行解释每句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript语言归为脚本语言，会逐行解释执行。
在这里插入图片描述

3.5、JS的组成

在这里插入图片描述

3.5.1、ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScrⅰpt或 JScript，但实际上后两者是 ECMAScript语言的实现和扩展

ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的套JS语法工业标隹。

3.5.2、DOM—文档对象模型

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

3.5.3、BOM—浏览器对象模型

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

3.6、JS书写位置

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

3.6.1、行内式写法

●可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如: onclick
●注意单双引号的使用:在HTM中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，在htm中编写JS大量代码时，不方便阅渎；
引号易错，引号多层嵌套匹配时，非常容易弄混;
●特殊情况下使用

<body>
    <input type="button" value="点我试试" onclick="alear('hello World')">
</body>

3.6.2、内嵌式

可以将多行JS代码写到<script>标签中
内嵌JS是学习时常用的方式

<script>
        alear('hello world')
    </script>

3.6.3、外部JS文件

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

3.7、JS输入输出语句

在这里插入图片描述

3.8、变量

3.8.1、声明变量

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

3.8.2、赋值

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

3.9、变量语法扩展

3.9.1、同时声明多个变量

<script>
        var age=10,
            name='豆沙包',
            address='北京';
    </script>

3.9.2、声明变量特殊情况

在这里插入图片描述

3.9.3、变量命名规范

由字母（A-za-z）、数字（0-9）、下划线（）、美元符号（$）组成，如: usrAge，num01，_name
严格区分大小写。 varapp;和 varApp;是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如:var、for、while
变量名必须有意义。 MMD BBD nl→age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站:有道爱词霸

四、数据类型

4.1、为什么需要数据类型

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

4.1.1、变量的数据类型

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

<script>
       var age =10;  //这是一个数字型
       var maname = '豆沙包' //这是字符串型
    </script>

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就碥定了数据类型。
JavaScript拥有动态类型，同时也意味看相同的变量可用作不同的类型

4.2、数据类型的分类

JS把数据类型分为两类：

简单数据类型（ Number， string， Boolean， Undefined，Null)
复杂数据类型（ object）

4.2.1、简单数据类型（基本数据类型）

在这里插入图片描述

4.2.2、数字型 Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数(浮点数）

2.2.1、数字进制

在这里插入图片描述

最常见的进制有二进制、八进制、十进制、十六进制。
现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x

2.2.2、数字型范围

javascript中数值的最大和最小值

<script>
    alert(Number.MAX_VALUE);//1.7976931348623157e+308
    alert(Number.MIN_VALUE);//5e-324
</script>

2.2.3、数字型三个特殊值

lnfinity，代表无穷大，大于任何数值
lnfinity，代表无穷小，小于任何数值
.NaN， Not a number，代表一个非数值

2.2.4、isNaN()

用来判断个变量是否为非数字的类型，返回true或者 false
在这里插入图片描述

4.2.3、字符串型String

2.3.1、字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

 <script>
       var str = '我是一个"叫豆沙包"的程序员';
       var str1 = "我是干饭王'豆沙包'一次可以干八碗饭"
    </script>

2.3.2、字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是\开头的，常用的转义符及其说明如下：
在这里插入图片描述

2.3.3、字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符申的 length属性可以获取整个字符串的长度。

<script>
       var str = '我是一个"叫豆沙包"的程序员';
        alert(str.length) ; //14
    </script>

2.3.4、字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
+号总结口诀：数值相加，字符相连

<script>
        // 字符串的拼接
        console.log('豆沙包' + '是干饭王');
        log(12+12); //24
        // 只要有字符串和其他类型想拼接 最终的结果是字符串类型
        log('12'+12);//1212
    </script>

2.3.4、字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引同引咖” ，删掉数字，变量写加中间

 <script>
        var age=18;
        log('豆沙包今年' + age + '岁了');
    </script>

4.2.4、布尔型Boolean

布尔类型有两个值:true和 false，其中true表示真（对），而 false表示假（错）。
布尔型和数字型相加的时候，true的值为1， false的值为0。

4.2.4、Undefined和Null

一个声明后没有被赋值的变量会有—个默认值 undefined（如果进行相连或者相加时，注意结果）

在这里插入图片描述

一个声明变量给null值，里面存的值为空
在这里插入图片描述

4.2.5、获取变量的数据类型typeof

 <script>
        var num =10;
        console.log(typeof num); //number
        var myname = '豆沙包';
        console.log(typeof myname); //string 
        var flag = true;
  **加粗样式**      console.log(typeof flag);  //boolean
        var ivar = undefined;
        console.log(typeof ivar);  //undefined
        var timer= null;
        console.log(typeof timer); //null
       var age= prompt("请输入您的年龄");  //prompt 取过来的值是string
       console.log(age);
        console.log(typeof age); //string
    </script>

4.2.6、字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量:8，9，10
字符串字面量:‘豆沙包’，"干饭王"
布尔字面量:true， false

4.2.7、什么是数据类型的转换

使用表单、 prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把种数据类型的变量转换成另外-种数据类型。
我们通常会实现3种方式的转换：

转换为：字符串类型
转换为数字型
转换为布尔型

2.7.1、转换为字符串

在这里插入图片描述

 <script>
        //1.把数字转换为字符串型
        var num = 10;
        var age = 10;
        var str = num.toString();
        console.log(str);  
        console.log(typeof str);
        // 2.我们利用String ()
        console.log(String(num));
        // 3、利用拼接实现转换成字符串效果
        console.log(age +'');
        
    </script>

tostring()和 String()使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这种方式也称之为隐式转换。

2.7.2、转换为数字型（重点）

注意 parseInt和 parseFloat单词的大小写，这2个是重点

<script>
        var age = prompt('请输入您的年龄');
        console.log(parseInt(age));
        console.log(parseInt('3.14')); //3 取整
        console.log(parseInt('3.94')); //3 取整
        console.log(parseInt('120px')); //120 会去掉 px这个单位
        console.log(parseInt('rem120px')); // NaN
        // parseFloat (变量) 可以把 字符型转换成数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14'));
        console.log(parseFloat('rem120px')); // NaN
        //3.利用了算数运算 - * / 隐式转换
        console.log('12' - 0); //12
        console.log('123' - '120');  //3
    </script>

2.7.3、转换为布尔型

代表空、否定的值会被转换为 false，如 “”、0、NaN、null、 undefined
其余值都会被转换为true

在这里插入图片描述

五、JavaScript运算符

运算符（ operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
Javascript中常用的运算符有

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

5.1、算数运算符概述

概念:算术运算使用的符号，用于执行两个变量或值的算术运算
在这里插入图片描述

5.2、表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的組合
简单理解:是由数字、运算符、变量等组成的式子

5.3、递增和递减运算符概述

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（–）运算符来完成。
在 JavaScript中，递增（++）和递减（–）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减〕运算符，放在变量后面时，我们可以称为后置递増（递减）运算符。

注意:递增和递减运算符必须和变量配合使用。

5.4、比较运算符概述

概念:比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/ false）作为比较运算的结果
在这里插入图片描述

5.5、逻辑运算符概述

概念:逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
在这里插入图片描述

5.5、短路运算（逻辑中断）

短路运算的原理:当有多个表达式（值）时左边的表达式值可以确定结果时就不再继续运算右边的表达式的值；

5.5.1、逻辑与

语法:表达式1＆＆表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

5.5.2、逻辑或

语法:表达式1|| 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

 <script>
        var num =0;
        console.log(123 || num++);//因为123为true  所以表达式为true  num++ 不执行
        console.log(num); //所以 num的结果为：0
    </script>

5.6、赋值运算符

概念：用来把数据赋值给变量的运算符
在这里插入图片描述

5.7、运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

六、流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

6.1、switch注意事项

case里面的值相匹配的时候是全等必须是值和类型一模一样才可以

6.2、流程控制循环

6.2.1、for循环断点调试：

断点调试是指自己在程序的某行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以步步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行显示错误，停下
断点调试可以帮我们观察程序的运行过程
浏览器中按F12-> Sources->找到需要调试的文件->在程序的某一行设置断点
Watch:监视，通过 watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行行的执行，这个时候，观察 watch中变量的值的变化
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试
知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

6.3、while 循环

while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
执行思路:

① 先执行条件表达式，如果结果为true，则执行循环体代码;如果为 false，则退出循环，执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束。

<script>
        while (条件表达式){
           //循环体代码
        }
    </script>

6.4、do while 循环

do while语句其实是 while语句的一个变体。该循环会先执行次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
执行思路:

① 先执行次循环体代码
② 再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
注意:先再执行循环体，再判断，我们会发现do… while循环语句至少会**执行一次循环体代码**

<script>
        do{
            //循环体代码 - 条件表达式 true时重复执行循环体代码
        }while(条件表达式);
 </script>

6.5、循环小结

JS中循环有for、 while、 do…while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和 do…while可以做更复杂的判断条件，比for循环灵活一些
while和do. while执行顺序不一样， while先判断后执行，
do…while先执行一次，再判断执行
while和do… while执行次数不一样，do… while至少会执行一次循环体，而 while可能一次也不执行
实际工作中，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习

七、continue break

7.1、continue 关键字

continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue之后的代码就会少执行
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码现如下

 <script>
        // continue 关键字 退出本次(当前次的循环) 继续执行剩余次数的循环
        for(var i=1;i<=5;i++){
            if(i == 3){
                continue;  //只要遇见 continue就退出本次循环 直接跳到i++
            }

            console.log('我正在吃第'+i+'个包子');
        }
    </script>

7.2、break 关键字

continuebreak关键字用于立即跳出整个循环（循环结束）。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下。

<script>
        //break 退出整个循环
        for(var i=1;i<=5;i++){
            if(i == 3){
                break;  //只要遇见 break就退出本次循环 直接执行 console.log('break案例');
            }
            console.log('我正在吃第'+i+'个包子');
        }
        console.log('break案例');
    </script>

八、javaScript 命名规范以及语法格式

8.1、标识符命名规范

变量、函数的命名必须要有意义
变量的名称一般用名词
函数的名称一般用动词

8.2、操作符规范

 <script>
        //操作符的左右两侧各保留一个空格
        for(var i = 1 ;i <= 5 ;i++){
            if(i == 3){
            break; // 单行注释前面注意有个空格
            }
            console.log('我正在吃第'+i+'个包子');
        }
    </script>

九、javaScript 数组

9.1、数组的概念

问:之前学习的变量，只能存储一个值。如果我们想存储班级中所有学生的姓名，那么该如何存储呢？
答:可以使用数组（Aray）。数组可以把一组相关的数据一起存放，并提供方便的访问（获取）方式
问:什么是数组呢？
答:数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

9.2、数组的创建方式

JS中创建数组有两种方式

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

<script>
        // 创建数组的两总方式
        //1. 利用数组字面量
        var arr=[]; //创建了一个空的数组
        var arr=[1,2,3];
        //2. 利用new Array()
        var arr0 = new Array(0);//创建了一个空的数组
        var arr1 = new Array(2);//创建了一个长度为2的数组 里面有两个空的数组元素
        var arr2 = new Array(2,3);//等价于[2,3] 这样写表示 里面有2个数组元素 是2和3
    </script>

9.3、数组的索引

索引（下标）:用来访问数组元素的序号（数组下标从0开始）
在这里插入图片描述
数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]“的形式来获取数组中的元素。
这里的访问就是获取得到的意思

<script>	
        var arr1=['豆沙包','胡歌','彭于晏','吴彦祖'];
        console.log(arr1[0]);
        console.log(arr1[1]);
        console.log(arr1[2]);
        console.log(arr1[3]);
        console.log(arr1[4]);  // 因为没有这个数组元素 所以输出的是undefined
    </script>

在这里插入图片描述

<script>
        //返回数组索引号的方法 indexOf(数组元素)  作用就是返回当前该数组的索引号
        // 它只返回满足条件的第一个索引号
        // 它如果在该数组里面找不到元素，则返回的是 -1
        //返回数组索引号的方法 lastindexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
        var arr = ['pink', 'blue', 'red', 'yellow', 'sky'];
        console.log(arr.indexOf('red'));//2
        console.log(arr.indexOf('green'));  //绿色
        console.log(arr.lastIndexOf('sky'));  //4
    </script>

9.3.1、数组查重案例

①目标:把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。
②核心算法:我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就忝加，否则不添加
③我们怎么知道该元素没有存在？利用新数组 indexof（数组元素）如果返回是-1就说明新数组里面没有该元素

    <script>
            //去除数组中的重复元素
            var arr = ['c', 'a', 'd', 'f', 'a', 'f', 'd', 's', 'a'];
            var newArray = [];
            for (var i = 0; i <= arr.length - 1; i++) {
                if (newArray.indexOf(arr[i]) == -1) {  //indexOf 等于负一 说明数组里面没有这个值 所以要把这个值添加到新数组里面
                    newArray[newArray.length] = arr[i];
                }
            }
            console.log(newArray);
        </script>

9.4、数组排序

在这里插入图片描述

 <script>
        //翻转数组 
        var arr = ['豆沙包','干饭王','胡歌'];   
        console.log(arr.reverse()); //翻转数组  ['胡歌', '干饭王', '豆沙包']
        //数字排序
        var arr1 = [3,4,61,52,1];
        arr1.sort(function(a,b){
            return a-b;//升序
            // return b-a;//降序
        });
        console.log(arr1);
    </script>

冒泡排序:是—种算法，把—系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）

 <script>
        var arr = [50, 4, 6, 45, 65, 32, 45, 23, 564, 652, 321];
        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]) {//把> 改成< 就变成从大到小
                    var temp;
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
    </script>

9.5、检测是否为数组

 <script>
        var arr = [];
        var obj = {};
        //检测是否为数组
        //(1) instanceof 运算符 他可以用来检测是否为数组
        console.log(arr instanceof Array);   //true
        //2 Array.isArray() H5新增的方法 ie9以上版本才支持
        console.log(Array.isArray(arr));  //true
        console.log(Array.isArray(obj));  //false
    </script>

9.6、添加删除数组元素的方法

在这里插入图片描述

 <script>
        // 添加删除数组元素的方法
        //1. push()在我们数组的末尾 添加一个或者多个数组元素 push推
        var arr = [1, 2, 3];
        arr.push(4, '豆沙包');
        console.log(arr.push(4, '豆沙包'));
        //1 push 是可以给数组追加新的元素
        //2 push()参数直接写数组元素就可以了
        //3 push完毕之后，返回的是 新数组的长度
        //4 原数组也会发送变化

        //2. unshift()在我们数组的开头 添加一个或者多个数组元素 push推
        arr.unshift('干饭王', 2003);
        console.log(arr.unshift('干饭王', 2003));
        //1 unshift 是可以给数组前面追加新的元素
        //2 unshift()参数直接写数组元素就可以了
        //3 unshift完毕之后，返回的是 新数组的长度
        //4 原数组也会发送变化

        //3. pop()删除数组的最后一个元素
        console.log(arr.pop());
        console.log(arr);
        //1 pops 是可以删除数组最后面的一个元素
        //2 pop没有参数
        //3 pop完毕之后，返回的是 删除的那个元素
        //4 原数组也会发送变化

         //4. shift()删除数组的最前的一个元素
         console.log(arr.shift());
        console.log(arr);
        //1 shift 是可以删除数组最前面的一个元素
        //2 shift没有参数
        //3 shift完毕之后，返回的是 删除的那个元素
        //4 原数组也会发送变化
    </script>

9.7、数组转换为字符串

在这里插入图片描述

<script>
        //数组转换位字符串
        var arr = [1, 3, 5];
        console.log(arr.toString());//1,3,5
        //利用join('分隔符')
        var arr1 = ['干饭王', '是', '豆沙包'];
        console.log(arr1.join());//不带参数默认是逗号 干饭王,是,豆沙包
        console.log(arr1.join('-'));//干饭王-是-豆沙包
    </script>

9.8、数组的concat、slice、splice方法

slice()和 splice()目的基本相同，建议同学们重点看下 splice()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
// 输出结果 ['a', 'b', 'c', 1, 2, 3]

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

 var arr = ['red', 'pink', 'yellow', 'green'];
        var newArray =arr.slice(1,3);//'pink', 'yellow'

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

var arr = ['red', 'pink', 'yellow', 'green'];
arr.splice(2, 0, '豆沙包');//从索引2个的位置删除0个元素 插入豆沙包
console.log(arr); //['red', 'pink', '豆沙包', 'yellow', 'green']

在这里插入图片描述

豆沙包(干饭王)

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript基本语法学习（一）

一、编程语言1.1、编程编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。计算机程序:就是计算机所执行的—系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。从事编程的人员，就是程序员。但是般程序员都比较幽默，为了形容自己的辛苦工作，也成为“码农或者“程序猿”/“程序媛注意:上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓Pl、服务器等等。1.2、计算机语言
复制链接

扫一扫