《前端之路》之 初识 JavaScript

01 初识 JavaScript

作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路。

为什么会这么快呢?

因为各种套路啊~

任何一种计算机语言的最开始都是和 数据类型 这个东西分不开,那么今天,我们就从 JavaScript 的数据类型开始

一、JavaScript 的数据类型

   因为对于很多的 jser 的初学者而言,或者说说对于很多代码初学者而言,数据类型是让人疑惑的地方。那么一定要解除这个疑虑。

JavaScript 一共有 八种数据类型。其中包含了 基本数据类型 和 引用数据类型

其中基础数据类型有: string 、 number 、 Boolean 、 null、 undefined

其中 引用类型有: array 、 function 、 object

一共就这么8种数据类型,每一种类型都会有各自的属性或者方法,从而构建了这个丰富多彩的 JavaScript 世界。

那我们常常需要判断 这个参数的数据类型从而进行下一步的操作。 那么这个时候 typeOf 就是一个不错的选择,但是也有一些问题,咱们下面接着聊。
const strA = 'xxx==='
const numberB = 123
const boolC = false

const nullD = null
const undedfinE = undefined

const arrayF = [1,2,3]
const funcG = function() {
    let a = '123'
    console.log(a)
}
const objH = {
    a: 1,
    getName: function() {
        console.log(this.a)
    }
}

const result = function(x) {
    return typeof x
}
console.log(result(strA)) // string
console.log(result(numberB)) // number
console.log(result(boolC)) // boolean
console.log(result(nullD)) // object
console.log(result(undedfinE)) // undefined
console.log(result(arrayF)) // object
console.log(result(funcG)) // function
console.log(result(objH)) // object

二、 区分容易混淆的 数据类型

TIPS: 看完上面的八种 数据类型的 读取。是不是发现有三种数据还是让人有点迷糊,分别就是 null、array、Object 。 这三个数据类型的 typeof 都是 object。 那如何再次区分呢?

typeof null         // object
typeof [123,133]    // object
typeof {a:1}        // object

// 这个时候就无法判断了, 如何操作了?

const testArray = [11,22,33,44]
const testNull = null
const testObj = {a:1}

const testObjectFun = function(x) {
    return Object.prototype.toString.call(x)
}

console.log( testObjectFun(testArray))  // [object Array]
console.log( testObjectFun(testNull))   // [object Null]
console.log( testObjectFun(testObj))    // [object Object]

TIPS: 目前来看,Object.prototype.toString.call(xxx) 是一个很好判断当前对象为 什么的方法。

#### 三、 判断 当前对象为 数组的方法


const arr = [1,2,3]

// es6
Array.isArray(arr)
arr instanceof Array
arr.constructor === Array
// es5
Object.prototype.toString.call(arr) === '[object Array]'
    
在 ES5、6 中提供了一系列的 判断当前对象为 数组的方法. 可以作为一个炫技的存在了。

四、章节总结

在 JS 这门语言中,常见的数据类型在上文中已经作出了 展示,而且也展示了一些判断当前数据类型的方法,由于 JS 是一门弱类型语言,所谓弱类型语言其实是指 数据的类型可以根据上下文的变化 发生改变。 在下一个章节 我们会介绍下 数据类型的改变方法。

Github 地址,欢迎Star

原文地址:https://www.cnblogs.com/erbingbing/p/9259690.html

时间: 2024-08-02 23:59:25

《前端之路》之 初识 JavaScript的相关文章

【前端之路】这世上哪有一路鲜花的康庄大道

一:程序员基本功 1:数据结构+算法  (acm/icpc/oj ) 2:离散数学,数字逻辑,线性代数,概率论,数理统计(学堂在线,mooc) 3:计算机组成原理,操作系统,编译原理 二:语言基础 1:html(html5网页游戏开发,微信游戏开发) W3Schools-HTML(英) , W3School-HTML(中) <HTML5高级程序设计 > 2:css(css设计基本功,css3动画) <精通CSS> <瞬间之美 ><网站重构 ><CSS禅

漫谈前端之路

