Javascript教程第四章：数组引用类型分析

一.数组引用类型分析

1.数组的常用操作：

1.增加: ```js Array.push() 增加数据

Array.unshift() 从前面压入数据 2.删除：js Array.pop() 删除数据

Array.shift() 从前面删除数据

Array.splice(1,1,"houdunren") 3.改：js Array.splice(1,1,"houdunren") 4.查：js Array.indexof()

Array.lastindexof()

Array.include

Array.find(function(itme))

Array.findIndex(function(item)) 5.检测：js Array.isArray()方法
6.操作：js Array.every(functiom(item,indexArray))

Array.some(functiom(item,indexArray))

Array.filter(functiom(item,indexArray))

Array.map(functiom(item,indexArray),this) //this指的是将当前作用域传递给map中的回调函数

Array.reduce(functiom(pre,item,index,Array) //pre默认为数组的第一个值

Array.forEach(function(item,indexArray))

Array.from() //方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例 7.排序：js Array.sort(function(a,b){ return a-b; }) ```

2.多维数组操作

const ary = [1,2]
ary[1] = 99

此时修改成功，因为数组是引用类型，const只要不改变内存地址即可  
此时我们操作的是同一内存地址下面的值，所以JS不会报错

3.Array.of与数组创建细节

如果不设定值则为undefined ```js const ary = ["houdunren.com"] ary[3] = "hdcms"

此时数组的1，2的值为undefined ```

let ary = new Array(6)

此时会创建长度为6的数组，为了创建包含数字六的数组，我们提供了Array.of的方法

let ary = Array.of(6)               //[6]

4.类型检测和类型转换

Array.isArray()方法

5.展开语法，赋值解构

let ary = [1,2,3,5]
let hd = [6,7]
let aryhd = [...ary,...hd]

6.点语法操作DOM元素

const divs = document.querySelectAll("div");
获取所有div的NodeList

[...divs]  把NodeList转换为数组

7.使用解构赋值提高效率

注意：左右结构必须一样

const ary = ["hdcs","tsy","tly"]
const [ary1,ary2,ary3] = [...ary];

8.添加元素的多种操作技巧

const ary = [1,2,3]

(1)ary[ary.length] = "hdms"

(2)多数组展开语法

(3)ary.push()

9.数据入栈和出栈及填充操作

10.数组操作：

Array.push(data)              压入数据
Array.pop(data)               弹出数据
Array.shift(data)             从前面弹出数据
Array.unshift(data)           从前面压入数据
Array(5).fill("data")         创建包含五个data的数组
[1,2,3,5,4].fill("data",begin,end)
Array.concat()                在后面连接

//更灵活的方法
Array.slice(begin,end)          
//该方法并未改变原数组，而是创建了一个新的数组副本

Array.splice(begin,number,addData)
//需要截取的数量，该方法直接改变原数组,第三个是需要添加的数据

//查找(与字符串检索操作相同)：

Array.find(function(item))           //引用类型查找，找到则返回该值（不返回索引）
Array.findIndex(function(item))      //返回索引值

Array.indexOf()
Array.lastindexof()
Array.includes

！！！！注释：
const ary = [5,1,2,8,6,[1,2]]
console.log(ary.includes([1,2]));
返回false,因为引用类型比较的是内存地址，而数组是一个特殊的对象，所以返回false(值类型和引用类型的区别，内存空间不一样)

替换：
const ary = [1,2,3,4]
ary.splice(1,1,"houdunren")
console.table(ary)

清空数组：
const ary = [1,2,23,5]
ary.length = 0;                 //改变原数组
ary = [];                       //开辟新的内存空间

11.数组移动函数实例

const ary = [1,2,3,4,6];

function move(array,from,to){
    if(from < 0 || to > array.length){
        console.error("参数错误");
        return;
    }
    const newArray = [...array];
    let item = newArray.splice(from,1)
    newArray.splice(to,0,...item);
    return newArray;
}

console.log(move(ary,1,3))

12.数组 includes方法底层原理

let ary = [1,2,3,5,8,4]
function includes(array,findItem){
    for(const value of array){
        if(value === findItem) return true;
    }
    return false;
}

13.数组排序的使用技巧

