js数组基本知识

1、利用new创建数组

语法格式 ：
var 数组名=new Array();
2.利用数组字面量创建数组
var 数组名=[];

// 第一种创建数组的方法。
        var a=new Array();
        // 第二种
        var b=[];

1.1数组的遍历

<script>
        var a=['red','green','blue',3,4,5,6];
        for (let i = 0; i < a.length; i++) {
            console.log(a[i]);    
        }
    </script>

运行结果：

1.2数组的求和：

<script>
        // 2,6,1,7,4 求和及平均值
        var a=[2,6,1,7,4];
        var s=0;
        
        for (let i = 0; i < a.length; i++) {
            s=s+a[i];
        }
        console.log("数组a的和是："+s+",平均值是："+s/a.length);
    </script>

运行结果：

1.3新增数组元素：

<script>
        var a=['red','green','blue'];
        console.log(a);
        // 修改数组的长度为5
        a.length=5;
        console.log(a);
        console.log("a[4]="+a[4]);
        // 新增数组元素 修改索引号 追加新元素
        a[4]="new4";
        a[5]="new5";
        console.log(a);
    </script>

运行结果：

 a="lxl";//不要直接给数组名赋值，否则里面的数组元素都没了
        console.log(a);

运行结果：

<script>
// 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点)
    let arr=[1,2,3,4,5];
    console.log(arr.push('一','二','三'));//8返回的是数组的长度
    console.log(arr);//
// arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
    console.log(arr.unshift(-3,-2,-1,0));
    console.log(arr)
    </script>

2、数组的删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

<script>
        // 从数组中删除最后一个元素
        var arr=[1,2,3,4,5,6,7,87];
        console.log(arr.pop());
        console.log(arr);
        // 删除第一个元素
        console.log(arr.shift());
        console.log(arr);
    </script>

数组.splice()方法 删除指定元素
数组.splice()方法,如果不写删除几个元素，
则就把[起始位置到最后]的所有元素都删除了
arr.splice(起始位置,删除几个元素)

var arr = [1, 2, 3, 4, 5, 6, 7, 87];
arr.splice(2,1);
console.log(arr);
arr.splice(0);
console.log(arr);

3、数组的map方法

let arr = ['red', 'green', 'blue'];
arr.map(function (item, index) {
    console.log(item);  //获取元素red green blue
    console.log(index); //获取下标 0 1 2
});

let arr = ['red', 'green', 'blue'];
let newArr = arr.map(function (item, index) {
    return item + '老师';
});
console.log(newArr);

需求：把一个数组的各项都加10，并输出

const arr2=[32,65,76,87,9];
const arr3= arr2.map(function (item,index) {
    return item+10;
});
console.log(arr3);//[42, 75, 86, 97, 19]

4、join方法

join()方法用于把数组中的所有元素转换一个字符串

const arr=['red','green','blue',100];
console.log(arr.join(''));//redgreenblue100
console.log(arr.join('-'));//red-green-blue-100
console.log(arr.join('*'));//red*green*blue*100

5、数组结构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法:
1.赋值运算符 =左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2.变量的顺序对应数组单元值的位置依次进行赋值操作

arr = [100, 300, 200];
// 数组解构 批量赋值
const [min, max, avg] = arr;
console.log(`最大值:${max}`);

// 交换二个变量
let a = 10;
let b = 20;//必须加分号
[b, a] = [a, b,];
console.log(`a=${a}, b=${b}`);//a=20, b=10

const [hr,qh,rb]=['海尔','清华','日本'];
console.log(hr);//0海尔

// 请将最大值和最小值函数返回值解构 max和min 两个变量
function getValue() {
return [600,100];
}
const [max,min]=getValue();
console.log(max);//600

5.1数组结构的特殊情况

// 变量多,单元值少 多余的变量是undefined
const [a,b,c,d]=[1,2,3];
console.log(a,b,c,d);//1 2 3 undefined

// 变量少,单元值多 多余的不赋值
const [k,e]=[1,2,3,4];
console.log(k,e);//1 2

// 利用剩余参数解决变量少 单元值多的情况
const [m,n,...arr]=[1,2,3,4];
console.log(k);//1 
console.log(e);//2
console.log(arr);//[3, 4]

// 防止underfined的传入  可以设置默认值
const [x = 0, y = 0] = [];
console.log(x, y);//0 0

// 按需导入 自动忽略某些值
const [g, , v, l] = [1, 2, 3, 4];
console.log(g, v, l);//1 3 4

// 多维数组的结构
const [a1, b1, [c1, d1]] = [1, 2, [3, 4]];
console.log(a1);//1
console.log(b1);//2
console.log(c1);//3
console.log(d1);//4
const [a2, b2, ...brr]= [1, 2, [3, 4]];
console.log(brr);//[Array(2)]

6、forEach遍历数组

有点类似于forin

const arr=['red', 'green', 'yellow', 'blue'];
arr.forEach(function (item,index) {
    console.log(item);
    console.log(index);
})

注意:
1.forEach 主要是遍历数组索引号可选。
2.参数当前数组元素是必须要写的，
3.不返回数组，里面也不需要写return，
4.适合遍历数组对象

const arr=['red', 'green', 'yellow', 'blue'];
const result= arr.forEach(function (item,index) {
})
console.log(result);//undefined

7、筛选数组filter

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
主要使用场景:筛选数组符合条件的元素，并返回筛选之后元素的新数组

let arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.filter(function (item, index) {
    console.log(item);//输出值
    console.log(index);//输出下标
})

基本语法：

let arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
const newArr = arr.filter(function (item, index) {
    return item > 500;
})
console.log(newArr);

8、数组常见的实例方法—reduce

先定义一个数组

let arr = [1, 2, 3, 4, 5];

没有初始值

const total = arr.reduce(function (prev, current) {
    return prev + current;
})
console.log(total);//15

有初始值

const arr1=arr.reduce(function (prev, current){
    return prev + current;
},100) 
console.log(arr1);//115

箭头函数的写法

const total3 = arr.reduce((prev, current) => prev + current, 1000);
console.log(total3);//1015

理解一下他们的区别

9、数组常见的实例方法总结

• 实例方法 join 数组元素拼接为字符串，返回字符串(重点）
• 实例方法 find 查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点)

const arr = ['red', 'green', 'yellow'];
const re= arr.find(function (item) {
    return item === 'yellow';
});
console.log(re);//yellow

find的应用
需求：找到小米，并返回这个对象

let phone = [
    {
        name: '华为',
        preice: 1999,
    },
    {
        name: '苹果',
        preice: 1999,
    },
    {
        name: '小米',
        preice: 1999,
    },
];
const rep=phone.find(item => item.name === '小米');
console.log(rep);//{name: '小米', preice: 1999}

• 实例方法every 检测数组所有元素是否都符合指定条件，如果所有元素都通过检测返回 true，否则返回 false(重点)

// 判断是否有阳
let arr=['阴','阴','阴','阴','阳','阴','阴'];
const a1=arr.every(function(item){
    return item==='阴';
});
console.log(a1);//false

• 实例方法 some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true，否则返回 false

判断是否有阳性
let arr=['阴','阴','阴','阴','阳','阴','阴'];
const a2=arr.some(item => item==='阳')
console.log(a2);//true

• 实例方法 concat 合并两个数组，返回生成新数组
• 实例方法 sort 对原数组单元值排序
• 实例方法 splice 删除或替换原数组单元
• 实例方法 reverse 反转数组
• 实例方法 findIndex查找元素的索引值

10、伪数组转为真数组

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    const lis = document.querySelectorAll("li");
    console.log(lis);//是一个伪数组
    const liss = Array.from(lis);
    console.log(liss);
</script>