两篇文章带你入门 javascript----第一篇基础

两篇文章带你入门 javascript----基础

文章目录

- 两篇文章带你入门 javascript----基础
常见运算
JavaScript函数：
数组：

概述：

JavaScript出现的目的是为了解决用户体验。它来在客户端提交数据之前先验证，验证通过之后再次提交。

好处：

提高了用户的体验
减少了服务器端的压力

发展：

1992年，Nombas公司了一个叫c–嵌入式的脚本语言。后来更名为scripeease。

1995年，网景公司发明了livescript脚本语言，当时java很火而livescript脚本才出来不久。为了让更多的人知道这个语言，于是他们和java语言合作，于是乎更名为了JavaScript！

浏览器：

由于JavaScript这们脚本语言的运行环境就是浏览器，所以必须要先介绍介绍浏览器这个东西

1994年第一次浏览器大战，微软在自己的操作系统里面集成了ie浏览器
2002年第二次浏览器大战火狐浏览器到来，它支持这个规范就是JavaScript
后来又出现了google等浏览器

什么是JavaScript？：

这是一门面向对象的弱类型的脚本语言
主要作用是为了提高用户的体验，于是对安全性来说就不是很重要了
可以进行数据校验，网页特效，数据交互
需要操作系统，开发工具，浏览器

JavaScript初次体验：

首先写一个非常非常简单的JavaScript代码！复制可以直接用的那种！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JS代码</title>
</head>
<body>
<script>
    console.log('hello javascript');
</script>
</body>
</html>

说明：可以注意到JavaScript语句要写到

基本数据：

JS书写方式：

行内JS
页面JS
外部JS

行内JS：

我们在html标签内部直接使用JS代码的方式就叫做行内JS，它一般用于触发某种方式，利于点击事件。

<body>
	<button onclick="console.log('hello')">点击我</button>
</body>

一般来说console函数作为JavaScript语言必须要在script标签内部才能被解析。但是这里是一个特殊用法行内JS。gpt给我的回答是这样的html属性中的JavaScript是由浏览器解释和执行的，在html中事件的处理如点击onclick等可以直接包含JavaScript代码，浏览器在解析html元素的时候会将这些JavaScript代码作为事件处理程序来执行。

像我这里举的例子，当按钮被点击的时候，浏览器会执行console.log这个函数,这个函数会将hello输出到控制台。这是因为onclick属性的代码会在用户点击按钮的时候被执行。浏览器会将onclick属性的值作为JavaScript代码执行。但是同理哈这里的hello你也得按f12去后台查看。这样是用法就是行内JS！下面继续介绍页面JS

页面JS:

页面JS就是我们前面的第一个的比较简单的入门，JavaScript语言需要写在script标签内部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面JS</title>
    <script>
        console.log('这是页面JS，它需要写在 script 标签中。表示它是脚本，浏览器解析它时就会按钮脚本的语法进行解析。')
    </script>
</head>
<body>
</body>
</html>

同理哈，这个输出只能在f12的控制台看到哈！接下来继续介绍外部JS

外部JS：

外部js的书写方式是：先创建一个目录来存放js代码，然后创建一个文件这个文件的后缀必须是js，然后再这个文件中书写js相关的代码。注意哈在这个文件中就不要在加script标签了。

1）创建外部的js文件

console.log('这是外部的JS，我们需要单独的编写一个后缀为 .js 的文件，在这个文件中来编写 JS 代码，并且不用script标签啦。')

2）页面编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部JS</title>
    <script src="js\1.js"></script>
</head>
<body>
</body>
</html>

嘿嘿这里解释一下src是相对路径。然后这个js文件是存放在一个跟我html网页文件同级的js文件夹里面的一个1.js文件。同理哈这里的内容只有在你的控制台那里才看的到输出。continue！进入下一个章节

对话框：

再JS中主要提供了3中对话框。警告框，确认框和输入框

警告框：

警告框在js中一般是用于调试程序的。主要目的是为了输出调试结果，也可以用于显示警告信息。

<body>
	<button onclick="alert("不要点我噢！会给你警告")">点击就会警告你</button>
</body>

这里用到了js中的alert函数，显示一个对话框，显示字符串里面的内容.然后按钮一按就触发alert这个js函数。

确认框：

