JavaScript 数组、概念、创建数组、遍历数组、数组新增元素、数组相关方法

一、数组概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

// 普通变量一次只能存储一个值
var  num = 10; 
// 数组一次可以存储多个值
var arr = [1,2,3,4,5];

二、创建数组

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

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

利用 new 创建数组

var 数组名 = new Array();
var arr = new Array();   // 创建一个新的空数组

注意 Array () ，A 要大写   

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

• 数组的字面量是方括号 [ ]
• 声明数组并赋值称为数组的初始化
• 这种字面量方式也是我们以后最多使用的方式

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',12,true,28.9];

总结：

1. 创建：
   1.var arr = new Array(元素列表);
   2.var arr = new Array(默认长度);
   3.var arr = [元素列表];

        var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4,5];

        document.write(arr1+"<br>");//1,2,3
        document.write(arr2+"<br>");//,,,,
        document.write(arr3+"<br>");//1,2,3,4,5

三、获取数组元素

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);   

四、遍历数组

JS中数组的遍历方法有哪些

for 循环

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

foreach

// forEach:不会改变原数组 没有返回值
const forEachResult =
  arr.forEach((element, index, arr) => {
    console.log(element);
    console.log(index);
    console.log(arr);
  });

console.log(forEachResult);//undefined

map

// map ：不会改变原数组 具有返回值
const mapResult = arr.map(
  (item, index, arr) => {
    console.log(item);
    console.log(index);
    console.log(arr);
    return item * 2
  }
)
console.log('mapRES:' + mapResult);//2 4 6

filter

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

// filter 过滤数组 返回符合条件的元素数组
const resultFilter = arr.filter(
  (item) => {
    return item > 1
  }
)
console.log(resultFilter);//[2, 3]

for…of

for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

// for ... of 返回是数组的元素 对象的属性值 不能遍历普通的对象
for (const value of arr) {
  console.log(value);
}

reduce

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
 (previousValue, currentValue) => previousValue + currentValue,
 initialValue
);

console.log(sumWithInitial);
// expected output: 10

// reduce 接收一个函数 作为一个累加器
// pre 计算之后返回的值
// item 当前的值
// 回调函数从数组索引为 0 的元素开始执行
let result = arr.reduce((pre, item) => {
  // console.log('pre;' + pre);
  // console.log('item:' + item);
  return pre + item
}, 0)
console.log(result);

JS相关笔记

五、数组中新增元素

可以通过修改 length 长度来实现数组扩容的目的

length 属性是可读写的

 var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

---

六、数组相关方法

数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）。

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

添加删除数组元素的方法 push()、pop()、unshift()、shift()

• push():向数组的末尾添加一个或更多的元素，并返回新长度

document.write(arr.join("--")+"<br>");
 //1--abc--true------------ab
 
arr.push(33);
document.write(arr.join("--")+"<br>");
//1--abc--true------------ab--33

instanceof、Array.isArray()检测是否为数组

• instanceof 运算符，可以判断一个对象是否属于某种类型
• Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

数组排序reverse()、sort()

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    return b - a;      // 降a序
    // return a - b;   // 升序
});
console.log(arr);

数组索引方法 indexOf()、lastIndexOf()

// 数组去重
const arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']
const arr1 = []

arr.forEach((item) => {
    if (arr1.indexOf(item) == -1) {
        arr1.push(item)
    }
})
console.log(arr1);

数组转换为字符串toString()、join(‘’)

七、特点

1.JS中，数组元素的类型是可变的
2.JS中，数组的长度是可变的

var arr = [1,"abc",true];
        document.write(arr[0]+"<br>"); //1
        document.write(arr[1]+"<br>"); //abc
        document.write(arr[2]+"<br>"); //true
        document.write(arr[10]+"<br>"); //undefined
        arr[8]="ab";
        document.write(arr+"<br>"); //1,abc,true,,,,,,ab