前言 前端之路何其漫漫~ 说明:本篇文章原是写给学弟学妹的,但想来花的功夫确实不少,就把此篇文章当做自己的一个阶段性总结文章了,会保持长期更新. HTML 总的来说HTML并不难,甚至可以说很无脑--HTML的标签个人觉得过一遍就得,知道什么时候该用什么标签就可以了,因为在以后的开发中打交道最多的就是各种各样的标签,想不熟都难.就像现在我写这篇文章用的Markdown一样,只是几个标签的反复应用.那么html的学习就相对来说很自由了,可以跟着w3schoolW3school网址过一遍标签,网上也

前端的路还很长

1.会做一些简单的设计(能够熟练使用ps.fireworks.ai.Flash等设计软件做出一些特定的效果) 2.使用html+css进行合理的页面布局 (考虑页面兼容性---->最终要学会做响应式页面或者能够做                               到页面的自适应:注意一下他们的区别于联系                               性能优化------>了解浏览器怎样工作的:渲染与重绘) 3.使用css3做出一些特定的动画效果(Canvas或SVG也可

第24课 《前端之路,以不变应万变》

今天的内容有些借鉴于业内大佬的内容,由于本人技术实在太渣,几乎没有可以用来演讲的素材.抱歉 大家好,我是来自存勖科技的Rocken.我今天演讲的内容是:前端的未来.大家都知道,前端所依托的基础直到上世纪九十年代才出现,前端职位也是近十年才出现的.之前大多数是后端工程师在做前端的事情,随着前端内容的不断增加,前端方面的工作也越来越多,这时候如果全部由后端来做的话就不大现实了.所有就出现了咱们前端工程师这个物种.我相信在座的各位都有一种感觉,那就是发展太快了.各种框架.工具层出不穷,我记得当初发布d

《前端之路》- TypeScript(二) 函数篇

目录 一.定义函数方法 二.定义函数传参 三.可选传参 四.默认传参 五.传递剩余参数 六.函数重载 七.箭头函数 八.总结 一.定义函数方法 在 es5 中定时函数的方法有 命名函数和函数表达式(匿名函数)这门两种.那么同样的,在 TypeScript 中,函数的定义是什么样子的呢? 1-1 命名函数 这里需要注意的一点是: viod 类型,是函数不返回任何类型数据 TypeScript 语法 function func1(): string { return '213'; } functio

网站前端_JavaScript-项目经验.纯JavaScript实现客户端的分页功能?

项目简介: 说明: 此项目属于医院电子病例系统,由于历史原因,整个系统后台基于Java开发,前端使用Html+CSS+原生JavaScript,项目功能模块要求必须纯JS实现,而此次的任务是为住院病例页面编写一个客户端分页功能. 实现思路: 1. 基于客户端分页的前提是数据已经加载完毕,所以此功能模块必须等待数据加载完毕后再加载 2. 基于客户端分页的首页只需要显示24个患者信息即可 3. 上一页/当前页/下一页功能类似,基于当前页面传递同样的参数(页码, 限制患者数),所以自然而然想到了递归,

笔记一、初识 Javascript

一.初识 Javascript javascript是一种专为与网页交互儿设计的脚本语言.由三部分组成:ECMAScript  (ECMA-262定义) : 提供核心语言功能文档对象模型(DOM): 提供访问和操作网页内容的方法和接口浏览器对象模型(BOM): 提供与浏览器交互的方法和接口Javascript的这三个组成部分在当前五大主流浏览器中都得到了不同程度的支持(IE.FireFox.Chrome.Safari.Opera).基本所有的浏览器都大体上支持ECMAScript第三版.但是对于

前端开发:面向对象与javascript中的面向对象实现(一)

前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“找不到对象!”,他:“就你那样也能找得到对象?”.我一脸黑线...... 废话不多说,今天博主要跟大家聊的是<面向对象与javascript中的面向对象实现>”. 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理

javascript基础——初识javascript

每一门语言的学习都是从HelloWorld开始的,我今天也遵循这个原则吧!先上一段代码,认识一下javascript <html><head><title>初识javascript</title><script language="javascript" type="text/javascript"><!--alert("Hello World Wide Web!")//-->