https://www.bilibili.com/video/BV1Sy4y1C7ha?p=168

文章目录

  • 数组对象Array（创建数组的两种方式）
  • 如何检测传入参数是否为数组？（arr instance of Array）（Array.isArray(arr)）
  • 添加、删除数组元素的方法 push pop unshift shift
  • 利用push筛选数组
  • 数组翻转函数reverse() 数组排序函数 sort(comparator)
  • 获取数组元素索引arr.indexOf(数组元素) arr.lastIndexOf(数组元素)
  • 如何数组去重？
  • 数组转换成字符串或加分隔符 toString() join('分隔符')
  • concat()连接数组 slice() 截取数组 splice() 删除数组元素
  • 为什么基本数据类型也有复杂数据类型（对象）的方法？因为有基本包装类型（将简单数据类型包装成了复杂数据类型）
  • 字符串的不可变性
  • 查找字符在字符串中的位置 indexOf(元素，下标) 从指定下标后开始查找元素
  • 查找某个字符在字符串中出现次数
  • 根据位置返回字符或Ascii码 str.charAt(index) str.charCodeAt(index) str[index]
  • 用字典统计字符串中每个字符出现次数，并找出出现次数最多的字符（难道只能这样做没有替代的方法吗？）
  • 字符串操作方法 concat连接字符串 substr截取字符串
  • 字符串操作方法 replace替换字符串 split分割字符串
  • 简单数据类型和复杂数据类型
    • 堆和栈
    • 简单数据类型传参
    • 复杂数据类型传参

数组对象Array（创建数组的两种方式）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 创建数组的两种方式// 1. 利用数组字面量var arr = [1, 2, 3];console.log(arr[0]);// 2. 利用new Array()// var arr1 = new Array();  // 创建了一个空的数组// var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3console.log(arr1);</script>
</head><body></body></html>

