JavaScript

JavaScript

引入方式

1.script标签内写入代码

<script>
    //js代码
</script>

2.引入JS文件

<script src='js文件'></script>

语法规范

1.注释

// 单行注释
​
/*
多行注释
*/

2.结束符

JavaScript中的语句要以分号 ( ; ) 为结束符.

JavaScript语法基础

变量声明

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

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

var name = 'waller';

ps:变量名区分大小写,推荐使用驼峰体命名规则

注意:

ES6新增了 let 命令,用于声明变量,其用法类似 var ,区别:var 全局声明,let 局部声明

ES6新增了const 用来声明常量,一旦声明,其值就不能改变

const S = 3.14;
S // 3.14
var S = 3;  //报错,已经被声明为常量,不能修改

JavaScript 数据类型

拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "haha"  // 此时x是字符串 

一.数值(Number)

JavaScript不区分整形和浮点型,只有一种数值类型

var a = 10;
var b = 3.14;
typeof(a);
"number"
typeof(b);
"number"

Not a Number 表示不是一个数字

parseInt('123');
123
parseInt('3.14');
3
parseInt('abc');
NaN
parseFloat('3.14');
3.14

二.字符串(string)

var res = 'hello world';

.length 长度

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

.trim 去除空白

var c = '   hello   ';
c.trim();  // 去除左右两侧
c.trimLeft();  // 去除左侧空白
c.trimRight();  //去除右侧空白

.charAt(n) 返回第n字符

var c = 'hello';
c.charAt(2);
"l"

.concat() 拼接 推荐使用 + 号

var c = 'hello';
var w = 'world';
c.concat(w);
"helloworld"
​
var c = h + w;
console.log(c)
helloworld

.indexOf() 索引值

var c = 'hello';
c.indexOf('l');
2

.substring() .slice() 切片

var c = 'hello world';
c.substring(0,7);
"hello w"
c.slice(0,7);
"hello w"
c.substring(0,-1);  // 不能有负数
""
c.slice(0,-1);  // 可以有负数 推荐使用
"hello worl"

.toUpperCase() 全大写

.toLowerCase() 全小写

var c = 'Hello World'
c.toUpperCase();
"HELLO WORLD"
c.toLowerCase();
"hello world"

.split() 分割

var res = 'a|b|c';
res.split('|');  // 按 '|' 切分成数组
(3) ["a", "b", "c"]
res.split('|',2); // 第二个参数表示从切分的结果中拿出几个
(2) ["a", "b"]
res.split('|',5);  // 拿出的数量超了不报错,按最多显示
(3) ["a", "b", "c"]

补充:

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

${ } 格式化输出

var name = 'lilie';
var age = 18;
var info = `he name is ${name} he age is ${age}`;
info // "he name is lilie he age is 18"
​
`普通字符串`
"普通字符串"

注意：如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

三.布尔值 (Booleam)

区别于Python，true和false都是小写。

var a = true;
var b = false;

(空字符串)、0、null、undefined、NaN都是false。

null和undefined

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

• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined

null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。

var a = null;
a
null
var x
x
undefined

四.数组

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

var l = [111, 222, 333, 444];
l // (4) [111, 222, 333, 444]
console.log(l[2]);  // 333

.length 数组长度

l.length;
4

.push() 追加元素

l.push(555);
5
l
(5) [111, 222, 333, 444, 555]

.pop() 尾部删除元素

l.pop();
555
l
(4) [111, 222, 333, 444]

.unshift() 头部插入元素

l.unshift(000);
5
l
(5) [0, 111, 222, 333, 444]

.shift() 头部删除元素

l.shift();
0
l
(4) [111, 222, 333, 444]

.shift() 切片

l.slice(0,2);
(2) [111, 222]
l.slice(-2);
(2) [333, 444]

.reverse() 反转

l.reverse();
(4) [444, 333, 222, 111]

.join() 将数组元素连接成字符串

l.join('|');
"444|333|222|111"
/*
注意: python 中 列表内的元素数是字符串类型才可以拼接
    js 中自动将整形转为了字符串类型
*/

.concat() 数组内插入数组

l.concat([11,22,33]);
(8) [111, 222, 333, 444, 555, 11, 22, 33]

.sort() 排序

l.sort();
(5) [111, 222, 333, 444, 555]

.splice() 切分

l.splice(0,2);
(2) [111, 222]
​
l.splice(0,2,777);  // 第三个参数是在切分后的数组添加的元素
(2) [111, 222]
l
(4) [777, 333, 444, 555]

.forEach() 将数组的每个元素传递给回调函数

l.forEach(function(value, index, arr){
    console.log(value, index, arr)
});
111 0 (4) [111, 222, 333, 444]
222 1 (4) [111, 222, 333, 444]
333 2 (4) [111, 222, 333, 444]
444 3 (4) [111, 222, 333, 444]
/*
说明: value:当前元素,index:元素索引值, arr:元素所属数组
*/