确认框一般用于删除操作的时候，为了避免用户不小心点错了，在删除数据的时候给他一个确认提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认框</title>
    <style>
        table {
            width: 500px;
            border-left: 1px solid #999999;
            border-top: 1px solid #999999;
            border-collapse: collapse;
        }
        th, td {
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
        }
        td {
            text-align: center;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td><a href="javascript:confirm('你确定要删除么？删除后不能恢复！')">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td><a href="javascript:confirm('你确定要删除么？删除后不能恢复！')">删除</a></td>
    </tr>
</table>
</body>
</html>

在上面的js代码中有几点需要说明：

:在html中a标签的作用有2个，一个是用作锚点，另一个是做链接直接跳转。在这里我们使用了JavaScript这个前缀，目的是为了让浏览器在解析的时候，不要使用默认的解析方式来解析a标签，而是用js的语法来解析a标签。
其次对于确认框，js中提供的是confirm。你需要提供嗯提示的确认信息。然后在弹出的对话框中有2个按键一个是确定一个是取消，这两个按钮其实返回的是一个布尔值
这段代码的执行逻辑：当用户点击a标签的时候触发其属性中的herf内的js代码，js代码执行confirm函数然后弹出对话框。
值得一题的是这里的javascript伪协议改变a标签的作用。当a标签被点击的时候就执行jherf里面的s函数

输入框：

在与用户交互的时候，我们可以来接收用户的输入信息，此时就可以使用输入框了。

<body>
<script>
    console.log(prompt('请输入数字',"20"))
</script>
</body>

在这里我们可以通过js提供的prompt函数去让页面直接崩出一个输入框我们可以传2个参数。第一个是提示信息第二个默认值，当然你也可以不写。

关键字：

由于js是一种面向对象的脚本语言，他是一种编程语言，每种编程语言都有自己的一些关键如c语言等等。在这里js自己的关键字有那一些特点1）都是字母 2）都是小写

break	else	new	var	case
finally	return	void	catch	for
switch	while	continue	function	this
with	default	if	throw	delete
in	try	do	instanceof	typeof
abstract	enum	int	short	boolean
export	interface	static	byte	extends
long	super	char	final	native
synchronized	class	float	package	throws
const	goto	private	transient	debugger
implements	protected	volatile	double	import
public	async	await	yield	let

注释：

在html中

<!--    --!>

在css中

/**/

在js中

//
/**/
/*！ 这是文档注释将来在js压缩的时候文档注释是不允许删除的 */

变量：

如何使用变量：

要使用变量，我们就需要知道使用变量的语法。在js中定义变量的语法如下：

var name = "张三"
let a = 1
const b = 2

想必都能见名之意了吧，这里就不多解释了嘻嘻，const表示常量后续不可以更改，下面直接上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明变量</title>
</head>
<body>
<script>
    // 声明一个名为 name 的变量
    var name = '张三'
    console.log(name)
    name = '李四'
    console.log(name)

    // 使用 let 来声明一个变量名为 age
    let age = 18
    console.log(age)
    age = 20
    console.log(age)
    age = '哈哈，我改了'
    console.log(age)

    // 使用 const 来声明一个常量 country
    const country = '中国'
    console.log(country);
    // country = '美国'  // 当声明了常量，它的值不能再改变

    let gender
    gender = '男'
    console.log(gender)
</script>
</body>
</html>

在大概说明一下那个命名的规范：

数字字母下划线+$,非数打头非关键
变量名若有多个单子则第一个单词首字母小写其他的字母首字母大写，单词之间用下划线连接
方法名字都是小写，如果有多个单词则按照变量名的规则
类名的话每个单词的首字母都要大写，单词之间用下划线连接

数据类型：

基本数据类型：

就是整型，浮点型，布尔型，比较特别的一个：

不是数字（NaN - Not a Number），判断是否为数字，如果不是返回 true，如果是返回 false

引用数据类型：

数组：用于存储一组相同类型的数据
对象：在js中万物皆为对象

在js中可以通过typeof函数去判断某个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<script>
    // 1. 定义一个整数类型的变量
    let num = 10
    console.log(num, typeof(num)); // 在控制台中输出变量的值以及变量的类型

    // 2. 定义一个浮点类型的变量
    let money = 10000.5
    console.log(money, typeof(money));

    // 3. 定义一个布尔类型的变量
    let bool = false
    console.log(bool, typeof (bool));

    // 4. 定义一个字符串类型的变量
    let str1 = "hello"
    console.log(str1, typeof str1);
    let str2 = 'world'
    console.log(str2, typeof str2);

    // 5. 空值类型，它只有一个值 null
    let nullVal = null
    console.log(nullVal, typeof nullVal);

    // 6. 未定义
    let age
    console.log(age, typeof age)

    // 7. 判断是否为数字
    let n = 'a'
    console.log(isNaN(n), typeof isNaN(n))
</script>
</body>
</html>

常见运算

算术运算符

在 JS 算术运算符包含加、减、乘、除、取模等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算术运算数</title>
</head>
<body>
<script>
    // 数值类型的算术运算
    let a = 10
    let b = 2
    // 加法运算
    let r = a + b
    console.log(r);
    // 减法运算
    r = a - b
    console.log(r);
    // 乘法
    r = a * b
    console.log(r);
    // 除法
    r = a / b
    console.log(r);
    // 取模，得到除法的余数
    r = a % b
    console.log(r);
    // 幂运算
    r = a ** b
    console.log(r)

    console.log('-----------------------------')

    // 布尔类型的算术运算
    let b1 = true
    let b2 = true
    r = b1 + b2
    console.log(r)  // 当两个布尔值进行加法运算时，会把 true 变为 1，false 变为 0 后再作运算
    r = b1 - b2
    console.log(r)
    r = b1 / b2
    console.log(r)
    r = b1 * b2
    console.log(r)

    // 字符串的算术运算
    let s1 = '30'
    let s2 = '20'
    r = s1 + s2
    console.log(r)   // 字符串作加法操作其实就是进行字符串拼接操作
    r = s1 - s2
    console.log(r, typeof r)  // 当字符串作减法操作时，它会看这个字符串能不能转换为数字，如果能则转换后再计算，如果不能则输出 NaN
    r = s1 * s2
    console.log(r, typeof r) // 当字符串作乘法时，也会先看这个字符串能不能转换为数字，如果能则按数值进行计算，否则输出 NaN

    console.log('-----------------------------')

    // 空值
    let n1 = null
    let n2 = null
    r = n1 + n2
    console.log(r, typeof r)

    let n3 = 5
    r = n1 + n3
    console.log(r, typeof r)  // 当空值进行算术运算时，它会转换为数值 0，然后再作计算

    // 未定义
    let un1 = undefined
    let un2 = undefined
    r = un1 + un2
    console.log(r)   // 未定义类型不能进行算术运算
</script>
</body>
</html>

逻辑运算符

逻辑运算符主要是指多个条件之间的关联关系，逻辑运算符有：与（&&）、或（||）以及非（!）这三种。这三个是逻辑运算符所以如果有变量等于一些逻辑操作后，那马这个变量就是布尔类型的也就是boolen。当然如果是&|的话那马其实是数值运算所以返回的类型一般就是整形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
</head>
<body>
<script>
    let n1 = 5
    let n2 = 6
    let b1 = true
    let b2 = false

    let r = n1 && n2 && b1
    console.log(r, typeof r) // 使用与运算时，只有全部都是 true ，结果才是 true，否则结果为 false

    r = n1 > n2 || b1 || b2
    console.log(r)   // 使用或运算时，只有全部为 false，结果才是 false，否则结果为 true

    r = !b1
    console.log(r)
    r = !b2
    console.log(r)  // 使用非运算时，如果本身为 true 则结果为 false，如果本身为 false 则结果为 true，即取反

    r = n1 < n2 & b2
    console.log(r)
    r = b1 & b2
    console.log(r)
    r = b1 | b2
    console.log(r)
</script>
</body>
</html>

比较运算符

比较运算也中关系运算。它是用于比较两个数之间的大小，结果为一个布尔类型的值。比较运算符包含：大于（>）、小于（<）、等于（==）、大于等于（>=）、小于等于（<=）、不等于（!=）、全等于（===）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
<script>
    let n1 = 10
    let n2 = 20
    r = n1 > n2
    console.log(r, typeof r)
    r = n1 < n2
    console.log(r, typeof r)
    r = n1 >= n2
    console.log(r, typeof r)
    r = n1 <= n2
    console.log(r, typeof r)
    r = n1 == n2
    console.log(r, typeof r)
    r = n1 != n2
    console.log(r, typeof r)
    console.log('-------------------------------')
    let n3 = 5
    let n4 = 5
    let n5 = '5'
    r = n3 == n4
    console.log(r)
    r = n3 === n4
    console.log(r)

    r = n3 == n5  // 使用 == 等号的方式来进行比较时，是比较的两个变量转换为数值类型后的值的大小。
    console.log(r)
    r = n3 === n5 // 使用 === 等号的方式进行比较时，比较的是值的大小以及它的类型是否相同。只两者都相同才为 true，否则为 false
    console.log(r)

    console.log('-----------------------------')

    //----------布尔类型的比较运算---------------------
    let b1 = true
    let b2 = false
    r = b1 === b2
    console.log(r)    // 使用布尔值来做比较运算是没有意义的，因为比较运算的结果本身就是布尔类型的值。

    console.log('-----------------------------')

    let s1 = 'hello'
    let s2 = 'hallo'
    s1 = '100'
    s2 = '10'
    s1 = 'World'
    s2 = 'world'
    r = s1 === s2
    r = s1 > s2
    console.log(r)
</script>
</body>
</html>

三目运算符：

三目运算符出现的目的是为了简化 if 语句。它的语法格式为：变量 = 表达式 ? 值1 : 值2。当表达为 true 时，取值1，否则取值2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三目运算符</title>
</head>
<body>
<script>
  let a = 100
  let b = 15
  let c  = a > b ? 'a大于b' : 'a小于b'
  console.log(c)
</script>
</body>
</html>

位运算符

位运算符会涉及到二进制的计算，会有补码、原码、反码。位运算符有 & 、| 、^ 、<< 、>> 以及 >>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位运算符</title>
</head>
<body>
<script>
    let a = 5   //0000 0101
    let b = 6   //0000 0110

    //let c = a & b  // 4
    //let c = a | b  // 7
    //let c = a ^ b   // 3
    //let c = a << 2   // 20
    //let c = a >> 2   // 1
    let d=8
    d=~d
    console.log(d)
</script>
</body>
</html>

源码补码和反码：

这里细心的小伙伴一定会发现8的取反怎么变成-9了？这里就要谈一下源码补码和反码了。反码就是源码取反，然后补码就是反码加1.在计算机中用补码来表示负数。补充了这些基础知识后接下来请看步骤

8的二进制表示是0000 1000 然后取反之后变成了 1111 0111 这是一个负数了，因为最高位为1.
计算机存储负数是存这个负数的补码，于是我们继续算1111 0111的补码
先把它取反，因为是负数这里，最高位不变还是1，但是这个1不表示大小了而是表示负号
于是取反后得到了1000 1000然后再加一得到补码1000 1001.
最高位的1表示符号不表示大小，于是这个补码的值就是-9

数据类型转换：

由于JavaScript语言是弱类型的语言，也就是说他对类型的要求不是很强，变量的类型取决于这个变量的值。不像c语言你不可能给一个int a="abc"这样子赋值，但是js可以。牛吧，这就是自动类型转换。一般来说转换分为了2种方式一种是自动一种是强制，也叫做向上和向下类型转换

向下类型转换：也叫强制类型转换，一般发生在大的数据类型向小的数据类型转换。需要强制类型转换
向上类型转换：也叫自动类型转换，一般是小类型向大类型转换，这种方式是自动完成的。

自动类型转换：

<script>
    let a = 10   // int
    console.log(typeof a)  // number
    a = 5.6   // float
    console.log(typeof a)  // number
</script>

强制类型转换：

<script>
    let input = prompt('请输入一个整数')
    console.log(input, typeof input)

    // 将字符串转换为数值类型
    let result = parseInt(input)
    console.log(result, typeof result)
</script>

默认通过promot（）函数输入的值是字符串，然后通过强制转换函数parseInt将值转换为整型，如果转化失败会返回NaN.这个符号我感觉可以把它理解成“不是数字”的意思

document.write函数：

这个函数是可以将东西打印输出到前端页面的一个函数，所以比较重要，这里以for循环为例。函数内部的东西都会打印到前端默认都是字符串，如果要使用变量的话得用（）扩起来

<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(i + ' * ' + j + ' = ' + (i*j) + '\t\t')
        }
        document.write('<br>')
    }
