分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

JS简介

发布时间:2023-09-06 01:32责任编辑:顾先生关键词:暂无标签

核心知识点:

1.ES6/7标准的意思

2.JS的两种引入方式、两种注释方式(单行注释和多行注释)、变量的命名、语言规范(以分号结尾)

3.数字类型

  a.parseInt()

  b.parseFloat()

4.字符串类型

  方法:length() trim() trimLeft() trimRight() concat() indexOf() charAt() substring() slice() split() tolowerCase() toupperCase() 

5.数组

  方法:length() concat() join() push() pop() unshift() shift() sort() reverse() slice()

6.布尔类型(true、false)

7.对象(类似python中的字典)

8.undefined和null的区别

9.运算符:算术运算符、比较运算符、逻辑运算符、赋值运算符

10.流程控制

  a.if-else 如果-否则

  b.if-else if-else 如果-或-否

  c.witch多选一

  d.for循环

  e.while循环

  f.三元运算符(表达式?值1:值2)

一、概论

1.JavaScript的历史

1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客户端执行的语言)。

Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator2.0产品中开发出一套livescript的脚本语言。Sun和Netscape共同完成,后改名叫Javascript。

微软随后模仿在其IE3.0的产品中搭载了一个Javascript的克隆版叫Jscript。

为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准(ISO/IEC-16262)。从此Web浏览器就开始努力将ECMAScript作为JavaScript实现的基础,EcmaScript就是规范。

2.ECMAScript

尽管ECMAScript是以一个重要的标准,但它并不是JavaScript唯一部分,当然,也不是唯一被标准化的部分。实际上,一个完整的JavaScript实现是由一下3个不同部分组成的:

  • 核心(ECMAScript)
  • 文档对象模型(DOM)Document object model(整合js,css,html)
  • 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
  • Javascript在开发中绝大多数情况是基于对象的,也是面向对象的

简单的说,ECMAScript描述了以下内容:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象(封装、继承、多态)基于对象的语言使用对象

二、JavaScript的基础知识

1.JavaScript引入方式

一般来说JavaScript有两种引入方式:

(1)Script标签内写代码

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

(2)引入额外的JS文件

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

2.JavaScript的注释方式

注释同样有两种方式,一种是单行注释,一种是多行注释。

// 这是单行注释/*这是多行注释*/

3.JavaScript的语言规范

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

4.JavaScript的变量规范

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

声明变量使用var 变量名;格式来进行声明。

#先声明变量然后赋值var name; name = "kebi";#直接赋值 var name2 = "maoxian";

注意:变量名是区分大小写的,推荐使用驼峰式命名规则。

三、JavaScript数据类型

JavaScript拥有动态类型

var user; ??//属于undefined,就没没有值var name3 = "xiaoniao"; ?//字符串类型var age = 18; ?//数字类型

1.数字类型

JavaScript不区分整形和浮点型,就只有一种数字类型。

var a = 12.34;var b = 20;var c = 123e5; ?// 12300000var d = 123e-5; ?// 0.00123

常用方法:

parseInt("123") ?// 返回123parseInt("ABC") ?// 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。parseFloat("123.456") ?// 返回123.456

2.字符串

var a = "Hello"var b = "world;var c = a + b; console.log(c); ?// 得到Helloworld

常用方法:

方法说明
length返回长度
trim()移除空白
trimLeft()移除左边空白
trimRight()移除右边空白
charAt(n)返回第n个字符
concat(value,...)拼接
indexOf(substring,start)子序列位置
substring(from,to)根据索引获取子序列
slice(start,end)切片
toLowerCase()小写
toUpperCase()大写
split(delimiter,limit)分割
//1.length ?//长度var s = "kebi shaibi"s.length11//2.trim() ?//去空格var s = " ?kebi shaibi ?"s.trim()"kebi shaibi"//3.trimLeft() ?//去左边空格s.trimLeft()"kebi shaibi ?"//4.trimRight() ?//去右边空格s.trimRight()" ?kebi shaibi"//5.charAt() ?//根据索引返回对应的元素s2"kebi shaibi"s2.length11s2.charAt(0)"k"s2.charAt(10)"i"//6.concat() ?//连接字符串s2.concat("Ge")"kebi shaibiGe"//7.indexOf() ?//返回某个元素匹配的第一个的索引位置s2"kebi shaibi"s2.indexOf(" ")4s2.indexOf("i")3s2.indexOf("i",4) ?//可以指定开始匹配的位置8s2.indexOf("bi")2//8.substrings2.substring(2,4) //切片"bi//9.slices2.slice(2,4)"bi"s2.slice(-4,-1)"aib//slice和substring都可以用来切片,区别是substring不能使用负值//10.toLowerCase() ?//返回小写s3.toLowerCase()"kebi shuai ge ge//11.toUpperCase() //返回小写s3.toUpperCase()"KEBI SHUAI GE GE"//12.split() ?//将一个字符串切割,返回列表类型s3.split()["kebi shuai ge ge"]s3.split(" ",1)["kebi"]s3.split(" ",2)(2) ["kebi", "shuai"]s3.split(" ",8)(4) ["kebi", "shuai", "ge", "ge"]
字符串常用方法举例

3.布尔类型

与python不同的是,true和false都是小写。

var a = true;var b = false;

4.数组

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

数组常用的方法:

