最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 跟我走进JavaScript(三)

    正文概述 掘金(never_abandon)   2020-12-30   466

    进阶JavaScript(二)

    先导

    1. JavaScript的数据类型
    2. 变量声明方式
    3. 类型转换
    4. 对象的增删改查

    JavaScript的数据类型

    Javascript分为7种数据类型
    1.number 数字
    2.string 字符串
    3.boolean 布尔值
    4.symbol 符号
    5.undefined 空
    6.null 空
    7.object 对象
    总结:简便的记忆方法为:四基(number,string,boolean,symbol)两空(undefined,null)一对象(object),其中需要注意的是:数组,函数,日期,它们都不属于数据类型,均属于Object.
    以下将会为大家介绍每一种数据类型


    数字number
    整数写法:1
    小数写法:0.1
    科学计数法:1.23e4
    八进制:0123
    十六进制:0x3F
    二进制:0b11
    特殊值: 正0和负0
    无穷大: Infinity +infinity -infinity
    无法表示的数字: NaN
    其中列出的数字类型中,NaN要特别注意,NaN的全称为 not a number,可能读者会认为NaN === NaN,但是并不是这样的,无法判断这两个不是数字的东西到底是什么,所以不相等.

    console.log(NaN === NaN) //false

    在JavaScript中数字的存储形式为浮点数,浮点的意思就是数字的小数点会乱动.那么如何表示最大数和最小数呢?以下通过代码来为读者展示

    console.log(Number.MAX_VALUE) //1.7976931348623157e+308
    console.log(Number.MIN_VALUE) //5e-324

    字符串string
    写法:

    'string' //单引号
    "string" //双引号
    `string` //反引号(ESC下面的按键)

    字符串的写法包含单引号,双引号,反引号,引号不属于字符串的一部分.
    转义符:

    \n //表示换行
    \r //表示回车
    \t //表示tab制表符

    可以通过字符串.length获取字符串的长度

    console.log('string'.length); //6

    布尔值:boolean

    布尔值比较简单,只有两个值,true和false,主要用来进行判断的地方进行使用,在这里只告诉大家什么会被转换成false:

    Boolean(undefined); //false
    Boolean(null); //false
    Boolean(0); //false
    Boolean(NaN); //false
    Boolean(''); //false

    空:undefined和null
    这两个值均为空值,但是两个空值是有区别的:
    1.如果一个变量声明了,但是没有赋值,默认值为undefined,而不是null.
    2.如果一个函数没有写return,那么默认return undefined而不是null.
    3.一般把非对象的空值写完undefined,把对象空值写为null.


    对象:object
    定义:
    无序的数据集合
    键值对的集合
    写法:

    let obj = {'name': 'bobo','age': 18}
    let obj = new Object({'name': 'bobo'})

    细节: 键名是字符串,不是标识符,可以包含任意字符,引号可以省略,但当有特殊字符不能省,只能写标识符.
    可以将变量作为属性名,例如:

    let p1 = 'name';
    let obj = {[p1]: 'bobo'}// 这种写法,属性名为name

    两种对对比:

    1. 不加[]的属性名会自动变成为字符串.
    2. 加了[]则会被当做变量求值.
    3. 值如果不是字符串,会自动变成字符串.

    Symbol
    Symbol:表示独一无二的值,为ES6新增的写法,在此仅简单的介绍一下语法的内容.

    let sym = Symbol("test");
    console.log(sym);   // Symbol(test)
    let sym2 = Symbol("test");
    console.log(stm === stm2);   // false

    由于是独一无二的值,尽管两个Symbol的值相同也绝不相等.

    变量声明方式

    在JavaScript的声明方式中有三种:var,let,const.其中let,const为es6新推出的声明方式更为好用.代码示例如下

    var a = 1;
    let a = 1;
    const a = 1;

    在此仅介绍这些声明方式的特点之处,主要着重介绍let和const.


    var声明:
    该声明方式是在JavaScript开始创建的时候就存在的方式,var声明创建时没有块作用域的概念,所以var会将变量暴露到全局当中共同使用,同时还会将变量提升.在此不会花费大篇幅去介绍,感兴趣的同学们可以去MDN查询一下.


    let声明:
    特点:

    1. 改善了var的块作用域的缺点,遵循块作用域,使用范围不能超出{}定义的区域.
    2. 不可重复声明.
    3. 可以赋值,也可以先不赋值.
    4. 必须先声明再使用,否则报错.
    5. 全局声明的let变量,不会变成window的属性.

    const声明:

    1. 具有块作用域的概念.
    2. 一经创建,不可修改,是固定的值.
    3. 不可以重复声明.

    类型转换

    number => string

    var n = 5;
    console.log(typeof String(n)); //'string'
    console.log(typeof (n + '')) //'string'

    string => number

    var s = '5';
    console.log(typeof Number(s)); //'number'
    console.log(typeof (s - 0)); //'number'
    console.log(typeof (+s)); //'number'
    console.log(typeof parseInt(s)); //'number'

    x => boolean

    var s = 1;
    console.log(typeof Boolean(s)); //'boolean'
    console.log(typeof (!!s); //'boolean'

    对象的增删改查

    删除属性

    delete obj.xxx
    delete obj['xxx']

    通过上述两种方式即可删除obj的xxx属性
    区分属性值为undefined和不含属性名.
    不含属性名的判断方式:

    'xxx' in obj === false


    含有属性名,但是值为undefined

    'xxx' in obj && obj.xxx = undefined;
    obj.xxx === undefined // 不能判定'xxx'是否为obj属性

    查看属性

    Object.keys(obj) // 查看所有key
    Object.values(obj) // 查看所有属性值
    Object.entries(obj) //查看所有key+值
    obj.hasOwnProperty('toString') // 判断一个属性是自身还是共有的

    上面介绍的都是一个API可以查看到对象的具体key和值,还可以通过两种方法去查看具体的属性名对应的属性值:

    obj['key'] // 中括号语法,中括号内记得是字符串
    obj.key // 点语法,也是字符串

    修改和增加属性
    直接赋值

    let obj = {name: 'bobo'};
    obj.name = 'bobo';
    obj['name'] = 'bobo';
    obj[name] = 'bobo'; // 此句不对,name作为了变量传入的
    obj['na' + 'me'] = 'bobo';


    批量赋值

    Object.assign(obj, {age:18, name:'bobo'}); // 批量赋值,直接将age和name赋值到obj对象中

    总结

    此篇文章重点介绍了JavaScript的数据类型,对象的基本使用方法,增删改查,还有类型转换,本文设计到了一些es6的语法供读者们进行参考学习,希望大家从这篇文章中有所收获.
    记得持续学习,不断跟进!加油!


    起源地下载网 » 跟我走进JavaScript(三)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元