数组对象Array

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var x = ["egon", "hello"];
console.log(x[1]);  // 输出"hello"

常用方法：

.length 数组的大小

.push() 尾部追加元素

.pop() 获取尾部的元素

.unshift() 头部插入元素

.shift() 头部移除元素

.slice(start, end) 切片

.reverse() 反转

.join(seq) 将数组元素连接成字符串

.concat(val, …) 连接数组

.sort() 排序

.forEach() 将数组的每个元素传递给回调函数

.splice() 删除元素，并向数组添加新元素。

.map() 返回一个数组元素调用函数处理后的值的新数组

关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

var arr = [123,9,1211,11]
arr.sort()
#[11, 1211, 123, 9]

如果想按照其他标准进行排序，就需要提供比较函数，该函数应该具有两个参数 a 和 b，接收传入的a和b，执行函数体代码，然后返回一个值用于说明a和b的大小

返回值 < 0 ：代表a小于b

返回值 =0 : 代表a等于b

返回值 > 0 ：代表a大于b

代码示例按数字大小排序：

function sortNumber(a,b){return a - b
}
var arr = [123,9,1211,11]
arr.sort(sortNumber) #[9, 11, 123, 1211]

注意：字符串的数字相减会做数学的减法，而字符串的数字相加则会做拼接

var x = "5";
var y = "3";
res = x - y; //res = 2
typeof res  //"number"

关于遍历数组中的元素，可以使用下面的方式：

js的for循环

var arr = [11, 22, 33, 44];
for (var i=0;i<arr.length;i++) {console.log(i);
}

forEach() 遍历数组

语法：

forEach(function(currentValue, index, arr), thisValue)

必须传入的参数:
currentValue ：必需。当前元素
index ：可选。当前元素的索引值。
arr： 可选。当前元素所属的数组对象。

不必要传入的参数
thisValue： 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

代码示例

var arr=['aa','bb','cc','dd','ee']arr.forEach(function(v,i,arr){console.log(v,i,arr);console.log(this[0]);
},"hello")

splice() 删除与插入

语法：

splice(index,howmany,item1,.....,itemX)

参数：
index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany: 可选。表示要删除的项目数量（index对应的值也算一个）。如果不指定默认值为0，代表不会删除项目。
item1, …, itemX: 可选。向数组添加的新项目。

代码示例：

var arr=['aa','bb','cc','dd','ee']arr.splice(1,3,'xxxx') # 删除‘bb’，‘cc’，’dd‘这三个值，然后插入’xxxx‘arr #["aa", "xxxx", "ee"]

map()

语法：

map(function(currentValue,index,arr), thisValue)

必须传入的参数：
currentValue“：必须。当前元素的值
index： 可选。当期元素的索引值
arr： 可选。当期元素属于的数组对象

不必要传入的参数
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”

代码示例: forEach vs map

1、forEach()返回值是undefined，不可以链式调用。
var res=arr.forEach(function(v,i,arr){console.log(v,i,arr);console.log(this[0]);return 123;
},"hello")
res # undefined2、map()返回一个新数组，原数组不会改变
var res=arr.map(function(v,i,arr){v=v + 'SB'return v;
},"hello")res #["aaSB", "bbSB", "ccSB", "ddSB", "eeSB"]在使用forEach()时候，如果数组在迭代的时候被修改，则其他元素会被跳过
var arr=[11,22,33,44,55]
arr.forEach(function(v){console.log(v);if (v === 33){arr.shift() // 下一次循环应该循环出第索引为3的元素，但此时一旦删除第一个元素，那么值55的索引变成了3}
})
11
22
33
55反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) {   //同时利用了call()方法return x;
}).reverse().join('');

Date日期对象

创建日期对象只有构造函数一种方式,使用new关键字

方法1：不指定参数

var d1 = new Date();
console.log(d1.toLocaleString());

方法2：参数为日期字符串

var d2 = new Date("2018/01/27 11:12:13");
console.log(d2.toLocaleString());var d3 = new Date("01/27/18 11:12:13"); // 月/日/年 时分秒
console.log(d3.toLocaleString());

方法3：参数为毫秒数

var d4 = new Date(7000);
console.log(d4.toLocaleString());
console.log(d4.toUTCString());

方法4：参数为：年，月，日，时，分，秒，毫秒