方法说明
length()数组的大小
push()尾部追加元素
pop()获取尾部的元素
unshift()头部插入元素
shift()头部移除元素
slice()切片
reverse()反转
join()将数组元素连接成字符串
concat(val,...)连接数组
sort()排序
var a = [1,2,3,4];//基本切片a[0]1a[2]3var b = [12,34,"kebi"]b[2]"kebi"a(4) [1, 2, 3, 4]//获取长度a.length4//追加一个元素a.push(666)5a(5) [1, 2, 3, 4, 666]//删除一个元素a.pop()666a(4) [1, 2, 3, 4]//头部插入一个元素a.unshift(‘one‘)5a(5) ["one", 1, 2, 3, 4]//从头部删除一个元素a.shift()"one"a(4) [1, 2, 3, 4]//切片a.slice(0,2)(2) [1, 2]//反转a.reverse()(4) [4, 3, 2, 1]//拼接a.join()"4,3,2,1"a(4) [4, 3, 2, 1]b//将多个数组的元素放在一起a.concat(b)(7) [4, 3, 2, 1, 12, 34, "kebi"]a(4) [4, 3, 2, 1]//排序a.sort()(4) [1, 2, 3, 4]
数组常用方法举例

遍历数组中的元素:

var a = [10, 20, 30, 40];for (var i=0;i<a.length;i++) { ?console.log(i);}

5.对象

类似于python中的字段数据类型

var a = {"name":"kebi","age":25}a.name"kebi"a.age25

遍历对象中的内容:

for (var i in a) { ???console.log(i,a[i]);}name kebiage 25

6.null和undefined

  • undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
  • null表示之不存在

undefuned表示声明了变量,但是还没有赋值。null声明了变量并且变量时空值。

7.类型查询

typeof "abc" ?// "string"typeof null ?// "object"typeof true ?// "boolean"typeof 123 // "number"

typeof是一个一元运算符,不是一个函数,也不是一个语句。

四、运算符

1.算数运算符(+ - * / ++ --)

//加法5+38//减法5-32//乘法5*315//除法5/31.6666666666666667//取余5%32

这里把++ -- 单独拿出来

var i = 1i ++ ?//i++先取值,后运算,此次返回值是计算之前的结果1i ??//计算之后的结果2 ?//++i ?//先计算后取值,返回的就是计算后的结果3i3i-- ?//先取值在计算3i2--i ?//先计算再取值1i1

2.比较运算符(> >= < <= != == === !==)

1 > 2false1 >= 2false1 < 2true1 <= 2true1 != 2true1 == 2false1 === 2false1 == "1"true1 === "1"false1 !== "1"true

注意:=== 和==的区别在于,==是比较值是否相同,===不仅要比较值还要比较类型。

3.逻辑运算符(&& || !)

4.赋值运算符(= += -= *= /=)

五、流程控制

1.if-else

if (a > 5) { ???console.log("yes");}else { ???console.log("no");}
yes

2.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");}

3.switch

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

4.for

for (var i=0;i<10;i++) { ?console.log(i);}

5.while

var i = 0;while (i < 10) { ?console.log(i); ?i++;}

6.三元运算

var a = 1;var b = 2;var c = a > b ? a : b;c2

六.函数

1.定义

Javascript中函数的定义和shell脚本中函数的定义非常类似

// 普通函数定义function sum(a, b){ ?return a + b;}sum(1, 2)// 匿名函数方式var sum = function(a, b){ ?return a + b;}sum(1, 2)// 立即执行函数(function(a, b){ ?return a + b;})(1, 2);

2.函数中的变量和作用域

全局变量:定义在函数外部,并且推荐使用var进行显示声明

局部变量:定义在函数内部,并且必须使用var进行显示声明

作用域:首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

七、常用模块和方法

1.date

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

2.JSON

var str1 = ‘{"name": "Alex", "age": 18}‘;var obj1 = {"name": "Alex", "age": 18};// JSON字符串转换成对象var obj = JSON.parse(str1); // 对象转换成JSON字符串var str = JSON.stringify(obj1);

3.RegExp

//RegExp对象 ???// 在表单验证时使用该对象验证用户填入的字符串是否符合规则. ???//创建正则对象方式1 ?参数1 正则表达式 ?参数2 验证模式 ?g global / i 忽略大小写. //参数2一般填写g就可以,也有“gi”. ???// 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位 ???//----------------------------创建方式1 ???/* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); ???// ???//验证字符串 ???var str = "bc123"; ???alert(reg1.test(str));// true ???????//----------------------------创建方式2 ?/填写正则表达式/匹配模式; ???var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; ???????alert(reg2.test(str));// true ????*/ ???//-------------------------------正则对象的方法------------------- ???????//test方法 ?==> ?测试一个字符串是否复合 正则规则. 返回值是true 和false. ???????//-------------------------String 中与正则结合的4个方法------------------. ???// macth search split replace ???var str = "hello world"; ???????//alert(str.match(/o/g)); //查找字符串中 复合正则的 内容. ???//alert(str.search(/h/g));// 0 ?查找字符串中符合正则表达式的内容位置 ???//alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组; ???alert(str.replace(/o/g, "s")); // hells wsrld ?对字符串按照正则进行替换.

4.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) ???返回角的正切。

JS简介

原文地址:https://www.cnblogs.com/yangmingxianshen/p/8119527.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved