jsの实际操作2之数组篇

系列文章： 第一章 jsの实际操作1

---

文章目录

jsの实际操作2之数组篇前言数组1. 创建数组2. 类型检测3. 类型转换4. 展开语法5. 解构赋值6. 管理元素pushpopshiftunshiftfillslicesplice 7. 合并拆分joinsplitconcat 查找元素indexOflastIndexOfincludesfind 数组排序循环遍历forforEachfor/infor/of迭代器方法 扩展方法everysomemapreduce统计元素出现的次数 动画案例

---

前言

后盾人学习笔记

---

数组

数组是多个变量值的集合，数组是Array 对象的实例，所以可以像对象一样调用方法。

1. 创建数组

//使用对象方式创建数组 console.log(new Array(1, '后盾人', 'hdcms')); //[1, "后盾人", "hdcms"] //使用字面量创建是推荐的简单作法 const array = ["hdcms", "houdunren"]; //多维数组定义 const array = [["hdcms"], ["houdunren"]]; console.log(array[1][0]); //数组是引用类型可以使用const声明并修改它的值 const array = ["hdcms", "houdunren"]; array.push("houdunwang"); console.log(array); //["hdcms", "houdunren", "houdunwang"] //使用原型的 length属性可以获取数组元素数量 let hd = ["后盾人", "hdcms"]; console.log(hd.length); //2 //数组可以设置任何值，下面是使用索引添加数组 let hd = ["后盾人"]; hd[1] = "hdcms"; //下面直接设置3号数组，会将1/2索引的数组定义为空值 let hd = ["后盾人"]; hd[3] = "hdcms"; console.log(hd.length); //4 //声明多个空元素的数组 let hd = new Array(3); console.log(hd.length); console.log(hd);

2. 类型检测

检测变量是否为数组类型

console.log(Array.isArray([1, "后盾人", "hdcms"])); //true console.log(Array.isArray(9)); //false

3. 类型转换

数组=>字符串

// 大部分数据类型都可以使用.toString() 函数转换为字符串。 console.log(['a','xiLin','love'].toString()) //a,xiLin,love // 也可以使用函数 String 转换为字符串。 console.log(String(['a','xiLin','love'])) //a,xiLin,love // 或使用join连接为字符串 console.log(['a','xiLin','love'].join('-')) //a-xiLin-love

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。

//第一个参数为要转换的数据，第二个参数为类似于map 函数的回调方法 let str = '后盾人'; console.log(Array.from(str)); //["后", "盾", "人"] //为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串 let user = { 0: '后盾人', '1': 18, length: 2 }; console.log(Array.from(user)); //["后盾人", 18]

4. 展开语法

数组合并 使用展开语法来合并数组相比 concat 要更简单，使用… 可将数组展开为多个值。函数参数 使用展示语法可以替代 arguments 来接收任意数量的参数 //数组合并 let arr1 = [1, 2, 3] let arr2 = ['a', 'b', 'c'] console.log(...arr1, ...arr2) //展开语法函数表达方式 function hd(site, ...args) { console.log(site, args); //后盾人 (3) [1, 2, 3] } hd("后盾人", 1, 2, 3); function sum(...args){ console.log(args) return args.reduce((s,v)=>{ return s+=v }) } let sum1 = sum(1,2,56,89,36) console.log(sum1) 节点转换 可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表 //使用展开语法后就可以使用数据方法 [...divs].map(function(item){ console.log(item) item.addEventListener('click',function(){ this.classList.toggle('hide') }) }) Array.from(divs).map(function (item) { console.log(item) item.addEventListener('click', function () { this.classList.toggle('hide') }) }) // 使用原型处理 Array.prototype.map.call(divs,(item) =>{ item.style.color = 'red' })

5. 解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构

//数组使用 let xl = ['希林','xiLin'] let [a,b] = xl console.log(a) //希林 // 解构赋值数组 function lin(){ return ['希林','xiLin'] } let [a,b] = lin() console.log(a) //希林 let array = [1,2,3] let lin = ['a','b'] array.push(...lin) console.log(array) //(5) [1, 2, 3, "a", "b"]

