​前端教学讲义：JS基础

news/2024/11/7 15:51:30

讲义内容：JS 诞生的背景、基本类型、运算符

以下内容只涉及 ES5 标准，ES6 增加的新内容可以在网上查找到。

JS 诞生的背景

上世纪 90 年代网景公司开发的浏览器独步天下

一个叫做 Brendan Eich 的工程师受命于开发一款脚本语言，来增强浏览器的功能。

这名工程师花费了 10 天时间设计出了第一个版本，名叫 LiveScript。

后来因为当时 Java 正红，公司将其改名为 JavaScript，所以 JS 和 Java 其实没有什么关系。

这名工程师在设计语言之初有几个目标

  • 简单易用，不需要专业的计算机知识就能使用
  • 因为个人的喜爱，所以增加对函数式编程的支持
  • 因为公司压力，所以也要支持面向对象

后来 JS 因为市场认同，打败了 VBScript，Java plugin 等一系列增强浏览器的方案，成了事实标准。

网景公司倒闭之后，JS 的标准制定由 ECMA（欧洲电脑制造商协会）制定，所以又叫做 ECMAScript， 新的标准叫做 ES6、ES7、ES2018 … 每年会收集各种语言规范建议，通过 草案、stage1、stage2 等几个阶段，并在浏览器中有实现后会成为正式标准。

所以 JS 具有以下特点：

  • 向下兼容，包括兼容 bug（typeof null，大数）
  • 奇怪、蹩脚的规范，从技术上来说缺点很多
  • 运用场景广泛
  • 迭代速度快，

会在项目里使用还在草案阶段的新语法

变种、超集、子集 很多（coffee script, typescript, Action Script, flow, AssembleScript)

基本类型

JS 中的基本类型有以下几种：

  • undefined
  • null
  • Boolean
  • Number
  • String

另外有三种引用类型：

  • Function
  • Array
  • Object

和 Java 一样，所有类型都是基于 Object（除了 undefined ?)

通过 「var」关键字声明一个变量，方法和大多数语言一样。

JS 是动态语言，变量不用区分类型，不同类型之间的变量可以相互赋值。

var foo = 1；
var bar;
var a, b, c;
bar = foo = “abcd”
undefined 和 null

当一个值没有初始值的时候，默认值为 undefined。

undefined 在 JS 中是个语言设计的缺陷例子。

undefined 的行为在大多数情况下和 null 一样，都是不可访问的值，但是在 typeof 的时候结果不同

var und;
var nl = null;
typeof und === ’undefined’
typeof nl == ‘object’

数字

Boolean， Number，String 的行为和大多数语言一样。

可以直接声明也可以通过构造函数、工厂模式声明，三者没什么区别。

var a = 123
var a = new Number(123)
var a = Number(123)

在 JS 中 数字的取值范围是 -253 - 1 到 253 - 1，范围小于 long 型，并且计算时有精度问题

1.2 / 0.2
// 5.999999999999999

声明数字的方式和其它语言类似，科学计数法、八进制、十六进制

var a = 1e3
// 1000
var a = 0o12
// 10
var a = 0xa
// 10

通过 「toString」方法可以转换成字符串，并设置进制

var a = 1000
a.toString(10)
// “1000”
a.toString(8)
// “1750”
a.toString(16)
// “3e8”

在 JS 中，有两个特殊的数字，NaN 和 Infinity。

当字符串或者其他类型转换成数字失败的时候，就会返回 NaN，但是 NaN 的类型依然是 number。

NaN 和任何数字计算后，结果都是 NaN。

当数字除以 0 的时候，就会返回 Infinity。

Number(undefined)
// NaN
Number(null) // 我也很费解，为什么 null 转换成数字就是 0
// 0 
Number("asdf")
// NaN
10 / 0
//Infinity

字符串

在 JS 中字符串是可变长，而且可以通过 「+」 操作符做拼接。

字符串在内容中应该是双字节储存，可以通过索引访问每个字符，而不是每个 byte。

在浏览器中编码格式根据网页的编码格式而设置（在 node 中默认是 UTF8？)

在 JS 中，声明一个字符串通过单引号或者双引号都可以，二者没有区别。通常习惯是通过单引号访问，因为可以少按一个 shift。

var a = ‘123’
var b = “123”
a == b
a[0]  // 通过索引访问的结果仍然是个字符串
// “1”

函数

函数在 JS 中是一等公民，可以赋值给变量，有两种声明方式

function plus(a, b) { return a + b}
var plus = function(a, b) { return a + b }

第二种方法其实是将一个「匿名函数」复制给了变量 plus。

这两种方式在使用上没太大区别，除了在「声明前置」的场景下会有点区别

匿名函数还有一种方法叫做「立即执行函数」。

(function(a, b){ return a + b })(10, 20)
// 30

函数只会将 return 声明的表达式的值返回出去，在函数没有声明 return 的时候，默认返回 undefined

function plus (a, b) { a + b }
plus(1, 2)
// undefined

函数和作用域
函数和变量一样，可以在任何地方声明、使用，

