学习笔记整理

1、let声明

es5变量声明方式var存在两个问题:①变量提升，即变量不需要先声明后使用，亦可先使用后声明。②变量的作用域只有两种：全局作用域和局部作用域。

let声明的变量作用域为块级作用域，且必须先声明后使用，使代码更加严谨。

看下面这题，输出结果应为多少？

     
     
var a = 10;
( function(){
console.log(a);
var a = 100;
})();
     
     

答案是undefined，因为var声明变量的提升效果，这里相当于：

     
     
var a = 10;
( function(){
var a;
console.log(a);
a = 100;
})();
     
     

另外，值得注意的是，JavaScript永远是先解析声明函数，再解析变量。

     
     
var a = 1;
function a(x){
return 2*x;
}
console.log(a); //1
     
     

此时，还有一种情况需要注意：

     
     
var a;
function a(x){
return 2*x;
}
console.log(a); //function a
     
     

这里是由于a没有被赋值，还是指向回原来的function a();

不管条件成立不成立,函数里的a都进行变量提升,因为条件不成立,所以a = undefined

     
     
var a= 1;
function foo(){
if( false){
var a= 2;
}
console.log(a);
}
foo();
//执行结果：undefined
     
     

2、const声明

定义后必须赋值，且赋值后不可改变。

3、变量的解构赋值（数组法）

     
     
var [a,b,c]=[ 1, 2, 3];
//相当于 var a=1,b=2,c=3;
     
     

     
     
var [a,[b,c]]=[ 1,[ 2, 3]];
//相当于 var a=1,b=2,c=3;
     
     

     
     
var [a,b= 'default',c= 'default']=[ 1, 2];
//a=1,b=2,c='default'
     
     

     
     
var [a,b,c]=[ 1, 2];
//a=1,b=2,c=undefined
     
     

     
     
var [a,...c]=[ 1, 2, 3];
//a=1,c=[2,3]
     
     

4、变量的解构赋值（对象法）

      
      
var obj = { a: 1, b: 2};
var {a,b}=obj; //相当于var a=1,b=2;
      
      

      
      
var obj = { a: 1, b: 2};
var { a:A,b}=obj;
//a被替换成A,相当于var A=1,b=2;
      
      

      
      
//亦可设置默认值
var obj = { a: 1};
var { a:A= 3,b= 4}=obj; //A=1,b=4
      
      

      
      
var a,b;
var obj = { a: 1, b: 2};
({a,b}=obj);
//注意这里要加上括号，因为若不加上括号，js解析器会认为“{”后面是代码块
      
      

复杂点的解构赋值:

      
      
var obj = {
arr:[ ‘Yo’,{ a: 1}]
}
var { arr:[greet,{a}]}=obj;
//greet=’Yo’,a=1
      
      

5、解构赋值的一些其他用法（字符串，传参）

①读取字符串长度

let {length}="hello"; //变量length=5  {}里面必须是length
      
      

②字符串赋值

      
      
let [a,b,c]= "ion";
//a='i', b='o', c='n'
      
      

③函数传参解构

      
      
var arr=[ 1, 2];
function test([a,b]){
console.log(a+ ” “+b);
}
test(arr); //1 2
      
      

      
      
var obj={ b: 2};
function test({b,a=10}){
console.log(a+ " "+b);
}
test(obj); //10 2
      
      

6、新增字符串方法

includes()        startsWith()     endsWith()     repeat()

      
      
console.log( 'You'.indexOf( 'Y') !== -1); //原来判断字符串是否包含Y的方法 true
console.log( 'You'.includes( 'Y'));
//es6判断字符串是否包含Y true
console.log( 'You'.startsWith( 'Y')); //是否以Y开始 true
console.log( 'You'.endsWith( 'u')); //是否以u开始 true
console.log( 'You'.repeat( '3')); //重复字符3次 YouYouYou
      
      

7、模板字符串

      
      
let title= 'hello world!';
let tpl1= '<div>'+ '<span>'+title+ '</span>'+ '</div>';
let tpl2= </span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;div&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;span&gt;<span class="hljs-subst">${title}</span>&lt;/span&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;/div&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string">;
console.log( "tpl1",tpl1);
console.log( "tpl2",tpl2);
      
      

8、Symbol数据类型

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

对变量或值调用 typeof 运算符将返回下列值之一：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一个对象或 Null或者数组 
• function -如果变量是个函数名
• symbol  -es6引入的数据类型

