首页 > 编程语言 >前端知识之JS(javascirpt)

前端知识之JS(javascirpt)

时间:2022-12-05 16:46:20浏览次数:46  
标签:前端 JS javascirpt let 条件 var js 代码

目录

JS简介

全称JavaScript 是一种具有函数优先的轻量级、解释型或即时编译的编程语言 它是一门前端工程师的编程语言

JS基础

1.注释语法

1. 注释语法
	//	单行注释
	/*多行注释*/

2.引入JS的做种方式

  1. head内script标签内编写
  2. head内script标签src属性引入外部js资源
  3. body内最底部通过script标签src标签属性引入外部就是资源(最常用)

PS:注意页面的加载是从上往下的 所以操作标签js代码一定要等待标签加载完毕在执行才可以正产运行

3.结束符号

​ 分号(很多时候不写也没问题)

变量与常量

  1. pycharm创建文件或者html文件(适合编写较为复杂的js代码)
  2. 浏览器提供编写js代码的环境

JavaScript的变量可以使用_、数字、字母、$组成 不能以数字开头

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

var
	var name = 'jason';
let
	let name = 'tony';
	ps:let是ECMA6新语法 可以在局部定义变量不影响全局
在js中声明常量也需要使用关键字
const
	const pi = 3.14;

基本数据类型

在js中查看数据类型的方式 typeof

1.数字类型(Number)

在js中整型与浮点型不分家 都叫Number

NaN也属于数值类型 意思是:不是一个数字(Not A Number)

2.字符类型(string)

单引号		'jason'
双引号		"jason"
模板字符串	`jason`
let name1 = 'jason'
let age1 = 18
underfined
let desc = `my name is ${name1} my age is ${age1}`
console.log(desc);	// 得到my name is jason my age is 18

1.字符串拼接推荐使用加号

var a = 'hello';
var b = 'world';
var c = a + b;
consle.log(c); // 得到hellworld

2.常见内置方法

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

3.布尔类型(Boolean)

js里面的布尔值与Python不同

js是纯小写 而python中是首字母大写

4.null和underfined

null表示值是空的 一般在需要指定或清空一个变量是才会使用 如 name = null;
underfined表示当声明一个变量但未初始化 该变量的默认值是underfined 且函数无明确的返回值时 返回的也是undefined

5.对象(object)

对象之数组(Array)>>>: 类似于python中的列表

let l1 = []

对象之自定义对象(object)>>>: 类似于python的字典

let d1 = {'name':'jason',}
let d2 = new.object();

运算符

1. 算术运算符

+ - * / ++(自增1) --(自减1)
var x=10;
var res1=x++;	加号在后面	先赋值后自增
var res2=++x;	加号在前面	先自增后赋值

2. 比较运算符

!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
如:
A	1 == "1"	// true 弱相等
B	1 === "1"	// false 强等于
A 上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将
B 数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误

3. 逻辑运算符

	&&(与)	||(或)	!(非)

流程控制

if判断

  1. 单if分支
if (条件){
    条件成立的子代码
}
  1. if...else分支
if(条件){
    条件成立执行的代码
}else{
    条件不成立执行的代码
}
如:
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}
  1. if...else if...else分支
if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件1不成立条件2执行的代码
}
else{
    条件1和条件2都不成立执行的代码
}
如:
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}
  1. 如果分支结构中else if很多还可以考虑使用switch语法
switch(条件){
    case 条件1:
        条件1成立执行的代码;
        break; //如果没有break会基于某个case一直执行下去
    case 条件2:
        条件2成立执行的代码;
        break;
    case 条件3:
        条件3成立执行的代码;
        break;
    case 条件4:
        条件4成立执行的代码;
        break;
    default:
        条件都不满足执行的代码
}

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

for循环

for(起始条件;循环条件;条件处理){
    循环体代码
}
for(let i=0;i<10;i++){
    consle.log(i)
}
let res = {'name':'jason','age':18}
for(let k in dd){
    conlse.log(k)
}

while循环

while(循环条件){
    循环体代码
}
var i = 0;
while (i<10) {
    console.log(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;

函数

  1. JS中函数的形参与实个数可以不对应 传少了就是underfined 传多了不用
  2. 函数体点中有一个关键字arguments用来接收所有的实参
  3. 函数的返回值如果有多个需要自己处理成一个整体
function 函数名(形参){
    //注释
    函数体代码
    return 返回值
}

匿名函数

var s1 = function(a,b){
    return a + b;
}

箭头函数

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;
}

内置对象

Date日期对象

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

JSON对象

let dd = {name: 'jason',age: 18}
JSON.stringify(dd)	//序列化
JSON.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.全局模式的规律
	lasrtIndex
2.test匹配数据不传 默认传underfined

标签:前端,JS,javascirpt,let,条件,var,js,代码
From: https://www.cnblogs.com/xiao-fu-zi/p/16952712.html

相关文章

  • 前端 word 导出
    前端的常规导出,一般是excel,下载图片什么。word的导出有点不太一样。导出前的准备,安装相关依赖importDocxtemplaterfrom'docxtemplater'importPizZipfrom'pizzi......
  • js完美转换阿拉伯数字为数字繁写
    //阿拉伯数字转换为简写汉字functionArabia_To_SimplifiedChinese(Num){  for(vari=Num.length-1;i>=0;i--){    Num=Num.replace(",",""......
  • 用NetCore + ReactJS 实现一个前后端分离的网站 (5) 日志 - log4net & AOP切面编程
    用NetCore+ReactJS实现一个前后端分离的网站(5)日志-log4net&AOP切面编程1.前言日志始终是跟踪与调试程序的最佳手段,因为调试难以溯及既往,而日志则能忠实地记......
  • JS获取数组中元素的最大值
    方法1:Math.max.apply()Math.max()方法默认接收多个参数并返回最大值,而apply()方法接收一个数组,将数组中的每一项作为参数传给调用函数,搭配使用可以得到最大值。const......
  • node js的token生成与验证之“jsonwebtoken“
    ❤️在繁华中自律,在落魄中自愈❤️目录​​一、生成token​​​​二、验证token​​​​三、完整的jwt.js代码​​​​四、配合express使用token验证​​​​五、/api/login接......
  • 精选、前端开发N个必备的 VSCode 插件
    目录​​一、汉化vscode​​​​二、vue2代码提示​​​​三、格式化高亮vue代码​​​​四、实时预览网页效果​​​​五、html标签​​​​六、格式化代码​​​​七、规......
  • 前端知识-05-Ajax
    一、简介AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术。AJAX=异步 JavaScript 和 XML(标准通用标记语言的子......
  • 前端知识-06-JSON
    什么是JSON?JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数据交换格式JSON独立于语言 *JSON具有自我描述性,更易理解* ......
  • 前端知识-07-Bootstrap框架
    Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局,并且在V3版本......
  • 前端知识-08-jQuery
    jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大地简......