const ary = [5,1,2,8,6]
let ary2 = ary.slice()
ary2 = ary2.sort(function(a,b){
    // a-b 从小到大  b-a 从大到小
    return a-b;
})
console.log(ary2);

sort原理

let ary = [8,5,74,6,5,1]
function sort(array){
    for (const n in array) {
        for(const m in array){
            if(array[n] < array[m]){
                let temp = array[m];
                array[m] = array[n];
                array[n] = temp;
            }
        }
    }
    return array;
}
console.log(sort(ary));

14.every()和 some()

比如检索用户输入的值里面有没有包含关键字

every():所有满足function条件的时候返回true

const ary = [
    {name:"tsy",js:89},
    {name:"tly",js:86},
    {name:"tzy",js:55}
]
let res = ary.every(function(item){
    return item >= 60;
})
console.log(res ? "全部同学及格" : "有同学不及格")

some():如果有任何一个返回真，则返回真

let res = ary.some(function(item,index,arr){
    console.log(item);
    return false;
})

15.filter过滤元素使用

filter():
如果返回真那么这个元素就要了 ```js let lessons = [ {name:"PHP学习课程",type:"php"}, {name:"PHP学习课程2",type:"php"}, {name:"mysql学习课程",type:"mysql"} ] //找出类型为php的课程 let res = lessons.filter(function(item,index,arr){ return item.type == "php"; }) console.table(res)

原理：

let ary = [1,2,3,4] function filter(array,item){ let newAry = []; for (const value of array) { //如果不包含，就推入新数组 if(item.includes(value) == false) newAry.push(value) } return newAry; } console.log(filter(ary,[2,3]))


## 16.map映射数组与引用类型的处理技巧
用map()处理的时候，值类型会创建副本，引用类型会修改原数据

js let lessons = [ {name:"PHP学习课程",type:"php"}, {name:"PHP学习课程2",type:"php"}, {name:"mysql学习课程",type:"mysql"}

] let data = [1,2,"houdunren"] data.map(function(item,index,array){ item = 后盾人-${item}; }) lessons.map(function(item){ item.click = 100; }) console.log(lessons); console.table(data)


## 17.超好用的reduce方法详解

### reduce(function(pre,item,index,array))
不传第二个参数的时候：
* 第一次pre为数组的第一个值,item为数组的第二个值
* 第二次pre为函数的返回值,item为数组的第三个值

传第二个参数：
* pre为第二个参数，第二次为函数的返回值

1.利用reduce统计数组中元素个数的函数：

let ary = [1,5,1,8,5,3,8,5]

function itemCount(array,findItem){ return array.reduce(function(total,item){ total += findItem==item ? 1 : 0; return total; },0); }

2.利用reduce获取数组中的最大值:

let ary = [1,5,1,8,5,3,8,5,11]

function maxInt(ary){ return ary.reduce(function(maxInt,item){ return maxInt > item ? maxInt : item; }) } console.log(maxInt(ary))

console.log(itemCount(ary,1)); ```

18.获取购物车中价格在某个范围的商品

let cart = [
    {name:"iphone",price:12000},
    {name:"iMac",price:5000},
    {name:"computer",price:50000},
    {name:"ipad",price:11000}
]
function getRange(number,array){
    return array.reduce(function(pre,item){
        item.price > number ? rangeAry.push(item.name) : rangeAry.push()
        return rangeAry;
    },[])
}
console.log(getRange(10000,cart));

19.reduce数组去重

let ary = [1,2,5,6,2,5]

function getRepeat(ary){
    return ary.reduce(function(pre,item){
        if(pre.includes(item) == false){
            pre.push(item)
        }
        return pre;
    },[])
}

console.log(getRepeat(ary));

20.炫酷的文字LOGO效果元素构建

let divs = document.getElementsByTagName("div")[0];
let div_content = [...divs.textContent];

console.log(div_content);
function logo(){
    div_content.reduce(function(pre,cur,index){
        if(pre == index){
            (divs.innerHTML == '');
        };
        console.log(pre,cur,index);
        let span = document.createElement("span");
        span.innerHTML = cur;
        divs.appendChild(span);
        span.addEventListener("mouseover",function(){
            this.className = "color";
        })
    },0);
}

logo();