2022-03-01——摆烂失败（数组API&字符串API&构造函数）

欧克，今天早上摆烂，然后再醒来的时候：

？？？？？？？？他在讲什么？？？？？？？？？

好吧，我感觉我思路没问题，就是没记住，那么首先从数组开始记录：

proto 这个属性是什么?

__proto__ 它是每个对象都有的属性，叫做隐式原型（实例对象的隐式原型）：

typeof xxxx object 只要出现在obj.__proto__上的属性和方法，那么这些属性和方法就可以被obj使用

学习API的技巧：

1. 看"."前面的数据，看方法的调用者

2. 看小括号()内的数据，看方法的参数

3. 看res数据，看方法的返回值

4. 有什么作用? 看方法的功能

1.concat() 合并数组

var res = arr.concat(参数1，参数2，参数3)

调用者： arr

参数：数组

返回值：合并数据之后的新数组

功能：合并数组

2. push() 是指往数组最后的索引位置添加数据（末位）

var users = ["jack","tom","jerry"];

console.log(users); // ['jack', 'tom', 'jerry']

var res = users.push("tonny");

console.log(users);// ['jack', 'tom', 'jerry', 'tonny']

console.log(res); // 4

调用者：数组实例 users

参数：数据（目标元素）

返回值：数组长度

功能：往数组追加数据

3. pop() 删除数组中最后索引对应的数据

var user2 = ["jack","tom","jerry"];

var res2 = user2.pop();// 删除 "jerry

user2.pop();// 删除 "tom"

user2.pop();// 删除 "jack"

user2.pop();// 没数据可删除了

console.log(user2);// ["jack","tom"]

console.log(res2);// 返回被删除的数据

调用者：user2

参数：无

返回值：返回被删除的元素

功能：删除数组末位的元素

4. unshift() 在数组第一个索引值位置添加数据（首位）

var user3 = ["jack","tom","jerry"];

var res3 = user3.unshift("paike1");

user3.unshift("paike2");

user3.unshift("paike3");

user3.unshift("paike4");

console.log(user3);// ['paike1', 'jack', 'tom', 'jerry']

console.log(res3);// 4

调用者：user3

参数：新增元素（数据）

返回值：数组的长度

功能：往数组首位添加元素

5. shift() 删除数组中第一个索引对应的数据

var user4 = ["jack","tom","jerry"];

var res4 = user4.shift()

user4.shift()

console.log(user4);// ['tom', 'jerry']

console.log(res4);// "jack"

调用者：users4

参数：无

返回值：返回被删除的元素（数据）

功能：删除数组首位的元素

6. slice() 截取数组中指定索引的元素

情况一、

仅有一个参数，且参数值不超过最大索引

console.log(arrColor.slice(7));// []

console.log(arrColor.slice(6));// ['white']

console.log(arrColor.slice(5));// ['gray', 'white']

console.log(arrColor.slice(-1));// ['white'] 如果是负值，从数组倒数开始截取数据

情况二、

参数1表示开始索引值，参数2表示结束的索引值

参数1（左）参数2（右），截取数组元素的时候，是包左不包右

console.log(arrColor.slice(0,2));// ["red","green"]

console.log(arrColor.slice(4,6));// ["orange","gray"]

输出原数组

console.log(arrColor);

调用者: arrColor 数组

参数：索引值

一个参数

两个参数（包左不包右）

返回值：返回值是包含被截取元素的数组

功能：截取数组中指定索引的数据

应用场景：

网页数据分页

7. splice

splice 可以删除数中组指定索引的元素，并且返回被删除的元素，还可以插入元素

splice 这个方法会影响原数组！！

var arrColor = ["red","green","purple","yellow","orange","gray","white"];

// 0 1 2 3 4 5 6

情况一、

仅仅一个参数，且索引不大于最大索引6

var res = arrColor.splice(2);

console.log(arrColor);//["red","green"]

console.log(res);// ['purple', 'yellow', 'orange', 'gray', 'white']

调用者：arrColor数组

参数: 开始索引值（仅仅一个参数）

返回值：返回被删除元素的数组，返回值是数组！！！

功能：删除数组中指定索引值开始的所有元素（包含索引值对应的元素）

情况二、

参数1表示开始索引值，参数2表示删除元素的数量

想法：删除这些元素 "purple","yellow","orange","gray"

var res2 = arrColor2.splice(2,4);

console.log(arrColor2);// ['red', 'green', 'white']

console.log(res2);// ['purple', 'yellow', 'orange', 'gray']

调用者：arrColor数组

参数: 参数1表示开始索引值，参数2表示删除元素的数量

返回值：返回被删除元素的数组，返回值是数组！！！

功能：删除数组中指定索引值开始的所有元素（包含索引值对应的元素）

情况三、

var arrColor3 = ["red","green","purple","yellow","orange","gray","white"];

// 0 1 2 3 4 5 6

参数1表示开始索引值，参数2表示删除元素的数量，参数3+ 表示插入数组的数据

