JS基础

1.js的引入方式

方式1:
    <script>
        alert('欢迎来到德玛西亚!')

    </script>
方式2:外部文件引入
	src属性值为js文件路径
	<script src="test.js"></script>

2.变量声明

1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。

2.声明变量使用 var 变量名; 的格式来进行声明

变量名是区分大小写的。
推荐使用驼峰式命名规则。首字母大写
保留字不能用做变量名。

var a = 1;

3.数值类型

3.1.number

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

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

3.2字符串

var a = 'zxcxz';
typeof a; --- "string"

3.3字符串转换数值

var a = '111';
var b = parseInt(a);
typeof b; --- "number"

var a = '1.11';
var b = parseFloat(a);
typeof b; --- "number"

b = NaN  NaN是not a number
NaN和NaN不相等

3.4字符串相关方法

字符串拼接

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

查看字符串长度 length

var c = 'hello';
c.length; -- 5

移除两端空格,得到一个新值,不会改变原来的值trim()

var a = 'hello';
var  b = a.trim();
.trimLeft() 除去左边
.trimRight() 除去右边

找到索引为n的字符charAt

.charAt(n)  找到索引为n的字符
var c = b.charAt(1);

.concat() 字符串拼接

var a = 'nihao';
var b = 'girls';
var c = a.concat(b);

查看元素的索引indexOf

var a = c.indexOf('a');
var a = c.indexOf('i',3)
参数3的意思是从索引3的位置开始往后找,找到就返回对应的索引值,找不到就返回-1

slice() 切片

var c = "nihaogirls";
var a = c.slice(0,5); -- 'nihao'

.toLowerCase() #全部变小写
.toUpperCase() #全部变大写

var c = "nihaogirls";
var a = c.toUpperCase();

split() 字符串切割

var c = "nihaogirls";
var a = c.split('g',1); 
'g'是切割条件,1是切割后,返回结果的数量

4.布尔值

var a = true;
var b = false;
数据类型都有布尔属性:
""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
	var a; -- undefined
	
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

5.object类型

var a = 'xx';
var b = new String('oo');
---String {"21"}

5.1数组

var a = [11,22,33];
typeof a; -- "object" 

var b = new Array([11,22,33,44]); #不常用
typeof b; -- "object"

5.2数组常用方法

var a = [11,22,33];

索引取值 -- a[0];
数组长度 -- a.length;
尾部追加 -- a.push(44);
尾部删除 -- a.pop()

var a = [11, 22, 33, 44];
var b = a.pop();
a -- [11, 22, 33]
b -- 44

头部添加 -a.unshift('aa')

var a = [11, 22, 33];
a.unshift('aa')
a --  ["aa", 11, 22, 33]

头部删除-shift()

var a = ["aa", 11, 22, 33];
a.shift() 
a -- [11, 22, 33];

切片-slice()

var b = a.slice(0,3);
b -- [11, 22]

反转 reverse()

var a = [11,22,33];
a.reverse() 
a -- [33,22,11]

数组元素拼接 join

var a = ['aa','bb','cc'];
var b = a.join('_');
b -- "aa_bb_cc";

数组合并 concat

和字符串的差不多

var a = ["aa", "bb", "cc"];
var b = [11,22];
var c = a.concat(b);
c -- ["aa", "bb", "cc", 11, 22];

排序 sort

默认是按照ascii码排序

sort 规则:
如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

var a = [12,3,25,43];
function sortNumber(a,b){
                return a - b
             };
var b = a.sort(sortNumber)
b
---(4) [3, 12, 25, 43]

删除 .splice()

var a = ['aa','bb',33,44];

单纯删除

a.splice(1,1)
#删除索引为1之后的一个值(包含1)

删除并替换

var a = ["aa", 33, 44];
a.splice(0,2,'hello','world');
a --  ["hello", "world", 44];
#参数：1.从哪删(索引), 2.删几个  3.删除位置替换的新元素(可多个元素)

5.3自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。

索引取值
var a = {'name':'alex','age':48};
键可以不加引号:var a = {name:'alex',age:48};
a['age']; -- 48
a.age; -- 48

6.类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123  // "number"
typeof NAN // "number"
typeof undefined  //undefined
typeof function //function

7.运算符