var d5 = new Date(2018,1,27,11,12,13,700);
console.log(d5.toLocaleString());  //毫秒并不直接显示

更详细的点这里

getDate() 根据本地时间返回指定日期对象的月份中的第几天（1-31）。

getMonth() 根据本地时间返回指定日期对象的月份（0-11）

getFullYear() 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）

getDay() 根据本地时间返回指定日期对象的星期中的第几天（0-6）

getHours() 根据本地时间返回指定日期对象的小时（0-23）

getMinutes() 根据本地时间返回指定日期对象的分钟（0-59）

getSeconds() 根据本地时间返回指定日期对象的秒数（0-59）

getMilliseconds() 根据本地时间返回指定日期对象的获取毫秒

getTime() 返回累计毫秒数(从1970/1/1午夜)

Math对象

Math.floor() 向下取整,如5.1取整为5

Math.ceil() 向上取整,如5.1取整为6

Math.max(a,b) 求a和b中的最大值

Math.min(a,b) 求a和b中的最小值

Math.random() 随机数,默认0-1之间的随机数,若想求min~max之间的数，公式为：min+Math.random()*(max-min)

JSON对象

JSON格式的字符串转成对象

var str1='{"name":"egon","age":18}';var obj1=JSON.parse(str1);
console.log(obj1.name);
console.log(obj1["name"]);

对象转成JSON字符串

var obj2={"name":"egon","age":18};var str2=JSON.stringify(obj2);

RegExp 正则表达式对象

创建正则对象的方式1

// 参数1 正则表达式
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
// 注意：正则放到引号内，{}内的逗号后面不要加空格
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
reg1.test("egon_123") // true

2. 创建正则对象的方式2

var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引号
reg2.test("egon_123") // true

3. String对象与正则结合的4个方法

var s1="hello world";
s1.match(/l/g) // 返回符合正则的内容["l", "l", "l"]
s1.search(/h/g) // 返回符合正则的内容的索引0
s1.split(/ /) // ["hello", "world"]
s1.replace(/l/g,'L') // "heLLo worLd"

4. 匹配模式g与i

var s2="name:Egon age:18"
s2.replace(/e/,"赢") // "nam赢:Egon age:18"
s2.replace(/e/g,"赢") // "nam赢:Egon ag赢:18"
s2.replace(/e/gi,"赢") //"nam赢:赢gon ag赢:18"

5. 注意1: 带g参数的正则对象，使用LastIndex匹配成功时不回头

1. 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
2. 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
3. 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
4. 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
5. 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
6. 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /egon/g;
reg3.lastIndex
0
reg3.test("egon") // true，匹配成功
true
reg3.lastIndex // 匹配成功reg3.lasIndex=4
4reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
falsereg3.lastIndex // 匹配失败，lastIndex归为0
0reg3.test("egon") // 再次匹配成功
true

6. 注意2：

当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(“undefined”), 并且/undefined/.test()默认返回true。

var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

JavaScript 允许自定义对象（了解即可）

创建对象的几种常用方式

1. 使用Object或对象字面量创建对象

2. 工厂模式创建对象

3. 构造函数模式创建对象

4. 原型模式创建对象

   1. 使用Object或对象字面量创建对象
      JS中最基本创建对象的方式：

   var student = new Object();
   student.name = "easy";
   student.age = "20";
   

   这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。

   如果你嫌这种方法有一种封装性不良的感觉。来一个对象字面量方式创建对象

   var sutdent = {name : "easy",age : 20
   };
   

   这样看起来似乎就完美了。但是马上我们就会发现一个十分尖锐的问题：当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次…

   var sutdent1 = {name : "easy1",age : 20
   };var sutdent2 = {name : "easy2",age : 20
   };...var sutdentn = {name : "easyn",age : 20
   };
   

   能不能像工厂车间那样，有一个车床就不断生产出对象呢？我们看”工厂模式”。

   1. 工厂模式创建对象
      JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象

   function createStudent(name, age) {var obj = new Object();obj.name = name;obj.age = age;return obj;
   }var student1 = createStudent("easy1", 20);
   var student2 = createStudent("easy2", 20);
   ...
   var studentn = createStudent("easyn", 20);
   

   这样一来我们就可以通过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了，但贪婪的人类总有不满足于现状的天性：我们不仅希望”产品”的生产可以像工厂车间一般源源不断，我们还想知道生产的产品究竟是哪一种类型的。

   比如说，我们同时又定义了”生产”水果对象的createFruit()函数：

   function createFruit(name, color) {var obj = new Object();obj.name = name;obj.color = color;return obj;
   }var v1 = createStudent("easy1", 20);
   var v2 = createFruit("apple", "green");
   

   对于以上代码创建的对象v1、v2，我们用instanceof操作符去检测，他们统统都是Object类型。我们的当然不满足于此，我们希望v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，我们可以用自定义构造函数的方法来创建对象

   1. 构造函数模式创建对象
      在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：

   var obj = new Object();
   

   在创建原生数组Array类型对象时也使用过其构造函数：
   var arr = new Array(10); //构造一个初始长度为10的数组对象

   在进行自定义构造函数创建对象之前，我们首先了解一下构造函数和普通函数有什么区别。

