JavaScript基础语法总结（一）

JavaScript基础总结（一）

前言

此篇为pink老师的笔记。

初始js

JavaScript历史

布兰登艾奇（Brendan Eich， 1961年～）。 神奇的大哥在1995年利用10天完成JavaScript设计。 网景公司最初命名为LiveScript ，后来在与Sun合作之后将其改名为JavaScript.

JavaScript是什么

lavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。 现在也可以基于Nodejs技术进行服务器端编程

JavaScript的作用

• 表单动态校验（密码强度检测） （ JS产生最初的目的）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• App(Cordova)
• 控制硬件—物联网（Ruff游戏F发(cocos2d-js)

浏览器执行JS简介

浏览器分成两部分：渲染引擎和JS引擎

• 渲染引擎：用来解析HTML与CSS ，俗称内核，比如chrome浏览器的blink ，老版本的webkit
• JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言） ，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JS三大组成

• ECMAScript
• DOM
• BOM

ECMAScript

ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广 泛，它往往被称为JavaScript或JScript ，但实际上后两者是ECMAScript语言的实现和扩展。

ECMAScript

• lavaScript 网景公司
• Jscript 微软公司

ECMAScript ： ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM—文档对象模型

文档对象模型（Document Object Model ，简称DOM ） ，是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM—浏览器对象模型

浏览器对象模型 （Browser Object Model ，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS初体验

JS有3种书写位置，分别为行内、内嵌和外部

行内式JS

<input type="button" value="click" οnclick="alert('Hello, world!')"

• 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性） ，如： onclick
• 注意单双引号的使用：在HEML中我们推荐使用双引号，JS中我们推荐使用单引号。
• 可读性差，在html中编写JS大量代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄混；
• 特殊情况下使用

内嵌式

<script>
alert("Hello world!");
</script>

学习时常用。

外部JS文件

    <script src="newFile.js"></script>

• 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
• 引用外部JS文件的script标签中间不可写代码
• 适合于JS代码量比较大的情况

JS注释

• 单行注释：

  // 单行注释
  

• 多行注释：

  /*
  多行注释
  */
  

JS输入输出语句

输入框

prompt 方法返回一个 string 类型。

 prompt('请输入你的名字：');

警示框

alert('你好');

控制台打印

console.log('三线码农学编程。');

变量

变量的实质

变量是程序在内存中申请的一块用来存放数据的空间。

变量的声明

1. 声明变量
2. 赋值

声明变量

// 声明一个叫age的变量
var age;
let name;
const PI = 3.14;

• var 是一个JS关键字，用来声明变量（variable变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

变量的初始化

var age = 18;

初始化：声明并赋值

更新赋值

一个变量可以被重复赋值，变量值也会更新。

var age = 18;
age = 81;

同时声明多个变量

var age = 18,
    url = 'https://blog.csdn.net/AzirBoDa?type=blog',
    myname = 'sanxianmanongaibaincheng'

声明不赋值

var sex;
console.log(sex);
// undefined
console.log(aaa);

直接输出

console.log(tel);
// 报错

不声明直接赋值

qq = 12345;
console.log(qq);
// 12345 全局变量

命名规范

• 由字母（A—Za—z）、数字（0—9）、下划线（）、美元符号（5）组成，如： usrAge， num01， name
• 严格区分大小写。var app；和var App；是两个变量
• 不能以数字开头。18age是错误的
• 不能是关键字、保留字。例如： var， for， while
• 变量名必须有意义。MMD BBD nl— age
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName推荐翻译网站：有道爱词霸
• 尽量不要使用 name 作为变量名

数据类型

数据类型概述

为啥要用数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号。比如姓名“张三” ，年龄18，这些数据的类型是不一样的。

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;
//这是一个数字型var arerouok =的； //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型 JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;
// x为数字
var x = "Bill";
// x为字符串

简单数据类型

基本数据类型

JavaScript中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含整值和浮点值，如21、0.21	0
Boolean	布尔值类型，如true、 false，等价于1和0	false
String	字符串类型，如“张三”注意js 里面，字符串都带引号	""
Undefined	var a; 声明了变量a但是没有给值，此时a =undefinedNull	undefined
Null	var a = null; 声明了变量a为空值	null

数字型Number

数字型进制

常见：二进制、八进制、十进制、十六进制

• 0123: 0 开头表示八进制
• 0b11: 0b 开头表示二进制
• 0x11: 0x 开头表示十六进制
• 直接打印出来会转化为十进制

数字型范围

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

特殊值

console.log(Infinity);
console.log(-Infinity);
console.log(NaN);Copy to clipboardErrorCopied

• Infinity：无穷大
• -Infinity：无穷小
• NaN：Not a number，代表一个非数值。

isNaN（）

isNaN 方法用来判断一个变量和或者一个值是数字类型，若不是数字类型则返回 true；否则返回 false。

字符串型String

定义

字符长型可以是引号中的任意文本，其语法为双引号 "" 和单引号 ''。

字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