</script>

这里+号是用来拼接字符串的

JavaScript函数：

函数的定义：

要定义一个函数用到了一个关键字function，语法结构如下

// 语法格式一
function 函数名称([形参数列表]) {
    函数体
    [return 返回值]
}

// 语法格式二
let 函数名称 = function ([形参数列表]) {
    函数体
    [return 返回值]
}

// 语法格式三
let 函数名称 = ([形参数列表]) => {
    函数体
    [return 返回值]
}

每个函数最好有一个return函数来进行返回值，如果没有则默认返回一个undefined值。

函数的调用：

要调用函数就得先声明函数语法如下，语法类型与c语言一致。直接上例子这里

<script>
  // 定义函数
  function sum(num) {
      if (num < 0) return  // 当num的值小0时就结束
      else if (num === 0) {
          return 0
      } else {
          let s = 0
          for (let i = 1; i <= num; i++) {
              s += i
          }
          return s
      }
  }

  // 调用函数
  let r = sum(-1)
  console.log(r) // undefined

  r = sum(0)
  console.log(r) // 0

  r = sum(10)
  console.log(r) //55
</script>

其实js也是支持先调用函数，然后再定义函数的

匿名函数：

函数是可以通过采用匿名的方式来定义的，然后通过引用名称来调用这个匿名函数。其实就是上面函数定义的方法二

