JS笔记

时间 2019-11-24

原文原文链接

js基础

js引入方式

行内式：经过向 html 元素行内添加一些 js 代码，如给 div 绑定点击事件

<div onclick="alert('这是js代码')">这是一个div</div>
复制代码

内嵌式：在 html 文档中写一个 script 标签，把咱们的 js 写在 script 标签内

<script> alert('这是内嵌式js代码') </script>
复制代码

外链式：在 html 文档中写一个 script 标签，而且设置 src 属性，src 的属性值引用一个 js 文件资源，而 js 代码写在 js 文件中

使用外链式引入 js 文件时，script 标签里面不能再写 js 代码了，即便写了也不会执行。javascript

<script src="js/1.js"></script>
复制代码

不管是内嵌式仍是外链式，都建议把 script 标签写在 body 结束标签的前面。css

1、浅谈前端发展史

第一阶段：C/S （client server） -> B / S （browser server）网页制做
技术栈：PhotoShop、HTML、CSShtml

第二阶段：从静态到动态，从后端到前端前端开发工程师
先后端分离：
后端：完成数据的分析和业务逻辑的编写（包含API接口编写）
前端：网页制做、JS交互效果、数据的交互和绑定
技术栈：JavaScript 、 Ajax（跨域技术）、jQuery ...
第三阶段：从前端到全端（从PC端到移动端）
技术栈：H五、CSS三、响应式布局开发，Zepto、Hybrid（混合app开发）微信小程序...前端

第四阶段：从全端到全栈
全栈开发：先后端均可以开发（严格意义讲，一种语言完成前段后开发）
技术栈：NODE（基于js编程语言开发服务器端程序）、Express/Koa...vue

2、关于浏览器的内核和引擎

Webkit（v8引擎）：大部分浏览器
Gecko：火狐
Trident：IE
...java

W3C：万维网联盟，制定编程语言的规范与标准
开发者按照规范编写代码，浏览器开发商也会开发一套按照规范把代码渲染成页面的东西（这个东西就是内核或者引擎）node

浏览器内核的做用：按照必定的规范，把代码基于GPU（显卡）绘制出对应的图形和页面等；react

为啥会出现浏览器兼容：
面试

部分浏览器会提早开发一些更好的功能，后期这些功能会被收录到 W3C 规范中，可是在收录以前，会存在必定的兼容性
各个浏览器厂商，为了突出本身的独特性，用其余方法实现 W3C 规范中的功能
...

3、JavaScript

JS：轻量级的客户端脚本编程语言编程

编程语言
HTML + CSS 是标记语言
编程语言是具有必定逻辑的，拥有本身的编程思想（面向对象【oop】、面向过程编程）

面向对象
- C++
- JAVA
- PHP
- C#
- JS
- ...
面向过程：
- C

2.目前的 JS 已经不是客户端语言了，基于 NODE 能够作服务器端程序，因此 JS 是全栈编程语言

学习 JS，咱们学习它的几部分组成

ECMAScript（ES）:js的核心语法
DOM: Document Object Model文档对象模型，提供各类API（属性和方法）让 JS 能够获取或者操做页面中的HTML元素（DOM和元素）
BOM：Browser Object Model 浏览器对象模型，提供各类 API 让 js 能够操做浏览器

4、ECMAScript

它是 JS 的语法规范，JS 中的变量、数据类型、语法规范、操做语句，设计模式等等都是 ES 规定的；

值得注意的是 js 的注释方式：注释是一项备注内容，给人看的，代码执行时会忽略注释内容。

单行注释： // 两个单斜线
多行注释：/多行注释内容写在两个星号之间__/

5、变量（variable）

它不是具体的值，只是一个用来存储具体值的容器或者代名词，由于它存储的值能够改变，因此称为变量。

基于 ES 语法规范，在 JS 中建立变量有如下方式：

var（ES3)
function （ES3）建立函数（函数名也是变量，只不过存储的值是函数类型而已）
let （ES6）声明变量
const （ES6）建立常量（常量就是恒定不变的值，如光速就是常量）
import （ES6）基于ES6的模块处处规范导出须要的信息
class （ES6）基于ES6建立类

/* * 语法： * var 变量名 = 值 * let 变量名 = 值 * const 变量名 = 值 * function 函数名 () { * // 函数体 * } */
var n = 13;
n = 15;
alert(n + 10); // => 弹出来25 此时的 N 表明15

const m = 100;
m = 200; // Uncaught TypeError: Assignment to constant variable (常量存储的值不能被修改，可以被修改的就是变量了)
复制代码

建立变量，命名的时候要遵循一些规范

