作用域
- 作用域是你的代码在运行时，各个变量、函数和对象的可访问性。
为什么需要作用域？
- 最小访问原则 通过显示变量的可见性，为代码提供了一个安全层级。
JavaScript作用域
- 全局作用域
- 局部作用域
全局作用域
- JavaScript 文档中（document）只有一个全局作用域。定义在函数之外的变量会被保存在全局作用域中。
- 全局作用域里的变量能够在其他作用域中被访问和修改。
- 一个应用中全局作用域的生存周期与该应用相同。
局部作用域
- 定义在函数中的变量就在局部作用域中。并且函数在每次调用时都有一个不同的作用域。这意味着同名变量可以用在不同的函数中
- 局部作用域只在该函数调用执行期间存在。
块级作用域
ECMAScript 6(简称ES6)中新增了块级作用域。
- 块作用域由
{ }包括，if语句和for,while语句里面的{ }也属于块作用域。在块级声明中定义的变量从属于该块所在的作用域。 - 和
var关键字不同，let和const关键字支持在块级声明中创建使用局部作用域。 -
var、let、const的区别- var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
- const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
作用域原则
- 作用域链：JavaScript需要查询一个变量x时，首先会查找作用于的第一个对象，如果第一份对象没有定义x变量，JavaScript会继续查找第二个对象有没有定义x，以此类推。
- 函数体内部，局部变量的优先级比同名的全局变量高。
- 函数中声明的变量在整个函数中都有定义。
- 未使用
var,let,const关键字声明的变量都是全局变量。
- 未使用
- 全局变量都是
windous对象的属性。
字符串
- 在JavaScript中，所有的文本数据军备储存为字符串。JavaScrippt中没有储存单个字符串的数据类型，尽管只储存一个字符，也是长度为1的字符串。
- 字符串可以由双引号
"或单引号'表示。 - 想将长字符串写成多行时，可以使用
+将多个字符串连接，也可以在每行末尾使用反斜杠字符\,确保反斜杠后面没有空格或任何除换行符之外的字符或缩进，否则反斜杠将不会工作。如：
let longString = "This is a very long string which needs " +
"to wrap across multiple lines because " +
"otherwise my code is unreadable.";
或
let longString = "This is a very long string which needs \
to wrap across multiple lines because \
otherwise my code is unreadable.";
字符字面量
也叫作转义字符，用于表示非打印字符，或有其他用途的字符。常见的有：
-
\n换行 -
\t水平制表符 -
\v垂直制表符 -
\b退格 -
\r回车 -
\\斜杠() -
\'单引号(') -
\"双引号(")
字符串特点
- 在JS中，字符串是不可变的。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。
字符串常用方法
- 转换为字符串
-
toString()如：
var myNumber = 24 ; // 24 var myString = myNumber.toString（）; //“24”-
String()，如：
var myNumber = 24 ; // 24 var myString = String（myNumber）; //“24” -
- 获取字符串长度
-
length属性，如：
var text = 'Hello '; console.log(text.length); // 6 （注意Hello后面有一个空格） -
- 拆分字符串
-
split()：将字符串分隔为子字符串数组。如：
var myString = “come，apart，at，the，commas” ; var substringArray = myString.split（“，”）; // [“come”，“apart”，“at”，“the”，“逗号”] var arrayLimited = myString.split（“，”，3）; // [“come”，“apart”，“at”] -
- 取出单个字符
-
charAt()方法。如：'cat'.charAt(1); // 'a' - 把字符串当做一个类似数组的对象，其中的每个字符对应一个数值索引。如：
'cat'[1]; // 'a' -
charCodeAt()取出字符代码，而非字符本身。
-
- 字符串连接
-
+号将右边的字符串连接在左边的字符串后面。(推荐使用)
var text = 'hello '; text = text + 'world'; // 也可以用+=表示：text+='world'; console.log(text); // hello world-
concat()将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回，不影响原字符串。如：
var hello = "Hello, "; console.log(hello.concat("kings", " have a nice day.")); // Hello, kings have a nice day. console.log(hello); // Hello, -
- 字符串搜索
-
includes()：判断一个字符串是否包含在另一个字符串中，根据情况返回true或false，区分大小写。如：
'Blue Whale'.includes('blue'); // false (大小写不同) 'Blue Whale'.includes('Blue'); // true-
indexOf()：从字符串的开头开始搜索子字符串（传入的第一个参数），并返回第一次出现的子字符串的开始位置。如：
var stringOne = “Johnny Waldo Harrison Waldo” ; var wheresWaldo = stringOne.indexOf（“Waldo”）; // 7-
lastIndexOf()：返回传入的子字符串的最后一次出现的起始位置。如：
var stringOne = “Johnny Waldo Harrison Waldo” ; var wheresWaldo = stringOne.lastIndexOf（“Waldo”）; // 22 -
- 替换字符串
-
replace()如下：
var slugger = “Josh Hamilton” ; var betterSlugger = slugger.replace（“h Hamilton”，“e Bautista”）; console .log（betterSlugger）; //“Jose Bautista”- 第一个参数是要替换的子字符串，第二个参数是新的子字符串。这只会替换匹配的子字符串的第一个实例。
- 要替换匹配的子字符串的所有实例，请使用带有全局标志的正则表达式：
var myString = "She sells automotive shells on the automotive shore"; var newString = myString.replace(/automotive/g, "sea"); console.log(newString); // "She sells sea shells on the sea shore" -
- 提取子字符串
-
substr(): 返回一个字符串中从指定位置开始到指定字符数的字符，两个参数分别为开始提取字符的位置和提取的字符数长度（可选）。如：
var str = 'abcdefghij'; str.substr(0,3); // 'abc' tr.substr(3,3); // 'def' str.substr(3); // 'defghij'-
substring()：返回一个字符串在开始索引位置到结束索引位置之间的一个子集，或从开始索引直到字符串的末尾的一个子集。与substr()方法不同的是，substring()方法的第二个参数是结束提取字符的位置（可选）。如：
var str = 'abcdefghij'; str.substring(0,3); // 'abc' str.substring(3,3); // '' (因为从3到3，中间没有字符) str.substring(3); // 'defghij' str.substring(2,3); // 'c'-
slice()：与substring()参数相同。
-
- 将字符串转换为大写或小写
- 将字符串全部转换为大写
toLocalUpperCase(),toUpperCase()。如：
var stringOne = "Speak up, I can't hear you."; var stringTwo = stringOne.toLocaleUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU" var stringThree = stringOne.toUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU"- 将字符串全部转换为小写
toLocalLowerCase(),toLowerCase()。如：
var stringOne = "YOU DON'T HAVE TO YELL"; var stringTwo = stringOne.toLocaleLowerCase(); // "you don't have to yell" var stringThree = stringOne.toLowerCase(); // "you don't have to yell" - 将字符串全部转换为大写
数组
数组是数据的有序列表，在JavaScript中，数组中的每一项可以保存任何类型的数据，也就是说可以用数组的第一项保存字符串，第二项保存数值，第三项保存对象等，同时，JavaScript中数组的长度是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。
- 创建数组
var fruits = new Array();var fruits = new Array(10);var fruits = ['apple', 'pear', 'peach']; // 创建了一个包含三个字符串的数组var names = []; // 创建了一个空数组var values = [1, 2, ,]; // 不要这样做!这样会创建一个包含2项或4项的数组
- 数组中的length属性不是只读的。因此，我们还可以通过设置这个属性，从数组的末尾移除数据项，如：
var fruits = ['apple', 'pear', 'peach'];
fruits.length = 2;
console.log(fruits[2]); // undefined - 相当于删除了数组中的第三项
数组常用方法
- 遍历数组
fruits.forEach(function (item, index, array) {
console.log(item, index);
});
// Apple 0
// Banana 1
- 添加元素到数组的末尾
var newLength = fruits.push('Orange');
- 删除数组末尾的元素
var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];
- 删除数组最前面（头部）的元素
var first = fruits.shift(); // remove Apple from the front
// ["Banana"];
- 添加元素到数组的头部
var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];
- 找出某个元素在数组中的索引
fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
var pos = fruits.indexOf('Banana');
// 1
- 通过索引删除某个元素
var removedItem = fruits.splice(pos, 1); // this is how to remove an item
// ["Strawberry", "Mango"]
- 从一个索引位置删除多个元素
var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables);
// ["Cabbage", "Turnip", "Radish", "Carrot"]
var pos = 1, n = 2;
var removedItems = vegetables.splice(pos, n);
// this is how to remove items, n defines the number of items to be removed,
// from that position(pos) onward to the end of array.
console.log(vegetables);
// ["Cabbage", "Carrot"] (the original array is changed)
console.log(removedItems);
// ["Turnip", "Radish"]
- 复制一个数组
var shallowCopy = fruits.slice(); // this is how to make a copy
// ["Strawberry", "Mango"]
数学运算符
- 赋值
-
===：严格相等，包括值和数据类型的相等 -
==：值得相等，不判断数据类型
alert('0' === 0); // false 严格相等判断，’0‘是字符串，而0是数字，故不严格相等。 alert('0' == 0); // true 非严格相等判断，会将’0‘隐式转换为0，再比较，即 0==0，故返回true。 -
- 加法
+ - 减法
- - 乘法
* - 除法
/ - 取模，即求余数
% - 自加
++-
++x（预增量），“增量变量，表达式的值是最终值”。即先进行增量，再返回增量后的值。 -
x++（增量后），“记住原始值，然后增加变量；表达式的值就是原始值”。即先返回原始值，在进行增量。- 作为独立语句语句使用时，它们的含义是相同的：
var x = y = 2; x++; alert(x); // 3 ++y; alert(y); // 3- 当在其他地方使用表达式的值时，就会出现差异。
var x = y = 2; alert(x++); // 2 alert(++y); // 3
-
- 加等
+= - 自减
-- - 减等
-= - 判断
>,>=,<,<= - 优先级：和数学中一样，先算乘除，再算加减；有括号要先算括号里面的。
Math对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
- Math对象属性
| 属性 | 描述 |
|---|---|
E |
返回算术常量 e，即自然对数的底数（约等于2.718）。 |
LN2 |
返回 2 的自然对数（约等于0.693）。 |
LN10 |
返回 10 的自然对数（约等于2.302）。 |
LOG2E |
返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。 |
LOG10E |
返回以 10 为底的 e 的对数（约等于0.434）。 |
PI |
返回圆周率（约等于3.14159）。 |
SQRT1_2 |
返回 2 的平方根的倒数（约等于 0.707）。 |
SQRT2 |
返回 2 的平方根（约等于 1.414）。 |
- Math对象方法
| 方法 | 描述 |
|---|---|
abs(x) |
返回 x 的绝对值。 |
asin(x) |
返回 x 的反正弦值。 |
atan(x) |
以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) |
返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
ceil(x) |
对数进行上舍入。 |
cos(x) |
返回数的余弦。 |
exp(x) |
返回 Ex 的指数。 |
floor(x) |
对 x 进行下舍入。 |
log(x) |
返回数的自然对数（底为e）。 |
max(x,y,z,...,n) |
返回 x,y,z,...,n 中的最高值。 |
min(x,y,z,...,n) |
返回 x,y,z,...,n中的最低值。 |
pow(x,y) |
返回 x 的 y 次幂。 |
random() |
返回 0 ~ 1 之间的随机数。 |
round(x) |
四舍五入。 |
sin(x) |
返回数的正弦。 |
sqrt(x) |
返回数的平方根。 |
tan(x) |
返回角的正切。 |
- 保留两位小数
- 不补位：
var y = 2.367; y = Math.round(y * 100) / 100; alert(y); // 2.37- 补位
function reserveTwoDecimals(num) { num = Math.round(num * 100) / 100; var str = num.toString(); var decimalPoint = str.indexOf('.'); if (decimalPoint < 0) { decimalPoint = str.length; str += '.'; } while (str.length <= decimalPoint + 2) { str += '0'; } return str; } console.log(reserveTwoDecimals(2.3)); // 2.30 console.log(reserveTwoDecimals(2.367)); // 2.37 - 四舍五入
round(x)
var x = Math.round(2.3);
alert(x); // 2
var x = Math.round(2.6);
alert(x); // 3
- 向上取整
ceil(x)
var x = Math.ceil(2.35);
alert(x); // 3
- 向下取整
floor(x)
var x = Math.floor(2.35,);
alert(x); // 2
逻辑运算符
| 运算符 | 示例 | 说明 |
|---|---|---|
逻辑与 (&&) |
expr1 && expr2 |
如果expr1 能转换成false则返回expr1，否则返回expr2。因此，与布尔值一起使用时，如果两个操作数都为true时&&返回true，否则返回false。 |
| 逻辑或 (||) | expr1 || expr2 | 如果expr1能转换成true则返回expr1，否则返回expr2。因此，与布尔值一起使用时，如果任意一个操作数为true时||返回true。 |
逻辑非(!) |
!expr |
如果expr能转换为true，返回false；如果expr能转换为false，则返回true。 |
- 如果一个值可以被转换为
true，那么这个值就是所谓的truthy，如果可以被转换为false，那么这个值就是所谓的falsy。 - 能够转换为
false的表达式有：-
null； -
NaN； -
0； - 空字符串（
""）； -
undefined。
-
条件分支语句
条件分支语句就是基于不同的条件去执行不同的动作。
条件分支语句每次只执行多种情况中的一种情况。
-
if语句- 语法格式
if (condition){ // 当 condition==true 时执行的语句块 } -
if-else语句- 语法格式
if (condition){ // 当 condition==true 时执行的语句块1 } else { // 当 condition==false 时执行的语句块2 }- 当条件成立时，执行语句块1；当条件不成立时，执行语句块2.
- 设置多个条件：把
if-else语句组合起来。else-if语句:- 语法格式
if (condition1){ // 当 condition1==true 时执行的语句块1 } else if (condition2){ // 当 condition2==true 时执行的语句块2 } else { // 当 condition1==false && condition2==false 时执行的语句块3 } -
switch语句- 语法格式
switch(n){ case n1: 执行代码块 1 break; case n2: 执行代码块 2 break; default: 与 case n1 和 case n2 不同时执行的代码块3 }- 这里的
n是一个变量，若n与n1相等，则执行代码块1，若n与n2相等，则执行代码块2，若都不相等，则执行代码块3。 -
break语句在这里的作用是跳出这个switch语句块。如果不使用break,成立的case后的代码都会接着执行，用了break,就可以跳出这个switch语句块。
循环语句
循环结构的三个要素：循环变量、循环体和循环终止条件。
-
for语句- 基本语法：
从循环变量初始化值开始判断循环条件，若循环终止条件为for (循环变量初始化;循环终止条件;增量){ 循环体; }false,跳出循环；若循环终止条件为true,则执行循环体内代码，然后对循环变量执行增量代码，再判断循环条件。以此循环，直到循环终止条件为false,跳出此循环。- 举例
for(var i = 1; i<=10; i++){ console.log('学员' + i + '号。'); } -
while语句-
while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会判断循坏终止条件，为true,则执行循环体代码，若为false则跳出循环。因此，循环体内的代码有可能永远不会被执行。 - 语句语法：
while(循环终止条件){ 循环体 }- 举例
var i = 1; while(i<=10){ console.log('学员' + i + '号。'); i = i + 1; } -
-
do-while语句-
do-while循环语句是一种后测试循环语句，即只有在循环体中的代码执行之后，才会判断循环终止条件。换句话说，在对条件表达式求值之前，循环体内的代码至少被执行一次。 - 语句语法
do{ 循环体 }while(循环终止条件)- 举例
var i = 1; do{ console.log('学员' + i + '号。'); i = i + 1; } while(i<=10) -
- 总结
- for循环更适合于循环次数已知的循环；
- while循环更适合于循环次数未知的循环；
- do-while循环至少执行一次。