<script>
    // 定义函数匿名函数，然后通过引用名称来与这个匿名函数进行绑定，便于后续调用
    let add = function (a, b) {
        return a + b
    }

    // 调用函数，通过函数的引用名称来调用
    let r = add(2, 3)
    console.log(r)
</script>

箭头函数：

再ES6中，定义了一种新的函数，这种函数分为了2个部分，用箭头来进行分割，箭头前是参数函数名称啥的，箭头后是函数主题部分函数主体用大阔号。语法如下，其实无非就是再原来的基础上加上了一个箭头而已

let 函数名称 = ([参数列表]) => {
	函数体
	[return 语句]
}

但是语法种类就多起啦，自习研究一下例子

<script>
    // 1. 定义一个无参无返回值函数
    let say = () => {
        console.log('hello')
    }
    say()

    // 2. 定义一个无参有返回值函数
    let show = (str) => {
        return str
    }
    let r = show('hi')
    console.log(r)

    // 3. 一个参数的，小括号可以省略
    let show1 = str => {
        return str
    }
    r = show1('你好')
    console.log(r)

    // 4. 如果函数体只有一条语句，则大括号和 return 语句可以省略
    let show2 = str => str
    r = show2('大家下午，下午状态一般比较差，要打起精神！')
    console.log(r)

    // 5. 有多个参数，小括号不能省略
    let multi = (a, b) => a * b
    r = multi(2, 3)
    console.log(r)

    // 6. 如果函数体有多条，则大括号不能省略
    let add = (a, b) => {
        if (isNaN(a)) return
        if (isNaN(b)) return
        return a + b
    }
    r = add(1,2)
    console.log(r)
