js 基础

1.js 中 var let const 区别

1.区别：

1、var声明的变量属于函数作用域，而let和const声明的变量属于块级作用域；

2、var声明的变量存在变量提升，而let和const没有

3、var声明的变量可以重复声明，而在同一块级作用域，let变量不能重新声明，const常量不能修        改 （对象的属性和方法，数组的内容可以修var

2.var

var a = 1; //此处声明的变量a为全局变量
function foo(){
var a = 2;//此处声明的变量a为函数foo的局部变量
console.log(a);//2
}
foo();
console.log(a);//1

如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新 其值

var a = 1; //此处声明的变量a为全局变量
function foo(){
a = 2;//此处的变量a也是全局变量
console.log(a);//2
}
foo();
console.log(a);//2

var声明的变量提升 var的声明会在js预解析时把var的声明提升到当前作用域的最前面，意思是是指无论 var 出现在一个作 用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到。只有变量声明才会提 升，对变量赋值并不会提升

console.log(a);//undefined
var a = 1;
//相当于执行以下代码
var a;
console.log(a);//undefined
a = 1;

3.let声明

let 声明的变量具有块作用域的特征。 在同一个块级作用域，不能重复声明变量

function foo(){
let a = 1;
let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}
let a = 1;
console.log(a);//1
console.log(b);//Uncaught ReferenceError: b is not defined
let b = 2;

4.const 声明

const 定义的变量，一旦定义后， 就不能修改，即 const 声明的为常量。

const a = 1;
console.log(a);//1
a = 2;
console.log(a);//Uncaught TypeError: Assignment to constant variable.

const 声明的变量其内部内容可变

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

2.函数作用域

函数内部定义的变量，会在该作用域内覆盖同名全局变量。

var v = 1;

function f(){
  var v = 2;
  console.log(v);
}

f() // 2
v // 1

对于var命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。

if (true) {
  var x = 5;
}
console.log(x);  // 5

//上面代码中，变量x在条件判断区块之中声明，结果就是一个全局变量，可以在区块之外读取。

函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。 

var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1


//函数变量名提升
var x
var a
function f() {
  var a = 2;
  x();
}
a = 1;
x = function () {
  console.log(a);
};
f() // 1

3.参数

由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来。

arguments对象包含了函数运行时的所有参数，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用

var f = function (one) { 
console.log(arguments[0]); 
console.log(arguments[1]); 
console.log(arguments[2]); 
} 
f(1, 2, 3)  //1 2 3

需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。

4.关于slice函数的语法

let fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];

// 提取从索引1开始到索引3的元素
let slicedFruits = fruits.slice(1, 3); // 返回 ["banana", "cherry"]

// 如果不指定end参数，则提取从start到数组末尾的元素
let slicedFruitsToEnd = fruits.slice(1); // 返回 ["banana", "cherry", "date", "fig"]

// 如果start参数是负数，则表示从数组末尾开始计算的位置
let slicedFruitsFromEnd = fruits.slice(-3); // 返回 ["date", "fig"]

// 如果省略start和end参数，则返回数组的一个完整副本
let fruitsCopy = fruits.slice(); // 返回 ["apple", "banana", "cherry", "date", "fig"]

5.立即调用的函数表达式（IIFE）

立即调用函数的三种写法为：

// 第一种
(function(){ /* code */ }());

// 第二种
(function(){ /* code */ })();

//第三种
!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

6.eval 命令

eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。

eval('var a = 1;'); 
a // 1

7.数组

本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

typeof [1, 2, 3] // "object"

但是，对于数值的键名，不能使用点结构arr.0的写法不合法，因为单独的数值不能作为标识符（identifier）。所以，数组成员只能用方括号arr[0]表示（方括号是运算符，可以接受数值）

var arr = [1, 2, 3]; 
arr.0 // SyntaxError
console.log(arr[0]); //1

length 属性

数组的length属性，返回数组的成员数量。 

console.log(['a', 'b', 'c'].length ) // 3 

只要是数组，就一定有length属性。该属性是一个动态的值，等于键名中的最大整数加上1。

var arr = ['a', 'b']; 
arr.length // 2 
arr[2] = 'c'; 
arr.length // 3 
arr[9] = 'd'; 
arr.length // 10 
arr[1000] = 'e'; 
arr.length // 1001 

上面代码表示，数组的数字键不需要连续，length属性的值总是比最大的那个整数键大1。另外，这也表明数组是一种动态的数据结构，可以随时增减数组的成员。

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员数量会自动减少到length设置的值。

8.in 运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。

var arr = [ 'a', 'b', 'c' ]; 
2 in arr // true 
'2' in arr // true 
4 in arr // false

上面代码表明，数组存在键名为2的键。由于键名都是字符串，所以数值2会自动转成字符串。

注意，如果数组的某个位置是空位，in运算符返回false。

var arr = []; 
arr[100] = 'a'; 
100 in arr // true 
1 in arr // false

上面代码中，数组arr只有一个成员arr[100]，其他位置的键名都会返回false。

9.数组遍历

var a = [1, 2, 3]; 
// for循环 
for(var i = 0; i < a.length; i++) { 
console.log(a[i]); 
} 

// while循环 
var i = 0; 
while (i < a.length) { 
console.log(a[i]); i++; 
} 

var l = a.length; 
while (l--) { 
console.log(a[l]); 
}

上面代码是三种遍历数组的写法。最后一种写法是逆向遍历，即从最后一个元素向第一个元素遍历。

数组的forEach方法，也可以用来遍历数组

var colors = ['red', 'green', 'blue']; 
colors.forEach(function (color) { 
console.log(color); 
}); // red // green // blue