严格区分大小写
遵循驼峰命名法：按照数字、字母、下划线或者$来命名（数字不能做为开头），命名的时候基于英文单词拼接成一个名字（第一个单词字母小写，其他每个有意义单词的首字母都大写）
不能使用关键字和保留字：在 js 中有特殊含义的叫作关键字，将来均可能成为关键字的叫作保留字

var n = 12;
var N = 12; // 变量 n 和变量 N 不是同一个变量
var studentInfo = 'xyz'; // 驼峰命名法

// 变量要具备语义化
add / create / insert
del (delete) / update / remove(rm)
info / detail
log
复制代码

6、数据类型

数据类型是一门语言进行生产的材料，JS 中包含的值有如下这些类型：

基本类型：
- 数字 number
- 字符串 string
- 布尔 boolean
- null
- undefined
- Symbol 表示一个惟一值（ES6新增）
引用数据类型：
- 对象object
  - 普通对象
  - 数组对象
  - 正则对象
  - 日期对象
  - ...
- 函数function

// [基本数据类型]
var n = 13; // => 0 1 -13 13.2都是数字， 此时变量 n 存储的就是一个数字；数字中有一个特殊的值：NaN(not a number)，表示不是一个有效的数字，可是仍然是一个数字类型

var s = ''; // =>如 '' '13' "13" "name" "age" JS 中全部用单引号或者双引号包裹起来的都是字符串，字符串表示的值是当前引号中包裹的值（一个字符串由零到多个字符串组成）

var b = true; // => 布尔类型只有两个值 true 真 false 表示假

var empty = null; // => 变量 empty 表示 null 空

var notDefined = undefined; // 变量 notDefined 表示 undefined（undefined 这个单词的意思就是未定义）；

// Symbol: 用来建立一个惟一值，和谁都不会重复。下面等号右侧虽然长的同样，可是 s1 和 s2 变量表明两个不一样的值。
var s1 = Symbol('珠峰');
var s2 = Symbol('珠峰');

// [引用数据类型]
// => 对象
var obj = {name: '珠峰培训', age: 9}; // => 普通对象：由大括号包裹起来，里面包含多组属性名和属性值（name 和 age 叫作属性名（又称键，英文名 key），而 '珠峰培训'/9叫作属性值（又称值，英文名 value），因此对象又叫作键值对集合或者key/value集合）
var obj2 = {}; // => 变量 obj2 表示空对象；

// => 数组
var ary = [1, 2, 3, 4, 5]; // => 数组对象：用中括号包裹起来，包含0到多项内容，每一项之间用逗号(英文逗号)分隔。
var ary2 = []; // => 变量 ary2 表示一个空数组

// => 正则：用来匹配字符串的规则
var reg = /^abc$/;  // => 两个斜线中间的叫作元字符