注意不要和JavaScript基本数据类型搞混，基本数据类型有7个：undefined、null、Boolean、String、Number、Object、Symbol     （根据阮一峰老师的教程，基本数据类型就这7种，不包括Array）

①每次创建Symbol，它的值都不一样

      
      
let a = Symbol();
let b = Symbol();
console.log(a === b); //false
      
      

②Symbol里面可以传入一个参数，用于描述你创建的Symbol，传入参数对他的值没有影响

let a=Symbol('this is a Symbol');
      
      

③应用：在不同的块中，临时重写变量

      
      
let name = Symbol();
{
var person = {};
person[name] = ‘file1’;
console.log( ‘person[name]’,person[name]); //file1
}
{
let name = Symbol();
person[name] = ‘file2’;
console.log( ‘person[name]’,person[name]); //file2
}
console.log( ‘person[name]’,person[name]); //file1
      
      

④Symbol 值不能与其他类型的值进行运算，会报错。

      
      
let sym = Symbol( 'My symbol');
"your symbol is " + sym // TypeError: can't convert symbol to string
your symbol is <span class="hljs-subst">${sym}</span> // TypeError: can't convert symbol to string
      
      

⑤Symbol 值作为对象属性名时，不能用点运算符

      
      
const mySymbol = Symbol();
const a = {};

a.mySymbol = ‘Hello!’;
a[mySymbol] // undefined
a[ ‘mySymbol’] // “Hello!”
      
      

9、Proxy

      
      
var user = new Proxy({},{
get: function(obj,prop){
if(prop == 'full_name')
return obj.fname + ' ' +obj.lname;
}})

user.fname= 'Bob';
user.lname = 'Wood';
console.log( "user.full_name: ",user.full_name); //user.full_name:Bob Wood
console.log( "user.age: ",user.age); //undefined
      
      

10、Set

Set里面数组值唯一，不重复

      
      
var s = new Set([ 1, 2, 3, 3]);
console.log( 's.size', s.size); //3
console.log( 's', s); // {1,2,3}

s.add( 4); //添加4
console.log( 's', s); //{1,2,3,4}

s.delete( 2); //删除2
console.log( 's', s); //{1,3,4}

console.log( 's.has(5)',s.has( 5)); //false 判断Set是否包含5


s.clear(); //清空Set
console.log( 's', s) //{}
      
      

1、let声明

es5变量声明方式var存在两个问题:①变量提升，即变量不需要先声明后使用，亦可先使用后声明。②变量的作用域只有两种：全局作用域和局部作用域。

let声明的变量作用域为块级作用域，且必须先声明后使用，使代码更加严谨。

看下面这题，输出结果应为多少？

  
  
var a = 10;
( function(){
console.log(a);
var a = 100;
})();
  
  

答案是undefined，因为var声明变量的提升效果，这里相当于：

  
  
var a = 10;
( function(){
var a;
console.log(a);
a = 100;
})();
  
  

另外，值得注意的是，JavaScript永远是先解析声明函数，再解析变量。

  
  
var a = 1;
function a(x){
return 2*x;
}
console.log(a); //1
  
  

此时，还有一种情况需要注意：

  
  
var a;
function a(x){
return 2*x;
}
console.log(a); //function a
  
  

这里是由于a没有被赋值，还是指向回原来的function a();

不管条件成立不成立,函数里的a都进行变量提升,因为条件不成立,所以a = undefined

  
  
var a= 1;
function foo(){
if( false){
var a= 2;
}
console.log(a);
}
foo();
//执行结果：undefined
  
  

2、const声明

定义后必须赋值，且赋值后不可改变。

3、变量的解构赋值（数组法）

  
  
var [a,b,c]=[ 1, 2, 3];
//相当于 var a=1,b=2,c=3;
  
  

  
  
var [a,[b,c]]=[ 1,[ 2, 3]];
//相当于 var a=1,b=2,c=3;
  
  

  
  
var [a,b= 'default',c= 'default']=[ 1, 2];
//a=1,b=2,c='default'
  
  

  
  
var [a,b,c]=[ 1, 2];
//a=1,b=2,c=undefined
  
  

  
  
var [a,...c]=[ 1, 2, 3];
//a=1,c=[2,3]
  
  

4、变量的解构赋值（对象法）

   
   
var obj = { a: 1, b: 2};
var {a,b}=obj; //相当于var a=1,b=2;
   
   

   
   
var obj = { a: 1, b: 2};
var { a:A,b}=obj;
//a被替换成A,相当于var A=1,b=2;
   
   

   
   
