首页 > 其他分享 >JS基础简介

JS基础简介

时间:2022-12-05 20:56:32浏览次数:44  
标签:函数 简介 代码 基础 js 字符串 条件 var JS

JS基础简介

一、JS简介

   JavaScript(简称'js')是一种具有函数优先的轻量级、解释型或及时编译型的编程语言。虽然它是作为开发web页面的脚本语言而出名,但是它也被用到了很多的非浏览器环境中,JS基于原型编程,多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
   JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
    JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
主要功能:
嵌入动态文本于HTML页面。 
对浏览器事件做出响应。 
读写HTML元素。  
在数据被提交到服务器之前验证数据。 
检测访客的浏览器信息。控制cookies,包括创建和修改等。  
基于Node.js技术进行服务器端编程。 
语言组成:
ECMAScript,描述了该语言的语法和基本对象。 
文档对象模型(DOM),描述处理网页内容的方法和接口。 
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 

img

​ # 图JavaScript生成器和迭代器(了解)

二、JS基础

1.js的引入方式

1.在head内script标签内编写
  <script> js代码</script>
2.在head内script属性引入外部的js属性
   <script src='my.js'> </script>
3.body内最底部通过script标签src属性引入外部js属性(最常用)
ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行

2.基本语法

1.注释语法
  //  单行注释
  /**/  多行注释
2.结束符号
  分号(;) 很多时候不写也可以

3.变量与常量

js的变量名可以使用数字,字母,下划线,$等组成,不能以数字开头
1.var:声明是全局变量,全局有效
    var name = 'jason'
2.let:声明是局部的,只在局部名称空间有效
    let name = 'jia'
3.常量声明:常量时不可以重新绑定数据值
    const pi = 3.14
# 注意:
1.变量名是区分大小写的
2.推荐使用驼峰式命名规则
3.保留字不能用作变量名
4.js是动态类型,变量名绑定的数据值类型不固定

三、基本数据类型

1.数值类型(包括了整型和浮点型)

js不分整型和浮点型,就只有一种数字类型,即所有的数值都是数字类型
在js中查看数据类型的方法:typeof
1.js中只有数字一种类型
 var a = 12.33    #  typeof(a) ---> 'number'
 var b = 12       #  typeof(b) ---> 'number'
 var c = 12e4     #  typeof(c) ---> 'number'
 var d = 12e-4    #  typeof(d) ---> 'number'
2.NaN是一个特殊的数字,表示Not A Number,不是一个数字
    parseInt("12")        # 12
    parseInt("12.33")     # 12
    parseFloat('12.35')   # 12.35
    parseInt("ABC")       # NaN

2.字符串类型

默认是使用单引号和双引号,模板字符串是增强版的字符串,用反引号(``)标识,它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
1.字符串拼接(使用+号拼接)
var h1 = '今天吃到了娟带的大虾,很好吃,也很开心'
var h2 = '今天和好几天没见的薇薇抱了一下,真开心,有这些朋友在身边,是最幸福的事情'
var h3 = h1 + h2
'今天吃到了娟带的大虾,很好吃,也很开心今天和好几天没见的薇薇抱了一下,真开心,有这些朋友在身边,是最幸福的事情'

2.统计长度(length)
h3.length  -----> 55

3.移除空白
var h4 = '   以后有什么事情自己消化,不要全部倾诉给他,他也会烦的,记住!   '
h4.trim()     # 移除两边的空白字符
'以后有什么事情自己消化,不要全部倾诉给他,他也会烦的,记住!'
h4.trimLeft()   # 移除左边的空白字符
'以后有什么事情自己消化,不要全部倾诉给他,他也会烦的,记住!   '
h4.trimRight()   # 移除右边的空白字符
'   以后有什么事情自己消化,不要全部倾诉给他,他也会烦的,记住!'

4.切片操作
js中使用substring(start,stop),slice(start,stop)切片,前者不支持负数索引,后者支持
var h5 = '好好努力,精神独立,经济独立,改掉对别人的依赖,独立,自强。'
h5.substring(1,10)
'好努力,精神独立,'
h5.slice(4,19)
',精神独立,经济独立,改掉对别'
h5.slice(1,-17)
'好努力,精神独立,经济独'
h5.slice(-1,10)      
''                      # 支持负数索引,但是不支持倒着切