// => 函数：须要屡次重复使用的代码或者有特定功能的代码能够封装成一个函数；
function fn () {// => 函数体}
// function 叫作关键字，用于声明函数变量
// fn 叫作函数名，函数名也须要知足变量声明的条件（本质上函数名也是变量名，只不过这个变量名表明的是一个函数数据类型的值）
// () 【声明函数时】fn后面的这个小括号表示的是形参入口
// {} 写在函数中的 {} 表示函数体，这里面写须要执行的代码

// ....
复制代码

7、JS代码运行及经常使用输出方式

alert方法(函数): 在浏览器中经过弹窗的方式输出（浏览器提示框）

var num = 12;
alert(num); // alert() 读做：alert方法执行【写在方法名后面的“()”读做 “执行” ，就是把alert函数里面的代码执行一遍】。把想输出的东西放在小括号里；

var course = '珠峰培训js基础课程';
alert(course);
复制代码

console.log方法：在浏览器控制台输出日志。console是浏览器的开发者工具的一个页卡（在浏览器中按下F12按键【部分电脑须要按下Fn和F12】）

// console.log() 读做 console.log 方法执行，把想要输出的变量或者内容放在小括号里。
var name = '珠峰培训-马宾';
console.log(name);
复制代码

innerHTML/innerText属性；修改元素中的 HTML 或者文本；

var box = document.getElementById('box'); // => 在document（整个HTML文档中）下面查找 id 为 box 的元素。

// 语法：元素对象.innerHTML/innerText = '想要显示的内容'; 【想要显示的内容必须是一个字符串类型的值】
box.innerHTML = '<h1>珠峰培训js基础课程第一周</h1>';
box.innerText = '<h1>珠峰培训js基础课程第一周</h1>';

// box.innerHTML/box.innerText = '字符串' 读做：将 box 的 innerHTML 或 innerText 修改成 '字符串'

// => 咱们发现一样是包在字符串里面的内容，经过 innerHTML 的方式浏览器会将<h1>识别成 HTML 内容；可是 innerText 不能识别，而是你字符串里面写什么，页面就输出什么；
复制代码

8、有效数字检测、数据类型转换、数据类型检测

有效数字检测

有效数字检测 isNaN() 方法；非有效数字：NaN(not a number)

isNaN(须要检测的值)：检测当前是不是一个有效数字，若是是一个有效数字，isNaN执行后就会获得一个 false，不然 isNaN 执行后获得一个 true；（咱们获得的这个 false 或者 true 称为 isNaN 函数的返回值【就“结果”的意思】）
语法：isNaN(须要检测的值)

var num = 12;
 var result1 = isNaN(12); // -> 检测 num 变量存储的值是否为非有效数字，12是数字，因此 isNaN 执行后获得一个 false；
 var result2 = isNaN('13'); // -> false
 var result3 = isNaN('珠峰'); // -> true 由于汉字不是数字
 var result4 = isNaN(false); // -> false
 var result5 = isNaN(null); // -> false;
 var result6 = isNaN(undefined); // -> true
 var result7 = isNaN({name: '珠峰培训'}); // -> true
 var result8 = isNaN([12, 23]); // -> true
 var result9 = isNaN([12]); // -> false
 var result10 = isNaN(/^$/); // -> true
 var result11 = isNaN(function () {}); // -> true
复制代码

思考：为啥小括号里的不是数字也能获得结果？这是isNaN的检测机制：

一、首先验证当前要检测的值是否为数字类型的，若是不是，浏览器会默认的把值转换为数字类型

把非数字类型的值转换为数字：
- 其余基本类型转换为数字：内部隐式调用Number方法

Number(须要转换的值); 是强制转换
[字符串转数字]：若是字符串里面都是数字，那么返回这个数字，若是有非数字的因素会返回NaN.
    Number('13') // -> 13
    Number('13px') // NaN 字符串中 px 不是数字
    Number('13.5') // 13.5 能够识别小数点
[布尔值转数字]
Number(true); // -> 1
Number(false); // -> 0

[null、undefined转数字]
Number(null); // 0
Number(undefined); // NaN
复制代码

引用数据类型转数字：先调用引用数据类型值的 toString 方法将引用数据类型转化为字符串，而后再将字符串转换为数字。

[对象转数字]
Number({}) // NaN; 其内部机制：({}).toString() -> '[object Object]' -> Number('[object Object]') -> NaN

[数组转数字]
Number([12, 23]) // NaN; 内部机制：[12, 23].toString() -> '12, 23' -> Number('12, 23') -> NaN

[正则]
Number(/^\d$/) // NaN; 内部机制：/^\d$/.toString() -> '/^\d$/' -> Number('/^\d$/') -> NaN
复制代码

二、当前检测的值已是数字类型，是有效数字就获得一个 false，不是就会获得一个 true；（在数字类型中只有 NaN 不是有效数字，其他的都是有效数字）
Number(1); // false
Number(NaN); // true

三、NaN 的比较

NaN == NaN // 返回 false；（ == 是比较运算符，一个等号是赋值）
这是由于什么呢？由于 NaN 只是表示非数字，字符串 'a' 是非数字，'张三'也是非数字。可是 a 和张三不相等。

if (Number(num) == NaN) {
    // if 是 js 中用来作判断的语言结构，小括号里表示条件，若是条件成立就执行花括号里面的代码
    alert('珠峰10年，专一前端');
}

// 上面花括号里面的代码永远不会执行，由于 Number 方法获得的结果只有两种状况，要么是数字，要么是 NaN。若是获得一个数字，数字和 NaN 不相等，若是是 NaN，NaN 和 NaN 也不相等。
复制代码

数据类型转换（parseInt、parseFloat方法）

做用和 Number 方法类似，都是把非数字类型值转换为数字，区别在于 Number 方法是强制转换，即要求被转字符串中必须都是数字，若是不知足这一条件直接获得 NaN，而 parseInt 和 parseFloat 则是非强制转换。

parseInt：把一个字符串中的整数解析出来
parseFloat：把一个字符串中整数和小数包含小数点都解析出来

parseInt('13.5') // 13
parseFloat('13.5') // 13.5

parseInt('width: 13.5px'); // NaN
parseFloat('width: 13.5px'); // NaN

注意：不管是 parseInt 仍是 parseFloat 都是从字符串的最左边开始查找有效数字，直到遇到第一个非有效数字字符就中止查找，若是第一个就不是有效数字，那么直接回返回 NaN，而且中止查找。

数据类型检测：

检测数据类型一共有四种方式：

typeof
instanceof
constructor
Object.prototype.toString.call()

咱们这里先讲 typeof 运算符

语法：typeof 被检测的值返回被检测值的数据类型；

console.log(typeof 1); // number
console.log(typeof 'zhufengpeixun'); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof /^/); // object