6. 管理元素

基本使用

push

//压入元素，直接改变元数组，返回值为数组元素数量 let arr = ["后盾人", "hdcms"]; console.log(arr.push('向军大叔', 'houdunren')); //4 console.log(arr); //["后盾人", "hdcms", "向军大叔", "houdunren"] //根据区间创建新数组 function rangeArrge(begin,end){ let array = [] for(let i = begin; i<=end; i++){ array.push(i) } return array } console.log(rangeArrge(3,8))

pop

从末尾弹出元素，直接改变元数组，返回值为弹出的元素

let arr = ['xiLin','abc','希林'] let vars = arr.pop() console.log(arr) //(2) ["xiLin", "abc"] console.log(vars) //希林

shift

从数组前面取出一个元素

let arr = ['xiLin','abc','希林'] let vars = arr.shift() console.log(arr) // ["abc", "希林"] console.log(vars) // xiLin

unshift

从数组前面添加元素

let arr = ['xiLin','abc','希林'] let vars = arr.unshift('new','123') console.log(arr) // (5) ["new", "123", "xiLin", "abc", "希林"] console.log(vars) // 5

fill

使用fill 填充数组元素

console.dir(Array(4).fill("后盾人")); //["后盾人", "后盾人", "后盾人", "后盾人"] console.log([1,2,3,4].fill('希林',1,3)) //(4) [1, "希林", "希林", 4]

slice

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。

let arr = [1,2,3,4,5] let xl = arr.slice(2,4) console.log(xl) //(2) [3, 4] console.log(arr) //(5) [1, 2, 3, 4, 5]

splice

使用 splice 方法可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

删除数组元素第一个参数为从哪开始删除，第二个参数为删除的数量。

let arr = [0, 1, 2, 3, 4, 5, 6]; console.log(arr.splice(1, 3)); //返回删除的元素 [1, 2, 3] console.log(arr); //删除数据后的原数组 [0, 4, 5, 6] //通过指定第三个参数来设置在删除位置添加的元素 let arr = [0, 1, 2, 3, 4, 5, 6]; console.log(arr.splice(1, 3, 'hdcms', '后盾人')); //[1, 2, 3] console.log(arr); //[0, "hdcms", "后盾人", 4, 5, 6]

数组元素位置调整函数

let arr = [1, 2, 3, 4, 5, 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.table(move(arr, 1, 4))

清空数组

//将数组值修改为[]可以清空数组，如果有多个引用时数组在内存中存在被其他变量引用。 let user = ['xiLin','Tom'] let cms = user user = [] console.log(user) //[] console.log(cms) //(2) ["xiLin", "Tom"] //将数组length设置为0也可以清空数组 let user = [{ name: "hdcms" }, { name: "后盾人" }]; user.length = 0; console.log(user); //使用splice方法删除所有数组元素 let user = [{ name: "hdcms" }, { name: "后盾人" }]; user.splice(0, user.length); console.log(user); //使用pop/shift删除所有元素，来清空数组 let user = [{ name: "hdcms" }, { name: "后盾人" }]; while (user.pop()) {} console.log(user);

7. 合并拆分

join

使用join连接成字符串

let arr = [1, "后盾人", "hdcms"]; console.log(arr.join('-')); //1-后盾人-hdcms 使用join可以指定转换的连接方式

split

split 方法用于将字符串分割成数组，类似join方法的反函数。

let price = "99,78,68"; console.log(price.split(",")); //["99", "78", "68"]

concat

concat方法用于连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象

let array = ["hdcms", "houdunren"]; let hd = [1, 2]; let cms = [3, 4]; console.log(array.concat(hd, cms)); //["hdcms", "houdunren", 1, 2, 3, 4] //可以使用扩展语法实现连接 console.log([...array, ...hd, ...cms]);

查找元素

数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。

indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6]; console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置

lastIndexOf

let arr = [7, 3, 2, 8, 2, 6]; console.log(arr.lastIndexOf(2)); // 4 从后查找2出现的位置