删除索引值为1开始的1个数据，并在当前位置插入数据"绿色","xxx","yyy"

arrColor3.splice(1,1,"绿色","xxx","yyy")

console.log(arrColor3);

总结：

1、可以删除数组指定索引的数据

2、可以获取数组指定的数据

3、可以往数组指定索引位置插入数据

区别数组中的slice 和 splice 方法。

slice 截取数据时，不会影响原数组

splice 截取数据时，会影响原数组

8. join() 把数组转成指定格式的字符串

var arr = ["11","22","33","a","b","c"];

var str = arr.join();

console.log(str);// 11,22,33,a,b,c

console.log(typeof str);// string

console.log(arr.join(""));// 112233abc

console.log(arr.join(" "));// 11 22 33 abc

console.log(arr.join("#"));// 11#22#33#a#b#c

9. forEach() 遍历数组

var arr2 = ["11","22","33","a","b","c"];

var res = arr2.forEach(function(item,index){// 形参

// console.log(item)// item 代表数组的每一项数据

// console.log(index);// index 代表每一项数据的索引值

})

console.log(res);// undefined

调用者：arr2数组

参数：匿名函数，也可以叫做回调函数

返回值：忽略（undefined）

功能：主要作用是循环遍历数组

// 函数表达式

// var foo = function(){console.log()}

// foo();

// 匿名函数：不具有函数名称的代码块 function(){}

// function(){} // 报错

// (function(){console.log("test")}); // 不报错

// (function(){console.log("test")})();// 不报错

// +function(){console.log("test")}()// 不报错

// -function(){console.log("test")}()// 不报错

// (function(){})();// 匿名函数，立即执行函数

10. sort() 主要是对数组进行排序或乱序

升序值从小到大

降序值从大到小

// 定义数组

升序

var res1 = arr.sort(function(prev,next){

return prev - next;

})

console.log(res1);// [10, 20, 30, 40, 60, 90, 100]

降序

var res2 = arr.sort(function(prev,next){

return next - prev;

})

console.log(res2);// [100, 90, 60, 40, 30, 20, 10]

console.log(arr);// [100, 90, 60, 40, 30, 20, 10]

调用者：arr 数组

参数：匿名函数

// function(a,b) { return a - b;} //升序

// function(a,b) { return b - a;} // 降序

返回值：返回值完成排序的数组

功能：对数组进行排序

// 复杂数据结构：

var data = [

{name:"学生1",score:90},

{name:"学生2",score:60},

{name:"学生3",score:80},

{name:"学生4",score:70},

{name:"学生5",score:85}

]

// 比如：取出学生2的分数?

// data[1].score ;// 60

// 思考一下：如何根据学生分数进行排序？

data.sort(function(a,b){

return a.score - b.score;

})

// console.log(data);

乱序

var arr = [10,30,40,50,60,70];

// arr 就是数组

// arr 它是构造函数Array的实例（具体的事物）

// 调用数组实例对象的sort方法

// sort 方法

arr.sort(function(){

// 根据随机小数和0.5相加的结果作为条件打乱原数组arr的顺序。

return Math.random() - 0.5;

})

// 控制台输出

console.log(arr);

// Math 是数学对象

// Math.random() 产生随机小数 0 ~ 1

欧克，以上是数组的，还不是全部！！！！已经吐了好吧！!

关于构造函数过程

首先写一下关于new出来的东西，和直接申明的东西有什么区别，额，大致就是new的时候，就是调用了String()函数，该函数会创建一个空对象作为容器来装入值，如下图：

然后该对象会将String的显示原型赋予new的对象的隐式原型（关于原型可以理解为一个公共区域，我在随笔中有写到），因此该对像会具有String的prototype。这里附上知乎大佬刘东写的new创建过程：

new关键字的实现过程是这样的：

创建一个空的对象 var str = {};

str.__proto__ = String.prototype

（可选）将str的构造函数指定为String;

将str对象通过String.call(str)初始化一下 // call() 初始化this对象

return str

可以看出new的东西都是对象。

var str = "STRING";就是一个基本类型，执行引擎在操作它的方法时会自动包装然后再销毁。

ok，我觉得这个基本上就可以解释该问题了，反正我是懂了的~

然后继续写字符API。。

1. concat() 合并字符串

var s1 = "你好 ";

var s2 = "世界！";

var res = s1.concat(s2);

console.log(res);

调用者：s1字符串

参数：s2字符串

返回值：

功能：合并

说实话该功能真的鸡肋，因为字符串可以依靠”+“号来拼接6，或许有的时候会很方便吧。

2. split() 把字符串切割成数组 (常用方法)

var str = "张三李四赵五孙六钱七";

var str = "张三,李四,赵五,孙六,钱七";

在控制台输出结果：

console.log(str.split());//['张三李四赵五孙六钱七']

// console.log(str.split(""));// ['张', '三', '李', '四', '赵', '五', '孙', '六', '钱', '七']

console.log(str.split(","));//['张三', '李四', '赵五', '孙六', '钱七']

调用者：字符串

参数：可选