每个函数独立出了一个作用域，作用域可以互相嵌套。

函数作为一个变量，本身也在父作用域下

function foo(b) {
    var a = 10
    // 这里属于 foo 的作用域，内部有 bar, b, a 三个变量
    function bar() {
        var c = 20;
        return a + b + c // 这里属于 bar 的作用域，因为在 foo 之内，所以可以访问 a 和 b
    }
    // 这里不能访问 c
    return bar();
}

由于 JS 在设计的时候，怕用户不理解变量需要先声明再使用，所以对变量会有「声明前置」，帮助大家提前声明所需要的变量。

下面我们用立即执行函数创建一个闭包来解释什么叫「声明前置」

(function() {
    console.log(fn, foo);
    function fn(a, b){ return a + b };
    var foo = 1234;
    console.log(fn, foo);
})()
// function (a, b){ return a + b } undefined
// function (a, b){ return a + b } 1234

上面的代码相当于：

(function() {
    function fn(a, b){ return a + b };
    var foo;
    console.log(fn, foo);•
    foo = 1234;
    console.log(fn, foo);
})()

如果我们用匿名函数赋值给一个变量，那么会有下面效果：

(function() {
    console.log(fn, foo);
    var fn = function(a, b){ return a + b };
    var foo = 1234;
    console.log(fn, foo);
})()

// undefined undefined
// function (a, b){ return a + b } 1234

上面的代码相当于：

(function() {
    var fn, foo;
    console.log(fn, foo);
    fn = function(a, b) { return a + b};
    foo = 1234;
    console.log(fn, foo);
})()

数组

在 JS 中数组是可变的，而且数组内可以放任何值。

数组的长度是最后一个元素的索引加一。

如果访问没有设置的元素，将会返回 unfined

var array = [];
array[0] = 1;
array[2] = “1234”;
array[4] = function(){};
// [1, undefined, “1234”, function(){}]
array[1]
// undefined

js 数组中自带了很多方法，方便我们对数组做操作，比如说 map， reduce 等等

[1, 2, 3].map(function(d) { return d + 1 })
// [2, 3, 4]
[1, 2, 3].reduce(function(r, d) { return r + d }, 0)
// 6

如果想要删除数组中的某个元素的话，我们可以用 delete 关键词，或者直接将索引的位置设置成 undefined

var array = [1, 2, 3]
delete array[1]
// [1, undefined, 3]

如果我们需要删除数组中某个元素，并且缩短数组长度的话，就需要用到 splice。

var array = [1, 2, 3]
array.splice(1, 1)
console.log(array)
// [1, 3]

一些常用的数组方法还有 slice, forEach, find, every, includes 等等

对象

和 java 一样，对象（Object） 是所有类型的基类。它类似 JSON 里的键值对结构体，可以动态的挂载任何属性。

声明的方法有两种，{} 和 new

var a = {}
var b = new Object()
a.num = 1
a.str = "1234"
console.log(a)
// { num: 1, str: "1234"}

对象（Object）有点类似 Java 里的 HashMap，但 Key 只能是字符串。可以通过类似数组索引的方式来访问对象上的键。

这种方法和点操作符是一样的效果，当键名由一些特殊的字符组成的时候，我们可以通过索引方式访问。

var obj = {value: 1234}
console.log(obj["value"])
// 1234

这样声明或者访问会报错：

var obj = { some-value: 1234 }
obj.some-value

我们需要让编译器知道 some-value 是一个键名，所以需要将它们用引号括起来

var obj = { "some-value": 1234 }
obj["some-value"]

当一个对象中挂载了一个函数，在函数中可以通过 this 来访问对象内的其他属性，this 也可以理解为「执行上下文」

function fn () { console.log(this.value) }
var obj = { fn: fn, value: 1234 }
obj.fn() // 此时 fn 的执行上下文就是 obj
// 1234

var otherObj = { fn: fn, value: "abcd"}
otherObj.fn() // 此时 fn 的执行上下文就是 otherObj
// "abcd"

由于函数和数组是所有类型的基类，所以可以像对象一样随意的扩展属性。

但是字面量（如数字、布尔值、字符串、null、undefined） 是不能随意扩展的。

function plus(a, b) { return a + b}
plus.value = 1234
plus(12, plus.value)
// 1246
 
var array = []
array.value = 1234
console.log(array.value)
// 1234
 
var a = true;
a.value = 1234
console.log(a.value)
// undefined

运算符

JS 的运算符和其他语言基本类似，就+-*%/这些，外加一些二进制操作符。

但因为 JS 弱类型的特性，有些场景是其他语言没有的，比如一个数字加一个字符串，结果是什么？

1+"2"
// "12"

这种场景还可以理解，数字和字符串相加的时候，数字通过调用 toString 被转换成了字符串。

1 + {}
// "1[object Object]"

数字和对象相加的时候，对象和数字都调用了 toString，被转换成了字符串

{} + []
// 0

但是空对象和空数组相加结果却是 0，我也不知道为什么