</script>

arguments对象

这个对象是用于获取函数所传递的参数。

<script>
    function add(a, b) {
        console.log(arguments.length)  // 获取参数的实际个数
        //console.log(arguments[3]);  // 获取下标为第3的参数，下标是从 0 开始。
        let s = 0
        for (let i = 0; i < arguments.length; i++) {
            s += arguments[i]
        }
        console.log(s)
        return a + b
    }
    console.log(add(2, 4, 5, 6, 7, 8, 9))
</script>

在js中，实际传递的参数的个数是可以多余函数定义的参数的个数的，这些多余的参数就可以通过函数内置的对象arguments来取得。这个函数实际返回的值是前两个参数的和就是2+4，然后但是内部又会把所有传递的参数都加起来然后打印在控制台那

数组：

数组的定义：

// 定义数组的格式1
let 数组引用名称 = [元素1, 元素2, 元素3, ...., 元素n]

// 定义数组的格式2
let 数组名称 = new Array()

这里的new可以省略，下面直接上例子

<script>
	// 1. 定义数组
	let arr1 = [1,3,5,7]
	// 取得数组的元素个数，通过数据的 length 属性
	console.log(arr1.length)
	//添加一个元素
	arr1[4]=9
	// 2. 定义数组的第二种方式
    let arr2 = new Array(5)    // 指定数组的长度，当创建好后，数组中有 5 个空元素
    let arr3 = new Array(10, 9, 25, 67) // 创建数组的同时指定元素