实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。

按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。

使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。

了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：

function Student(name, age) {this.name = name;this.age = age;this.alertName = function(){alert(this.name)};
}function Fruit(name, color) {this.name = name;this.color = color;this.alertName = function(){alert(this.name)};
}

这样我们再分别创建Student和Fruit的对象：

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //false
alert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //truealert(v1 instanceof Object);  //true 任何对象均继承自Object
alert(v2 instanceof Object);  //true 任何对象均继承自Object

这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢？使用构造器函数通常在js中我们来创建对象。

我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。

我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：

function Student(name, age) {this.name = name;this.age = age;this.alertName = alertName;
}function alertName() {alert(this.name);
}var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

在调用stu1.alert()时，this对象才被绑定到stu1上。

我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题。

但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

原型的模式创建对象

原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。

function Student() {this.name = 'easy';this.age = 20;
}Student.prototype.alertName = function(){alert(this.name);};var stu1 = new Student();
var stu2 = new Student();stu1.alertName();  //easy
stu2.alertName();  //easyalert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

运算符

算数运算符：

+
-
*
/
%
++
--

注意：

var i=0
var res=i++  //res=0
var res1=++i  //res1=1//实际上res赋值时先res=i，再i++
//res1则是先res1=++i
//顺带一提++1与i++对于i来说都一样
i++
i  // 1
++i
i  //2

比较运算符

> >=
< <=
!=
==
===
!==

注意：

1 == “1”  // true
1 === "1"  // false

逻辑运算符

&&  同python的and
||  同python的or
!   取反

赋值运算符

=
+=
-=
*=
/=

流程控制

if->else

var age = 30;
undefined
if(age > 18){console.log('too old');
}else {console.log('too young');
}

if->else if->else

var age=18;
if(age > 18){console.log('too old');
}
else if(age == 18){console.log('花姑娘,吆西');
}
else {console.log('too young');
}

switch

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

var day = new Date().getDay();
switch (day) {case 0:console.log("星期天，出去浪");break;case 6:console.log("星期六，也出去浪");break;default:console.log("工作日，正常上班")
}

for

for (let i=1;i<=3;i++){console.log(i);
}

while

let i=0;
undefined
while (i<=3){console.log(i);i++;
}

三元运算

var x=1;
var y=2;
var z=x>y?x:y

函数

函数的定义与调用（与python类同）

无参函数

function f1() {console.log("Hello world!");
};
f1();

有参数函数

function f2(a, b) {console.log(arguments);  // 内置的arguments对象console.log(arguments.length);console.log(arguments[0],arguments[1]);console.log(a, b);
};
f2(10,20);

带返回值的函数

function sum(a, b){return a + b;
}
sum(1, 2);  // 调用函数

匿名函数

var sum = function(a, b){return a + b;
}
sum(1, 2);// 立即执行函数
(function(a, b){return a + b;
})(1, 2);

函数中的arguments参数

function add(a,b){console.log(a+b);console.log(arguments.length)
}add(1,2)

输出：

3
2

注意：

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

python学习 day51之js续集相关推荐

1. Python 学习第十八天 js 正则及其它前端知识

   一,js 正则表达式 test 判断制度串是否符合规定的正则 (1)定义正则表达式匹配规则         js 中定义正则表达式为rep=/\d+/,两个//之间为正则模式 (2)rep.test( ...

