目录
ECMASript 和 JavaScript的关系:
ECMAScript是JavaScript的规格,后者是前者的实现。
完整的JavaScript是由以下3部分组成的:
1、ECMAScript 是核心
2、DOM 文档对象模型 Document Object model (整合js,css,html)
3、BOM 浏览器对象模型 Broswer object model(整合js和浏览器)
JavaScript特点:
脚本语言,轻量级编程语言,可插入HTML页面
JavaScript引入方式:
引入额外的JS文件:
JavaScript语言规范:
注释://单行注释。 /多行注释/
结束符号:JavaScript中的语句要以分号(;)为结束符。
JavaScript语言基础
常量声明:“const 常量名”
变量声明:
1、变量名可以使用数字、字母、下划线、$组成,不能以数字开头。
2、声明变量名使用这种格式:
“var 变量名;”定义全局变量
“let 变量名;”定义局部变量,for循环的计数器就很适合let命令
注意:
1、变量名是区分大小写的
2、推荐使用驼峰体命名规则
3、保留字和关键字不能用作变量名
JavaScript数据类型:
JavaScript拥有动态类型
var x; // 此时x未赋值,是动态的,给他赋值数字,他就是数字,给他赋值字符串,他就是字符串
数值(number)
JavaScript不分整型和浮点型,只有一种数字类型。
还有一种NaN,表示不是一个数字(Not a Number)
常用方法:
parseInt("123") // 返回 123
parseInt("ABC") // 返回 NaN,表示该值不是数字
parseFloat("123.456") // 返回123.456
字符串(string):
var a = "hello,"
var b = "beauty!"
var c = a+b;
console.log(c); //得到hello,beauty!
字符串的常用方法:
.length-->返回长度
.trim()-->移除空白
.trimLight()-->移除左边空白
.trimRight()-->移除右边空白
.charAt(n)--> 返回第n个字符
.concat(value, ...)-->拼接
indexOf(substring, start)-->子序列位置
.substring(from, to)-->根据索引获取子序列
.slice(start, end)-->切片
.toLowerCase()-->小写
.toUpperCase()-->大写
.split(delimiter, limit)-->分割
模板字符串(template string):
这是ES6中特有的,是增强型字符串,用反引号标识,可以当作普通字符串使用,可以定义多行字符串,可以在字符串中签如变量;
这是普通字符串
多行 字符串
var name='allen', age='20';
My name is ${name}, I am {age}
Boolean 布尔值:
空、0、null、undefined、NaN
对象(Object)
JavaScript中的所有事物都是对象。JavaScript允许自定义对象。
对象是带有属性和方法的特殊数据类型。
数组:
数组对象的作用是:使用单独的变量名来存储多个值。类似于Python中的列表。
数组的常用方法:
.length 数组的大小
.push(ele) --> 尾部追加元素
.pop() --> 获取尾部的元素
.unshift(ele) --> 头部插入元素
.shift() --> 头部移除元素
.slice(start, end) --> 切片
.reverse() --> 反转
.join(seq) --> 将数组元素连接成字符串
.concat(val, ...) --> 连接数组
.sort() --> 排序
.forEach() --> 将数组的每个元素传递给回调函数
.splice() --> 删除元素,并向数组添加新元素。
.map() --> 返回一个数组元素调用函数处理后的值的新数组
forEach()函数
forEach(function(currentValue,index,arr),thisValue)
作用是:for循环出每一个值交给function处理
splice()函数
splice(index,howmany,item 1,...item n)
第一个参数是起始位置,第二个参数是要删除的个数,删了之后把后边的参数添加进去
ES6新引入了一种新的原始数据类型(Symbol),表示独一无二的值。它是JavaScript语言的第7种数据类型。
typeof是用来查看JS数据类型的,是一个一元运算符号,不是一个函数,也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一:
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
运算符:
算术运算符:+ - * / % ++ --
x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
比较运算符:
= < <= != == === !==
1 == “1” // true 弱等于
1 === "1" // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
逻辑运算符:&& || !
赋值运算符: = += -= *= /=
流程控制:
if 流程控制
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流程控制
switch: var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
for循环
for: for (var i = 0;i<10; i++){ console.log(i) }
while循环
while: var i = 0; while (i<10) { console.log(i); i++; }
三元运算:
var a = 1; var b = 2; var c = a > b ? a : b
求c的值,条件判断a>b,成立就取a,不成立就取b。
可以嵌套使用:
var a = 1, b = 2; var c = a > b ? a : (b=='5') ? a : b; c的值为2
函数
函数定义:
JavaScript中的函数和python中的非常相似,只是定义方式有点区别
普通函数定义:
function f1(){console.log("hello world!")}
带参数的函数:
function f2(a,b){ console.log(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);
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;
}
函数中的arguments参数
arguments也接收了所有传入的参数,下面例子中arguments接收了3个参数
function add(a,b,c){
consloe.log(b+c);
consloe.log(arguments.length);
consloe.log(arguments[0]);
}
add(1,2,3)
结果显示:
5
3
1
注意:函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
函数的全局变量和局部变量:
局部变量:
在JavaScript函数内部声明的变量是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部),只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的声明周期从他们被声明开始,
局部变量会在函数运行后被删除。
全局变量会在页面关闭后被删除。
作用域:
首先在函数内部查找变量,找不到则到外层函数查找,追捕找到最外层。与python作用域查找顺序相似。
例一、
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(); //输出结果是?
词法分析:
JavaScript中在调用函数的那一瞬间,会先进行词法分析。
词法分析的过程:
当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:
1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。
函数内部无论是使用参数还是使用局部变量都到AO上找。
看两个例子:
例一:
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
}
foo(); // 问:执行foo()之后的结果是?
结果是:
22
例二:
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
}
console.log(age);
}
foo(); // 执行后的结果是?
结果是:
ƒ age(){
console.log("呵呵");
}
22
22
例二解析:
词法分析过程:
1、分析参数,有一个参数,形成一个 AO.age=undefine;
2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
3、分析函数声明,有一个 function age(){...} 声明, 则把原有的 age 覆盖成 AO.age=function(){...};
最终,AO上的属性只有一个age,并且值为一个函数声明
执行过程:
注意:执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值, 此时AO.age=22 ,所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
内置对象和方法:
JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
我们在学习基本数据类型的时候已经带大家了解了,JavaScript中的Number对象、String对象、Array对象等。
注意var s1 = "abc"和var s2 = new String("abc")的区别:typeof s1 --> string而 typeof s2 --> Object
自定义对象:
JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键。
Date对象:
创建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()); //毫秒并不直接显示
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);
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')
reg2.test('jason666')
/第一个注意事项,正则表达式中不能有空格/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/第二个注意事项,全局匹配时有一个lastIndex属性/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
补充:
交互数据的格式
python后端 前端js
json.dumps JSON.stringify
json.loads JSON.parse
python后端常用的内置函数
map 映射
zip 拉链
filter 过滤
reduce 多个进去一个出来
python中往列表中添加数据的方法
1.append 尾部追加
l = [1,2]
l.append([1,2,33,4])
l = [1,2,[1,2,33,4]]
2.insert 按照索引插入
3.extend 扩展列表
内部其实就是for循环+append
l = [1,2]
l.extend([1,2,3,4])
l = [1,2,1,2,3,4]
python中列表删除元素有几种方式
1.remove 移除
2.pop 弹出
3.del