//亦可设置默认值
var obj = { a: 1};
var { a:A= 3,b= 4}=obj; //A=1,b=4
   
   

   
   
var a,b;
var obj = { a: 1, b: 2};
({a,b}=obj);
//注意这里要加上括号，因为若不加上括号，js解析器会认为“{”后面是代码块
   
   

复杂点的解构赋值:

   
   
var obj = {
arr:[ ‘Yo’,{ a: 1}]
}
var { arr:[greet,{a}]}=obj;
//greet=’Yo’,a=1
   
   

5、解构赋值的一些其他用法（字符串，传参）

①读取字符串长度

let {length}="hello"; //变量length=5  {}里面必须是length
   
   

②字符串赋值

   
   
let [a,b,c]= "ion";
//a='i', b='o', c='n'
   
   

③函数传参解构

   
   
var arr=[ 1, 2];
function test([a,b]){
console.log(a+ ” “+b);
}
test(arr); //1 2
   
   

   
   
var obj={ b: 2};
function test({b,a=10}){
console.log(a+ " "+b);
}
test(obj); //10 2
   
   

6、新增字符串方法

includes()        startsWith()     endsWith()     repeat()

   
   
console.log( 'You'.indexOf( 'Y') !== -1); //原来判断字符串是否包含Y的方法 true
console.log( 'You'.includes( 'Y'));
//es6判断字符串是否包含Y true
console.log( 'You'.startsWith( 'Y')); //是否以Y开始 true
console.log( 'You'.endsWith( 'u')); //是否以u开始 true
console.log( 'You'.repeat( '3')); //重复字符3次 YouYouYou
   
   

7、模板字符串

   
   
let title= 'hello world!';
let tpl1= '<div>'+ '<span>'+title+ '</span>'+ '</div>';
let tpl2= </span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;div&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;span&gt;<span class="hljs-subst">${title}</span>&lt;/span&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string"> &lt;/div&gt;</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string">;
console.log( "tpl1",tpl1);
console.log( "tpl2",tpl2);
   
   

8、Symbol数据类型

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

对变量或值调用 typeof 运算符将返回下列值之一：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一个对象或 Null或者数组 
• function -如果变量是个函数名
• symbol  -es6引入的数据类型

注意不要和JavaScript基本数据类型搞混，基本数据类型有7个：undefined、null、Boolean、String、Number、Object、Symbol     （根据阮一峰老师的教程，基本数据类型就这7种，不包括Array）

①每次创建Symbol，它的值都不一样

   
   
let a = Symbol();
let b = Symbol();
console.log(a === b); //false
   
   

②Symbol里面可以传入一个参数，用于描述你创建的Symbol，传入参数对他的值没有影响

let a=Symbol('this is a Symbol');
   
   

③应用：在不同的块中，临时重写变量

   
   
let name = Symbol();
{
var person = {};
person[name] = ‘file1’;
console.log( ‘person[name]’,person[name]); //file1
}
{
let name = Symbol();
person[name] = ‘file2’;
console.log( ‘person[name]’,person[name]); //file2
}
console.log( ‘person[name]’,person[name]); //file1
   
   

④Symbol 值不能与其他类型的值进行运算，会报错。

   
   
let sym = Symbol( 'My symbol');
"your symbol is " + sym // TypeError: can't convert symbol to string
your symbol is <span class="hljs-subst">${sym}</span> // TypeError: can't convert symbol to string
   
   

⑤Symbol 值作为对象属性名时，不能用点运算符

   
   
const mySymbol = Symbol();
const a = {};

a.mySymbol = ‘Hello!’;
a[mySymbol] // undefined
a[ ‘mySymbol’] // “Hello!”
   
   

9、Proxy

   
   
var user = new Proxy({},{
get: function(obj,prop){
if(prop == 'full_name')
return obj.fname + ' ' +obj.lname;
}})

user.fname= 'Bob';
user.lname = 'Wood';
console.log( "user.full_name: ",user.full_name); //user.full_name:Bob Wood
console.log( "user.age: ",user.age); //undefined
   
   

10、Set

Set里面数组值唯一，不重复

   
   
var s = new Set([ 1, 2, 3, 3]);
console.log( 's.size', s.size); //3
console.log( 's', s); // {1,2,3}

s.add( 4); //添加4
console.log( 's', s); //{1,2,3,4}

s.delete( 2); //删除2
console.log( 's', s); //{1,3,4}

console.log( 's.has(5)',s.has( 5)); //false 判断Set是否包含5


s.clear(); //清空Set
console.log( 's', s) //{}