2. 在浏览器中进行深度学习：TensorFlow.js (四）用基本模型对MNIST数据进行识别

   2019独角兽企业重金招聘Python工程师标准>>> 在了解了TensorflowJS的一些基本模型的后,大家会问,这究竟有什么用呢?我们就用深度学习中被广泛使用的MINST数据集 ...

3. Python爬虫高级之JS渗透登录新浪微博 | 知了独家研究

   小伙伴们看到标题可能会想,我能直接自己登陆把登陆后的cookie复制下来加到自定义的请求头里面不香嘛,为什么非要用python模拟登录的过程?如果我们是长期爬取数据,比如每天早上中午和晚上定时爬取新浪 ...

4. python自学入门教程-Python学习教程（一）自学资源分享

   在我看来,基本上可以不负责任地认为,Python 可以做任何事情.无论是从入门级选手到专业级选手都在做的爬虫,还是Web 程序开发.桌面程序开发还是科学计算.图像处理,Python都可以胜任. 或许是 ...

5. 学python有哪些书推荐-有什么Python学习的书籍和学习资源推荐?

   看到这个题目已经有一段时间,今天晚上和两位同事吃饭时我问起这个问题,"你们学习Python过程中看过什么不错的书籍?"两位同事的回答都是"没看书,就是在网上找了一些教程简 ...

6. python教程书籍-有什么Python学习的书籍和学习资源推荐?

   看到这个题目已经有一段时间,今天晚上和两位同事吃饭时我问起这个问题,"你们学习Python过程中看过什么不错的书籍?"两位同事的回答都是"没看书,就是在网上找了一些教程简 ...

7. python爬虫原理-python学习之python爬虫原理

   原标题:python学习之python爬虫原理 今天我们要向大家详细解说python爬虫原理,什么是python爬虫,python爬虫工作的基本流程是什么等内容,希望对这正在进行python爬虫学习的 ...

8. Python学习教程：Python爬虫抓取技术的门道

   Python学习教程:Python爬虫抓取技术的门道 web是一个开放的平台,这也奠定了web从90年代初诞生直至今日将近30年来蓬勃的发展.然而,正所谓成也萧何败也萧何,开放的特性.搜索引擎以及简单 ...

9. Python学习之路—2018/7/14

   Python学习之路-2018/7/12 3.功能开发 3.3 设计博客首页 博客首页中最重要的就是中间的文章区域,所以我首先把文章区域设计出来,一开始并没有数据,如果用orm添加或者直接在数据库添加 ...

最新文章

1. orm mysql_ORM介绍
2. JAVA方法调用中的解析与分派
3. shell获取git最近一次提交信息_Git修改commit提交信息
4. P2605 [ZJOI2010]基站选址
5. php stream encoding,PHP之mb_check_encoding使用方法分享
6. Nginx基本数据结构之ngx_chain_t
7. http://blog.csdn.net/u011277123/article/details/53665302
8. 企业数字化转型需注意什么
9. ASP.NET 控件开发速成教程：生成复合控件
10. asp.net 利用DirectoryEntry来验证用户以及开机密码
11. Unity3D 制作按钮开关，旋钮开关，摇杆手柄 插件
12. Stolz定理及其证明
13. 嵌入式软件怎样测试,如何对嵌入式软件进行可靠性测试
14. 嵌入式课程 之 陀螺仪传感器实验
15. t450加固态硬盘教程_ThinkPad T450 开箱安装内存SSD升级Windows10过程小记-5X兴趣社区...
16. 使用wps进行数据去重
17. ADS1115的四通道使用
18. 电信光猫F420破解
19. 通过cv2.resize()来改变图片大小
20. tomcat启动报错，原来是DB2的一个jar包搞的鬼

热门文章

1. Biotin-WFA,WFL；生物素化紫藤凝集素(WFA,WFL)
2. maven加载依赖时总是Updating [central] https://repo.maven.apache.org/maven2
3. 平面设计新手如何用PS制作出一张合成海报
4. Git使用中的一些常用小技巧
5. 游戏本怎么选？战神Z7T-DA7NP便宜又强悍，办公游戏两不误
6. React实现微信扫码支付
7. 很短，很文艺，很唯美。这才是真正的英文经典
8. 戏如人生，人生如戏！
9. mybatis拦截器添加额外参数
10. python如何计算成绩平方根_python 使用二分法计算平方根