返回值：把字符串切割之后的数组

功能：切割字符串，并且记录在数组中

3. indexOf 检索字符串中首次出现的字符的索引

// 字符串

// var str = "http://www.baidu.com";

console.log(str.indexOf("h"));// 0

console.log(str.indexOf("t"));// 1 首次出现的t字符的位

console.log(str.indexOf("!"));// -1 不存在 “!”字符

console.log(str.indexOf("www"));// 7

console.log(str.indexOf("http://"));// 0

4. lastIndexOf 检索字符串中最后一次出现的字符的索引

console.log(str.lastIndexOf("t"));// 2

console.log(str.lastIndexOf("."));// 16

字符串

var str1 = "http://www.baidu.com";

// 012345678910

两种方法都接受作为检索起始位置的第二个参数。

var str ="The full name of China is the People's Republic of China.";

var pos = str.indexOf("China",18);

var str ="The full name of China is the People's Republic of China.";

var pos = str.lastIndexOf("China",50);

lastIndexOf()方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

这里备注一个与indexOF功能类似的方法search()

var str ="The full name of China is the People's Republic of China.";

var pos = str.search("locate");

两种方法，indexOf()与search()，是相等的。

这两种方法区别在于：

search() 方法无法设置第二个开始位置参数。

indexOf() 方法无法设置更强大的搜索值（正则表达式）。

5. slice 截取字符串

情况一、

仅仅一个参数，且参数的值是小于 str.length

console.log(str1.slice(1));// "ttp://www.baidu.com"

console.log(str1.slice(2));// "tp://www.baidu.com"

console.log(str1.slice(3));// "p://www.baidu.com"

情况二、

参数1、参数2

参数1表示开始索引值，参数2表示结束索引值 (包左不包右)

console.log(str1.slice(0,4));// "http"

console.log(str1.slice(11,16));// "baidu"

情况三、

参数是负数,倒数截取字符

console.log(str1.slice(-1));// "m"

console.log(str1.slice(-2));// "om"

console.log(str1.slice(-3));// "com"

开始索引值要小于结束索引值

console.log(str1.slice(-1,-2));// 截取不到字符

console.log(str1.slice(-2,-1));// "o"

console.log(str1.slice(-3,-1));// "co"

6.0 substr

var str2 = "http://www.baidu.com";

// 012345678910

console.log(str2.substr(1));// "ttp://www.baidu.com"

console.log(str2.substr(-1));// "m"

参数1表示开始索引值参数2截取的字符长度

console.log(str2.substr(5,2));// "//"

console.log(str2.substr(11,5));// "baidu"

7.0 substring 类似slice是一样的作用

var str3 = "http://www.baidu.com";

// 012345678910

参数不能是负值

console.log(str3.substring(-2));

console.log(str3.substring(1)); //"ttp://www.baidu.com"

console.log(str3.substring(7,10)); // "www"

三种方法总结：

slice(start,end)

substring(start,end)

substr(start,length)

8. replace() 替换字符

var str = "我喜欢你，小花";

// 把"小花"替换成"小明"

var msg = str.replace("小花","小明");

console.log(str);// "我喜欢你，小花"

console.log(msg);// "我喜欢你，小明"

调用者：字符串

参数：参数1，参数2

返回值：替换字符之后的字符串

功能：替换字符

9. replaceAll 替换字符串文本中指定格式的所有字符

定义字符串

var html = "<div></div>";

// 替换div为span

// console.log(html.replace("div","span"));

console.log(html.replaceAll("div","span"));// "<span></span>"

10. toUpperCase 把字母字符转大写

// 定义字符串

var str = "hello world";

console.log(str.toUpperCase());// "HELLO WORLD"

11. toLowerCase 把字母字符转小写

var txt = "ABCDEFGHI";

console.log(txt.toLowerCase());// "abcdefghi"

12. charAt 根据索引值检索文本中的字符

var str = "helloworld"

// 0123456789

console.log(str.charAt(1));// "e"

console.log(str.charAt(4));// "o"

console.log(str.charAt(9));// "d"

13. charCodeAt 检索字符对应的unicode编码最大整数 655535

// unicode编码规范世界上所有字符的一个方案（字典）

var str2 = "abcdef"

// 012345

console.log(str2.charCodeAt(0));// 97 此处的97是指 "a"字符对应的数值（unicode码）

console.log(str2.charCodeAt(1));// 98 此处的97是指 "b"字符对应的数值（unicode码）

ok大概就这些，剩下一个快速排序，这里就不记了，我还没弄透，我再研究一下。。明天写

最后编辑于：2022.03.02 16:10:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,033评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,725评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,473评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,846评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,848评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,691评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,053评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,700评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,856评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,676评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,787评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,430评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,034评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,990评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,218评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,174评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,526评论 2赞 343

2022-03-01——摆烂失败（数组API&字符串API&构造函数）

？？？？？？？？他在讲什么？？？？？？？？？

__proto__ 这个属性是什么?

关于构造函数过程

推荐阅读更多精彩内容

proto 这个属性是什么?