【长文】JS语法之数组

1. 什么是数组？

数组就是值的有序集合，是一种伪集合，因为数组中的元素可以重复但必须有序。

值就是数据，是String，number，boolean,undefined,null类型的数据

在数组中，每一个值（如100，’js’，true）都称之为一个元素。

每一个元素在数组中所处的位置，称之为索引。是数字来表示，从0开始。

var a=100
var b='dfs'
var c=true
//有序，可重复，
var arr1=[100,'dfs',true，true];
var arr2=['dfs',100,true];
//  索引     0   1   2      对应arr2

[]表示是数组，数组中的元素之间使用逗号隔开。

JavaScript数组是无类型的，数组元素可以是任意类型。

数组的元素可以是任意值，包括对象和数组

JavaScript数组是动态的，根据需要它们会增长或缩减

数组元素的索引不一定要连续的，它们之间可以有空缺。

JavaScript数组是对象的特殊形式，但它是经过优化的，效率更高。

2. 创建数组

在JS中，创建数组有两种方式：

• 直接量(字面量)
• new的方式

直接量(字面量)

//直接量(字面量)
var arr=['北京','上海','南京','台湾']

console.log(arr)

new的方式

//var dfs=new Data();var dfa=new Object();
var arr=new Array('北京','上海','南京','台湾')
console.log(arr)

注意

数组直接量中的值不一定要是常量，它们可以是任意的表达式

var a=123
var arr=['北京','上海','南京','台湾',a]
                            //  a是表达式

如省略直接量中的某个值，省略的元素将被赋予undefined值

var a = [1,,3]
console.log(a)
console.log(a[1])

在定义的数组的时候，要尽量避免这种情况。

数组直接量允许有可选的结尾的逗号

var arr=['北京','上海','南京','台湾',]
//  结果没有变化,length也没有影响

new Array()等价于[],创建一个空数组

new Array(n)，创建指定长度数组，数组中没有索引和元素

var arr1=new Array(5)
var arr2=new Array('5')

console.log(arr1)
console.log(arr1.length)
console.log(arr2)
console.log(arr2.length)

当new的时候，只有一个参数时，需要注意参数的数据类型。

如果参数恰好是数值类型，那么就意味着创建了长度为该值的空数组

3. 数组基本操作

基本操作无非就是 增删改查，有上面可以知道数组是有序的，所以使用索引是非常方便的，查 解决了，就剩增删改了

1. 添加

var arr=['北京','上海','南京','台湾']
console.log(arr)
//增加 arr[4]='新城市'
arr[4]='新城市'
console.log(arr)

2. 修改

var arr=['北京','上海','南京','台湾']
console.log(arr)
//修改 
arr[0]='老北京方便面'
console.log(arr)

3. 删除
   。。。var arr[0]=??? (〃‘▽’〃)

。。。。。感觉好麻烦，添加、删除操作这样很不方便不友好，还好，对于添加、删除操作我们有一些方法

重点掌握：

添加：push和unshift

删除：pop和shift

1. push，在数组的后面追加新的元素

var arr=['北京','上海','南京','台湾']
console.log(arr)
// 在尾添加元素 push
arr.push('新城市')  //push 单个
console.log(arr)

arr.push('一个城市', '又一个新城市')  //push 多个
console.log(arr)

2. unshift，在数组的前面插入新的元素

var arr=['北京','上海','南京','台湾']
console.log(arr)
// 从头添加元素 unshift
arr.unshift('新城市')  
console.log(arr)

arr.unshift('一个城市', '又一个新城市') 
console.log(arr)

3. pop:删除数组中最后一个元素, shift:删除数组中第一个元素

var arr=['北京','上海','南京','台湾']
console.log(arr)
// 删除数组中最后一个元素
arr.pop()  
console.log(arr)
// 删除数组中第一个元素
arr.shift() 
console.log(arr)

删除操作和添加操作不太一样：

• pop和shift没有参数，每一次只能删除一个
• Pop和shift方法返回的是被删除的元素。Push和unshift返回的则是新数组的长度

ennnn,这只是基本操作啊！

4. 数组长度

唯一的特点：在数组中肯定找不到一个元素的索引值大于或等于数组的长度

可以用length方法查看数组的长度

var arr=['北京','上海','南京','台湾']
console.log(arr.length)

在数组中肯定找不到一个元素的索引值大于或等于数组的长度，为了维持此规则不变，数组有两个特殊的行为：

• 如果为一个数组元素赋值，它的索引i大于或等于现有长度时，length的值将设置为i+1
• 当设置length属性为一个小于当前长度的非负整数n时，当前数组中的那些索引值大于或等于n的元素将从中删除

通常情况下，我们通过修改数组来改变length

var arr = ['北京', '上海', '南京', '台湾']
    console.log(arr)
    console.log(arr.length)
// 添加一个元素，length为了满足规则而增加
    arr.push('新城市')
    console.log(arr)
    console.log(arr.length)
