前端——JavaScript

前端——JavaScript

目录

  • JavaScript简介
  • js的变量与常量
  • JS数据类型
  • 运算符
  • 流程控制
  • 函数
  • js内置对象

JavaScript简介

  • JavaScript 的概述

    JavaScript与Java没有关系，由于正值Java正火之时，创建的，为了蹭热度，才取名为JavaScript

  • JavaScript与ECMAScript的关系

    ECMAScript可以理解为标准，也就是语言的规则。

    JavaScript是ECMAScript的一种实现。

    可理解为ECMAScript相当于接口，JavaScript则是实现类。

  • 版本迭代

    年份 名称 描述
    1997 ECMAScript 1 第一个版本
    1998 ECMAScript 2 版本变更
    1999 ECMAScript 3 添加正则表达式添加try/catch
    ECMAScript 4 没有发布
    2009 ECMAScript 5 添加"strict mode"严格模式添加JSON支持
    2011 ECMAScript 5.1 版本变更
    2015 ECMAScript 6 添加类和模块
    2016 ECMAScript 7 增加指数运算符（**）增加Array.prototype.includes

  • JavaScript 实现 的组成部分

    1.核心（ECMAScript）

    2.文档对象模型 （BOM） 整合js，css，html

    3.浏览器对象模型（BOM）整合js和浏览器

  • JavaScript 的引入方式

    1. Script 标签内写入代码

      <script>
  // 在这里写你的JS代码
</script>

    2. 引入额外的JS文件

      <script src="myscript.js"></script>

  • JavaScript语言规范

    语言规范 符号
    注释 // 注释内容 或 /* 注释内容 */
    结束符 ；（分号）

  • 总结

    ECMAScript 描述了JavaScript语言本身的相关内容。

    JavaScript 是脚本语言
    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

    JavaScript 很容易学习。

js的变量与常量

  • 变量

    1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头

    2.声明变量使用 var 变量名；的格式来进行声明 如 ： var name = 'a'; var age = 18;

  • 变量的注意事项

    1. 变量名是区分大小写的。
    2. 推荐使用驼峰式命名规则。
    3. 保留字不能用做变量名

  • JavaScript声明变量所需要的关键字

    关键字 作用
    var 全局有效
    let 若在局部名称空间中使用，则仅在局部名称空间有效
    const 定义常量

  • js 是的动态类型

    变量名绑定的数据值类型不固定

       var name = 'jason'
	name = 123
   	name = [11, 22, 33, 44]

JS数据类型

在js中查看数据类型可以使用 typeof

  • 数值类型

    在js中整型浮点型统称为数值类型number
    parseInt()
    parseFloat()
    NaN:Not A Number 不是一个数字

  • 字符串类型

    1. 字符串string
      var name = 'jason'
      var name = "jason"
      var name = jason 模板字符串

    2. 内置方法

      方法 说明
      .length 返回长度
      .trim() 移除空白
      .trimLeft() 移除左边的空白
      .trimRight() 移除右边的空白
      .charAt(n) 返回第n个字符
      .concat(value, ...) 拼接
      .indexOf(substring, start) 子序列位置
      .substring(from, to) 根据索引获取子序列
      .slice(start, end) 切片
      .toLowerCase() 小写
      .toUpperCase() 大写
      .split(delimiter, limit) 分割

    3. 拼接字符串一般使用“+”

      特点
      string.slice(start, stop) 如果 start > stop 不会交换两者
      如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
      如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
      string.substring(start, stop) 如果 start > stop ，start和stop将被交换
      如果参数是负数或者不是数字，将会被0替换

  • 布尔值

    1. python和js中布尔值的区别，js的首字母是小写，python的是大写

      布尔值 python js
      对 True true
      错 False( 0, None, ' ' , [ ], { }... ) false(（空字符串）,0 , null, undefined, NaN)

    2. null 和 undefined 的区别

      null: 表示空值，一般在需要指定或者清空的时候才会使用

      null可以手动清空一个变量的值，使得该变量变为object类型，值为null

      undefined: 当声明一个变量但未初始化时，该变量默认值是undefined，函数无明确的返回值时，返回的也是undefined

      undefined则表示只声明了变量，但还没有赋值。

  • 对象

    在JS中也是与python一样，一切皆对象

    对象只是带有属性和方法的特殊数据类型。

    1. 数组

      数组的作用：

      ​ 使用单独的变量名来存储一系列的值

      var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

      数组的常用方法：

      方法 说明
      .length 数组的大小
      .push(ele) 尾部追加元素
      .pop() 获取尾部的元素
      .unshift(ele) 头部插入元素
      .shift() 头部移除元素
      .slice(start, end) 切片
      .reverse() 反转
      .join(seq) 将数组元素连接成字符串
      .concat(val, ...) 连接数组
      .sort() 排序
      .forEach() 将数组的每个元素传递给回调函数
      .splice() 删除元素，并向数组添加新元素。
      .map() 返回一个数组元素调用函数处理后的值的新数组

    2. 数组的部分方法用法

      • forEach()

        语法：

        ​ forEach(function(currentValue, index, arr), thisValue)

        类似于for循环，依次拿到数组(thisValue)中的每一个数据值交给前面的函数（function(currentValue, index, arr) 可视为匿名函数）

        function(currentValue, index, arr)： 数组中的每个函数都需要调用函数

        currentValue: 指的是 当前元素

        index：可选 指的是当前元素的索引值

        arr: 指的是当前元素所属的数组对象

        thisValue: 指的是 传递给函数的值一般用 “this” 如果这个参数为空，则undefined会传递给“this”值

        var arr1 = [11, 22, 33, 44];