includes

let arr = [7, 3, 2, 6]; console.log(arr.includes(8)); //true

我们来实现一个自已经的includes函数，来加深对includes方法的了解

function includes(array, item) { for (const key of array) { if (item === key) return true; }return false; } console.log(includes([1, 2, 3], 3))

find

find 方法找到后会把值返回出来

如果找不到返回值为undefined, 返回第一次找到的值，不继续查找 let arr = ["hdcms", "houdunren", "hdcms"]; let find = arr.find(function(item) { return item == "hdcms"; }); console.log(find); //hdcms const user = [{ name: "李四" }, { name: "张三" }, { name: "后盾人" }]; const find = user.find(user => (user.name = "后盾人")); console.log(find); //{name: "后盾人"}

数组排序

reverse 反转数组顺序 let arr = [1,2,3,4,5] let xl = arr.reverse() console.log(xl) //(5) [5, 4, 3, 2, 1] sort sort每次使用两个值进行比较 Array.sort((a,b)=>a-b 返回负数 a 排在 b前面，从小到大返回正数 b 排在a 前面返回 0 时不动 默认从小于大排序数组元素 let arr = [1,25,13,46,35] let xl = arr.sort() console.log(xl) //(5) [1, 13, 25, 35, 46] let arr = [1, 25, 13, 46, 35, 13] let xl = arr.sort(function (a, b) { // a-b 从小到大 b-a从大到小 return b-a }) console.table(xl)

下面是按课程点击数由高到低排序

let lessons = [ { title: "媒体查询响应式布局", click: 78 }, { title: "FLEX 弹性盒模型", click: 12 }, { title: "MYSQL多表查询随意操作", click: 99 } ]; let sortLessons = lessons.sort((v1, v2) => v2.click - v1.click); console.log(sortLessons); 排序原理 let arr = [1, 5, 3, 9, 7]; function sort(array, callback) { for (const n in array) { for (const m in array) { if (callback(array[n], array[m]) < 0) { let temp = array[n]; array[n] = array[m]; array[m] = temp; } } } return array; } arr = sort(arr, function(a, b) { return a - b; }); console.table(arr);

循环遍历

for

根据数组长度结合for 循环来遍历数组

let lessons = [ { title: '媒体查询响应式布局', category: 'css' }, { title: 'FLEX 弹性盒模型', category: 'css' }, { title: 'MYSQL多表查询随意操作', category: 'mysql' } ]; for( let i = 0 ; i<lessons.length; i++){ lessons[i] = `后盾人 : ${lessons[i].title}` } console.table(lessons)

forEach

forEach使函数作用在每个数组元素上，但是没有返回值。 可以直接操作DOM

let lessons = [ {title: '媒体查询响应式布局',category: 'css'}, {title: 'FLEX 弹性盒模型',category: 'css'}, {title: 'MYSQL多表查询随意操作',category: 'mysql'} ]; lessons.forEach((item, index, array) => { item.title = item.title.substr(0, 5); }); console.log(lessons);

for/in

遍历时的 key 值为数组的索引

let lessons = [ {title: '媒体查询响应式布局',category: 'css'}, {title: 'FLEX 弹性盒模型',category: 'css'}, {title: 'MYSQL多表查询随意操作',category: 'mysql'} ]; for (const key in lessons) { console.log(`标题: ${lessons[key].title}`); }

for/of

for/of 每次循环取其中的值而不是索引。

//这里value是一个值类型,value对原数组不变 let arr = [1, 2, 3, 4] for (let value of arr) { value += 10 } console.log(arr) //(4) [1, 2, 3, 4] //这里value是一个对象,改变value原数组也会改变 let arr1 = [{ n: 1 }, { n: 2 }] for (let value of arr1) { value.n += 10 } console.log(arr1) //[{ n: 11 }, { n: 12 }]

迭代器方法

数组中可以使用多种迭代器方法

