阅读:重新介绍 JavaScript(JS教程)
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会
在线调试代码工具:https://codepen.io/pen
引言
- 分歧根源:名字Javascript和Java有关系么?Javascript只是名字里有个Java,语言本身和Java语言一点关系也没有,这就是乱起名字的后果
- 版本兼容问题:网景浏览器创造的JS,结果网景浏览器被IE打败了,破产了,变成了mozilla基金会管理遗产,IE总想玩自己的js语言,导致ECMAScript 第四版难产,,不过大结局是好的,IE基本凉了,现在是chrome的世界,,ES6在2015年发布了,统一版本了。
- 运行环境:JS是脚本语言,是在浏览器里的语言,浏览器里有解析器解析JS语言,然后浏览器去调用系统的功能,当然不止浏览器能运行JS,nodejs其实本质还是个浏览器,只是它放在了服务端,js和浏览器离得远了点,当然还有其他运行的JS的环境。
V8是一个由Google使用C++开发的开源JavaScript引擎,用于Google Chrome及Chromium中。
V8在运行之前将JavaScript编译成了机器代码,而非字节码或是解释执行它,以此提升性能。更进一步,使用了如内联缓存(inline caching)等方法来提高性能。有了这些功能,JavaScript程序与V8引擎的速度媲美二进制编译。
V8可以独立运行,也可以 嵌入 到任何C++应用程序。项目托管在Google Code上 ,基于BSD协议,任何组织或个人可以将其源码用于自己的项目中。
V8引擎
因为V8引擎太好了,速度很快,才带火了Javascript
概览
函数,数组,日期,正则表达式都是对象
类型 | 含义 | |
---|---|---|
Number | 数字 | |
String | 字符串 | |
Boolean | 布尔 | |
Symbol | 符号(第六版新增) | |
Object | 对象 | |
Function | 函数 | |
Array | 数组 | |
Date | 日期 | |
RegExp | 正则表达式 | |
Null | 空 | |
Undefined | 未定义 |
数字
关于这个“IEEE 754标准”,是一种算法上逼近具体某个浮点数的表示方法,逼近也就是永远不是正正好,因为物理上能实现的计算精度有限。
字符串
字符串是有方法的
其他类型
JavaScript 中 null 和 undefined 是不同的,前者表示一个空值(non-value),必须使用null关键字才能访问,后者是“undefined(未定义)”类型的对象,表示一个未初始化的值,也就是还没有被分配的值。
JavaScript 包含布尔类型,这个类型的变量有两个可能的值,分别是 true 和 false(两者都是关键字)。根据具体需要,JavaScript 按照如下规则将变量转换成布尔类型:
- false、0、空字符串("")、NaN、null 和 undefined 被转换为 false
- 所有其他值被转换为 true
变量
在 JavaScript 中声明一个新变量的方法是使用关键字 let 、const 和 var:
let
语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。const
允许声明一个不可变的常量。这个常量在定义域内总是可见的。var
是最常见的声明变量的关键字。它没有其他两个关键字的种种限制。这是因为它是传统上在 JavaScript 声明变量的唯一方法。使用 var 声明的变量在它所声明的整个函数都是可见的。
如果声明了一个变量却没有对其赋值,那么这个变量的类型就是 undefined。
JavaScript 与其他语言的(如 Java)的重要区别是在 JavaScript 中语句块(blocks)是没有作用域的,只有函数有作用域。因此如果在一个复合语句中(如 if 控制结构中)使用 var 声明一个变量,那么它的作用域是整个函数(复合语句在函数中)。 但是从 ECMAScript Edition 6 开始将有所不同的, let 和 const 关键字允许你创建块作用域的变量。
运算符
就是===
特殊点
控制结构
JavaScript 也还包括其他两种重要的 for 循环: for...of 和 for...in
对象
JavaScript 中的对象可以简单理解成“名称-值”对。
正因为 JavaScript 中的一切(除了核心类型,core object)都是对象,所以 JavaScript 程序必然与大量的散列表查找操作有着千丝万缕的联系,而散列表擅长的正是高速查找。
“名称”部分是一个 JavaScript 字符串,“值”部分可以是任何 JavaScript 的数据类型——包括对象。这使用户可以根据具体需求,创建出相当复杂的数据结构。
关于对象和原型的详情参见: Object.prototype
数组
JavaScript 中的数组是一种特殊的对象。它的工作原理与普通对象类似(以数字为属性名,但只能通过[]
来访问),但数组还有一个特殊的属性——length
(长度)属性。这个属性的值通常比数组最大索引大 1。
Array(数组)类自带了许多方法。查看 array 方法的完整文档。
感觉把数组可能用到的方法都定义好了,因为好多方法都可以用别的函数写出来了,但是就是都给你写好了。。。
修改器方法
下面的这些方法会改变调用它们的对象自身的值:
修改器方法名称 | 描述 |
---|---|
Array.prototype.copyWithin() | 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。array.copyWithin(target, start, end) |
Array.prototype.fill() | 将数组中指定区间的所有元素的值,都替换成某个固定的值。array.fill(value, start, end) |
Array.prototype.reverse() | 颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。 |
Array.prototype.sort() | 对数组元素进行排序,并返回当前数组。 |
Array.prototype.unshift() | 在数组的开头增加一个或多个元素,并返回数组的新长度。arrayObject.unshift(newelement1,newelement2,....,newelementX) |
Array.prototype.push() | 在数组的末尾增加一个或多个元素,并返回数组的新长度。arrayObject.push(newelement1,newelement2,....,newelementX) |
Array.prototype.shift() | 删除数组的第一个元素,并返回这个元素。arrayObject.shift() |
Array.prototype.pop() | 删除数组的最后一个元素,并返回这个元素。arrayObject.pop() |
Array.prototype.splice() | 在任意的位置给数组添加或删除任意个元素。arrayObject.splice(index,howmany,item1,.....,itemX) |
访问方法
下面的这些方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值。
访问方法名称 | 描述 |
---|---|
Array.prototype.slice() | 抽取当前数组中的一段元素组合成一个新数组。arrayObject.slice(start,end) |
Array.prototype.concat() | 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。arrayObject.concat(arrayX,arrayX,......,arrayX) |
Array.prototype.includes() | 判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false。arr.includes(searchElement, fromIndex) |
Array.prototype.join() | 连接所有数组元素组成一个字符串。arrayObject.join(separator) |
Array.prototype.toSource() | 返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 Object.prototype.toSource() 方法。 |
Array.prototype.toString() | 返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法。 |
Array.prototype.toLocaleString() | 返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 Object.prototype.toLocaleString() 方法。 |
Array.prototype.indexOf() | 返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。 |
Array.prototype.lastIndexOf() | 返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。 |
迭代方法
不要尝试在遍历过程中对原数组进行任何修改。
迭代方法名称 | 描述 |
---|---|
Array.prototype.forEach() | 为数组中的每个元素执行一次回调函数。array.forEach(function(currentValue, index, arr), thisValue) |
Array.prototype.map() | 返回一个由回调函数的返回值组成的新数组。array.map(function(currentValue,index,arr), thisValue) |
Array.prototype.entries() | 返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。 |
Array.prototype.every() | 如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false。 |
Array.prototype.some() | 如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。 |
Array.prototype.filter() | 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。 |
Array.prototype.find() | 找到第一个满足测试函数的元素并返回那个元素的值,如果找不到,则返回 undefined。 |
Array.prototype.findIndex() | 找到第一个满足测试函数的元素并返回那个元素的索引,如果找不到,则返回 -1。 |
Array.prototype.keys() | 返回一个数组迭代器对象,该迭代器会包含所有数组元素的键。 |
Array.prototype.reduce() | 从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。 |
Array.prototype.reduceRight() | 从右到左为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。 |
Array.prototype.values() | 返回一个数组迭代器对象,该迭代器会包含所有数组元素的值。 |
函数
学习 JavaScript 最重要的就是要理解对象和函数两个部分。
一个 JavaScript 函数可以包含 0 个或多个已命名的变量。函数体中的表达式数量也没有限制。你可以声明函数自己的局部变量。return
语句在返回一个值并结束函数。如果没有使用 return
语句,或者一个没有值的 return
语句,JavaScript 会返回 undefined
。
已命名的参数更像是一个指示而没有其他作用。如果调用函数时没有提供足够的参数,缺少的参数会被 undefined
替代。
需要注意的是 JavaScript 函数是它们本身的对象——就和 JavaScript 其他一切一样——你可以给它们添加属性或者更改它们的属性,这与前面的对象部分一样。
一些概念:Arguments 对象,DOM,Function.prototype.apply()
apply()
语法
func.apply(thisArg, [argsArray])
参数
thisArg
可选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。
argsArray
可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。
返回值
调用有指定this值和参数的函数的结果。
自定义对象
关于 JavaScript 中面向对象编程更详细的信息,请参考 JavaScript 面向对象简介。
当使用在函数中时,this 指代当前的对象,也就是调用了函数的对象。如果在一个对象上使用点或者方括号来访问属性或方法,这个对象就成了 this。如果并没有使用“点”运算符调用某个对象,那么 this 将指向全局对象(global object)。这是一个经常出错的地方。
我们引入了另外一个关键字:new,它和 this 密切相关。它的作用是创建一个崭新的空对象,然后使用指向那个对象的 this 调用特定的函数。注意,含有 this 的特定函数不会返回任何值,只会修改 this 对象本身。new 关键字将生成的 this 对象返回给调用方,而被 new 调用的函数成为构造函数。习惯的做法是将这些函数的首字母大写,这样用 new 调用他们的时候就容易识别了。
内部函数
JavaScript 允许在一个函数内部定义函数。关于 JavaScript 中的嵌套函数,一个很重要的细节是它们可以访问父函数作用域中的变量。
闭包
一个闭包就是一个函数和被创建的函数中的作用域对象的组合。闭包允许你保存状态——所以它们通常可以代替对象来使用。
使用闭包的一个坏处是,在 IE 浏览器中它会很容易导致内存泄露。
阅读:重新介绍 JavaScript(JS教程)的更多相关文章
- Vue.js教程 1.前端框架学习介绍
Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- JavaScript简易教程(转)
原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...
- JavaScript简易教程
这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScript的世界——前提是你有一些编程经验的话.本文试图描述这门语言的最小子集.我给这个子集起名叫做“Java ...
- 10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
- Node.js 教程 04 - 模块系统
前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- JavaScript强化教程 -- cocosjs场景切换
场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
随机推荐
- Install KVM Hypervisor on arrch64 Linux Server
Install KVM Hypervisor on arrch64 Linux Server 参考链接: https://wiki.ubuntu.com/ARM64/QEMU https://wiki ...
- scrapy 发送post请求
登录人人网为例 1.想要发送post请求,那么使用'scrapy.FormRequest'方法,可以方便的指定表单数据 2.如果想在爬虫一开始的时候就发送post请求,那么应该重写'start_req ...
- Elasticsearch 安全篇
为什么要开放外网访问Elasticsearch:1.一些插件监听使用,方便及时了解线上数据的情况,比如说head插件等2.为了HTTP直接访问,有的同学考虑到通过后台TCP查询,然后返回数据,还不如直 ...
- Rainbond v5.1.2发布,微服务架构应用便捷管理和交付
Rainbond v5.1.2发布,微服务架构应用便捷管理和交付 Rainbond是开源的企业应用云操作系统,支撑企业应用的开发.架构.交付和运维的全流程,通过无侵入架构,无缝衔接各类企业应用,底层资 ...
- CSS垂直翻转与水平翻转
/*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); ...
- NOIp2018 游记
作为一名蒟蒻,对于NOIp当然是不抱什么希望.所以就只能在比赛中吸取经验咯... Day0 害怕书到用时方恨少,疯狂打板子(玩电脑) Day1 来到考场了,发现键盘空格按不起,觉得非常尴尬,然后他告诉 ...
- Golang Kernel For Jupyter-NoteBook
上篇回顾:VSCode and NoteBook for JavaScript 正常流程 安装Go语言:sudo apt install golang 安装内核的相关依赖包:sudo apt inst ...
- 把 android 手机变成 web server (golang)
配置 golang 开发环境 略 安装并初始化 gomobile go get golang.org/x/mobile/cmd/gomobile gomobile init 创建 beego 项目, ...
- QML-WebEngineView加载html(Echarts绘图)
实现QML中运用webEngineView加载Echarts GitHub:八至 作者:狐狸家的鱼 本文链接:QML-WebEngineView加载Echarts 一.前言 Qt允许使用混合GUI创建 ...
- JS时间戳转换成时间格式
TimeNow: function (val) { var date = new Date(val); var Y = date.getFullYear(); var m = date.getMont ...