// 思考？typeof 运算符的返回值是个什么数据类型？
var result = typeof 1;
console.log(typeof result); // string

// 面试题
console.log(typeof typeof 1); // string
复制代码

typeof 是有局限性的，检测基本数据类型时，typeof 检测 null 会返回 object，由于 null 是空对象指针。同时，typeof 检测引用数据类型时，不能具体区分是哪种对象数据类型（对象、数组、正则等）只会统一返回object。

2-js基础教程

1、普通对象

js中的普通对象：无序的键值对集合。

由大括号包裹起来的{key: value}

由零到多组属性名和属性值（键值对）组成。属性名能够是数字、字母、或者下划线等，而且属性名都是字符串类型的。

属性是用来描述当前对象特征的，属性名是当前对象具有的特征，属性值是这个特征的描述，一组属性名和属性值成为一组键值对

声明对象

var feTraining = {
    name: '珠峰培训',
    age: 9,
    characters: '专一前端10年',
    9: 'age'
}
复制代码

对象的操做：键值对的增删改查

获取对象的某个属性的值
- 对象.属性名
- 对象['属性名']

console.log(feTraining.name);
console.log(feTraining['name']);
var str = 'age';
console.log(feTraining[str]); // 9
复制代码

若是用. 后面的属性名不用写引号，若是使用[]，属性名须要用字符串包裹
若是属性名是数字，只能使用 []
方括号里面还能够写变量或者表达式
若是获取一个对象不存在的属性，会获得一个 undefined

增长/修改
js 对象中的属性名是不容许重复的，是惟一的
如给一个对象的属性赋值，有两种状况:
- 若是对象以前不存在这个属性，那么就是给这个对象增长一个属性，值是等号右侧的值
- 若是对象以前已经存在这个属性了，再赋值就是修改对象中的这个属性的值

feTraining.courses = 'JS高级+vue+react+node'; // feTraining 以前不存在 courses 这个属性，因此是增长；
console.log(feTraining);

feTraining.name = 'Everest Training'; // feTraining 以前就存在 name 属性，因此是修改
console.log(feTraining);
复制代码

删除
完全删除：把对象的属性名和属性值都删除。 delete obj['name']
软删除：将对象的某个属性的值赋值为null。 obj.name = null

delete feTraining.age;
console.log(feTraining);

feTraining.courses = null;
console.log(feTraining); // course 属性名还在，只是值为 null 了
复制代码

思考？

var obj = {
    name: '珠峰培训',
    age: 10
};
obj.name // '珠峰培训'
obj['name'] // '珠峰培训'
obj[name] ?? => name 和 'name'有什么区别？'name' 表示的是一个字符串，而 name 表示一个变量名
复制代码

对象中的属性名都是字符串类型的

2、数组对象

数组是【有序】的键值对集合；可是数组的键是浏览器设置的，不须要咱们手动设置，而且键都是从0开始的数字，咱们称数字属性名为【索引】。数组的第一项的对应的索引是0，第二项对应的索引是1，以此类推，第n项对应的索引是 n - 1。

var ary = [12, 23]; // ? 12和23是都是属性值，属性名呢？
console.log(ary); // 从控制台能够发现是有键的，而且键都是数字

数组的操做

数组的键是数字，因此只能用方括号的方式获取、修改，并且写在方括号里面的属性名不须要用引号包裹；

var ary = [12, 23];
console.log(ary[0]);
console.log(ary.0); // 报错
console.log(ary[1]);
console.log(ary[2]); // 访问一个数组不存在的索引，会获得一个 undefined
复制代码

3、基本数据类型和引用数据类型的区别

var a = 12;
var b = a;
b = 13;
console.log(a); // 12
console.log(b); // 13

var obj1 = {
  name: '珠峰',
  age: 10
};
var obj2 = obj1;
obj2.age = 100;
console.log(obj1.age); // 100
console.log(obj2.age); // 100
复制代码

为何会有这种状况？

基本数据类型（也叫作值类型）的操做，直接操做就是这个值，意思就是说变量自己就表明这个值。因此： var b = a; a存储12这个值，而后声明一个变量 b，而后让b = a，就是让b = 12。这样和 var b = 12本质上没有任何区别；