// 删除一个元素，length为了满足规则而减少
    arr.pop()
    console.log(arr)
    console.log(arr.length

还有一种情况，就是我们直接修改length

var arr = ['北京', '上海', '南京', '台湾']
    console.log(arr)
    console.log(arr.length)
// 直接修改length，4=>3，为了满足规则，舍弃了arr[3]
    arr.length=3
    console.log(arr)
    console.log(arr.length)

损失不可控，特别是数据特别多的时候，了解就好

5. 数组遍历

遍历：把数值中的所有元素，挨个的取出来，进行一些相应的操作。那么这个获取每一个元素的过程，就叫遍历。

怎么遍历：用for 循环遍历，传统方法，用的也多；用方法遍历，方便干净，上手快

for循环与do/while循环
传统套路，也是方法等等的基础，必须掌握

var arr = ['北京', '上海', '南京', '台湾']
console.log(arr)
    for (let i = 0; i < arr.length; i++) {
      arr[i] += '欢迎您'
    }
console.log(arr)

do/while 循环与for循环大体差不多,只支持数组遍历, 多用于对循环退出条件不是很明确的场景. 一般来说不建议使用这种方式遍历数组.

注意：不要使用for/in来遍历数组。for…in是用来遍历对象的。

遍历方法
对于数组遍历的方法有很多，有forEach,map,every等等

forEach()

语法：arr.forEach(fn, thisArg)
fn 表示在数组每一项上执行的函数，接受三个参数：

• value 当前正在被处理的元素的值
• index 当前元素的数组索引
• array 数组本身

thisArg 可选，用来当做fn函数内的this对象。

使用forEach循环有几点需要特别注意:

• forEach无法在IE中使用，只是在firefox和chrome中实现了该方法
• forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致

var arr = ['北京', '上海', '南京', '台湾']
arr.forEach(function(item){
  if(item=="北京")
    return;//这里只能使用return跳过当前元素处理
  console.log(item);
});

map()

map方法使用其提供函数的每次返回结果生成一个新的数组.
语法: array.map(callback[,thisArg])

var arr = [1, 4, 9];
var roots = arr.map(Math.sqrt);//map包裹方法名
// roots is now [1, 2, 3], arr is still [1, 4, 9]

var array = [1, 4, 9];
var doubles = array.map(function(num) {//map包裹方法实体
  return num * 2;
});
// doubles is now [2, 8, 18], array is still [1, 4, 9]

every()

every() 方法使用传入的函数测试所有元素，只要其中有一个函数返回值为 false，那么该方法的结果为 false；如果全部返回 true，那么该方法的结果才为 true。

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. 多维数组

js 中并没有真正的多维数组，但我们可以利用js中数组的特性达到二维甚至多维数组的效果，如：

var arr = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ]
console.log(arr[1])   //[1,2,3]
console.log(arr[2])   //[4,5,6]
console.log(arr[3])   //[7,8,9]
// 可知arr[1]是一个一维数组，再来一次
console.log(arr[1][1])   //1
console.log(arr[2][2])  //5
console.log(arr[3][3])  //9
// 访问成功得到数组元素
// 遍历一遍
for(var i=0;i<arr.length;i++){
  for(var j=0;j<arr[i].length;j++){
    console.log(arr[i][j])
  }
}
// 访问、遍历都没有问题

7. 数组方法

查看W3c手册

1. join

join() 方法将数组中的所有元素连接成一个字符串。

语法：arr.join([separator = ‘,’]) separator可选，缺省默认为逗号。

    var arr1 = [1, 2, 3, 4, 5]
    console.log(arr1.join())  //缺省默认为逗号。
    console.log(arr1.join('*'))
    console.log(arr1.join('-*'))

2. reverse

reverse()方法颠倒数组中元素的位置

var arr1 = [1, 2, 3, 4, 5]
// reverse方法作用于当前数组，立即发生变化
arr1.reverse()
console.log(arr1) //[5,4,3,2,1]

3. concat

连接多个数组，形成一个新的数组，可以理解为合并。

若concat方法中不传入参数，那么将基于原数组浅复制生成一个一模一样的新数组（指向新的地址空间）

var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被修改

4. sort

对数组元素进行排序，并返回这个数组

在定义规则的时候，只需要两个参数。

两个数字在排序的时候，比如 6,5，如何排列呢？需要从低到高排，判断二者的大小，以决定是否要交换顺序。

a – b 如果a > b，则返回的是true，此时二者就需要交换顺序，结果就是大的排到后面去了，小的就排到前面了。所以，这种情况就是从小到大进行排序。

反之，就是从大到小进行排序。

 var array = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9];
var comparefn = function (x, y) {
      return x - y 
    }
console.log(array.sort(comparefn)) //[0,1,2,3,4,5,6,7,8,9]

5. slice

切割，截取数组中的片段。

格式：slice(start，end),返回一个新的数组，包含从 start 到 end （不包括该元素）,Start和end是指数组的索引值

如果 start 的值为负数，假如数组长度为 length，则表示从 length+start 的位置开始复制，此时参数 end 如果有值，只能是比 start 大的负数，否则将返回空数组。

var arr = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9];

console.log(arr.slice(0,1))  //[7]
console.log(arr.slice(1,2))   //[6]
console.log(arr.slice(2,4))   //[5,4]
console.log(arr.slice(-3,-1))   //[0,8]
console.log(arr.slice(-3,0))   //[]

6. toString

toString() 方法返回数组的字符串形式，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

var arr = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = arr.toString();
console.log(str); // Jan,Feb,Mar,Apr

end

还有很多方法没有完善，考虑到这是了解数组篇，与后会有Array 方法的具体介绍，此篇有不足错误之处还请在评论区不吝指出，十分感谢！

希望此篇能够给你带来帮助，再次感谢阅读。