var strmsg= '三线“码农”学编程';
var strmsg= "三线‘码农’学编程";

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符转义符都是\开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符， n是 newline 的意思
\\	\
\'	单引号’
\"	双引号"
\t	tab 缩进
\b	空格，b 是 blank 的意思

获取字符串长度length

var str = 'hello';
console.log(str.length);

字符串拼接

将字符串和变量相加，以后要更新最终的结果字符串，只需更新变量的值。

布尔型Boolean

• 布尔型有两个值，true 和 false
• 布尔型（true，false）在参与加法时当作 1 和 0 使用

console.log(true+1);
// 2
console.log(false+1);
// 1

Undefined

console.log(undefined+1); // NaN
console.log(undefined+NaN); // NaN
console.log(undefined+true); // NaN
console.log(undefined+'aaa'); // undefinedaaa
console.log(undefined+undefined); // NaN

空值 Null

console.log(null+1); // 1
console.log(null+undefined); // NaN
console.log(null+NaN); // NaN
console.log(null+true); // 1
console.log(null+'aaa'); // nullaaa
console.log(null+null); // 0

获得变量数据模型

typeof获取变量数据模型

typeof variable （typeof(variable)） 返回一个字符串，值为该变量的数据类型。

console.log(typeof 1); // number
console.log(typeof false); // boolean
console.log(typeof 'aaa');    // string
console.log(typeof undefined);// undefined
console.log(typeof NaN); // number
console.log(typeof Infinity); // number
console.log(typeof null); // object
console.log(typeof typeof 1); // string

字面量

字面量是在源代码中一个固定的表示法，通俗来说，就是字面量如何表达这个值。

• 数字字面量：1、0
• 字符串字面量：mphy、aaa
• 布尔字面量：true、false

数据类型转换

啥是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。 通俗来说，就是把一种数据类型的变量转换成另外一种数据类型 我们通常会实现3种方式的转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

转换成字符串的三种方法

一般用第三种方式，隐式转换。

• toString() 方法
• String() 方法
• 加号 + 拼接字符串

var num = 12;
console.log(num.toString());
console.log(String(num));
console.log(num + '');

引申：数字字符长转数字

var str = '123'
console.log(str - '');

转换为数字型

方式	说明	案例
parseInt(str) 函数	string->整数型	parseInt(‘10’)
parseFloat() 函数	string->浮点型	parseFloat(‘3.14’)
Number() 强转换函数	string->数字型	Number(‘12’)
JS 隐式转换	算术运算符隐式转换为数字型	'12'- 0 或 '12' - '' 或 '12'*1

console.log(parseInt('123')); // 123
console.log(parseFloat('3.14')); // 3.14
console.log('123' - 0); // 123
console.log('123' - ''); // 123
console.log(parseFloat('999')); // 999
console.log(parseInt('3.14159')); // 3
console.log(parseInt('120px')); // 120
console.log(Number('100')); // 100
console.log(Number('100.32')); // 100.32
console.log(Number('100px')); // NaN
console.log('100px' - ''); // NaN

注意：

1. 数字字符串（'12.3'，12）之间进行加法运算实际上是字符串的拼接，结果还是字符串；而数字字符串之间的减法运算是算术运算，结果是数字型。
2. 一个数字字符长和一个数字相乘，结果是算数运算结果，为数字型。

console.log('10' + '2'); // 102
console.log('10' - '2'); // 8
console.log('10' + '3.2'); // 103.2
console.log('10' - '3.2'); // 6.8
console.log('12'*3); // 36

转换为布尔型

使用 Boolean() 函数转换。

• 转换值为 false：'', 0, NaN, null, undefined（5个）
• 其他的转换值均为 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean([])); // true

标识符、关键字、保留字

标识符

标识（zhi）符：就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。

关键字

关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括: break, case, catch, continue, default, delete, do, else, finally. for, function, if, in instanceof, new. return, switch, this, throw, try, typeof, var, void, while, with等。

保留字

保留字：实际上就是预留的“关键字” ，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括: boolean, byte, char, class, const, debugger, double, enum, export, extends fimal, float. goto, implements, import, int, interface, long, mative, package private, protected, public, short, static, super, synchronized, throws, transient volatile等。

拓展：8种基本数据类型

8 种基本数据类型中，前 7 种为基本数据类型，最后 1 种为复杂数据类型（object）。

• number：用于任何类型的数字：整数或浮点数，在 \pm(2^{53}-1)±(253−1) 范围内的整数。
• bigint：用于任意长的整数。
• string：字符串，一个字符串可以包含 0 个或多个字符，没有单独的单字符类型。
• boolean：值为 true 或 false
• null：未知的值，只有一个 null 值的独立类型。
• undefined：未定义得值，只有一个 undefined 值的独立类型。
• symbol：用于唯一的标识符。
• object：用于更复杂的数据结构。

使用 typeof 运算符查看变量的数据类型：

• 两种形式：typeof x 或 typeof(x)
• 以字符串的形式返回类型名称：例如 string
• typeof null 会返回 "object" —— 这是 JavaScript 编程语言的一个错误，实际上它并不是一个 object。