python前端基础知识----JavaScript

组成

ECMAScript 5.1 2011年 ---- ES5

一个完整的JavaScript由3个部分组成：

核心（ECMAScript）
文档对象模型（DOM）Document Object Model，整合js，css，html 。
浏览器对象模型（BOM） Browser Object Model，真个和js和浏览器。

js引入

方式1：

<script>
    // js代码
    alert('澳门皇家赌场上线了！！！')
</script>

方式2：

<script src="test.js"></script>

注释

// 这是单行注释
/*
这是多行注释
*/

结束符

以分号为结束，和缩进无关系。

JavaScript语言基础

在谷歌浏览器的Console里做js代码测试

变量名

可以使用_,数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名。
```
var a = 10;
```
注意：

区分大小写

驼峰命名规则，首字母大写

保留字不行

基础数据类型

动态类型

var x; //此时x的值为undefined
x = 1; // 此时为数字
x = 'nihao'; //此时为字符串

数值（Number）

不区分整形和浮点型

var x = 1;
typeof(x); //number类型

字符串（String）

var c = 'alexsb';
typeof(c); //'string'
var c2 = 'alc';
c1 = c + c2;  //alexsbalc  拼接

常用方法

方法	说明
.length #不加括号的是属性	返回长度
.trim() #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx	拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

var a = 'hello'
undefined
a
"hello"
a.length
5
var b = '    hello'
undefined
b
"    hello"
b.trim()
"hello"
a.charAt(3)
"l"
a.concat(b.trim())
"hellohello"
a.indexOf('e')
1
a.indexOf('1')
-1
a.indexOf('l')
2
a.indexOf('l', 2)
2
a.slice(2,4)
"ll"
a.toUpperCase()
"HELLO"
a.toLowerCase()
"hello"
a.split('e')
(2) ["h", "llo"]0: "h"1: "llo"length: 2

类型转换

parseInt('123');  // 整型的123
parseInt('123abc');  // 不报错，也转成整型的123
parseInt('abc123'); // NaN number类型
parseFloat("123.456");

布尔值

var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。

对象类型（object）

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。
var s = new String('world');
undefined
typeof(s)
"object"

复杂数据类型或者引用数据类型

数组Array

创建数组：
var a = [11, 22, 33];
undefined
a
(3) [11, 22, 33]
var b = new Array([22, 33]);
undefined
b
[Array(2)]
typeof a
"object"
typeof b
"object"

数组常用方法和属性

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join('+')，seq是连接符	将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

1.索引取值
    a
    (3) [11, 22, 33]
    a[1];
    22
2. .length
	a.length;
	3
3. 尾部追加元素
	a.push('a');
	(4) [11, 22, 33, 'a']
4. 尾部删除
	a.pop();
5. 头部插入
	a.unshift('aa');
	(5) ['aa', 11, 22, 33, 'a']
6. 头部删除
	a.shift();
	(4) ['aa', 11, 22, 33]
7. .sort()排序
	把元素转换成字符串，然后按ASCII码大小排序

自定义对象

var a = {'name':'li', 'age':22};
undefined
a
{name: "li", age: 22}
a["age"]
22
// for 循环遍历自定义对象
for (var i in a){
    console.log(a[i]);
}
VM1550:2 li
VM1550:2 22

运算符

算术运算符

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

比较运算符

// = < <= != == === !==
// == 弱等于（不比较数据类型） === 强等于 比较数据类型
var a = 10
undefined
var b = '10'
undefined
a == b
true
a === b
false
a != b
false
a !== b
true

逻辑运算符

&& || !  #and，or，非（取反）!null返回true

赋值运算符

= += -= *= /=  #n += 1其实就是n = n + 1

流程控制

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 a = 10;
switch(a){
    case 9:
        console.log('good');
    break;
    case 10:
        console.log('perfact');
    break;
}
// perfact

for循环

for (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
  console.log(i);
}循环数组：var l2 = ['aa','bb','dd','cc']方式1for (var i in l2){   console.log(i,l2[i]);}方式2for (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)  #注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。}

while循环

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

三元运算符

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

函数

函数的定义

// 普通函数定义
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;  //在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}
sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了，也不会报错，还是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

// 匿名函数方式，多和其他函数配合使用，后面我们就会用到了
var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
  return a + b;  
}
sum(1, 2);

// 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){
  return a + b;
})(1, 2);  //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

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

局部变量

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

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量的生存周期
- JavaScript变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。

作用域

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

python前端基础知识----JavaScript

python前端基础知识----JavaScript

组成

js引入

注释

结束符

JavaScript语言基础

变量名

声明变量使用 var 变量名。

基础数据类型

动态类型

数值（Number）

字符串（String）

类型转换

布尔值

对象类型（object）

复杂数据类型或者引用数据类型

数组Array

数组常用方法和属性

自定义对象

运算符

算术运算符

比较运算符

逻辑运算符

赋值运算符

流程控制

if-else

if-else if-else # 多条件

switch切换

for循环

while循环

三元运算符

函数

函数的定义

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

作用域

回到顶部