JavaScript 基础

北城余情 提交于 2019-12-04 14:31:21

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!