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

字符串

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

常用方法

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)     分割

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)
""

布尔类型

var a = true;
var b = false;

数组

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

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

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 []

遍历数组中的元素

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

ull和undefined

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

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

对象

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

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

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

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

遍历对象中的内容：

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

创建对象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>

浏览器输出如下：

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 == “1” // true

1 === “1” // false

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

流程控制

if-else

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

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");
}

switch

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

for

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

while

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

三元运算

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

函数、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);

函数赋值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>

输出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,[]);

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();

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();  //输出结果是？

输出深圳

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

输出北京

闭包

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

输出上海

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

输出如下：

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

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

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

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)    返回角的正切。