Javascript教程第四章：数组引用类型分析
Javascript教程第四章：数组引用类型分析
一.数组引用类型分析
1.数组的常用操作：
1.增加:
Array.push() 增加数据
Array.unshift() 从前面压入数据
2.删除：
Array.pop() 删除数据
Array.shift() 从前面删除数据
Array.splice(1,1,"houdunren")
3.改：
Array.splice(1,1,"houdunren")
4.查：
Array.indexof()
Array.lastindexof()
Array.include
Array.find(function(itme))
Array.findIndex(function(item))
5.检测：
Array.isArray()方法
6.操作：
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.排序：
Array.sort(function(a,b){
return a-b;
})
2.多维数组操作
const ary = [1,2]
ary[1] = 99
此时修改成功，因为数组是引用类型，const只要不改变内存地址即可
此时我们操作的是同一内存地址下面的值，所以JS不会报错
3.Array.of与数组创建细节
如果不设定值则为undefined
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():
如果返回真那么这个元素就要了
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()处理的时候，值类型会创建副本，引用类型会修改原数据
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();