JavaScript数组

解释说明

数组 : 数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用索引值访问数组中的任何一个值。

数组中的每个元素都有自己的的ID(索引值)，以便它可以很容易地被访问到。

数组对象的属性

length : 数组的长度

声明数组的方式

数组中可以存放任何值 (存放任何数据类型的数据)

// 1.字面量形式 使用更多的一种方式
var arr = [1,2,3,56,7];
var arr = ['hello','world','nihao'];
console.log(arr);
//[ 'hello', 'world', 'nihao' ]

// 2.二维数组
var arr1 = [1,2,[22,33,44]];
console.log(arr1);
//[ 1, 2, [ 22, 33, 44 ] ]

// 使用new关键字
var arr2 = new Array(10,20,30,40);
console.log(arr2);
//[ 10, 20, 30, 40 ]

// 访问数组中的值 通过索引值访问数组中的每一个值，索引值从 0 开始
var arr2 =[1,2,3,56,7];
console.log(arr2[3]);// 56

// 声明数字的另一种方式
var arr3 = new Array();
// 手动往数组中添加值
arr3[0] = 100;
arr3[1] = 200;
console.log(arr3);//[ 100, 200 ]

遍历数组(迭代数组)

var arr = ['hello', 'world', 'nice'];
//  打印数组中的每个值  遍历数组
//  获取数组的长度  length 属性 
console.log(arr.length);// 3
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    //hello world nice
}

var str = 'hello';
//  修改变量的值 : 本质是给变量重新赋值
	str = 'world';
console.log(str);//world
//  修改数组中的值 
arr[1] = '新的值';
console.log(arr);//[ 'hello', '新的值', 'nice' ]

数组中的方法

🟢拼接检索

concat( )

说明：拼接数组,得到的结果是拼接后的新数组,对原数组不影响

let arr3 = [1, 23, 345, 55, 1, 55, 99],
    arr4 = ['hello', 'world'];
//  可以拼接多个数组,多个数组之间使用逗号隔开 
let index3 = arr3.concat(arr4,arr4);
console.log(index3);
// [ 1, 23, 345, 55, 1, 55, 99, 'hello', 'world' , 'hello', 'world']

// es6提供的结构
let index4 = [...arr3, ...arr4]
console.log(index4);
//[ 1, 23, 345, 55, 1, 55, 99, 'hello', 'world' ]

indexOf( )

说明：检索指定的值在数组中第一次出现位置的索引值, 返回结果是索引值,不存在则返回-1

let arr1 = [1, 23, 345, 55, 1, 55, 99];
let index1 = arr1.indexOf(55);
console.log(index1); // 3

lastIndexOf( )

说明：检索指定的值在数组中最后一次出现位置的索引值, 返回结果是索引值,不存在则返回-1

let arr2 = [1, 23, 345, 55, 1, 55, 99];
let index2 = arr2.lastIndexOf(55);
console.log(index2);// 5

join( )

说明：拼接数组转换为字符串;

// 使用指定的字符串拼接数组中的每个值,结果是字符串
let arr5 = [1, 23, 345, 55, 1, 55, 99],
    arr6 = ['hello', 'world'];
let index5 = arr5.join('');
console.log(index5);// 1233455515599

let index6 = arr5.join('=');
console.log(index6);//1=23=345=55=1=55=99
console.log(typeof index6,index6);//string 1=23=345=55=1=55=99

toString( )

说明：直接数组转换为字符串类型

let arr7 = [1, 23, 345, 55, 1, 55, 99];
let index7 = arr7.toString();
console.log(typeof index7,index7);
//string 1,23,345,55,1,55,99

🟢数组中添加或删除值

push( )

说明：往数组的最后边添加值, 返回值是新数组的长度 ; 改变的是原数组

// 声明一个数组
var arr = ['hello', 'good', 22, 33, 44, 'world', 'nice'];
// ============== 数组中添加值 push(value)  unshift(value)
arr.push(100);
// 返回值是新数组的长度
let len1 = arr.push();
console.log(len1); // 8
// 查看新数组的值
console.log(arr) ;
//['hello', 'good', 22, 33, 44, 'world', 'nice',100]

unshift( )

说明: unshift() 往数组的最前边添加值, 返回值是新数组的长度 ; 改变的是原数组

var arr2 = ['hello', 'good', 22, 33, 44, 'world', 'nice'];
arr2.unshift('world');
let len2 = arr2.unshift('nice');
console.log(len2);// 9
console.log(arr2); 
// ['nice','hello', 'good', 22, 33, 44, 'world', 'nice']

pop( )

说明：pop() 删除数组中的最后一个元素

var arr3 = ['hello', 'good', 22, 33, 44, 'world', 'nice'];
//  返回值是被删除的元素 
let len3 = arr3.pop();
console.log(len3);//nice
//输出删除后的数组
console.log(arr3);
//[ 'hello', 'good', 22, 33, 44, 'world' ]

shift( )

说明： shift() 删除数组中的第一个元素

var arr4 = ['hello', 'good', 22, 33, 44, 'world', 'nice'];
//  返回值是被删除的元素 
let len4 = arr4.shift();
console.log(len4);//hello
//输出删除后的数组
console.log(arr4);
// [ 'good', 22, 33, 44, 'world', 'nice' ]

🟢数组中其他方法

reverse( )

说明：反转数组; 对原数组进行改变, 返回值是改变后的原数组

let arr = [10, 20, 30, 40, 50];
let res = arr.reverse();
console.log(res);//[ 50, 40, 30, 20, 10 ]
console.log(arr);//[ 50, 40, 30, 20, 10 ]

slice( )

说明：slice(startIndex, endIndex) 分割数组 截取的数组包前不包后

