# JavaScript Array(数组)
| 数组函数 | 介绍 |
| --- | --- |
| concat | 合并数组 |
| shift| 删除数组第一个元素 |
| pop | 删除数组最后一个元素 |
| unshift| 添加一个元素到数组 开头|
| push | 添加一个元素到数组 末尾 |
| reverse| 数组顺序反转 |
| slice| 从一个数组中选择元素 |
| sort()| 数组排序(按字母顺序升序) |
| sort(function(a,b){return a-b})| 数组排序(按字母顺序升序 |
| sort(function(a,b){return b-a})| 数字排序(按数字顺序降序) |
| splice| 在数组的第X位置添加一个元素 |
| toString()| 转换数组到字符串 |
* * *
数组对象的作用是:使用单独的变量名来存储一系列的值。
## 创建一个数组
创建一个数组,有三种方法。
下面的代码定义了一个名为 myCars的数组对象:
1: 常规方式:
var myCars=new Array();
myCars\[0\]="Saab";
myCars\[1\]="Volvo";
myCars\[2\]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=\["Saab","Volvo","BMW"\];
* * *
## 访问数组
通过指定数组名以及索引号码,你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值:
var name=myCars\[0\];
以下实例修改了数组 myCars 的第一个元素:
myCars\[0\]="Opel";
## 合并两个数组 - concat()
```
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
```
> var 新数组 = 数组1.concat(数组2,数组3....);
## 从一个数组中选择元素 - slice()
```
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
var x=document.getElementById("demo");
x.innerHTML=citrus;
```
## 在数组的第2位置添加一个元素 - splice()
```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
```
#### 练习笔记
```
function myFunction(){
var array1\=\['元素1','元素2','元素3','元素4'\];
var array2\=\[1,2,3,4,5\];
var array3\=\[1,2,11,22,5\];
var array4\=\['a','g','c','e','b','j'\];
//合并数组
var newArray\=array1.concat(array2);
//移除数组的第一个元素
newArray.shift();
//移除数组的最后一个元素
newArray.pop();
//添加一个元素到数组开头
newArray.unshift('添加元素1');
//添加一个元素到数组末尾
newArray.push('添加5');
//数组顺序反转
newArray.reverse();
//从数组中选取元素
newArray\=newArray.slice(1,5);
//按字母排序(正序)
newArray\=array4.sort();
//按字母排序(倒序) 将正序进行反转
newArray.reverse();
//按数字进行排序(正序)
newArray\=array3.sort(function(a,b){return a\-b});
//按数字进行排序(倒序)
newArray\=array3.sort(function(a,b){return b\-a});
newArray\=array1;
//在数组的某个位置新增元素/删除元素
newArray.splice(2,0,'添加元素2','添加元素2','添加元素2');
//删除2个元素
newArray.splice(2,2);
newArray\=array1;
console.log(newArray.toString());
for(var i\=0;i<newArray.length;i++){
document.write(newArray\[i\]+'');
}
}
```
- 空白目录
- CSS相关知识
- 透明度
- 鼠标样式
- 盒子隐藏
- 背景图
- 文本
- 字体
- 链接
- 列表样式
- 边框border
- 轮廓outline
- 外边距Margin
- 内填充Padding
- Css综合
- css分组和嵌套
- css尺寸
- CSS鼠标样式
- 显示与隐藏 display
- 定位
- Vue2
- Vue的核心原理
- vue的拦截原理
- vue的模板语法
- 数据绑定
- MVVM
- 事件处理
- 计算属性与监视
- class与style的绑定
- 条件渲染
- 列表渲染
- 收集表单
- 内置指令
- vue的生命周期
- 单文件组件
- vue脚手架
- 基础知识
- ref和props
- mixin混入
- 插件
- scoped样式
- 缓存WebStorage
- 组件的通信
- 消息的发布于订阅
- 全局事件总线
- 组件自定义事件
- nextTick
- vue封装的过渡于动画
- Vue脚手架配置代理
- 插槽
- Vuex
- 搭建vuex环境
- 基本使用
- getters的使用
- 四个Map的使用
- 模块化+命名空间
- 路由
- route基本使用
- 注意点
- 多级路由
- query参数
- 命名路由
- params参数
- 路由的props配置
- route-link的replace属性
- 编程式路由导航
- 缓存路由文件
- 两个生命周期钩子(路由)
- 路由守卫
- 路由器的两种工作方式
- Vue常用UI库
- JavaScript相关知识
- 基础知识
- Js常用表达式
- Js常见的事件
- Js的重要公共方法
- Js数据类型
- Js字符串
- Js数组
- Js布尔类型
- Js的类型转换
- Js算数
- Js的日期处理
- Js的循环
- Js正则匹配
- Js的DOM篇
- Js的DOM1
- Js的DOM2
- Js高级教程
- Js的BOM
- Js之Window
- Js之Window Screen
- Js之Window Location
- Js之Window History
- Js之Navigator
- Js之弹框
- Js之计时
- Js之Cookies
- Js库-框架篇
- jquery
- prototype
- Vue3