5.大小写转换
js中使用toLowerCase(),toUpperCase()转大小写
var s1 = 'abCD'
undefined
s1.toUpperCase()
'ABCD'
s1.toLocaleUpperCase()
'ABCD'

6.切割字符串
js 中使用split对字符串进行切割
h6.split('')
(6) ['1', '2', '3', '4', '5', '6']
.split(splitter,limit)-->(splitter;按照什么分割,limit:分割后返回完成后的列表中的几个数据(从左往右))

7.字符串的格式化
js中使用格式化字符串(小顿号esc下面的那个键搭配${}使用)
var h7 = '现在就只有一件事,好好学习,每天做好预习复习,充实每一天,别再把心思放在无关的事情上啦!'
var h8 = 'ヾ(◍°∇°◍)ノ゙'
console.log(`my target is ${h7} and ${h8}`);
VM3675:1 my target is 现在就只有一件事,好好学习,每天做好预习复习,充实每一天,别再把心思放在无关的事情上啦! and ヾ(◍°∇°◍)ノ゙

8.布尔类型(boolean)
js --->布尔值:true,false
false ---> ""(空字符串),0,null,NaN,underfined
Python --->布尔值:True,False
false ---> ""(空字符串),0,None,空字符串,空列表,空字典
var h9 = 123
var h10
Boolean(h9)  ----> true
Boolean(h10) ----> false

9.null和undefined
null表示值为空(就是曾经拥有过)
undefined表示没有定义(从来没有过)

10.数组(array)
在python中叫列表,在其它编程语言里几乎都叫数组。

11.对象(object)
js中一切皆对象
对象之自定义对象(Object)>>>:类似于python的字典
let h11 = {'name' : 'jia','pwd' : 123}
typeof h11    ---> 'object'
let d2 = new Object()
typeof d2     ---> 'object'
h11['name']
'jia'
h11.name
'jia'
h11.name = 'jason'
'jason'
js中的方法 js中的说明 VS Python中的方法 Python中的说明
.length() 数组大小 .len() 统计列表中数据值的个数
.push(ele)() 尾部追加元素 .append() 尾部追加元素(insert:指定位置插入,extend:扩展列表)
.pop() 获取尾部的元素 .pop() 删除尾部的数据值
.unshift(ele)() 头部插入元素 .insert() 指定位置插入(可以利用索引在头部插入元素)
.shift() 头部移除元素 .remove() 利用索引移除头部元素
.slice() 切片 [,] 索引切片
.reverse() 反转 .reverse() 将列表中的数据从右往左反转
.join() 将数组元素拼接成字符串 .join() 拼接列表的元素
.concat() 连接数组 .extend() 扩展列表
.sort() 排序 .sort() 默认升序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素,并向数组添加新元素
.map() 返回一个数组元素调用函数处理后的值的新数组 map映射 内置函数,老数据值变成新的数据值

四、常见运算符

1.算术运算符
+ - * / % ++(递加) --(递减) **(幂)
var s = 10
var s1 = s++;   # 先赋值再自增1   10
var s2 = ++s    # 先自增1再赋值   12

2.赋值运算符
=  +=  -=  *=  /=  %=

3.比较运算符
==(等于,弱)  ===(等值等型,强)  !==(值不等 弱)  !===(值不等 强) 
'5' == 5  ---->  true  'js会自动转换成相同的数据类型比较值是否一样'
'5' === 5  ---->  false
# 上面这种情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),所以当你用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误。

4.逻辑运算符
&&(与)   ||(或)    !(非)
5.类型运算符
typeof()  # 返回变量的类型

五、流程控制

1.单if分支
if(条件){
    条件成立执行的代码
}
2.if....else分支
if(条件){
    条件成立执行的代码
}else{
    条件不成立执行的代码
}
3.if....else if...else分支
if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件2成立执行的代码
}else{
    条件1,2都不成立执行的代码
}
4.如果分支结构中else if很多还可以考虑switch语法
switch(条件){
    case 条件1:
         条件1成立时执行的代码;
         break;  # 没有这个break会基于某个case一直在想下去
    case 条件2:
         条件2成立时执行的代码;
         break;
    case 条件3:
         条件3成立时执行的代码;
         break;
    case 条件4:
         条件4成立时执行的代码;
         break;
    default:
         条件都不满足执行的代码
}
5.for循环:
for(起始条件;循环条件;条件处理){
    循环体代码
}
6.while循环:
while(循环条件){
    循环体代码
}
7.三元运算
python :  值1 if 条件 else 值2
js:    条件?值1:值2
eg:
2 > 3 ? '你好':'侬好'
'侬好'    