如何检测传入参数是否为数组？（arr instance of Array）（Array.isArray(arr)）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 翻转数组function reverse(arr) {// if (arr instanceof Array) {if (Array.isArray(arr)) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;} else {return 'error 这个参数要求必须是数组格式 [1,2,3]'}}console.log(reverse([1, 2, 3]));console.log(reverse(1, 2, 3));// 检测是否为数组// (1) instanceof  运算符 它可以用来检测是否为数组var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持console.log(Array.isArray(arr));console.log(Array.isArray(obj));</script>
</head><body></body></html>

添加、删除数组元素的方法 push pop unshift shift

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 添加删除数组元素方法// 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推var arr = [1, 2, 3];// arr.push(4, 'pink');console.log(arr.push(4, 'pink'));console.log(arr);// (1) push 是可以给数组追加新的元素// (2) push() 参数直接写 数组元素就可以了// (3) push完毕之后，返回的结果是 新数组的长度 // (4) 原数组也会发生变化// 2. unshift 在我们数组的开头 添加一个或者多个数组元素console.log(arr.unshift('red', 'purple'));console.log(arr);// (1) unshift是可以给数组前面追加新的元素// (2) unshift() 参数直接写 数组元素就可以了// (3) unshift完毕之后，返回的结果是 新数组的长度 // (4) 原数组也会发生变化// 3. pop() 它可以删除数组的最后一个元素  console.log(arr.pop());console.log(arr);// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素// (2) pop() 没有参数// (3) pop完毕之后，返回的结果是 删除的那个元素 // (4) 原数组也会发生变化// 4. shift() 它可以删除数组的第一个元素  console.log(arr.shift());console.log(arr);// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素// (2) shift() 没有参数// (3) shift完毕之后，返回的结果是 删除的那个元素 // (4) 原数组也会发生变化</script>
</head><body></body></html>

利用push筛选数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面var arr = [1500, 1200, 2000, 2100, 1800];var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] < 2000) {// newArr[newArr.length] = arr[i];newArr.push(arr[i]);}}console.log(newArr);</script>
</head><body></body></html>

数组翻转函数reverse() 数组排序函数 sort(comparator)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 数组排序// 1. 翻转数组var arr = ['pink', 'red', 'blue'];arr.reverse();console.log(arr);// 2. 数组排序（冒泡排序）var arr1 = [13, 4, 77, 1, 7];arr1.sort(function (a, b) {//  return a - b; 升序的顺序排列return b - a; // 降序的顺序排列});console.log(arr1);</script>
</head><body></body></html>

sort里必须加comparator比较器，否则排序只是按最高位

获取数组元素索引arr.indexOf(数组元素) arr.lastIndexOf(数组元素)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找// 它只返回第一个满足条件的索引号 // 它如果在该数组里面找不到元素，则返回的是 -1  // var arr = ['red', 'green', 'blue', 'pink', 'blue'];var arr = ['red', 'green', 'pink'];console.log(arr.indexOf('blue'));// 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找var arr = ['red', 'green', 'blue', 'pink', 'blue'];console.log(arr.lastIndexOf('blue')); // 4</script>
</head><body></body></html>


如果arr.indexOf(某个元素)=arr.lastIndexOf(某个元素)，表示这个数组中元素不重复，只有一个

如何数组去重？


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。// 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。// 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素// 封装一个 去重的函数 unique 独一无二的 function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {if (newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i]);}}return newArr;}// var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])var demo = unique(['blue', 'green', 'blue'])console.log(demo);</script>
</head><body></body></html>

数组转换成字符串或加分隔符 toString() join(‘分隔符’)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 数组转换为字符串 // 1. toString() 将我们的数组转换为字符串var arr = [1, 2, 3];console.log(arr.toString()); // 1,2,3// 2. join(分隔符) var arr1 = ['green', 'blue', 'pink'];console.log(arr1.join()); // green,blue,pinkconsole.log(arr1.join('-')); // green-blue-pinkconsole.log(arr1.join('&')); // green&blue&pink</script>
</head><body></body></html>

concat()连接数组 slice() 截取数组 splice() 删除数组元素


略

为什么基本数据类型也有复杂数据类型（对象）的方法？因为有基本包装类型（将简单数据类型包装成了复杂数据类型）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 基本包装类型var str = 'andy';console.log(str.length);// 对象 才有 属性和方法   复杂数据类型才有 属性和方法 // 简单数据类型为什么会有length 属性呢？ // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 // (1) 把简单数据类型包装为复杂数据类型 var temp = new String('andy');// (2) 把临时变量的值 给 strstr = temp;// (3) 销毁这个临时变量temp = null;</script>
</head><body></body></html>

字符串的不可变性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 字符串的不可变性var str = 'andy';console.log(str);str = 'red';console.log(str);// 因为我们字符串的不可变所以不要大量的拼接字符串var str = '';for (var i = 1; i <= 1000000000; i++) {str += i;}console.log(str);</script>
</head><body></body></html>

查找字符在字符串中的位置 indexOf(元素，下标) 从指定下标后开始查找元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春'));console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找</script>
</head><body></body></html>

查找某个字符在字符串中出现次数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数// 核心算法：先查找第一个o出现的位置// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找var str = "oabcoefoxyozzopp";var index = str.indexOf('o');var num = 0;// console.log(index);while (index !== -1) {console.log(index);num++;index = str.indexOf('o', index + 1);}console.log('o出现的次数是: ' + num);// 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数</script>
</head><body></body></html>

根据位置返回字符或Ascii码 str.charAt(index) str.charCodeAt(index) str[index]

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 根据位置返回字符// 1. charAt(index) 根据位置返回字符var str = 'andy';console.log(str.charAt(3));// 遍历所有的字符for (var i = 0; i < str.length; i++) {console.log(str.charAt(i));}// 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 console.log(str.charCodeAt(0)); // 97// 3. str[index] H5 新增的console.log(str[0]); // a</script>
</head><body></body></html>

用字典统计字符串中每个字符出现次数，并找出出现次数最多的字符（难道只能这样做没有替代的方法吗？）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 有一个对象 来判断是否有该属性 对象['属性名']var o = {age: 0}if (o['age']) {//这里有问题吧？o['age']得到的是age属性的值console.log('里面有该属性（值不为0）');} else {console.log('没有该属性');}//  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。// o.a = 1// o.b = 1// o.c = 1// o.o = 4// 核心算法：利用 charAt(） 遍历这个字符串// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1// 遍历对象，得到最大值和该字符var str = 'bbbsdfdsf';var o = {};for (var i = 0; i < str.length; i++) {var chars = str.charAt(i); // chars 是 字符串的每一个字符// console.log(o[chars]);//因为o[chars]永远不可能等于0，所以上面的bug不可能出现，但这代码貌似用键值对的方式也能实现（这特么就是个字典！												


											

JavaScript学习笔记（2）相关推荐
	

    
						
  1. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
		
    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
    
		
    2. 
						
  2. Java程序猿的JavaScript学习笔记（汇总文件夹）
		
    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
    
		
    3. 
						
  3. JavaScript学习笔记（五）
		
    JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型   内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...
    
		
    4. 
						
  4. JavaScript学习笔记（备忘录）
		
    JavaScript学习笔记(备忘录) ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
    
		
    5. 
						
  5. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
		
    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
    
		
    6. 
						
  6. JavaScript学习笔记（十）——学习心得与经验小结
		
    JavaScript学习笔记(十)--学习心得与经验小结 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
    
		
    7. 
						
  7. JavaScript 学习笔记（1）
		
    1.     何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1)        不能使用该语言来编写独立运行的应用程序 2)        没有对读写文件的内置 ...
    
		
    8. 
						
  8. 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
		
    web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...
    
		
    9. 
						
  9. JavaScript学习笔记之数组（二）
		
    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
    
		
    10. 
						
  10. JavaScript学习笔记（七）——厚积薄发之小成果
		
    JavaScript学习笔记(七)--厚积薄发之小成果 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/wdpp/archive ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. 2021年大数据Flink（二十二）：Time与Watermaker
		
    2. 
						
  2. 样式集（一） 通用商品列表样式
		
    3. 
						
  3. bzoj 1050: [HAOI2006]旅行comf(codevs.cn 1001 舒适的路线) 快排+并查集乱搞
		
    4. 
						
  4. Color picker：拾色器
		
    5. 
						
  5. php的字符串、双引号输出变量的问题、转义字符
		
    6. 
						
  6. gradle 查看依赖类库版本_Android studio中查看依赖的第三方库的历史版本和最新版本...
		
    7. 
						
  7. ORA-08103: object no longer exists
		
    8. 
						
  8. [解题报告]1005 - Number Sequence
		
    9. 
						
  9. OpenShift 4 之通过ImageTrigger自动构建变化级联镜像
		
    10. 
						
  10. MySQL中的前缀索引
		
    11. 
						
  11. ~~筛法求欧拉函数（附模板题）
		
    12. 
						
  12. （Java）idea连接数据库
		
    13. 
						
  13. 如何查询硬盘序列号，百度的答案全是错的
		
    14. 
						
  14. 记关于DNS协议的一次学习(递归查询与迭代查询)
		
    15. 
						
  15. E-chart官方源码下载和关系图搭建
		
    16. 
						
  16. 基因组测序中Ｎ５０和Ｎ９０到底指什么？
		
    17. 
						
  17. 湖北经济学院法商学院计算机分数线,湖北经济学院法商学院2018年各省及各专业录取分数线及最低录投档线【理科 文科】...
		
    18. 
						
  18. 正点原子STM32F407+AD7606+RT-Thread Studio 调试记录
		
    19. 
						
  19. 用IntelliJ IDEA开发Python
		
    20. 
						
  20. 《Java并发编程的艺术》——Java并发的前置知识（笔记）
		
    21. 
		

	


热门文章
	

    
									
  1. ABAP ALV检查单元格更新数据
			
    2. 
						
  2. ABAP如何生成UUID
			
    3. 
						
  3. 项目管理的十大谈判必杀技
			
    4. 
						
  4. SAP KKBC_ORD报表中Plan和Target的区别
			
    5. 
						
  5. SAP 错误日志的调查
			
    6. 
						
  6. SAP 4.6C升级ECC6.0 WS_QUERY 的改法
			
    7. 
						
  7. 创建BAPI程序的步骤
			
    8. 
						
  8. 国庆6.37亿出游花费4665.6亿处于什么水平？哪个省市客流最大？收入最高？
			
    9. 
						
  9. 入选2020爱分析银行和零售数字化转型代表厂商，永洪科技有哪些经典案例可以借鉴？
			
    10. 
						
  10. 疫情之下“搜索+信息流”向上，百度移动生态的未来值得期待吗？
			
    11.