一, 数组
1.1 数组概念
数组 (array) 是一个有序的数据集合. 说白了, 数组就是一组数. 数组内部可以存放一个或多个单独的数据, 整体组成数组.
定义数组最简单的方式: 数组字面量.
数组的字面量 "[]". 习惯将数组赋值给一个变量.
- var arr = [];
- var arr = [1,2,3,4,5,6,7,888,999,666];
- arr[5] = 88; // 把数组下标为 5 的项改为 88(设置数组中的某一项)
- console.log(arr);
- console.log(arr[0]); //1
- console.log(arr[8]); //999
- console.log(arr[9]); //666
- console.log(arr[12]); //undefined
数组的字面量就是方括号, 这是定义数组最简单的方式, 至于更多创建数组的方式, 后续会提到.
里面用 "," 逗号隔开每个值, 最后一项没有逗号.
变量 arr 就是一个数组变量, 里面存储的不是一个数字, 而是一组数. 可以使用下标 (编号) 或称为 "索引值(index)", 来精确访问数组中的某一项, 下标从 0 开始.
数组中, 并不规定保存相同类型的值, 但是实际应用中, 一般还是将相同类型的值保存在一起.
下面的数组中, 存储的内存类型都不一样, 是合法.
- function fn(){
- alert("你好");
- }
- var arr = [3,4,"么么哒!",12,true,[],fn];
- console.log(arr);
- console.log(arr[6]);
- arr[6]();// 数组下标为 6 的项, 是以函数, 是函数就能运行
1.2 数组 length 属性
数组有一个 length 属性, 英语是 "长度" 的意思, 表示这个数组的项的个数.
什么是 "属性", 数组是对象, 对象就有属性, 属性就是描述这个对象的特点, 特征, 特性. 用来表示一个对象的属性, 用 "." 点来表示一个对象的属性:
arr.length; |
- var arr = [100,200,3,4,5,6,7,888,999,666,12345,3333,7777];
- console.log(arr);
- console.log(arr.length); //12 数组中有几项, 就弹出几
- console.log(arr[0] + 1); // 数组第 0 项是 100, 所以 100+1 =101
- console.log(arr[arr.length-1]); // 获取数组最后一项, 数组最大下标是 arr.length-1, 比 arr.length-1 还大是 undefined
- console.log(arr[100]); //undefined
- arr[4] = "我是下标第 4 项";
- arr.length = 18; // 强行把数组长度属性改为 18
- arr[66] = 8989; // 可以跳跃设置数组, 设置下标为 66 的项, 并拉长了数组
- console.log(arr);
写一个小于数组元素的值会缩短数组, 写 0 会彻底清空数组 arr.length = 2; 那么只会有两项, 其余都丢失了
arr.length = 2; arr.length = 100; |
案例:
用数组判断星期几:
- var arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
- // 假如今天是星期二, 判断 1000 天后是星期几
- var week = (1000 % 7 + 2) % 7;//0~6
- console.log(week);
- console.log(arr[week]);
随机点名:
- var stuName = ["王大锤","李铁锤","二蛋","二狗子","黑猫","白猫","小丸子"];
- var num = parseInt(Math.random() * stuName.length);
- console.log(stuName[num]);
- document.write('<h1>'+stuName[num]+'</h1>');
1.3 数组的遍历
数组里面存放的是一组数, 我们经常需要对这些数字都进行一些操作.
就需要用 for 循环语句来遍历它. 这是一个经典的 for 壳子:
- var arr = [21,214,52,85,88,2,53,77,100,76];
- for(var i = 0;i <= arr.length - 1;i++){
- if(arr[i] % 2 == 0){
- console.log(arr[i]); // 取出每一项能整除 2 的数据, 进行输出
- }
- }
- // 给数组中的每一项都乘以 2, 数组遍历, 计算后给每一项赋值
- for(var i = 0;i <= arr.length - 1;i++){
- arr[i] *= 2;
- }
- console.log(arr);
- // 数组样本
- var arr = [...];
- // 遍历, 计算偶数的个数
- // 计算平均数, 平均数就是: 总和 / 个数
- var count = 0; // 累加偶数个数
- var sum = 0; // 计算平均数
- for(var i = 0;i <arr.length;i++){
- sum += arr[i]; // 计算所有项的总和
- if(arr[i] % 2 == 0){
- count++; // 如果是偶数, 计数器 + 1
- }
- }
- alert("偶数的个数是:" + count);
- console.log("平均数是:" + (sum / arr.length));
1.4 数组是引用类型
var arr = [1,2,3,4]; console.log(typeof arr); //object |
用 typeof arr 检测, 会发现数组是 Object, 数组是对象.
怎么检测数组是数组呢? 高级 JS 再说.
基本类型: 是保存值, 判断时, 是判断值是否相等.
- var a = 1; // 基本类型
- var b = a; // 会把 a 的值复制一个副本给 b
- console.log(a);//1
- console.log(b);//1
- console.log(a == b);//true, 值是相等的
引用类型: 保存内存地址, 比较时是判断内存地址是否相等.
- // 都是数组[1,2,3,4], 内存, 长度, 项的位置完全一样, 但是不相等.
- var a = [1,2,3,4];
- var b = [1,2,3,4]; // 因为数组是引用类型, 要比较地址, a 和 b 变量指向地址不一样, 不能判相等.
- console.log(a == b);// 数组中的值一样, 但引用类型判断内存地址是否相同, 所以是 false
- var a = [1,2,3,4];
- var b = a; //b 变量引用了 a 变量的值, 所以都指向同一个内存地址
- console.log(a == b);//true
- var a = [1,2,3,4];
- var b = a; //b 变量引用了 a 变量的值, 所以都指向同一个内存地址
- b[0] = 88; // 修改的是数组 b 下标为 0 的项
- console.log(a); // 数组 a 和 b 下标为 0 的项都被修改为 88
- console.log(b);
- console.log(a == b);//true
- var a = [1,2,3,4];
- var b = a; //b 变量引用了 a 变量的值, 所以都指向同一个内存地址
- b[0] = 88; // 修改的是数组 b 下标为 0 的项
- console.log(a);
- console.log(b);
- b = [6,7,8,9]; //b 现在是新的数组(指向了新的内存地址), 不再继续影响 a
- console.log(a);
- console.log(b);
- console.log(a == b);//false
基本类型和引用类型讲解:
如果 a 里面存储的是基本类型, 那么 b=a 就是把 a 的值复制一份给 b
如果 a 里面存储的是引用类型, 那么 b 将指向 a 现在指向的内存地址, a 的值不会复制一份, a,b 指向同一个内存地址.
在浏览器加载 HTML 页面时, 首先会开辟一个供 JS 代码执行的环境 -->"全局作用域"(Windows/global)
栈内存(作用域): 存储基本数据类型的值; 提供 JS 代码执行的环境;
堆内存: 存储引用数据类型的值, 首先会开辟一个新的内存空间, 然后把代码存储到这个空间中, 最后把空间的地址给相关的变量 -->我们把新开辟的这个内存空间称之为 "堆内存".
堆内存的作用: 存储引用数据类型值
二, 数组的方法
数组是对象, 现在要知道对象有属性和方法. 属性已经介绍了, 数组有 length 属性.
属性: 就是描述对象的特点. 比如 "性别","姓名","身高","体重".
方法: 就是对象能执行的事情. 比如 "吃饭","睡觉","抠脚打 dota".
现在就要学习数组能执行什么方法, 看以下手册:
2.1 数组的头尾操作 pop(),push(),shift(),unshift()
push() 向数组的末尾添加一个或多个元素, 并返回新的长度.
unshift() 向数组的开头添加一个或多个元素, 并返回新的长度.
shift() 删除并返回数组的第一个元素
pop() 删除并返回数组的最后一个元素
push()方法, 向数组的末尾添加一个或更多元素, 并返回新的长度.
var arr = ['东','南','西','北']; arr.push('中','发','白'); console.log(arr); |
unshift()向数组的开头添加一个或更多元素, 并返回新的长度.
var arr = ['东','南','西','北']; arr.unshift('一万','八万','九万'); console.log(arr); |
pop()删除数组的最后一项, 只能删最后一项, 无法删多项. 并返回被删除的元素.
- var arr = ['东','南','西','北'];
- var last = arr.pop(); // 删除数组的最后一项
- console.log(last); //pop 有返回值, 返回值就是被删除的那一项
- arr.pop();
- arr.pop();
- console.log(arr);//["东"]
shift()删除数组的开头项, 只能删第一项, 无法删多项. 并返回被删除的元素
- var arr = ["东","南","西","北"];
- var first = arr.shift(); // 删除数组的第一项, 并返回删除的值
- console.log(first); //shift 有返回值, 返回值就是被删除的那一项
- arr.shift();
- console.log(arr);
题目 1: 尾删头插
- var arr = ["东","南","西","北"];
- arr.unshift(arr.pop()); // ["北", "东", "南", "西"]
- console.log(arr);
- arr.unshift(arr.pop()); // ["西", "北", "东", "南"]
- console.log(arr);
- arr.unshift(arr.pop()); // ["南", "西", "北", "东"]
- console.log(arr);
- arr.unshift(arr.pop()); // ["东", "南", "西", "北"]
- console.log(arr);
- arr.unshift(arr.pop()); // ["北", "东", "南", "西"]
- console.log(arr);
题目 2: 头删尾插
- var arr = ["东","南","西","北"];
- arr.push(arr.shift()); // ["南", "西", "北", "东"]
- console.log(arr);
- arr.push(arr.shift()); // ["西", "北", "东", "南"]
- console.log(arr);
- arr.push(arr.shift()); // ["北", "东", "南", "西"]
- console.log(arr);
- arr.push(arr.shift()); // ["东", "南", "西", "北"]
- console.log(arr);
- arr.push(arr.shift()); // ["南", "西", "北", "东"]
- console.log(arr);
2.2 数组合并 concat()
concat()合并两个或更多的数组, 并返回结果.
该方法不会改变现有的数组, 而仅仅会返回被连接数组的一个副本.
- var arr1 = ["东","南","西","北"];
- var arr2 = ['一条','二条'];
- var arr = arr1.concat(arr2); //concat 是把 arr1 和 arr2 合并为一个新数组返回
- console.log(arr1);// 不变
- console.log(arr2);// 不变
- console.log(arr); // 合并的新数组
concat 的参数非常灵活, 可以是数组变量, 数组字面量, 散的值也行.
var arr3 = arr1.concat(arr2,['一筒','五条'],'幺鸡'); console.log(arr); |
2.3 数组截取 slice()
slice()方法可以从已有的数组中返回选定的元素.
arr.slice(start,end)
参数 | 描述 |
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回值: 返回一个新的数组, 包含从 start 到 end(不包括该元素)的中的元素.
var arr1 = ['东','南','西','北','中','发','白']; var arr2 = arr1.slice(1,4); // 截取下标 1、2、3 的为一个新数组并返回 console.log(arr2); //["南", "西", "北"] |
arr.slice(start,end) 返回一个新的数组, 包含从 start 到 end(不包括该元素)的元素.
只写 start 开始参数:
var arr = ["东","西","南","北","中","发","白"]; var arr2 = arr.slice(3); // 从下标 3 开始,截取到后面全部的项 console.log(arr2); // ["北", "中", "发", "白"] |
slice(a,b)取出了 b-a 项:
从倒数第 4 项至倒数第 2 项 (不包括倒数第 2 项)."白" 是倒数第 1 项. slice(a,b) 取出了 b-a 项
var arr = ["东","西","南","北","中","发","白"]; var arr2 = arr.slice(-4,-2); // 从下标倒数第四个开始,截取到倒数第二个 console.log(arr2); // ["北", "中"] |
var arr = ["东","西","南","北","中","发","白"]; var arr2 = arr.slice(-4); // 从下标倒数第四个开始,截取到后面全部的项 console.log(arr2); // ["北","中","发","白"] |
var arr1 = ["东","南","西","北","中","发","白"]; //var arr2 = arr1.slice(3,1); // 顺序错误 var arr2 = arr1.slice(3,3); // 顺序错误 console.log(arr2);//[] 空数组 |
2.3 多功能 splice()添加, 删除, 替换
array.splice(index,howmany,item1,.....,itemX) | |
参数 | 描述 |
index | 必需。整数,规定添加 / 删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
返回值:
类型 | 描述 |
Array | 包含被删除项目的新数组,如果有的话。 |
说明:
splice() 方法可删除从 index 处开始的零个或多个元素, 并且用参数列表中声明的一个或多个值来替换那些被删除的元素. 如果从数组对象中删除了元素, 则返回的是含有被删除的元素的数组.
确定一件事: 一旦应用, arr 立即改变, 并不需要重新赋值, 换句话说, 这个函数不返回新的数组.
- //************** 替换一些项 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(3,2,"苹果","香蕉"); // 从数组下标 3 开始, 删除两项, 改为后替换的内容
- console.log(arr);
- //************** 替换一些项 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(3,2,"苹果","香蕉","葡萄","橘子"); // 从数组下标 3 开始, 删除两项, 插入 4 项
- console.log(arr);
- //************** 更改一些项 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(2,4,"哈哈"); // 从数组下标 3 开始, 删除两项, 插入 1 项
- console.log(arr); //["A", "B", "哈哈", "G"]
- //************** 更改一个项 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(2,1,"哈哈"); // 从数组下标 3 开始, 删除两项, 插入 1 项
- console.log(arr); //["A", "B", "哈哈", "D", "E", "F", "G"]
- //************** 删除一些项 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(2,4); // 没有东西可以替换, 直接删除 4 项
- console.log(arr); //["A", "B", "G"]
- //************** 插入一些项, 但不删除 **********
- var arr = ["A","B","C","D","E","F","G"];
- arr.splice(2,0,"嘻嘻","哈哈"); // 从下标 2 开始插入 2 项, 不删除
- console.log(arr); //["A", "B", "嘻嘻", "哈哈", "C", "D", "E", "F", "G"]
splice 依据参数的多少, 和参数是什么, 有多功能. 现在你要能反应过来.
删除数组的最后 5 项.
arr.pop(); arr.pop(); arr.pop(); arr.pop(); arr.pop(); |
简化为:
for(var i = 1 ; i <= 5 ; i++){ arr.pop(); } |
也可以:
- var arr = ["A","B","C","D","E","F","G","H","I","J","K","L"];
- //arr.splice(-5);
- arr.splice(-5,5);
- console.log(arr);
2.4 倒序 reverse();
reverse()方法就是立即让数组倒置:
- var arr = ["A","B","C","D","E","F","G"];
- arr.reverse(); // 不需要赋值
- console.log(arr); //["G", "F", "E", "D", "C", "B", "A"]
2.5 排序 sort()
sort()方法排序
- var arr = ["G","A","C","B","I","H","G","I","B"];
- arr.sort();
- console.log(arr);
- //sort 函数默认是按照字符顺序排的, 隐式将数字转为 string
- // 比字符编码顺序
- var arr = [23,435,456,23,2,345,2,32,11,324,32,43,65,667,78,43];
- arr.sort();
- console.log(arr);
sort()里面有一个参数, 这个参数是一个函数.
- var arr = [41,4,52,64,99,66,88,77,100,412,78,43,2];
- // 升序排序, 从小到大
- arr.sort(function(a,b){
- // 如果 a 要放在 b 前面, 那么 return 负数
- // 如果 a 要放在 b 后面, 那么 return 正数
- // 如果 a 和 b 不区分大小, 那么 return 0
- if(a <b){
- return -1; // 满足第一个条件, 返回值是 - 1,a 要排在 b 前面
- }else if(a> b){
- return 1; // 满足第二个条件, 返回值是 1,a 要排在 b 后面
- }else if(a == b){
- return 0;
- }
- });
- console.log(arr);
按五角星的个数排序:
- var arr = ["★★★","★★★★★","★★","★","★★★★","★★★★","★★★★★★"];
- arr.sort(function(a,b){
- // 若 a 小于 b, 在排序后的数组中 a 应该出现在 b 之前, 则返回一个小于 0 的值.
- // 若 a 等于 b, 则返回 0.
- // 若 a 大于 b, 则返回一个大于 0 的值.
- if(a <b){
- return -1; // 满足第一个条件, 返回值是 - 1,a 在 b 前面
- }else if(a> b){
- return 1; // 满足第二个条件, 返回值是 1,a 在 b 后面
- }else if(a == b){
- return 0;
- }
- });
- console.log(arr);
2.6 数组分割 join()
join() 方法用于把数组中的值放入一个字符串, 并且可以通过指定的分隔符进行分隔的.
- var arr = [1,2,3,4,5,6,7];
- var str = arr.join("★"); // 转为字符串用新变量接收
- console.log(str);
语法:
var str = arr.join(分隔符); |
如果不写分隔符, 默认用逗号分割:
var arr = [1,2,3,4,5,6,7]; var str = arr.join(); console.log(str); |
如果是空字符串 "" 就不分割:
var arr = [1,2,3,4,5,6,7]; var str = arr.join(""); console.log(str); |
三, 字符串的属性和方法
3.1 字符串属性
属性 length 就是字符串的长度
1 var str = "我们都非常喜欢 JavaScript!希望能找到能带你 ***** 飞的工作。"; 1 console.log(str.length); |
中文, 数字, 英语字母, 空格, 特殊符号, 都算 1 个长度.
3.2 字符串方法
3.2.1 charAt()查找字符串
返回字符串中指定下标位置的字符, 下标从 0 开始
// 返回字符串中指定下标位置的字符,下标从 0 开始 console.log("abcdef".charAt(0)) ;//a console.log("abcdef".charAt(2)) ;//a |
"abcdef".charAt(0); "abcdef".charAt(2) ;//c |
和数组下标类似的.
- var str = "abcdefg"
- for(var i = 0 ; i <str.length ; i++){
- console.log(str.charAt(i));
- }
3.2.2 indexOf()查找字符串下标
indexOf(检索的字符串, 开始检索的位置)
返回某个指定的字符串值在字符串中首次出现的下标位置(索引值).
console.log(str.indexOf("非常喜欢")); |
如果要检索的字符串值没有完全匹配的值, 则该方法返回 -1.
console.log(str.indexOf("喜欢呀")); |
3.2.3 lastIndexOf()
该方法可返回一个指定的字符串值最后出现的位置, 在一个字符串中的指定位置从后向前搜索.
console.log(str.lastIndexOf("的")); |
3.2.4 replace()替换
该方法用于在字符串中用一些字符替换另一些字符, 或替换一个与正则表达式匹配的子串.
"abcdefghijka".replace("a","苹果");// 把 a 替换乘苹果,只替换一个 |
把 a 替换乘苹果, 只替换一个.
3.2.5 split()字符串分割为数组
方法用于把字符串分割成数组(字符串→数组), 从什么地方拆分, 就是参数
"我爱你亲爱的祖国的人民币".split("的"); |
1 嘻嘻 2 嘻嘻 3 嘻嘻 4 嘻嘻 5 嘻嘻 6".split(" 嘻嘻 ") |
3.2.6 substr()提取字符串
方法可在字符串中抽取从 start 下标开始的指定数目的字符
"字符串".substr(start,length)
start 参数: 开始下标, 可以为正数, 也可以为负数,-1 最后一个,-2 指倒数第二个, 以此类推.
length 参数: 截取总长度. 可以不写, 直接截取到最后.
- var str1 = str.substr(4,9); // 从下标 4 开始, 截取 9 个
- var str2 = str.substr(-9,4);// 从下标 - 9 开始, 截取 4 个
- var str3 = str.substr(-9); // 从下标 - 9 开始, 截取到最后
- console.log(str1);
- console.log(str2);
- console.log(str3);
3.2.7 substring()提取字符串
方法用于提取字符串中介于两个指定下标之间的字符.
"字符串".substring(start,end); 不包括 end, 参数只能是正数, 都是索引值.
截取时, 从开始位置截取到结束位置, 不包含结束位置. 在选择开始位置之前, 会先比较以下两个参数的大小, 其中小的作为 start 值, 大的作为 stop.
- var str = "我们都非常喜欢 JavaScript! 希望能找到能带你 ***** 飞的工作.";
- var str1 = str.substring(4,9); // 从下标 4 开始, 截取到下标为 9 的位置(不包括结束)
- // var str2 = str.substring(-9,4);// 错误的, 不能用负数
- var str3 = str.substring(9,4); // 从下标 4 开始, 截取到下标为 9 的位置(不包括结束)
- var str4 = str.substring(4); // 从下标 4 开始, 截取到最后
- console.log(str1);
- console.log(str3);
- console.log(str4);
3.2.8 slice()字符串截取
方法可提取字符串的某个部分, 并以新的字符串返回被提取的部分.(该方法在数组中学习过)
一个新的字符串. 包括字符串 stringObject 从 start 开始 (包括 start) 到 end 结束 (不包括 end) 为止的所有字符.
- var str = "我们都非常喜欢 JavaScript! 希望能找到能带你 ***** 飞的工作.";
- var str1 = str.slice(4,9); // 从下标 4 开始, 截取到下标为 9 的位置(不包括结束)
- var str2 = str.slice(-9,-4); // 从下标 - 9 开始, 截取到下标为 - 4 的位置(不包括结束)
- var str3 = str.slice(3); // 从下标 3 开始, 截取到最后
- console.log(str1);
- console.log(str2);
- console.log(str3);
三种截取方法的相同和不同点:
| 参数 | 参数正负 | 第二个参数 |
slice | 正:开始和结束的下标 负:从后往前数 两个参数不能颠倒位置 | 可以为正,可以为负 | 可以不写 |
substring | 开始和结束的下标 两个参数的大小,可以随意互换 | 只能是正数 | 可以不写 |
substr | 第一个参数:是下标或者后面往前的位置 第二个参数:截取长度 | 第一个参数:可以为负或正 | 可以不写 |
substr 和 substring 不一样:
"我爱你亲爱的祖国的人民币".substr(6,2); // 从下标 6 开始,截取 2 个字符 |
"我爱你亲爱的祖国的人民币".substring(6,8);// 从下标 6 开始截取到下标 8 |
3.2.9 concat()字符串拼接
方法用于连接两个或多个数组或字符串. 在数组方法中已经学习过.
- // 该方法没有改变原有字符串, 但是会返回新字符串或数组
- var str1 = "你好";
- var str2 = "世界";
- var str = str1.concat(str2);
- console.log(str);// 你好世界
该方法没有改变原有字符串, 但是会返回新字符串或数组.
3.2.10 大小写转换方法
toLowerCase() 方法用于把字符串转换为小写.
toUpperCase() 方法用于把字符串转换为大写.
不需要传递参数: 将所有字符串中的字母进行大小写的转换
"abcdefg".toUpperCase() "ABCDEFG".toLowerCase() |
ps: 尽量让它越来越规范, 前期的文章都是本人的学习时的笔记整理, 希望看完后可以指点一二, 提提意见多多交流;
笔记流程: HTML>CSS>JavaScript>jQuery>html5/css3 > 移动端 > Ajax > 面向对象 > canvas>Node.JS>es678>vue>react > 小程序>面试问题
意见请留言, 邮箱: scarf666@163.com
来源: https://www.cnblogs.com/rope/p/10584670.html