引用数据类型都是存放在堆内存空间中的，同时这个堆内存空间有一个十六进制的内存地址(例如aaafff000)。咱们在声明一个变量存储引用数据类型时，不是直接把对象赋值给变量，而是把对象的堆内存地址赋值给变量。因此 obj1 拿到的知识这个堆内存地址 aaafff000；
因此引用数据类型的操做不是直接操做的值，而是操做它的引用数据类型的堆内存地址。因此var obj2 = obj1; 只是把 obj1 表明的堆内存地址赋值给了变量 obj2。
因此 obj2.age = 100;是经过 obj2 的堆内存地址找到堆内存地址中的存储的 age 的值，把它修改为100。同时，咱们访问 obj1.age 时也是先经过 obj1 存储的堆内存地址找到内存空间，而后从里面把属性age的值取到，此时这个内存空间中的值已经修改为100了。因此obj.age 也是100

4、布尔类型、布尔运算

布尔类型值只有两个值，true 和 false；布尔运算用来测试真假值，即运算结果是真的仍是假的，一般结合 js 的判断语句（if/switch-case/三元表达式）使用。

其余数据类型和布尔值进行转换

Boolean方法

语法：Boolean(须要转换的值) ；获得转换后的规则

var boo = Boolean(1);
var boo2 = Boolean(0);
console.log(boo, boo2); // true false
复制代码

!运算符（取反运算符）true 取反就是 false，而 false 取反就是 true

运算符是有固定功能的关键字或者符号。它经过操做值也能够获得返回结果，与方法不一样的是运算符不须要小括号。
语法：!须要取反的值；获得取反后的布尔值。其内部机制是先把其余数据类型转换成布尔值，而后再取反。
转换规律：在 js 中只有 0/NaN/空字符串''/null/undefined 这5个值转换成布尔值是 false，其他的都是 true。

var str = '珠峰培训，10年专一前端';
var result = !str;
// 内部运做机制：
// 第一步先将str转换成布尔值，str不属于那5个值，因此 Boolean(str) => true
// 而后再取反，true 取反 => false
console.log(result); // false
复制代码

!! 运算符等效于 Boolean 方法

语法：!!须要转换的值；

var num1 = !!1;
var num2 = !!0;
console.log(num1, num2); // true false

console.log(!!{}); // true
console.log(!![]); // true
console.log(!!{name: 'zhufeng'}); // true
复制代码

5、null 和 undefined

null 空对象指针；不占内存，通俗理解就是人为的手动先赋值为 null，后面程序中咱们会再给它赋值为其余值；

undefined 未定义。多数状况是某些浏览器内置机制设置的默认值，声明一个变量不赋值，这个变量的默认值就是undefined

6、js中的判断语句

判断语句是流程控制的重要语句，其做用是当知足某些条件时才能执行某些代码

一、if/else if/else

// 单独使用if
if (条件) {
  // 浏览器会对条件进行布尔运算，即求出条件时 true 仍是 false。条件为 true 时，即条件成立的时候才会执行这个花括号里面的代码
}

// 两种状况，结合 else
if (条件) {
  // 条件为 true 时
} else {
  // 不知足条件的时候要执行的代码
}

// 多种状况，结合 else if
if (条件1) {
  // 条件1为 true 时
} else if (条件2) {
  // 条件2为 true 的时候要执行的代码
} else {
  // 上面条件都不知足条件的时候要执行的代码
}
复制代码

示例：

var num = 6;
if (num > 6) {
  num++; // => num = num + 1; 在自身上累加一个
} else if (num >= 10) {
  num--;
} else {
  num+=2
}
console.log(num);
复制代码

只要有一个条件成立，后面无论是否还有成立的条件，都不会在执行了

var num = 10;
if (num > 5) {
  num += 2;
} else if (num > 8) {
  // 虽然 num 知足大于8，可是再上面已经执行过num>5的代码，因此这里不会执行
  num += 3;
} else {
  num += 4;
}
console.log(num); // 12
复制代码

二、条件怎么写？

if (条件) 条件最终须要的是一个布尔值，而后根据是 true 仍是 false 来判断条件是否成立。若是条件里面写的是能够返回布尔值的表达式，那么就利用这个表达式的返回结果；若是不是返回布尔值，那么浏览器会自动把它转换成布尔值，而后用转换出来的结果判断条件是否成成立

常见比较运算符：比较运算符都会返回布尔值

大于(>)， a > b，当 a 大于 b 时返回 true，不然返回 false
大于等于(>=)， a >= b ，当 a 大于等于 b 时返回 true，不然返回 false
小于(<)，a < b
小于等于(<=)
不等于(!=)、
等于(相对比较== 或者绝对比较===)
- == 是相对比较，只要两边的值相同就行，不比较类型，如 1 == '1' 返回 true
- === 是绝对比较，两边值相同还不够，还要比较类型。1 === '1' 返回 false，由于1是 number，而'1'是 string，类型不一样