//获取数组的所有值 let arr = ['xiLin','希林'] for (const value of arr.values()) { console.log(value) //xiLin 希林 } //获取数组所有键 for(let key of arr.keys()){ console.log(key) //0 1 } //解构获取内容（对象章节会详细讲解） for (const iterator of arr.entries()) { console.log(iterator) //(2) [0, "xiLin"] (2) [1, "希林"] } const xl = ['a','b'] for (const [key,value] of xl.entries()) { console.log(key,value) //0 "a" 1 "b" }

扩展方法

every

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。

//every语法 let arr = ['xiLin','Tom','mimi'] arr.every((item,index,arr)=>{ console.log(item,index,arr) return true }) let user = [ { name: 'xiLin', js: 66 }, { name: 'xiLn', js: 86 }, { name: 'xiin', js: 76 } ] const res = user.every((item) => { return item.js >= 60 }) console.log(res?'全及格':'有同学不及格')

some

使用 some 函数可以递归的检测元素，如果有一个返回true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。

let kewords = ['黄', '赌', '毒'] let title = document.querySelector('[name = "title"]') title.addEventListener('keyup', function () { let res = kewords.some((keyword) => { return this.value.indexOf(keyword) !== -1 }) document.querySelector('span').innerHTML = res ? '' : '输入必须有' + kewords.join(',') })

filter 使用 filter 可以过滤数据中元素，下面是获取所有在CSS栏目的课程。

let lessons = [ {title: '媒体查询响应式布局',category: 'css'}, {title: 'FLEX 弹性盒模型',category: 'css'}, {title: 'MYSQL多表查询随意操作',category: 'mysql'} ]; let cssLessons = lessons.filter(function (item, index, array) { if (item.category.toLowerCase() == 'css') { return true; } }); console.log(cssLessons); //我们来写一个过滤元素的方法来加深些技术 function except(array, excepts) { const newArray = []; for (const elem of array) if (!excepts.includes(elem)) newArray.push(elem); return newArray; } const array = [1, 2, 3, 4]; console.log(except(array, [2, 3])); //[1,4]

map

使用 map 映射可以在数组的所有元素上应用函数，用于映射出新的值。

let lessons = [ { title: '媒体查询响应式布局', category: 'css' }, { title: 'FLEX 弹性盒模型', category: 'css' }, { title: 'MYSQL多表查询随意操作', category: 'mysql' } ]; let myMap = lessons.map((item, index, arr) => { item.title = `"abc" ${item['title']}` return item; }) console.log(lessons)

reduce

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。下面通过函数计算课程点击数的和。

第一个参数是执行函数，第二个参数为初始值

传入第二个参数时将所有元素循环一遍 不传第二个参数时从第二个元素开始循环

let arr = [1,2,3,4,5] arr.reduce((pre,cur,index,arr)=>{ console.log(pre,cur) return cur }) arr.reduce((pre,cur,index,arr)=>{ console.warn(pre,cur) return cur },0)

统计元素出现的次数

let arr = [1, 2, 3, 4, 1, 2, 1, 3, 2] function countArrayElem(array, item) { return array.reduce((total, cur) => { total += item == cur ? 1 : 0 return total }, 0) } console.log(countArrayElem(arr, 3))

动画案例

<style> body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #2c3e50; } * { padding: 0; margin: 0; } div { color: #9b59b6; font-size: 5em; font-weight: bold; text-transform: uppercase; cursor: pointer; } div > span { position: relative; display: inline-block; } .changeColor { animation-name: changeColor; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: 2; animation-timing-function: linear; } @keyframes changeColor { 50% { color: #f1c40f; transform: scale(1.5); } to { color: #9b59b6; transform: scale(0.5); } } </style> <body> <div>houdunren.com</div> </body> <script> let div = document.querySelector("div"); [...div.textContent].reduce((pre, cur, index) => { pre == index && (div.innerHTML = ""); let span = document.createElement("span"); span.textContent = cur; div.appendChild(span); span.addEventListener("mouseover", function() { this.classList.add("changeColor"); }); span.addEventListener("animationend", function() { this.classList.remove("changeColor"); }); }, 0); </script>