.map() 返回一个数组元素调用函数处理后的值的新数组

l.map(function(value, index, arr){
    return value + 1
});
(4) [112, 223, 334, 445]

五.运算符

+ - * / % ++ --
var x = 10;
undefined
x++;
x
11
var res1 = x++;  // 先赋值再自增,将x赋值给res1,x在自增
res1
11
var res2 = ++x;  // 先自增再赋值,x自增后再赋值给res2
res2
13

运算符

一.比较运算符

> >= < <= != == === !==
1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

二.逻辑运算符

&& || !

三.赋值运算符

= += -= *= /=

流程控制

if else判断

if (条件){
    代码块
}
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 x = 10;
switch(x){
    case 5:
    break
    console.log('haha')
    case 10:
    break
    console.log('heihei')
}
// 注意: switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

for 循环

for (条件){
代码块
}
var l = [111, 222, 333, 444];
for (let i=0;i<l.length;i++){
    console.log(l[i])
}
111
222
333
444

while 循环

while (条件){
    代码块
}
var x = 1;
while (x < 5){
    console.log(x)
    x++;
}
1
2
3
4

三元运算

x = 条件 ? 值1:值2
// 条件成立x = 值1,不成立x = 值2
var a = 3;
var b = 5;
var c = a > b ? a:b;
c
5

函数

函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

区别1:JavaScript用function定义函数

区别2:JavaScript函数的传参个数可以不等于形参个数

function f(参数1,参数2...){
    代码块
    return 值
}

无参函数

function f(){
console.log('hello world')
}
f()
hello world

有参函数

function f(a,b){
    console.log(arguments);
    console.log(a, b);
}
f(2, 5)
Arguments(2) [2, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
2 5
// 说明:arguments可以获得到函数接收的所有参数(是个数组),可以根据arguments实现函数调用时参数的限制
function f(a,b){
    if (arguments.length < 2){
    console.log('参数过少')
}else if (arguments.length > 2){
    console.log('参数过多')
}else{
    console.log(a, b);
}
}
f(1)
参数过少
f(1,2,3)
参数过多
f(1,2)
1 2

返回值 return

function f(a, b){
    return a + b;
}
f(1,2)
3
// 1.不写写返回值,默认返回 undefined
function f(a, b){
    console.log(a,b)
}
var res = f(1,2)
1 2
res
undefined  
// 2.有多个返回值时,只返回最后一个值,可以用数组的形式全部返回
function f(){
    return 11,22,33;
}
f()
33
function f(){
    return [11,22,33];
}
f()
(3) [11, 22, 33]

匿名函数

var s = function(a,b){
    return a+b;
}
s(1,2)
3

立即执行函数

//书写立即执行的函数，首先先写两个括号()(),第一个()内是函数,第二个()内是参数
(function(a,b){
    return a+b;
})(1,2)
3

补充:

ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};
​
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

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

局部变量：

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

全局变量：

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

变量生存周期：

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

自定义对象

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

var d = {'name':'lilie','age':18};
typeof(d);
"object"
d.name
"lilie"
d['name']
"lilie"
console.log(d.name);
lilie
console.log(d['age']);
18

new 关键字创建对象

var d = new Object;
d
{}
d.name = 'lilie';  // d对象添加name属性
"lilie"
d.age = 18;  // d对象添加age属性
18
d['hobby'] = 'read';  // d对象添加hobby属性
"read"
d
{name: "lilie", age: 18, hobby: "read"}

for循环遍历对象,只能取到键

for(var i in d){
    console.log(i,d[i]);
}
name lilie
age 18
hobby read

json对象

// stirngify() 相当于python中的 dumps
// parse() 相当于python中的 loads
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
obj
{name: "Alex", age: 18}
str
"{"name":"Alex","age":18}"

正则 RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666') true
reg2.test('jason666') true
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
s1.match(/s/g)
(3) ["s", "s", "s"]
​
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb'); true
reg2.test('egondsb'); true
reg2.lastIndex; 7
/*全局匹配时有一个lastIndex属性*/
// 校验是不穿参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();  // 不传默认是 undefined
true
reg2.test(undefined);
true

其他

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

 ES6 创建类

class Animal{
    constructor(name, age){
        this.name = name,
        this.age = age
    }  
    func(){
        console.log(this.name)
    }
}

var a = new Animal('熊大', 20)
d.func();

输出: 熊大

 ES6 模块板字符串

var = 1;
var = 2;

var = str = `哈哈${a}呵呵${b}`;
console.log(str);

输出: 哈哈1呵呵2

 ES6 对象单体模式

var per ={
    name:'熊大',
    age:20,
    fun(){
        console.log(this);
        }
    }        
    per.fun();

输出: per对象
若这里的fun是箭头函数,输出的是window对象