console.log(1 > 0); // true
console.log(1 < 0); // false
console.log(1 == '1'); // true
console.log(1 === '1'); // false
复制代码

条件常见形式：

使用比较运算符，直接返回布尔值
若是是数学表达式，那么会先运算求值，而后再把运算出来的结果转换成布尔值。

在js中，+ - * / % 都是数学运算，除 + 之外，其他的运算符在运算时，若是遇到非数字类型的值，首先会转成数字类型（Number），而后再进行运算

if ('3px' + 3) {
  // + 操做符在两边都是数字时才是加法运算符，若是有一个不是数字，那么加好就是字符串拼接。
  // 因此 '3px' + 3的结果是字符串'3px3'，而字符串 '3px3'转换成布尔值之后是true，因此条件成立
}

if ('3px' - 3) {
  // - 会调用Number()方法把'3px'转成数字，Number('3px') -> NaN，而NaN - 3 -> NaN，而NaN转成布尔值是false，因此条件不成立
}
复制代码

其余状况，均会把条件转成布尔值。

练习

var num = parseInt('width: 35.5px');
if (num == 35.5) {
  alert(0);
} else if (num == 35) {
  alert(1);
} else if (num == NaN) {
  alert(2);
} else if (typeof num == 'number') {
  alert(3);
} else {
  alert(4);
}
复制代码

二、三元运算符

语法：条件 ? 成立要作的事情 : 不成立要作的事情
至关于简单的 if else判断
而且三元运算符是有返回值的，当条件成立时三元运算符返回条件成立时的值，不成立时返回不成立的值。

通常状况

var num = 12;
if (num < 10) {
  num++;
} else {
  num--;
}

// 改写成三元运算符

num > 10 ? num++ : num--;
复制代码

特殊状况：
- 若是三元运算符中条件成立或者不成立时不须要任何操做，咱们用null/undefined/ void 0占位

// num > 10就++，不然啥也不作

num > 10 ? num++ : null;
num > 10 ? num++ : undefined;
num > 10 ? num++ : void 0;
复制代码

- 若是在条件成立（或不成立）时有多条语句，须要用小括号括起来，每条语句；
复制代码

var num = 10;
num >= 10 ? (num++, num*=2) : null;
复制代码

三、switch case

语法：

switch (变量或者表达式) {
  case 值1:
    变量或者表达式的值是值1的时候执行的代码;
    break;
  case 值2:
     变量或者表达式的值是值2的时候执行的代码;
     break;
  ...
  case 值n:
    变量或者表达式的值是值1的时候执行的代码;
    break;
  default:
    以上状况都不知足时，至关于else
}
复制代码

switch case应用于变量（表达式）在不一样值的状况下的不一样操做，每一种 case 结束后都须要加break（break是结束整个判断）;

var num = 12;
if (num == 10) {
  num++;
} else if (num == 5) {
  num--;
} else {
  num = 0;
}

// 改写成 switch case
switch (num) {
  case 10:
    num++;
    break;
  case 5:
    num--;
    break;
  default:
    num = 0;
}
复制代码

注意：switch case 中每个 case 的比较都是基于 === 绝对相等来完成判断的。即 10 === '10' 是 false。真实项目中经常使用绝对比较。

3-js基础教程

1、逻辑运算符 || 和 &&

一、 || 表示或者，二者中有一个为 true，就返回 true

if (0 || 1) {
  console.log('true')
}
if (0 || false) {
  console.log('false')
}
if (true || 0) {
  console.log(true);
}
复制代码

2 && 是而且，两个值中必须两个都是 true，才返回 true

if (0 && 1) {
  console.log(1, '0 && 1')
}
if (0 && false) {
  console.log(2, '0 && false')
}
if (true && 0) {
  console.log(3, 'true && 0');
}
复制代码

3. || 和 && 也是有返回值的，

|| 若是第一个为 true 就返回第一个，若是第一个不为 true 就返回第二个

var r1 = 1 || 0;
console.log(r1);
var r2 = 0 || false;
复制代码

&& 若是第一个为 true 返回第二个，若是第一个为 false 返回第一个

var r3 = 1 && 0;
var r4 = false && 0;
console.log(r3);
console.log(r4);
复制代码

2、==和===的区别

== 在比较时等号左右两侧数据类型不一样时会先转成相同数据类型，再比较

== 是相对比较； === 是绝对比较

1.1 字符串 == 数字；字符串转换成数字

console.log(1 == '1'); // true
复制代码

1.2 布尔值 == 数字; 布尔值转成数字

console.log(1 == true); // true;
复制代码

1.3 布尔值 == 字符串; 布尔值转数字，字符串也转成数字，而后进行比较；

