JS进阶笔记6

简介: JS进阶笔记6
  • splice(index, count[, e1, ..., en): 在数组中删除、替换或添加元素
  • 删除元素:只提供index和count两个参数,删除从index位置开始的count个元素,并返回删除的元素数组
let a = [1, 2, 3, 4, 5];
let e = a.splice(2, 1); // 从索引为2的位置开始,删除1个元素
console.log(e); // (1) [3],被删除元素组成的数组
console.log(a); // (4) [1, 2, 4, 5],改变后的数组
  • 替换元素:提供三个以上参数,前两个参数的作用与1相同,在1删除的基础上,第三个及之后的参数被插入到index位置,返回值与1相同
let a2 = [1, 2, 3, 4, 5];
// 从索引为2的位置开始,删除2个元素,并将元素10播放到索引为2的位置
let e2 = a2.splice(2, 2, 10); 
console.log(e2);  // (2) [3, 4]
console.log(a2);  // (4) [1, 2, 10, 5]
a2.splice(1, 1, 6); // a2[1] = 6
console.log(a2); // (4) [1, 6, 10, 5 ]
  • 添加元素:提供三个以上参数,第二个count参数值为0,此时不删除元素,只在index位置插入第三个及之后的参数,返回值为空数组
let a3 = [1, 2, 3, 4, 5];
// 从索引为2的位置开始,删除0个元素,并将元素10播放到索引为2的位置
let e3 = a3.splice(2, 0, 10); 
console.log(e3);  // []
console.log(a3);  // (6) [1, 2, 10, 3, 4, 5]
  • sort()或sort(compareFunction):对数组元素排序
  • 不提供参数时,按字典顺序(Unicode从小到大)排序
  • 提供compareFunction时,如compareFunction返回正值则交换元素
let a = [50, 6, 200, 3, 7, 80];
// 按字典排序
console.log(a.sort());  // (6) [200, 3, 50, 6, 7, 80]
// 当v1 - v2为正值时交换元素
console.log(a.sort((v1, v2) => v1 - v2)); // (6) [3, 6, 7, 50, 80, 200]
console.log(a.sort((v1, v2) => v2 - v1)); // (6) [200, 80, 50, 7, 6, 3]
  • forEach(function(currentValue[, index[, array]])[, thisArg]): 对数组中的每个元素执行一次回调函数
let a = ["软测181", "软测182", "软件181", "软件182", "软件183"];
let eUl = document.createElement('ul');
a.forEach((c) => {
  let eLi = document.createElement('li')
  eLi.textContent = c;
  eUl.appendChild(eLi);
  console.log(this);   // window
});
document.body.appendChild(eUl);
  • filter(function(currentValue[, index[, array]])[, thisArg]): 对所有元素依次应用回调函数,返回一个新数组,包含所有回调函数返回true的元素
let a = ['软件181', '软件182', '软件183', '软测181', '软测181'];
// 包含所有“软件”开始的元素,输出 (3) ["软件181", "软件182", "软件183"]
console.log(a.filter(item => item.startsWith('软件'))); 


  • map生成一个新的数组,其中的元素为指定数组中的元素应用回调函数返回值、


let a = ["软测181", "软测182", "软件181", "软件182", "软件183"];
// 生成一个新数组,元素为li元素
let aLi = a.map(item => {
  let eLi = document.createElement('li');
  eLi.textContent = item;
  return eLi;
});
let eUl = document.createElement('ul');
aLi.forEach(item => eUl.appendChild(item));
document.body.appendChild(eUl);
  • reduce(function(previousResult, currentValue[, index[, array]])[, initialValue]):使用回调函数对数组中的每个元素进行处理,并将处理结果汇总返回,其中:


  • previousResult: 必须提供,上一次执行的结果,第一次执行时,如提供initialValue参数,则previousResult的值为initialValue,否则previousResult的值为数组中的第一个元素, 且currentValue为数组中的第二个元素


  • currentValue:必须提供,当前正在处理的元素
function sum(...numbers) {
  return numbers.reduce((prev, curr) => prev + curr, 0)
}
console.log(sum(1, 2, 3));  // 6
console.log(sum(10, 5, 100, 20)); // 135


三、DOM&BOM


阿里云盘:JavaScript-DOM.pdf


相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
14天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
31 2
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
3月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
39 0
|
4月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
58 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
123 2
|
4月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
49 2
|
4月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
86 0
|
4月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
101 0
|
4月前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
193 0