js基础知识

数据类型

对象

运算符

流程控制

函数call

Date

JSON与对象互相转换

数据类型

数字类型

JavaScript不区分整型和浮点型，就只有一种数字类型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
parseFloat("123.456")  // 返回123.456

1
2
3
4
5
6
7
8
[/code]

字符串

var a = "Hello"
var b = "world;
var c = a + b;
console.log(c);  // 得到Helloworld

1
2
3
4
[/code]

常用方法

obj.length  返回长度
obj.trim()  移除空白
obj.trimLeft()  移除左边的空白
obj.trimRight()     移除右边的空白
obj.charAt(n)   返回第n个字符
obj.concat(value, ...)  拼接
obj.indexOf(substring, start)   子序列位置
obj.substring(from, to)     根据索引获取子序列
obj.slice(start, end)   切片
obj.toLowerCase()   小写
obj.toUpperCase()   大写
obj.split(delimiter, limit)     分割

1
2
3
4
5
6
7
8
9
10
11
12
[/code]

obj.slice(start, end) 切片

a = "safly"
"safly"
a.slice(0,3)
"saf"
a.slice(-3,-1)
"fl"
a.slice(0,-2)
"saf"
a.slice(-2,0)
""
a.slice(3,1)
""
a.slice(-1,-3)
""

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[/code]

布尔类型

var a = true;
var b = false;

1
2
[/code]

数组

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

1
2
[/code]

obj.length  数组的大小
obj.push(ele)   尾部追加元素
obj.pop()   获取尾部的元素
obj.unshift(ele)    头部插入元素
obj.shift()     头部移除元素
obj.slice()     切片
obj.reverse()   反转
obj.join(seq)   将数组元素连接成字符串
obj.concat(val, ...)    连接数组
obj.sort()  排序

1
2
3
4
5
6
7
8
9
10
[/code]

obj.slice() 切片

a = [1,"a",2,"b"]
Array [ 1, "a", 2, "b" ]
a.slice(0,3)
Array [ 1, "a", 2 ]
a.slice(0,-1)
Array [ 1, "a", 2 ]
a.slice(-3,-1)
Array [ "a", 2 ]

a.slice(3,0)
Array []
a.slice(-1,-3)
Array []
a.slice(-1,0)
Array []

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]

遍历数组中的元素

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
console.log(i);
}

1
2
3
4
5
6
[/code]

ull和undefined

undefined表示的是当声明的变量未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示值不存在

undefined表示声明了变量，但是还没有赋值。null声明了变量并且变量是空值。

1
2
3
4
5
[/code]

对象

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

我们在学习基本数据类型的时候已经带大家了解了，JavaScript中的Number对象、String对象、Array对象等。

类似于（某方面类似）Python中的字典数据类型

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

1
2
3
[/code]

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);
}

1
2
3
4
5
6
[/code]

创建对象7种方式

<script>
// 方法一 类似java的方式
function Person(name, gender) {
this.name = name;
this.gender = gender;
}

var person = new Person("safly", "男")

console.log(person.name, person["gender"])

//方法二  类似python字典方式
var person = {
"name": "safly",
"gender": "男"
}
console.log(person.name, person["gender"])

//方法三 对python字典方式稍加改进
var person = {
name: "safly",
gender: "男"
}
console.log(person.name, person["gender"])

//方法四
var person = new Object()
person.name = "safly";
person.gender = "男";
console.log(person.name, person["gender"])

//方法五  改进方法四 工厂方法
function createObj(name,gender) {
var obj = new Object();
obj.name = name;
obj.gender = gender
return obj
}

var person = createObj("safly","男")
console.log(person.name,person.gender)

//方法六
function Stu() {}
Stu.prototype.name = "safly"
Stu.prototype.gender = "男人"
var stu = new Stu()
console.log(stu.name,stu.gender)

// //方法七
function Animal(){}
Animal.prototype = {
name : "saflyy"
}

var animal = new Animal()
console.log(animal.name)

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
[/code]

浏览器输出如下：

safly 男
jd.html:18:9
safly 男
jd.html:26:9
safly 男
jd.html:33:9
safly 男
jd.html:39:9
safly 男
jd.html:50:9
safly 男人
jd.html:57:9
saflyy

1
2
3
4
5
6
7
8
9
10
11
12
13
[/code]

运算符

运算符

算数运算符

+ - * / % ++ –

比较运算符

= < <= != == === !==

注意：

1 == “1” // true

1 === “1” // false

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

流程控制

if-else

var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}

1
2
3
4
5
6
[/code]

if-else if-else

var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}

1
2
3
4
5
6
7
8
[/code]

switch

var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}

1
2
3
4
5
6
7
8
9
10
11
[/code]

for

for (var i=0;i<10;i++) {
console.log(i);
}

1
2
3
[/code]

while

var i = 0;
while (i < 10) {
console.log(i);
i++;
}

1
2
3
4
5
[/code]

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

1
2
3
[/code]

函数、call

函数定义

// 普通函数定义
function f1() {
console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
console.log(arguments);  // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}

// 带返回值的函数
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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
[/code]

函数赋值call

<script>

function add(a, b) {

return a + b;
}

console.log(add(1, 2))

//函数赋值引用
reduce = add
var res = reduce(1, 2)
console.log(res)

//或者这个方法  就是add的方法用到reduce上输出4

function reduce(a, b) {
return a - b;
}

var reslut = add.call(reduce, 1, 2)
console.log(reslut)

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[/code]

输出3，3，3

function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}

function Cat(){
this.name = "Cat";
}

var animal = new Animal();
var cat = new Cat();

//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。
//输入结果为"Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[/code]

call 的意思是把 animal 的方法放到cat上执行，原来cat是没有showName() 方法，现在是把animal 的showName()方法放到 cat上来执行，所以this.name 应该是 Cat

function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}

function Cat(name){
Animal.call(this, name);
}

var cat = new Cat("Black Cat");
cat.showName();

1
2
3
4
5
6
7
8
9
10
11
12
13
[/code]

Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了.

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

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

f();  //输出结果是？

1
2
3
4
5
6
7
8
9
10
11
[/code]

输出深圳

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

1
2
3
4
5
6
7
8
9
10
[/code]

输出北京

闭包

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

1
2
3
4
5
6
7
8
9
10
[/code]

输出上海

Date

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[/code]

输出如下：

2017/12/27 上午10:35:20
demo.html:12:1
2004/3/20 上午11:12:00
demo.html:15:1
2020/4/3 上午11:12:00
demo.html:17:1
1970/1/1 上午8:00:05
demo.html:20:1
Thu, 01 Jan 1970 00:00:05 GMT
demo.html:21:1
2004/3/20 上午11:12:00

1
2
3
4
5
6
7
8
9
10
11
[/code]

var d = new Date();
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

1
2
3
4
5
6
7
8
9
10
11
[/code]

JSON与对象互相转换

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

1
2
3
4
5
6
[/code]

Math

abs(x)    返回数的绝对值。

exp(x)    返回 e 的指数。

floor(x)对数进行下舍入。

log(x)    返回数的自然对数（底为e）。

max(x,y)    返回 x 和 y 中的最高值。

min(x,y)    返回 x 和 y 中的最低值。

pow(x,y)    返回 x 的 y 次幂。

random()    返回 0 ~ 1 之间的随机数。

round(x)    把数四舍五入为最接近的整数。

sin(x)    返回数的正弦。

sqrt(x)    返回数的平方根。

tan(x)    返回角的正切。

1
2
3
4
5
6
7
8
9
10
11
12


转自:http://blog.csdn.net/u013210620/article/details/78902561