day56

  • 一.数组对象Array
  • 二.date日期对象
  • 三.match对象
  • 四.json对象
  • 五.regexp对象
  • 六.运算符
  • 算数运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符
  • 七.流程控制
  • 八.函数
  • 函数的定义与调用(与python类同)
  • 函数中的arguments参数
  • 函数的全局变量和局部变量
  • 作用域
  • 代码示例


一.数组对象Array

数组对象的作用:使用单独的变量名来存储一系列的值,类似于python中的列表

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

常用方法:

es in的语法 es语法详解_ci


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(arr[i]);
}

forEach()
语法:

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

参数:

es in的语法 es语法详解_字符串_02

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)

参数:

es in的语法 es语法详解_字符串_03

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 # undefined

2、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());  //毫秒并不直接显示

常用的方法:

es in的语法 es语法详解_字符串_04

三.match对象

es in的语法 es语法详解_ci_05

四.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
// 参数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

六.运算符

算数运算符

+
-
*
/
%
++
--

比较运算符

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

注意:

1 == "1"  // true
1 === "1"  // false,更严谨

逻辑运算符

&&
||
!

赋值运算符

=
+=
-=
*=
/=

七.流程控制

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类同)

// 无参函数
funtion 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

注意:
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回.

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

#局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，局部变量就会被删除。

#全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

#变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

作用域

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

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

示例2

var city = "BeiJing";
function Bar() {
	console.log(city);
}
function f() {
	var city = "ShangHai";
	return Bar;
}
var ret = f();
ret();  //输出结果?
// BeiJing

示例3:

var city = "BeiJing";
function f() {
	var city = "ShangHai";
	function inner() {
		console.log(city);
	}
	return inner;
}
var res = f();
res();  // 输出结果?
// ShangHai

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f1() {
        console.log("无参函数")
    }
    function f2(a,b) {
        console.log("有参函数",a+b)
    }
    function f3() {
        // 只能返回一个值，如果想返回多个，必须放到数组内
        return [111,222,333]
    }

    var f=function (a,b) {
        console.log(a+b)
    }
    f()

    (function (a,b) {
        console.log(a+b)
    })(1,2)

    var x=11
    function test() {
        var x=22
        y=3333
        if (true) {
            var z=444
        }
    }
    test()
    console.log('====>',x)

    // 默认情况下if的子代码块的作用域是与if所在的位置保持一致的
    // 因为if属于全局，m也是属于全局的
    if (true) {var m=666}

    // let声明的变量只属于自己的{}
    if (true) {let n=666}
</script>
</body>
</html>