JavaScript笔记

作者: 竹鼠不要中暑 | 来源:发表于2018-11-24 22:24 被阅读10次

作用域

作用域是你的代码在运行时，各个变量、函数和对象的可访问性。

为什么需要作用域？

最小访问原则 通过显示变量的可见性，为代码提供了一个安全层级。

JavaScript作用域

全局作用域
局部作用域

全局作用域

JavaScript 文档中（document）只有一个全局作用域。定义在函数之外的变量会被保存在全局作用域中。
全局作用域里的变量能够在其他作用域中被访问和修改。
一个应用中全局作用域的生存周期与该应用相同。

局部作用域

定义在函数中的变量就在局部作用域中。并且函数在每次调用时都有一个不同的作用域。这意味着同名变量可以用在不同的函数中
局部作用域只在该函数调用执行期间存在。

块级作用域

ECMAScript 6(简称ES6)中新增了块级作用域。

块作用域由 { } 包括，if语句和for, while语句里面的{ }也属于块作用域。在块级声明中定义的变量从属于该块所在的作用域。
和var关键字不同，let和const关键字支持在块级声明中创建使用局部作用域。
var、let、const的区别
- var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
- const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错

    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  (在同一个{ }中,也属于同一个块，可以正常访问到)
        console.log(f); // 7  (在同一个{ }中,也属于同一个块，可以正常访问到)

    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
    // 函数用()括起来，闭包，将函数从全局中分离出去，外部无法访问其中变量和函数。
</script>

作用域原则

作用域链：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循环至少执行一次。