对原数组没有影响, 不会改变原数组, 返回值是截取的新数组

//截取数组: 从指定的索引值位置开始,到指定的索引值位置结束,截取数组
let arr1 = [10, 20, 30, 40, 50];
let res1 = arr1.slice(1,2);
console.log(res1);//[ 20 ]
//截取数组: 从指定的索引值位置开始向后截取整个数组
let res2 = arr1.slice(1);
console.log(res2);//[ 20, 30, 40, 50 ]

console.log(arr1);//[ 10, 20, 30, 40, 50 ]

splice( )

说明：splice(startIndex, length, value) 加删除替换数组中的值; 返回值是被删除的数组中的元素 对原数组进行的更改（改变原数组）

// 一个参数: 意味着从执行删除操作;从指定的起点索引值位置开始向后删除整个数组
let arr2 = [10, 20, 30, 40, 50];
let res3 = arr2.splice(1);
console.log(res3);//[ 20, 30, 40, 50 ]
// 两个参数： 执行删除的操作;  从指定的索引值位置开始删除指定长度的数组
let arr3 = [10, 20, 30, 40, 50];
let res4 = arr3.splice(1,2);
console.log(res4);//[ 20, 30 ]
console.log(arr3);//[ 10, 40, 50 ]
// 三个参数： 指定删除替换的操作;  
// 从指定的索引值位置开始删除指定长度的数组，在原位置上（index）替换为新的值
let arr4 = [10, 20, 30, 40, 50];
let res5 = arr4.splice(1,1,'hello');
console.log(res5);//[ 20 ]
console.log(arr4);//[ 10, 'hello', 30, 40, 50 ]

sort( )

说明：对数组进行排序 , 需要指定参数, 参数是一个函数

let arr6 = [1, 20, 12, 2, 35, 11, 100, 56];
//  对数组进行排序， 改变原数组 
//  没有指定参数，简单的按照位上数字大小进行排序
arr6.sort();
console.log(arr6);
// [1, 100, 11, 12, 2,  20, 35, 56]

// 指定参数，实现真正的排序(升序)
arr6.sort(function(x,y){
    // 升序
    return x - y;
});
console.log(arr6);
//[1, 20,  12,  2, 35, 11, 100, 56]

// 指定参数，实现真正的排序(降序)
arr6.sort(function(x,y){
    // 升序
    return y - x;
});
console.log(arr6);
//[100, 56, 35, 20, 12, 11,  2, 1]

includes( )

说明：判断数组中是否存在指定的值 ，结果是布尔值，true:存在， false: 不存在

let arr7 = [1, 20, 12, 2, 35, 11, 100, 56];
let res7 = arr.includes(20);
let res8 = arr.includes(200);
console.log(res7);//true
console.log(res8);//false

🟢ES6往后新增的方法

reduce( )

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

// 求和
let arr = [2, 3, 4, 5, 6, 7, 88];
let res = arr.reduce(function (item, index) {
    // console.log(item);
    return item + index;
})
console.log(res);

reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。

entries( )

方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)

let arr = ['法外狂徒','职业法师','北大还行','花呗宗师','人生小目标'];
arr.entries();
for(let [index,value] of arr.entries()){
	//利用数组解构
	console.log(index,value)
}

every( )

检索数组中是否有符合要求的元素， 全部满足结果是true 否则为 false

let arr = [2, 3, 4, 5, 6, 7, 88];
let res = arr.every(function(item,index,arr){
    return item > 50;
})
console.log(res); //false

fill( )

使用自己想要的参数替换原数组内容，但是会改变原来的数组
该方法有三个参数：
fill(value, start, end)
value：想要替换的内容。
start：开始位置（数组的下标），可以省略。
end：替换结束位置（数组的下标），如果省略不写就默认为数组结束

let arr = ['a,','b','c']
arr.fill(9);
console.log(arr); // [9,9,9]

let arr = ['a,','b','c']
arr.fill(9,1);
console.log(arr); // [ 'a,', 9, 9 ]

filter( )

过滤数组 返回值是一个新数组， 结果是符合要求的数组中的元素

let arr = [2, 3, 4, 5, 6, 7, 88];
let res = arr.filter(function (item, index) {
    return item > 40;
})
console.log(res); // [88]

find( )

方法返回数组中第一个满足回调函数测试的第一个元素的值。否则返回undefined

let arr = [1,2,3,4,5,6,7,8,9];
let found = arr.find(function(e){
    return e > 5;
})
console.log(found); //6

findIndex( )

用于找到数组中第一个符合条件的元素的下标，如果所有成员都不符合条件，则返回-1

let arr1 = [1,2,3,4,5];
let num = arr.findIndex(item => item > 1);
console.log(num); //1

keys( ) values()

keys()是对键名的遍历、values()是对键值的遍历

let arr = ['a', 'b', 'c']
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
for (let item of arr.values()) {
console.log(item);
}
// 'a'
// 'b'
// 'c'
for (let [index, item] of arr.entries()) {
console.log(index, item);
}
// 0 'a'
// 1 'b'
// 2 'c'

map( ) 遍历数组

说明：返回值是一个新数组; 执行的操作是把原数组中的每个值按照指定的规则映射到新数组中

let newArr = arr.map(function(item,index){
    //  item 代表数组中的每个值，  index 代表数组的索引值
    console.log(item,index);
    // 指定映射规则，通过return返回映射后的值
    return item * 10;
})
console.log(newArr);

some( ) 遍历数组 返回值是布尔类型 false true

检索数组中是否有符合要求的元素， 只要有一个符合要求，则结果是true 全部不符合则为 false

let arr = [2, 3, 4, 5, 6, 7, 88];
let res = arr.some(function(item,index,arr){
    return item > 50;
})
console.log(res);//true