JavaScript

目录

• JavaScript
• 注释及引入方式
• JavaScript中的变量
• JavaScript中的数据类型
  • 数值类
  • 字符类型:
  • 布尔值
  • undefined与undefined
  • 数组对象
• JavaScript中的运算符
• JavaScript中的流程控制
  • if判断
  • switch
  • for循环
  • 三元运算符
• JavaScript中的函数
• JavaScript中的内置对象

JavaScript

• 是前端的一门编程语言(也是有逻辑的)
• JavaScript与Java关系: 蹭热度
• JavaScript是可插入HTML页面的编程代码
• JavaScript插入HTML页面后, 可由所有的现代浏览器执行

注释及引入方式

• 注释

  // 单行注释
  
  /*
  多行注释1
  多行注释2
  */
  

• js的引入方式

  • 在script标签内部直接书写 <script> alert(123) </script> js代码
  • 通过script标签内的src参数引入外部的js文件: <script src="我的第一个js文件.js"></script>

语言学习过程: 变量-->基本数据类型-->流程控制-->函数-->面向对象

JavaScript中的变量

• 在js中声明变量需要使用关键字

  • var: 无论在何处声明, 声明的都是全局有效, var name = 'jason'

    var i = 5;
    
    for (var i = 0; i < 10; i++) {
        console.log(i)
    }
    
    console.log(i);  // 10, 局部影响全局
    

  • let: 可以只在局部有效(ES6新语法), let name = Oscar

    let n = 5;
    
    for (let n = 0; n < 10; n++) {
        console.log(n)
    } 
    
    console.log(n);  // 5, let局部声明只在局部有效, 不会影响全局
    

• js中的变量名的命名规范

  • 数字, 字母, 下划线, $
  • 推荐使用驼峰体命名, python推荐使用下划线命名
  • js代码默认是以分号作为结束符

• 编辑js代码: chrome-->f12-->console

  • console.log('hello world') == print

  • 清空不代表删除变量和函数, 只是把界面清除

  • python中没有真正意义上的常量, js中有常量, const定义真正意义上的常量, 不能被修改

    const pi = 3.14;
    
    console.log(pi);  // 3.14
    
    pi = 666;  // 报错, Assignment to constant variable.
    

JavaScript中的数据类型

数值类

• number

• NaN(Not a Number)也是数值类型, 但表示的意思为不是一个数字

  a = 1;
  typeof a;  // "number"
  
  b = 1.1;
  typeof b  // "number"
  
  h = NaN;
  typeof h;  //"number"
  
  var x = '123';
  var y = '12a';
  var z = 'abc';
  
  parseInt(x)  // 123
  parseInt(y)  // 12
  parseInt(z)  // NaN
  // parseFloat用法相同
  

字符类型:

• string
• 字符串的拼接: js中推荐使用加号拼接, python推荐使用%s, 而使用加号效率极低

c = 'jason';  // 不能使用三引号定义
typeof c;  // "string"

var name = '%egon';
var info = 'DSB ';
x = name + info; // "%egonDSB "

name.length;  // 4
info.trim();  // "DSB", == strip()
name.trim('%');  // "%egon", 不能加参数去除指定字符

name.charAt(0);  // "%", 索引取值
name.indexOf('g');  // 2, 根据字母返回索引, "o"要大写, 没有为-1

name.concat('dsb');  // "%egondsb", 字符串拼接

name.substring(1, 4);  // "ego", 索引切片, 顾头不顾尾
name.slice(0, -1);  // "%ego", 索引切片, 与substring区别: slice可以识别负数索引
name.slice(2);  // "gon", 只有一个参数, 表示从参数索引开始取到最后

name.split('o');  // ["%eg", "n"], 将字符串以"o"分割成列表

var text = `
	nick,
	tank,
	jason
`;  // 定义多行文本, ``
var sentence = `
	my name is ${name}
`
sentence;  // my name is %egon, 模板字符串, 需要提前定义变量