console.log(false == '0'); // true
复制代码

1.4 null == undefined // true, null 和 undefined 和其余数据类型比较都是false
1.5 对象 == 对象; 比较的是空间地址，地址相同返回true

console.log({} == {}); // false
复制代码

1.6 对象 == 字符串; 对象转成字符串，而后和字符串比较

console.log({} == '[object Object]'); // true
复制代码

1.7 对象 == 布尔值；对象先转成字符串，再转数字，布尔值也转成数字，在比较这两个数字

console.log({} == true); // false
console.log([] == false); // true
复制代码

1.8 对象 == 数字；对象先转成字符串，而后再转成数字

console.log({} == 1); // false
console.log([] == 0); // true
复制代码

特殊：NaN 和 NaN 永远不相等

console.log(NaN == NaN); // NaN 和 NaN 永远不相等
复制代码

3、for循环

for 循环 (for loop) 语句：按照必定的规律，重复去作某一件事情，此时就须要使用循环语句.

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

/* [ 0: 1, 1: 2, 2: 3, ... 11: 12 length: 12 // length属性的值表示数组有多少项 ] */

// 把数组里面的每一项都输出出来：

console.log(ary[0]);
console.log(ary[1]);
console.log(ary[2]);
console.log(ary[3]);
console.log(ary[4]);
console.log(ary[5]);
console.log(ary[6]);
console.log(ary[7]);
console.log(ary[8]);
console.log(ary[9]);
console.log(ary[10]);
console.log(ary[11]);
复制代码

? 思考：咱们发现上面的代码中除了方括号中索引不一样，其余的代码都是相同的。
这个时候要是有一个变量i，而后让:
第一次时i=0，
第二次i=1，
第三次i=2，
...
依次类推，每一次帮咱们给i加上1，那么到什么就不加了呢，由于i的最大索引是length-1，因此当i大于length-1以后就再也不加了。
而后咱们把代码中的索引换成i就能够了 console.log(ary[i]);

for (var i = 0; i < ary.length; i++) {

  // 第一次循环: i = 0 i < 12 因此 ary[i] 是 ary[0]
  // 第二次循环: i = 1 i < 12 因此 ary[i] 是 ary[1]
  // ...
  // i = 12 i < 12 => false 再也不执行循环体，循环结束，
  console.log(ary[i]);
}
console.log(i); // 在for的小括号里声明的变量能够在外面使用
复制代码

for 循环语法

定义初始值 var i = 0
设定循环成立的条件 i < ary.length（若是条件成立执行循环，不成立则结束循环）
条件成立会执行循环体中的内容（循环体就是花括号中的代码）
执行累加 i++

var i = 0; 和i++ 能够不放到括号里，可是你写在括号里的这个变量和写在外面是同样的，在循环里i++更改的就是外面声明的这个i；

var k = 0;
for (;k < 5;) {
  console.log(k);
  k++;
}
console.log(k); // 在外面的k也被更改了，已经变成了5
复制代码

倒着输出一个数组

把i的初始值设置为ary.length - 1，而后条件是 i >=0 ; i--;

var ary = [12, 23, 34];
for (var i = ary.length - 1; i >= 0; i--) {
  console.log(ary[i]);
}
复制代码

输入数组中的奇偶项

// 输出数组中的奇数项
// 偶数：可以被2整除的数字叫作偶数（整除：被除数除以余数商是整数且余数为0）
// 奇数：不能被2整除的数字

for (var j = 0; j < ary.length; j++) {
  if (j % 2 === 0) {
    // % 是取模运算符 ，就是取余数
    // 0 % 2 余数是0
    // 1 % 2 余数是1
    // 3 % 2 余数是1
    // 4 % 2 余数是0
    console.log(ary[j]);
  }
}
复制代码

理解 break和 continue

continue 跳出某一轮的循环，继续后面的循环

for (var i = 0; i < 10; i++) {
	if (i === 5) {
		continue; // 跳出i=5的那一次循环。结束本轮循环（循环体中的continue后面的代码将再也不执行，继续执行下一轮循环）
	}
	console.log(i)
}
复制代码

break 结束整个循环

for (var i = 0; i < 10; i++) {
	if (i === 5) {
		break; // 结束i=5及之后全部的循环。break是强制结束整个循环，不作任何处理，同时循环体中的break后面的代码也不会执行了
	}
	console.log(i)
}
复制代码

4、for in 循环

for in循环
for in 循环是专门用来遍历对象的，能够把对象里面的属性一个一个的遍历出来。
注意：for in只能遍历对象的可枚举属性。通常浏览器默认添加的都是不可枚举的属性。例如__proto**__**

var obj = {
  name: '珠峰',
  age: 10
};

