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

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代码测试

  1. 变量名

    可以使用_,数字，字母，$组成，不能以数字开头。

  2. 声明变量使用 var 变量名。

    var a = 10;

    注意：

    ​ 区分大小写

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

    ​ 保留字不行

  3. 基础数据类型

    动态类型

    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"

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

    数组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

  5. 运算符

    算术运算符

    + - * / % ++ --  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

  6. 流程控制

    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

  7. 函数

    函数的定义

    // 普通函数定义
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变量的生命期从它们被声明的时间开始。
      • 局部变量会在函数运行以后被删除。
      • 全局变量会在页面关闭后被删除。

    作用域

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

回到顶部

posted @ 2020-11-02 19:37  笨鸟先飞啊  阅读(100)  评论(0)  编辑  收藏  举报