• python补充

  res = 'jason'
  print(res.isupper())  # False
  print(res.islower())  # True
  # isupper, islower, 判断是否全大小写
  
  # 通常情况下, 如果变量名存的值是布尔值, 那么习惯性使用is_命名变量名, 例如: is_delete
  

布尔值

• true, false
• 在js中布尔值全部为小写
• 空字符串, 0, null, undefined, NaN对应的布尔值为false

undefined与undefined

• null表示变量的值为空, null可以手动清空一个变量的值, 使得该变量变为object类型, 值为null
• undefined表示值声明了变量, 但没有赋值, 函数无明确返回值时, 返回的也是undefined

t = true;
typeof t;  // "boolean"

g = undefined;
typeof g;  //"undefined"

数组对象

• 数组: []

• typeof是一个一元运算符, (类似于: ++, ! 等), 不是一个函数, 也不是一个语句

• symbol: 一种数据类型, 表示独一无二的值

  var lt = [1, 2, 3];
  typeof lt;  // "object"
  lt[0];  // 1
  lt.length;  // 3
  lt.push(666);  // 4, 往数组中添加值, 返回添加后的数组元素的个数
  lt.pop();  // 666, 获取数组最后一个元素并将其从数组中删除
  lt.unshift(0);  // 4, 从头部插入元素, 返回插入后的数组的元素的个数
  lt.shift();  // 0, 获取数组第一个元素并将其从数组中删除
  lt.join('&');  // "1&2&3", 将数组元素以'&'拼接成字符串
  
  lt.forEach(
  	function(element, index, obj_lt){
  		console.log(element, index, obj_lt)	
  	}
  )  // 1 0 [1, 2, 3], for循环取出每一个元素当做第一个参数传给函数, 第二个参数为元素索引, 第三个参数为元素的来源对象
  
  lt.splice(1, 1, 777)  // [2], 从索引为1的位置开始删除, 一共删除1个元素, 并将777添加到数组中对应的位置
  

• python中往列表中添加数据的方法:

  1. append, 尾部追加
  2. insert, 按照索引插入
  3. extend, 扩展列表, 内部其实就是for循环 + append

• python中列表删除元素的方法

  1. remove, 移除, 无返回值
  2. pop, 弹出, 返回弹出的元素
  3. del

• python后端常用内置函数

  • max,

  • zip,

  • filter,

  • reduce, 多个进去一个出来, functools: 具名元组, connections

  • from functools import wraps: 装饰器修复工具

    from functools import reduce
    
    lt = [11, 22, 33, 44, 55]
    
    res = reduce(lambda x, y: x + y, lt)
    print(res)
    
    '''
    1. 循环遍历列表中的每一个元素, 第一次取出两个值当做参数传入函数, 得到函数返回值 
    2. 第二次将第一次得到的函数返回值以及从列表中取出的下一个元素当做参数传入函数,
    3. 重复第二步直到得到最后的函数返回值
    4. 可以在lt后面再加一个参数指定起始位, 那么第一次只从列表中取一个元素
    '''
    

JavaScript中的运算符

var x = 10;
var res1 = x++;  
var res2 = ++x;  
res1;  // 10, 先赋值再自增
res2;  // 12, 先自增再赋值

var x1 = 5;
var x2 = '5';
x1 == x2;  // true, 弱等于, 内部自动转换成相同数据类型比较
x1 === x2;  // false, 强等于
// !=, 若不等于; !==, 强不等于

// 逻辑运算符: &&, 与; ||, 或; !, 非

JavaScript中的流程控制

if判断

var age = 28;
undefined
if (age > 30){
	console.log('你是个好人')
}
else if (age > 24){
	console.log('考虑一下')
}
else{
    console.log('嘿嘿嘿')
}
// 考虑一下, 括号内表示判断条件, 大括号内表示条件成立执行的代码块

switch