for (var k in obj) {
  // k 表明每次遍历时的属性名
  console.log('k ', k);
  console.log('obj[k]', obj[k]);
}
复制代码

5、获取DOM对象

DOM对象：咱们经过 js 的相关和 html 方法获取到的 html 文档中的元素

document.getElementById()

经过 ID 获取页面中的元素对象 getElementById()方法

语法：document.getElementById('idbox');
参数：元素id， 'box'就是参数
返回值（函数执行事后的结果）：若是获取到，就是获取到的 DOM 元素对象，若是获取不到就是 null；

解析：
1. document 是根据 ID 查找的上下文，document 表明的是整个 HTML 文档（就是 html 标签自身及包裹的全部内容），getElementById 的上下文只能是 document
2. 经过getElementById获取的元素是一个对象数据类型的值（里面包含了不少的内置属性，这些属性都是描述这个对象的）
DOM对象的属性： 3. className: 存储的是字符串类型（string），表明的是当前元素的样式类名 4. id: 存储的是一个字符串类型（string），当前元素的ID名 5. innerHTML：字符串存储的当前元素中全部的内容（包含标签，而且标签以字符串形式存在） 6. innerText: 存储当前元素中全部的文本内容（没有元素标签） 7. onclick: 鼠标点击事件元素的点击事件属性，基于这个属性，咱们能够给元素绑定点击事件 8. onmouseover: 鼠标划过事件 9. onmouseout: 鼠标划出事件 10. style 存储当前元素的全部的【行内样式】值（获取和操做的都只能是写在标签上的行内样式，写在样式表中的样式，没法经过这个属性获取到）；

var box = document.getElementById('box');
console.log(box);
复制代码

getElementsByTagName()

经过标签名获取【元素对象集合】

解析：
1. 语法：context.getElementsByTagName('标签名')
2. 参数：标签名字符串
3. 返回值：从 context 下面查到的指定标签名 DOM 元素对象组成的集合；这个集合中的每一项都是 DOM 元素对象；
4. context 不是写死的，是咱们指定的上下文。你想获取那个元素下面的指定标签元素集合，哪一个元素就是上下文

var listContainer = document.getElementById('container');
var liList = listContainer.getElementsByTagName('li'); // 此时 listContainer 就是上下文

console.log(liList);
console.log(liList[0]);
console.log(liList[1]);
console.log(liList[2]);
liList[0].style.backgroundColor = 'red';
复制代码

解析：
1. 获取的是一个元素结合（HTMLCollection），元素集合也是一个对象数据类型的，结合和数组很是相似（数字做为索引，length表明长度），但它不是数组，而是叫作类数组。
2. 和数组操做同样，经过[索引]的方式能够取出类数组的每一项。liList[0]获取的是第一项。
3. liList.length 表示集合中li的数量
4. 集合中的每一项都是元素对象，咱们能够获取或者修改它的元素属性，如style、innerHTML、innerText
5. 结合索引、length能够经过for循环把集合中的每一项获取出来。

? 思考 ? DOM对象也是对象，那么咱们能够向操做普通对象那样操做它吗？好比说添加一个属性，或者修改某个属性？
DOM对象也是对象，咱们也能够向操做对象的方式同样操做DOM对象

for (var i = 0; i < liList.length; i++) {
	var cur = liList[i];
	cur.myIndex = i; // 经过自定义属性存储这个元素在元素集合中的索引
	console.log(cur);
}
复制代码

6、隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>珠峰-隔行变色</title>
	<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .li-wrapper { margin: 30px auto; border: 1px solid #00b38a; width: 500px; } .li-wrapper li { height: 50px; line-height: 50px; text-align: center; border-bottom: 1px darkblue dashed; } </style>
</head>
<body>
<ul id="liWrapper" class="li-wrapper">
	<li>1item1</li>
	<li>2item2</li>
	<li>3item3</li>
	<li>4item4</li>
	<li>5item5</li>
	<li>6item6</li>
	<li>7item7</li>
	<li>8item8</li>
	<li>9item9</li>
	<li>10item10</li>
</ul>

<script src="js/6-changeColor.js"></script>
</body>
</html>
复制代码

// 1. => 获取元素 liWrapper 下的 li

var liWrapper = document.getElementById('liWrapper');
var liList = liWrapper.getElementsByTagName('li');
for (let i = 0; i < liList.length; i++) {
	// 循环遍历元素对象，而后取出每一项
	if (i % 2 === 0) {
		// 若是是 i 是偶数
		liList[i].style.backgroundColor = 'pink';
	} else {
		// 不然 i 是奇数
		liList[i].style.backgroundColor = 'yellow';
	}
}
复制代码