js入门(ES6)[二]---声明和操作变量(包含详细数组操作)

忘是亡心i 2022-12-22 09:05 98阅读 0赞

### 声明和操作变量 ###

*   *  声明变量
     *   *  常用三种声明方式
     *  数组
     *   *  声明数组
         *  数组对象方法
         *   *  concat()拼接数组
             *  join()数组元素插入字符串，可按照指定分隔符分隔
             *  pop()删除末尾元素
             *  push()添加末尾元素
             *  reverse()倒序
             *  slice() 返回选定范围元素
             *  sort()排序
             *  splice() 删除元素,可同时添加元素
             *  toString()数组转换为字符串
             *  unshift()开头添加元素
             *  valueOf()返回数组对象的原始值

## 声明变量 ##

重要的事情说三遍，多看文档  
[JavaScript][]  
[ES6][]

### 常用三种声明方式 ###

> let 局部变量  
> var全局变量  
> let只能声明一次  
> var可声明多次:  
> const 声明一个静态变量，只可读且不可修改

会出现下面两个错误

a已经被声明  
![在这里插入图片描述][20201118231346479.png_pic_center]  
给常值变量赋值  
![在这里插入图片描述][2020111823143467.png_pic_center]

## 数组 ##

### 声明数组 ###

> new Array();  
> new Array(size);  
> new Array(element0, element1, …, elementn);

![在这里插入图片描述][20201118232211484.png_pic_center]  
为什么三和四数据输出的一样，但是大小不一样呢  
注意三中为 “2”,“s” 四中为 \[“2”,“s”\]  
\[\]中无论多少，都算一个  
**数组下标从0开始**：  
也就是说arrayFour\[0\] = 1;  
arrayFour\[1\] = 2;

### 数组对象方法 ###

> concat()拼接数组  
> join()数组元素插入字符串，可按照指定分隔符分隔  
> pop()删除末尾元素  
> push()添加末尾元素  
> reverse()倒序  
> slice() 返回选定范围元素  
> sort()排序  
> splice() 删除元素,可同时添加元素  
> toString()数组转换为字符串  
> unshift()开头添加元素  
> valueOf()返回数组对象的原始值

#### concat()拼接数组 ####

返回结果  
![在这里插入图片描述][20201118233905106.png_pic_center]  
返回拼接字符串，未改变原数组

#### join()数组元素插入字符串，可按照指定分隔符分隔 ####

返回结果  
![在这里插入图片描述][20201118234046628.png_pic_center]  
返回字符串，未改变原数组

#### pop()删除末尾元素 ####

返回结果  
![在这里插入图片描述][20201118234230390.png_pic_center]  
返回了末尾元素4，改变了原数组

#### push()添加末尾元素 ####

返回结果  
![在这里插入图片描述][20201118234355352.png_pic_center]  
返回了末尾元素，改变了原数组

#### reverse()倒序 ####

返回结果  
![在这里插入图片描述][20201118234447815.png_pic_center]  
返回了倒序，改变了原数组

#### slice() 返回选定范围元素 ####

返回结果  
![在这里插入图片描述][20201118234700665.png_pic_center]  
返回了下标元素(array\[1\])到末尾，下标元素(array\[2\])到末尾，下标元素(array\[2\])到(array\[4\])之间不包括(array\[4\])的元素，未改变原数组

#### sort()排序 ####

返回结果  
![在这里插入图片描述][20201118235311242.png_pic_center]  
返回了排序完成结果，改变了原数组

#### splice() 删除元素,可同时添加元素 ####

返回结果  
![在这里插入图片描述][20201119000908576.png_pic_center]

array.splice(2)//删除元素(array\[2\]也就是数字3)以后的元素(包括)array\[2\],返回删除的元素

array.splice(0,1)//删除元素(array\[0\]也就是数字1到array\[1\]也就是数字2之间的元素(包括)array\[0\]不包括包括array\[1\]

array.splice(0,1,“a”)//删除元素(array\[0\]也就是数字1到array\[1\]也就是数字2之间的元素(包括)array\[0\]不包括array\[1\],添加元素"a"到删除元素位置,返回删除的元素

array.splice(0,2,“a”,“b”)//删除元素(array\[0\]也就是数字1到array\[2\]也就是数字3之间的元素(包括)array\[0\]不包括array\[1\],添加元素"a","b"到删除元素位置,返回删除的元素

#### toString()数组转换为字符串 ####

返回结果  
![在这里插入图片描述][20201119001223377.png_pic_center]

返回了字符串，未改变原数组

#### unshift()开头添加元素 ####

返回结果  
![在这里插入图片描述][20201119001442769.png_pic_center]  
返回了新的数组长度，改变了原数组

#### valueOf()返回数组对象的原始值 ####

返回结果  
![在这里插入图片描述][20201119001725853.png_pic_center]  
返回了数组对象原始值(并非初始值)，未改变愿数组

多加练习哦

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[JavaScript]: https://www.w3school.com.cn/jsref/index.asp
[ES6]: https://www.runoob.com/w3cnote/es6-let-const.html
[20201118231346479.png_pic_center]: /images/20221120/dc277bb9518345e19b0e81d02c5dc2e6.png
[2020111823143467.png_pic_center]: /images/20221120/d62a81f3df2f4aea857e65783c615a34.png
[20201118232211484.png_pic_center]: /images/20221120/1a1b22dd9913445ea62e56c061c957ce.png
[20201118233905106.png_pic_center]: /images/20221120/37d08429340742f0933b176c87f77f6f.png
[20201118234046628.png_pic_center]: /images/20221120/0862c327cf674d5fbb04dd17b31770be.png
[20201118234230390.png_pic_center]: /images/20221120/4f1e9055f7df4fb5804c2befa1447c27.png
[20201118234355352.png_pic_center]: /images/20221120/25b7804f22094cd0a87163de6c67d1bb.png
[20201118234447815.png_pic_center]: /images/20221120/4124fda81493416bbc0711eabccd11e6.png
[20201118234700665.png_pic_center]: /images/20221120/f32c955e48f942938a953ba714e91a96.png
[20201118235311242.png_pic_center]: /images/20221120/c196cf5eb9b64f949a774c32540da3a0.png
[20201119000908576.png_pic_center]: /images/20221120/3aee6bdb0bb14c30bdec418c9e4997e6.png
[20201119001223377.png_pic_center]: https://img-blog.csdnimg.cn/20201119001223377.png#pic_center
[20201119001442769.png_pic_center]: https://img-blog.csdnimg.cn/20201119001442769.png#pic_center
[20201119001725853.png_pic_center]: https://img-blog.csdnimg.cn/20201119001725853.png#pic_center
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center