7.1算数运算符

+ - * / % ++ --  
i++,是i自加1，i--是i自减1   
i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

示例:
	var a = 100;
	a++;或者++a; -- 101 a自增1	

	a++和++a的区别,示例:
	var a = 102;
	a++ == 102; -- true
	a -- 103;
	++a == 103; -- false
	a -- 104;

7.2比较运算符

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

==(弱等于)和===(强等于)两者的区别:
var a = 11;
var b = '11';
a == b -- true
a === b; -- false

7.3逻辑运算符

&& || !  #and，or，非（取反）!null返回true
示例:
var a = true;
var b = true;
var c = false;
a && b; -- true
a && c; -- false
a || c; -- true
!c; -- true

7.4赋值运算符

= += -= *= /= 
示例: n += 1其实就是n = n + 1

8.流程控制

8.1 if判断

#简单if-else判断
var a = 4;
if (a > 5){
    console.log('a大于5');

}
else{
    console.log('小于5');
};

#多条件判断
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if(a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

8.2 switch 切换

示例:
var a = 1;
switch (a++){ 
//这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
        case 1:
            console.log('等于1');
            break;
        case 3:
            console.log('等于3');
            break;
        default:  //case都不成立,执行default
            console.log('啥也不是!')	

    }
	

8.3 for循环

for (var i=0;i<10;i++) {  
//就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
  console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
   console.log(i,l2[i]); //i是索引
}
方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)  
    //注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}

8.4 while循环

var i = 0;
var a = 10;
while (i < a){
	console.log(i);
	if (i>5){
		continue;
		break;
	}
	i++;
};

8.5 三元运算

var c = a>b ? a:b;  
//如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c   //python中的：a = x if x>y else y

9.函数

9.1定义函数

#普通函数
function f1(){
	console.log('111');
}
f1();  执行函数

#带参数的函数
function f1(a,b){
	console.log('111');
}
f1(1,2);

#带返回值的函数
function f1(a,b){
	return a+b;
}
f1(1,2); -- 3

##返回值不能有多个
function f1(a,b){
	return a,b;
}
f1(1,2); -- 2

function f1(a,b){
	return [a,b];  想要多个返回值,需要换一种数据类型
}
f1(1,2); -- [1, 2]

#匿名函数:
var f1 = function(){
    console.log('111');
}
f1();

#自执行函数
(function(a,b){
    console.log(a+b);
})(1,2);

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

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

全局变量：

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

变量生存周期：

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

9.3 作用域

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

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

9.3 闭包

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

10.面向对象

function Person(name){
	this.name = name;
};

var p = new Person('taibai');  

console.log(p.name);

Person.prototype.sum = function(a,b){  
//封装方法
	return a+b;
};

p.sum(1,2);
3

11.date对象

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前2时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString())

常用方法
var d = new Date(); 
使用 d.getDate()
getDate()                 获取日
getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
getMonth ()               获取月（0-11,0表示1月,依次类推）
getFullYear ()            获取完整年份
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

12.JSON对象

var aa = {name:"abb",age:18}
将字典转换为字符串
var b = JSON.stringify(aa)
b -- "{"name":"abb","age":18}"

将字符串转化为字典
var c = JSON.parse(b)
c  ---{name: "abb", age: 18}

13.RegExp对象

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); 

简写方式

var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

坑:

reg2.test(); 什么也不填写,会默认成reg2.test('undefined');
如果'undefined'满足你的正则要求,就返回true

字符串使用正则的方法

var s2 = "hello world"
s2.match(/o/)   匹配元素,只会匹配第一个
s2.match(/o/g)  匹配所有的
s2.search(/o/)  找符合正则规则的字符串的索引
s2.split(/o/)   分割
s2.replace(/hello/gi ,"hi"); 替换,g全局替换,i不区分大小写

注意:

正则加上g之后,进行test测试需要注意的问题

var reg3 = /o/g;   正则规则
var s1 = 'hello  world';
reg3.lastIndex -- 0  光标位置
reg3.test(s1); -- true  有
reg3.test(s1); -- true  有
reg3.test(s1); -- false 无 
#光标会移动到o之后
置零:
	reg3.lastIndex = 0

14.Math对象

类似于py中的内置函数,可以直接使用

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