var today = 2;
switch (today){
    case 1:
        console.log('蹦迪');
        break;
    case 2:
        console.log('喝酒');
        break;
    case 3:
        console.log('学校');
        break;           
}
// 喝酒

for循环

var lt = [11, 22, 33];
for (let i = 0; i < lt.length; i++){
	console.log(lt[i])
}
// 11, 22, 33; 括号内为循环条件, 包括起始条件, 终止条件, 每次循环后的自增动作; 大括号内为每次循环执行的代码块

三元运算符

x = 1;
y = 2;
res = x > y ? 666 : 777;  // 777
// 先写条件, 条件成立执行问号后的语句, 条件不成立执行冒号后的语句

JavaScript中的函数

function f(a, b){
	if (arguments.length == 2){
        console.log(a, b)
    }
    else if (arguments.length > 2){
        console.log('参数传多了')
    }
    else{
        console.log('参数传少了')
    }
}

f(666, 777)  // 666, 777
f(666, 777, 888)  // 参数传多了
f(666)  // 参数传少了
// arguments, 内置对象, 可以接收所有用户传入的参数, 并以数组形式存放

// 立即执行函数
(
function (a, b){
    console.log(a, b)
}
)(666, 777)
// 666, 777; 相当于匿名函数加括号直接调用

// 箭头函数
var sum = (num1, num2) => num1 + num2;
sum(666, 777);  // 1443
/*
等价于
var sum = function (num1, num2){
	return num1 + num2;
}
*/

JavaScript中的内置对象

• 自定义对象

  var user_dic = {'user_name': 'jason', 'user_pwd': 123};
  typeof user_dic;  // "object"
  
  user_dic.user_name  // "jason"
  
  for (let key in user_dic){
      console.log(key, user_dic[key])  // user_dic.key会报错, 因为key取出的是字符串, 而不是变量名
  }
  
  // 标准的创建方式, 定义对象的关键字: new
  var my_object = new Object();  // Object中的O必须要大写
  my_object.user_name = 'tank';
  my_object.user_pwd = 456;
  my_object;  // {user_name: "tank", user_pwd: 456}
  
  

• 日期对象

  var d = new Date();
  console.log(d.toLocaleString());  // 转换成当地时间, 2019/11/17 下午1:35:02
  d;  // 时间对象, Sun Nov 17 2019 13:35:02 GMT+0800 (中国标准时间)
  d.getMonth();  // 10, 月份: 0~11
  d.getDay();  // 0, 星期几: 0~6(星期天~星期六)
  
  

• JSON对象

  var user_dic = {'user_name': 'jason', 'user_pwd': 123};
  var json_dic = JSON.stringify(user_dic);
  json_dic;  // "{"user_name":"jason","user_pwd":123}", 相当于python中的json.dumps
  var user_dic_duplicate = JSON.parse(json_dic);
  user_dic_duplicate;  // {user_name: "jason", user_pwd: 123}, 相当于python中的json.loads
  
  

• reg正则对象

  • reg: 正则, Asyn: 异步
  • [] 内, 以及 {} 内不能有空格

  // 定义正则的两种方式, 推荐使用第二种
  var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
  var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  // 匹配6~10位字符串, 第一位必须为字母, 其他为字母或数字
  
  // 校验
  reg2.test('egondsb');  // true
  
  // 全局匹配, 加字母g(global)
  var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
  reg3.test('egondsb');  // true
  reg3.lastIndex;  // 7, 一次匹配成功后会记住上一次匹配的位置
  reg3.test('egondsb');  // false
  reg3.lastIndex;  // 0, 匹配不到内容后索引会重置
  
  // test默认传undefined
  reg2.test();  // true
  reg2.test('undefined');  // true
  
  

• python中正则匹配的三种模式:

  • re.findall('正则表达式', '待匹配字符串'), 分组优先, 匹配成功一次后会继续匹配直至结束
  • re.match, 必须从第一个字符开始匹配, 匹配成功一次即结束
  • re.search, 全局匹配, 匹配成功一次即结束