arr1.forEach(function(value){
    console.log(value)    // 相当于python中的输出print()
})
// 结果  11 22 33 44

      • splice()

        语法：

        ​ splice(index,howmany,item1,.....,itemX)

        参数

        参数 描述
        index 必需。规定从何处添加/删除元素。
        该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
        howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
        如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
        item1, ..., itemX 可选。要添加到数组的新元素

      • map()

        语法：

        ​ map(function(currentValue,index,arr), thisValue)

        参数：

        参数 描述
        function(currentValue, index, arr) 函数，数组中的每个元素都会执行这函数函数参数
        currentValue 当前元素的值
        index 可选。当期元素的索引值
        arr 当期元素属于的数组对象
        .thisValue 对象作为该执行回调时使用
        传递给函数，用作 "this" 的值
        如果省略了 thisValue ，"this" 的值为 "undefined"

  • 自定义对象

    js中的自定义对象相当于python中的字典

    1. 自定义对象的定义方式：

      定义方式1：
	let d1 = {'name': 'break', 'age':18}
定义方式2：
	let d2 = new Object()

    2. 自定义对象如何操作数据值

      自定义对象操作数据值的方式更加简单 直接使用句点符

运算符

运算符 所代表的含义
var x=10; 让10赋值给X
var res1 = x++; 先赋值后自增
var res2 = ++x； 先自增后赋值
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
&& 与(等价于python中的and)
|| 或(等价于python中的or)
！ 非(等价于python中的not)

流程控制

  • 分支结构

    1.单if分支

    if(条件){条件成立之后执行的代码}

    2.if...else分支

    if(条件){
            条件成立之后执行的代码
        }else{
            条件不成立之后执行的代码
        }

    3.if...elif...else分支

    if(条件1){
            条件1成立之后执行的代码
        }else if(条件2){
            条件1不成立条件2成立执行的代码
        }
        else{
            条件不成立之后执行的代码
        }

    4.多判断分支

    var day = new Date().getDay();
switch (day) {
  case 0:
  	console.log("Sunday");
  	break;
  case 1:
  	console.log("Monday");
  	break;
  default:
  	console.log("...")
}

  • 循环结构

    for(let i=1;i<101;i++){
        console.log(i)
    }

while(条件){
    循环体代码
}

函数

  • js函数的语法结构

    function 函数名(形参){
    函数体代码
    return 返回值
    }

  • js函数

    function func(a, b){
    console.log(a, b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a, b){
    if(arguments.length===2){
       console.log(a, b) 
    }else{
       console.log('去你妹的 参数都没给我!!!')
    }
    
}

  • 匿名函数方式

    var sum = function(a, b){
  return a + b;
}
sum(1, 2);

  • 箭头函数

     var f = function(v){
      return v;
    }
	 var f = v => v;
    
    
    var f = () => 5;
    // 等同于
    var f = function(){return 5};

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2){
      return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
    }

js内置对象

类似于python中的内置函数或者内置模块

  • 内置对象的固定语法

    var 变量名 = new 内置对象名（）;

  • Data日期对象

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

  • JSON序列化对象

    python与js中序列化

    json python js
    序列号 .dumps()
    .dump()    		 .stringify()
    反序列化 .loads()
    .load()    		 .parse() 
    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}$/;

    注意事项：

    1. 正则表达式中不能有空格

      reg1.test('asd666')
reg2.test('asd666')

    2. 全局匹配时有一个lastIndex属性

      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;

    3. 在校验的时候不传参数hi默认传参（undefined）

      var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();
posted @ 2022-08-25 22:53  Nirvana*  阅读(30)  评论(0)    收藏  举报