JavaScript

JavaScript简称js

一个完整的JavaScript实现是由以下3个不同部分组成。

1、核心(ECMAscript)——基础语法

2、文档对象模型(DOM) Document object model(整合js,css,html)

3、浏览器对象模型(BOM)Broswer object model(整合js和浏览器)

简单来说,ECMscript描述了JavaScript语言本身的相关内容

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript的引入方式

1、书写位置

  js文件、浏览器控制台、script标签

2、注释    CTRL+?(单行)、CTRL+shift+?(多行)

单行注释 //

多行注释/* */

3、结束符

JavaScript中的语句要以分号;为结束符

4、变量声明

  es5: var name = ‘lin'

  es6:let name = 'lin'

5、变量的命名

  基本上遵循python的变量命名规则即可

  下划线、驼峰体、大驼峰、小驼峰

6、常量

  python没有真正意义上的常量,全是大写就是常量

  js中有真正意义上的常量

  定义常量:

  const pi = 3.14

 

JavaScript数据类型

查看数据类型(typeof)

      var a = 1;
      var b = 1.11;
      console.log(typeof a);
      console.log(typeof b);

1、数值(number)

var a = 1;
var b = 1.11;

2、数据类型的转换

      var a = 1;
      var b = 1.11;
      var s = 'hello';
      console.log(parseInt(a))
      console.log(parseFloat(b))
      console.log(parseFloat(s))

上述结果

NaN,表示不是一个数字(Not a Number)

3、字符串

     var s = 'hello';
      var ss = "hello";
      // var  sss = '''aaaa'''    这个写法不可以
      console.log(s + ss);

结果:

 4、常用方法

方法

说明

.length

返回长度

.trim()

移除空白

.trimLeft()

移除左边的空白

.trimRight()

移除右边的空白

.charAt(n)

返回第n个字符

.concat(value, ...)

拼接

.indexOf(substring, start)

子序列位置

.substring(from, to)

根据索引获取子序列

.slice(start, end)

切片

.toLowerCase()

小写

.toUpperCase()

大写

.split(delimiter, limit)

分割

 5、ES6引入了模板字符串

占位符用${}

    var name = 'kevin';
    var age = 18;
    var gender ='male';
    var s = `my name is ${name}, my age is ${age}, ${name}, ${age}, ${gender}`;
    console.log(s);

6、布尔值

true、false (小写,也就是python中的True、False)

js中假有:(空字符串)、0、null、undefined、NaN都是false

7、null和undefined

null表示值是空,一般在需要指定或者清空一个变量时才会使用,如name=null

undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined,还有就是函数无明确返回值时,返回的也是undefined。只声明了变量还未赋值

8、数组(也就是python中的列表)

常用方法:

方法

说明

.length

数组的大小

.push(ele)

尾部追加元素

.pop()

获取尾部的元素

.unshift(ele)

头部插入元素

.shift()

头部移除元素

.slice(start, end)

切片

.reverse()

反转

.join(seq)

将数组元素连接成字符串

.concat(val, ...)

连接数组

.sort()

排序

.forEach()

将数组的每个元素传递给回调函数

.splice()

删除元素,并向数组添加新元素。

.map()

返回一个数组元素调用函数处理后的值的新数组

运算符

算数运算符:

+ - * / % ++ --

x++和++x出现在赋值运算式,x++会赋值再进行自增1运算,而++x会先进行自增再赋值

    var x = 10;
    var res1 = x++;  // 先赋值、在增加1
    var res2 = ++x; // 先增加,在赋值

    console.log(res1, res2);

结果:

比较运算符:

> >= < <= != == === !==

 ===  !== 强等于,即比较数值,又比较类型

 逻辑运算符:

&&(and) ||(or) !(not)

赋值运算符

= += -= *= /=

流程控制

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 day = new Date().getDay(); // 获取星期几 2
    switch (day) {
        case 0:
        case 1:
        case 2:
            console.log("Monday");
            break;
        case 3:
            console.log("Monday");
            break;
        case 4:
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            console.log("Monday");
            break;
        case 5:
            console.log("Monday");
            break;
        default:
            console.log("...")
    }

switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

for 

 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再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

函数

函数定义

JavaScript中的函数和python中的类似,定义方法有区别

普通函数定义:

function d1(){
        console.log('hihihi')
    }
    d1()

带参函数定义:

    function d2(a,b){
        console.log(arguments)  //存放多余的参数
        console.log(a,b)
    }
    d2(1,2,4,5)

带返回值的函数:

    function d3(a,b){
        return a+b;
    }
    d3(1,2);

匿名函数方式

    var d4 = function (a,b){
        console.log(a,b)
        return a+b;
    }
    d4(1,2)

立即执行函数

// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

es6中允许使用箭头=>定义函数

函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。

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

局部变量

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

全局变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样!

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

 自定义对象

      var a = {'name':'kevin', 'age':18, gender:'male'};
      // var a = new Object(); {}    //定义一个空的
      console.log(typeof a);
      console.log(a);
      console.log(a.name)

      // 增加一个属性
      a.salary = 1000;
      a.b = 1;
      console.log(a);

      //
      a.name = 'jack';
      console.log(a);

      // 删除
      delete a.name;
      console.log(a);

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());  //毫秒并不直接显示

date对象的方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

python中序列化和反序列化
import json

json.dumps
json.loads

# 在js中如何序列化和反序列化
JSON.stringify() # json.dumps
JSON.parse() # json.loads

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,11}/

正则校验数据

var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ // 第二种定义方式
var res = reg2.test('jason66688888888wwwwwwwwwwwwwwwwwww')
console.log(res);
结果:true
 
    // 全局匹配
    var s1 = 'egondsb dSb;'
    var res = s1.match(/s/gi)  // 全局匹配 global,  i: ignore---->忽略------>  .ignore------
    console.log(res);

忽略:忽略大小写

 

Math对象

abs(x)   返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)    返回数的自然对数(底为e)。
max(x,y)   返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

posted @ 2023-07-20 18:33  别管鱼油我了  阅读(5)  评论(0编辑  收藏  举报