JavaScript基础知识点整理备用 基本数据类型 变量 注释 函数 json序列化

首页 » 教程集合 » JavaScript基础知识点整理备用 基本数据类型 变量 注释 函数 json序列化

JavaScript是一门编程语言与Java没有任何关系,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。

JS代码的存放位置

JavaScript代码一般存在于HTML的head中或者HTML的body代码块底部(推荐)。由于浏览器执行代码是按照从上到下的顺序执行的,如果在head中添加一个文件比较大的js,那么浏览器会一直加载知道成功为止,那么body中的文本内容就显示不出来,造成网页打开缓慢,对用户影响不好,所以通常都是放在body的底部!那么如何然浏览器知道代码是js呢?

<!-- 方式一 -->
<script type"text/javascript" src="JS文件路径"></script>
  
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

JS代码中的注释

// 单行注释
/* 多行注释 */

简单了解一下alert(),在浏览其中弹出某些信息,信息取决于你。console.log()在浏览器的console(控制台)输出某些信息,信息也取决于你。

JS中的变量

JavaScript中变量分为局部和全局变量。局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。这很容易记下来:

<script type="text/javascript">
    // 全局变量
    name = '鳄鱼君';
 
    function func(){
        // 局部变量
        var age = 18;
    }
</script>

JS中的数字(Number)

JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点值表示。这个也非常的简单,就两个方法parseIntparseFloat可以直接在浏览器的console中进行测试练习:

// 转换
parseInt("18.2");  // 将某值转换成数字,不成功则NaN
parseFloat("18.2");  // 将某值转换成浮点数,不成功则NaN

JS中的字符串(String)

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。具体有以下几种方法:

obj.length                           长度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号

其中比较常用的有charAt(n)(根据索引取值)、substring(from,to)(根据索引获取子序列)、length (获取字符串长度)这些,其余的自己尝试一下:

    // 常用方法
    var name = "eyujun";
    var value = names[0]                    // 索引
    var value = name.length                 // 获取字符串长度
    var value = name.trim()                 // 去除空白
    var value = name.charAt(index)          // 根据索引获取字符
    var value = name.substring(start,end)   // 根据索引获取子序列

JS中的布尔类型

布尔类型仅包含真假,与Python不同的是其首字母小写。

==      比较值相等
!=       不等于
===   比较值和类型相等
!===  不等于
||        或
&&      且

JS中的数组

JavaScript中的数组类似于Python中的列表,下面的是它的一些基本用法:

obj.length          数组的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

其他(null、undefine)

null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”,相当于Python的None。undefined是一个特殊值,表示只是声明而变量未定义。

 var name;
        console.log(typeof(name));

json 序列化

JavaScript提供了json序列化功能,即:将对象字符串之间进行转换。

JSON.stringify(object)   序列化 将对象转换为字符串

var info = {"name":"鳄鱼君","age":18,"hobby":["ball","appale"]}
var infoStr = JSON.stringify(info)
console.log(infoStr) # string类型
JSON.parse(str)  反序列化 将字符串转换为对象

var infoStr = '{"name":"鳄鱼君","age":18,"hobby":["ball","appale"]}'
var info = JSON.parse(infoStr)
console.log(info)  #object类型 

JS的函数

JavaScript中的函数分为普通函数,使用的时候需要通过函数名字来调用:

function func(arg){
            return arg + 1;
        }

匿名函数,没有名字的函数:

function (arg){
        return arg + 1;
    }
    // 一般用于当做参数使用,例如:设置定时器 setInterval(function(){   },1000)

自执行函数

(function(arg){
        console.log(arg);
    })('鳄鱼君Ba')

我们来通过一个列子,演示一下函数的使用,在此之前需要知道setInterval(),这是一个js定时器,第一个参数可以为函数,第二个参数为时间,单位毫秒,我们看一下如何使用:

<div id="xx_e">澳门皇家赌场上线了</div>
    <script type="text/javascript">
       function func() {
       	// 根据id获取指定标签的内容,并赋值给局部变量中
       	var tag=document.getElementById('xx_e');
       	//获取标签内部的内容
       	var content=tag.innerText;

       	var a=content.charAt(0); //获取第0个字符
       	var b=content.substring(1,content.length); //从第一个到最后一个
       	var new_content=b+a;  //把第一个拼接到最后 
       	tag.innerText=new_content  //重新赋值展现在html中
       }
       setInterval('func()',500) //通过定时器设置 0.5s执行一次,实现滚动
    </script>

代码中的都是一些常用的方法,自己在浏览器中尝试一下,或者创建一个html页面把代码放进去,使用浏览器打开看一下效果,就是来回的拼接字符,通过定时器一直执行,实现字符串的滚动,俗称跑马灯,我也不知道名字什么寓意!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《JavaScript基础知识点整理备用 基本数据类型 变量 注释 函数 json序列化》 发布于2020-04-07

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

2 + 2 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册