前端之JavaScript基础等相关内容-56

1.数据类型与内置方法

1.数组对象Array

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

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

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.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

注意：

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

示例：

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

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

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

forEach()

语法：

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

参数：

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

splice()

语法：

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

参数：

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

map()

语法：

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

参数：

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

2.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());  //毫秒并不直接显示http://www.w3school.com.cn/jsref/jsref_obj_date.asp)

方法	含义
getDate()	根据本地时间返回指定日期对象的月份中的第几天（1-31）。
getMonth()	根据本地时间返回指定日期对象的月份（0-11）
getFullYear()	根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字）
getDay()	根据本地时间返回指定日期对象的星期中的第几天（0-6）
getHours()	根据本地时间返回指定日期对象的小时（0-23）
getMinutes()	根据本地时间返回指定日期对象的分钟（0-59）
getSeconds()	根据本地时间返回指定日期对象的秒数（0-59）
getMilliseconds()	根据本地时间返回指定日期对象的获取毫秒
getTime()	返回累计毫秒数(从1970/1/1午夜)

3.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)

4.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); 

5.RegExp对象

#1. 创建正则对象的方式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：
// 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
4
​
reg3.test("egon") // 从4的位置开始匹配，本次匹配失败
false
​
reg3.lastIndex // 匹配失败，lastIndex归为0
0
​
reg3.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

2.运算符

算数运算符

+
-
*
/
%
++
--

比较运算符

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

注意：

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

逻辑运算符

&&
||
!

赋值运算符

=
+=
-=
*=
/=

3.流程控制

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 

4.函数

1.函数的定义与调用（与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); 

2.函数中的arguments参数

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

输出：

3
2

注意：

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

3.函数的全局变量和局部变量

#局部变量：
​
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，局部变量就会被删除。
​
#全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
​
#变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

4.作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。另外函数的作用域关系是在定义阶段就固定死的，与调用位置无关

例1

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
​
f();  //输出结果是？

例2

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？ 

例3

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var res = f();
res();