</script>

数组的遍历：

遍历数组我们可以使用前端学习的 for 循环、while 循环、do…while 循环。还可以使用 for…in 或者 for … of。

<script>
    // 定义数组
    const arr = Array(1, 3, 5, 7, 9, 11)
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }
    console.log('-------------------')
    for (let k in arr) {
        console.log(arr[k])
    }
    console.log('-------------------')
    for (let v of arr) {
        console.log(v)
    }
    console.log('-------------------')
    arr.forEach(v => console.log(v))
</script>

代码分析：
1. 可以使用常规的 for 循环来遍历数组，在遍历时，初值为 0，判断条件为 < 数组.length。然后通过数组[下标] 的方式获取对应的元素
2. 使用 for in 的方式来遍历数组，它遍历出来的是数组的元素下标，因此要获取元素还是要通过数组[下标] 的方式来获取
3. 使用 for of 的方式来遍历数组，它遍历出来就是数组的元素
4. 使用 ES6中箭头函数来遍历，它遍历出来的也是数组的元素

数组的常用方法：

1. concat()

这个方法是用于将多个数组进行连接，并返回连接后的结果

    const arr1 = [1, 3, 5, 7, 9, 11]
    const arr2 = [21, 35]

    // 1. concat() 连接数组
    const arr3 = arr1.concat(arr2)
    console.log(arr3)

2. join()

这个方法是将数组的元素拼接成一个字符串输出

    const arr1 = [1, 3, 5, 7, 9, 11]

    // 2. join()
    let s = arr1.join('|')
    console.log(s)

3. pop()

删除并返回数组的最后一个元素

    arr1 = [1, 3, 5, 7, 9, 11]
    console.log(arr1)
    let e = arr1.pop()
    console.log(e)
    console.log(arr1)

4. push()

向数组的末尾添加一个或多个元素，并返回新数组的长度

    arr1 = [1, 3, 5, 7]
    console.log(arr1)
    arr1.push(9)
    console.log(arr1)
    arr1.push(11, 13, 15)
    console.log(arr1)

5. unshift()

向数组的头部添加一个或多个元素，并返回新数组的长度

    arr1 = [1, 3, 5, 7]
    console.log(arr1)
    arr1.unshift(10, 20, 30)
    console.log(arr1)

6. shift()

删除数组的第一个元素

    arr1 = [1, 3, 5, 7, 9]
    console.log(arr1)
    arr1.shift()
    console.log(arr1)

7. reverse()

将数组中的元素进行反转

    arr1 = [1, 3, 5, 7, 9]
    console.log(arr1)
    arr1.reverse()
    console.log(arr1)    // 9, 7, 5, 3, 1

    arr1 = [1, 3, 5, 7, 9]
    console.log(arr1)
    arr1.reverse()
    console.log(arr1)    // 9, 7, 5, 3, 1

8. slice()

从某个已有的数组中返回所选定的元素，而原来的数组不变。

    arr1 = [1, 3, 5, 7, 9]
    let arr5 = arr1.slice(1, 4)
    console.log(arr5)   // 3, 5, 7
    console.log(arr1)   // 1, 3, 5, 7, 9

9. splice()

这个方法可以用于添加元素，也可用于删除元素

    arr1 = [1, 3, 5, 7, 9]
    arr1.splice(0, 0, 15, 25, 35)   // 添加元素
    console.log(arr1)  // 15, 25, 35, 1, 3, 5, 7, 9

    arr1 = [1, 3, 5, 7, 9]
    console.log(arr1)   // 1, 3, 5, 7, 9
    arr1.splice(1, 2)
    console.log(arr1)   // 1, 7, 9

说明：这个方法的第一个参数表示开始下标位置，第二个参数表示要删除的元素个数，如果值为 0 ，表示不删除，否则表示删除。从第三个参数开始表示要添加的元素。

10. sort()

这个方法是用于对数组中的元素进行排序。

    arr1 = [3,1, 7, 5, 4, 2]
    console.log(arr1)
    arr1.sort()
    console.log(arr1)