六、函数

语法:
function 函数名(形参){
    //函数注释
    函数体代码
    return 返回值
}
# 匿名函数
var l1 = function(a,b){
    return a+b
}
# 箭头函数
var f = v =>v;
var f=function(v){
    return v
}
'''
python 中函数的定义:
def 函数名(形参):
    '''函数注释'''
    函数体代码
    return 返回值
'''
1.js函数体代码中的形参与实参可以不对应
    传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体

七、内置函数

var d = new Date()
Mon Dec 05 2022 20:37:27 GMT+0800 (中国标准时间)
console.log(d.toDateString())
VM4784:1 Mon Dec 05 2022
d.getDate()       # 获取日  
5
d.getDay()         #获取星期
1
d.getMonth()       # 获取月(0-11)
11
d.getFullYear()     # 获取完整年份
2022
d.getYear()         # 获取年
122
d.getHours()        # 获取小时
20
d.getMinutes()      # 获取分钟
37
d.getSeconds()      # 获取秒
27
d.getMilliseconds()    # 获取毫秒
755
d.getTime()            # 返回累计毫秒数(从1970/1/1午夜)
1670243847755

八、序列化与反序列化

在JSON中序列化:
JSON.stringify()  # 将数值转换为JSON格式
JSON.parse()  # 将JSON格式转换为原来的格式
eg:
let d9 = {name:'jia',age:18}
undefined
JSON.stringify(d9)
'{"name":"jia","age":18}'
let ss = '{"name":"jia","age":18}'
undefined
JSON.parse(ss)
{name: 'jia', age: 18}

九、正则表达式

# 创建正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  # 推荐使用(简化)
全局匹配:在正则表达式的最后添加一个字母g
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;

标签:函数,简介,代码,基础,js,字符串,条件,var,JS
From: https://www.cnblogs.com/zx0524/p/16953482.html

相关文章

  • Java基础-2(分支结构)
    Java基础-2(分支机构)习题奇数偶数:输入一个整数,判断奇数偶数。(ifelse,二选一)考试奖励:设置奖励条件,和奖励。(if,elseif,多选一)星期几:输入一个1-7的整数,判断是“......
  • JavaScript简介
    JavaScript概述全称JavaScript,但是与Java一毛钱关系都没有,之所以这么叫是为了蹭Java的热度。它是一门前端工程师的编程语言,但是它本身有很多逻辑错误(不是很严谨)。IT行......
  • 进入python的世界_day45_前端——JS的学习(和学python基础一样的学)
    一、JS介绍​ 是一门编程语言,可以进行逻辑运算,但是跟java没有关系主要是为了蹭热度​ 全称是JavaScript,曾经叫过ECMASript,创造出这门语言的公司已经倒闭完整的Java......
  • JavaScript——基础知识、函数
    JavaScript——基础知识、函数一、JS简介 JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但......
  • js:JS简介、JS基础、变量与常量、基本数据类型、运算符、流程控制、函数、内置对象、J
    目录JS简介JS基础变量与常量基本数据类型1.数值类型(Number)2.字符类型(String)3.布尔类型(Boolean)4.null与undefined5.对象(object)运算符流程控制函数内置对象JSON对象R......
  • Java基础-运算符
    Java基础-运算符习题三个数的最大值:键盘输入三个整数,求最大,最小值。(三元运算符)......
  • 网络编程基础(1)---OSI七层模型
    网络编程基础(1)心得学习网络编程的核心之一,作为程序员必须要掌握的东西虽在学校学过,同一个东西,初次学习和有经验后的学习感受确实不同需要明白自己在那一层做开发明......
  • animejs
    使用npm下载animejs(注意不要写成animatejs,我第一次就是这样,找半天找不出错)有三种方式可以导入animejs,我喜欢用fileincluded的形式:<scriptsrc="../node_modules......
  • Java 基础-1
    Java基础-11配置环境变量2数据类型常量变量类型转换变量变量命名数据类型......
  • 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循
    前端开发之JavaScript目录前端开发之JavaScript一、JavaScript简介二、JS基础三、变量与常量四、基本数据类型1、数值类型2、字符类型3、布尔类型五、特殊数据类型1、nu......