var obj = {}
if (obj) console.log("obj is true")
// "obj is true"

obj == true
// false

上面这个例子中，obj 是个空对象，在 if 条件判断中被当作真值，但是和 true 对比的时候却返回 false。

JS 的隐式转换规则很诡异，很多都是为了兼容早期版本中错误的实现，这里没必要细究转换规则是什么。

我们只需要记住以后用严格相等符（===）作对比，避免不同类型的变量相互运算。

"1" == 1
// true

"1" === 1
// false

循环

JS 的循环和其它类似，也都是 for， do..while 这种写法。

但是，我们一般不用 for 作循环，而是用数组方法 forEach，map（因为 for 写起来很麻烦，而且还需要单独声明一个变量）

[1, 2, 3].forEach(function(value) {
  return value + 1;
})
// [2, 3, 4]

另外还可以通过 for...in 来遍历一个对象

var obj = {a:1, b:2, c: 3}
for (var key in obj) {
  console.log(key)
}
// "a"
// "b"
// "c"

但我们一般也不这么用，而是用 Object.keys 取得包含对象所有键的数组

var obj = {a:1, b:2, c: 3}
Object.keys(obj)
// ["a", "b", "c"]
 
Object.keys(obj).forEach(console.log)
// "a"
// "b"
// "c"

课后习题

第一题：JS 的运用领域都有哪些，作为弱类型的语言执行效率如何，为什么？

第二题：typeof 关键字的返回值有几种结果?

第三题：下面两种写法有什么区别

{
  0: "a",
  1: "b",
  2: "c"
}

["a","b","c"]

第四题：下面代码的运行时会不会报错，this 指向哪里？

function fn () { console.log(this.value) }
fn()

第五题：声明的变量是如何被回收的


http://www.niftyadmin.cn/n/3372066.html

相关文章

在虚拟机中给Linux操作系统链接网络

在虚拟机中给Linux操作系统链接网络

在虚拟机中给Linux操作系统链接网络 突然想到这一点，就去查阅了资料，发现还挺有意思的，哈哈，下面分享一下我学习链接网络的方法和步骤。 网络相关配置 1、查看当前机的IP地址配置 2、修改网络配置 3、重启网络服务 systemc…
阅读更多...
复习基本操作，以及学习新的基本文件操作

复习基本操作，以及学习新的基本文件操作

复习基本操作，以及学习新的基本文件操作 可用 pwd命令查看用户的当前目录 pwd 可用 cd 命令来切换目录 cd没有参数则返回home文件夹 cd … 表示返回上级文件夹 cd udev 进入当前文件夹的子文件夹udev，如果当前文件夹下没有udev子文件夹，…
阅读更多...
gitlab的root用户双认证问题

gitlab的root用户双认证问题

突然用的好好的gitlab版本控制程序报双认证的问题，而且还是root用户，其他用户正常。 用root登录后就是一个报警界面，只有account和application两个目录能用，其他都不能正常显示，提示需要双因素认证 Two-Factor Authent…
阅读更多...
Linux安装管理

Linux安装管理

Linux安装管理 RPM Package Manager RPM是一个强大的命令行驱动的软件包管理工具，用来安装、卸载、校验、查询和更新 Linux 系统上的软件包。 RPM软件的安装、删除、更新只有root权限才能使用对于查询功能任何用户都可以操作如果普通用户拥有安装目录的权限&…
阅读更多...
[原创]PHP 异常错误处理

[原创]PHP 异常错误处理

目录 错误与异常异常类错误类(PHP > 7)错误错误报告级别错误报告设置全局异常处理程序全局错误处理函数无法捕获的错误类型范例代码开发/生产环境处理错误和异常开发环境生产环境php中止时的回调函数错误与异常 错误和异常 在PHP 中不一样的, 它们都表明代码出现问题, 且都能…
阅读更多...
java的相关信息

java的相关信息

今天正式学习Java，先了解一下java的相关信息，冲鸭 概述程序 程序算法(解决问题的步骤)数据结构(如何高效的存储和使用数据) 为什么需要编程语言 用户：有亟待解决的问题–问题空间，使用自然语言进行描述 计算机：能…
阅读更多...
09.软件项目管理与敏捷方法——人力资源管理笔记

09.软件项目管理与敏捷方法——人力资源管理笔记

00.项目中的人力资源管理指的是组织和管理项目团队的过程。 01.当项目团队中的每个人（包括领导者和成员）都可以自由地发挥它们的最大潜力的时候，这个项目团队将会变得力量无穷。在这样一个项目团队中，领导者可以做的最好的事就是允…
阅读更多...
今天学习Java的运算符和几种基础的语句

今天学习Java的运算符和几种基础的语句

先记录一下之前没有注意到的一些东西 valueOf和parseInt的区别 public static Integer valueOf(String s) throws NumberFormatException 返回值得类型为包装 类，底层实现其实就是parseInt public static int parseInt(String s) throws NumberFormatException …
阅读更多...
最新文章

Copyright @ 2022~2023