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


相关文章
|
2天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
2天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
25 0
|
2天前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
2天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
2天前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
2天前
|
JavaScript 前端开发
JavaScript 中运算符优先级:理解规则、实战应用与进阶技巧
【4月更文挑战第6天】了解 JavaScript 运算符优先级是编写清晰无误代码的关键。优先级规则决定了运算的顺序,从高到低包括一元、乘性、加性、关系、相等性等运算符。掌握优先级能避免逻辑错误,例如在表达式 `a * b + c` 中,乘法先于加法执行。实际应用中,使用括号可以明确运算顺序,提高代码可读性。注意避免混淆优先级,如赋值与比较操作。利用优先级简化逻辑判断,遵循编码规范,提升编程技能。通过不断学习和实践,加深对运算符优先级的理解,优化代码质量。
19 0
|
2天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
75 0
|
2天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
35 0
JavaScript高级笔记-coderwhy版本(一)
|
2天前
|
存储 JSON JavaScript
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(三)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
40 1
|
2天前
|
JavaScript 前端开发 算法
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-(二)
JavaScript高级进阶(更新中)-javascript-gao-ji-jin-jie--geng-xin-zhong-
29 0