JavaScript数组

解释说明

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

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

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

数组对象的属性

length : 数组的长度

声明数组的方式

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

JS

// 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 ]

遍历数组(迭代数组)

JS

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
}

JS

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

数组中的方法

🟢拼接检索

concat( )

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

JS

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

JS

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

lastIndexOf( )

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

JS

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

join( )

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

JS

// 使用指定的字符串拼接数组中的每个值,结果是字符串
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( )

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

JS

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( )

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

JS

// 声明一个数组
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() 往数组的最前边添加值, 返回值是新数组的长度 ; 改变的是原数组

JS

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() 删除数组中的最后一个元素

JS

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() 删除数组中的第一个元素

JS

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( )

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

JS

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) 分割数组 截取的数组包前不包后

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

JS

//截取数组: 从指定的索引值位置开始,到指定的索引值位置结束,截取数组
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) 加删除替换数组中的值; 返回值是被删除的数组中的元素 对原数组进行的更改（改变原数组）

JS

// 一个参数: 意味着从执行删除操作;从指定的起点索引值位置开始向后删除整个数组
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( )

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

JS

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

JS

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

JS

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

includes( )

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

JS

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( )

entries( )

every( )

fill( )

filter( )

find( )

findIndex( )

findLast( )

findLastIndex( )

keys( )

map( ) 遍历数组

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

JS

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

some( )

判断是否为数组的方法

console.log（obj instanceOf  Array)  > true/fales

console.log (arrAy.isArray(obj)) > true/fales