ES6基础系列一
第一节：什么是ES6?
1、Javascript由ECMAScript，BOM和DOM三部分组成。
2、ECMAScript定义了Javascript的语法规范，ES6是ECMAScript 6的缩写简称，也就是ECMAScript的第六个版本（2015年6月）
3、ECMAScript定义很多重要的内容例如
- 语法（例如关键字，语句，声明等）
- 类型（布尔型，字符串，对象等）
- 原型和继承
- 内置对象和函数的标准库（JSON，Math等）
第二节：let关键字--用来声明变量
概括：用let声明变量只在块级作用域起作用，适合在for循环使用，也不会出现变量提升现象。同一个代码块内，不可重复声明的相同变量，不可重复声明函数内的参数。
1、let声明的变量只作用于块级作用域（任何一个花括号{}可以理解为一个块级作用域）
var arr=[]; //var声明的i无块级作用域的概念，这也是其不足之处 for(var i=0;i<10;i++){ arr[i]=function () { console.log(i); } } arr[8](); //10 var arr1=[]; //let声明的i在自己的块级作用域起作用，出了这个块级作用域就不起作用,每一次for循环的花括号相当于一个块级作用域 for(let i=0;i<10;i++){ arr1[i]=function () { console.log(i); } } arr1[8](); //8
2、不存在变量提升
var声明的变量会出现变量提升现象，而let声明的变量不会提升；var声明的变量会在执行前将变量提升到所在作用域或者所在函数的前面，并赋值undefined。
var a = 1; (function () { console.log(a);//undefined var a = 2; /*相当于 * var a; * console.log(a); * a=2; * */ })(); (function () { console.log(a);//报错 a is not defined let a = 2; })();
3、同一个块级作用域内，不允许重复声明同一个变量
var a = 1; let a = 2; //报错，因为a用var声明过了，'a' has already been declared
//如果以上var改为let声明，也会报同样的错
4、函数内不能用let重新声明函数参数，否则会报错
第三节：const关键字--用来声明常量
概括：const也是用于声明一个常量，并必须赋值，声明后不可修改，跟let一样，只在块级作用域起作用，不可重复声明同一个变量，不会变量提升，声明引用类型的常量时，要注意是传址赋值
1、let一样，只在块级作用域起作用，不存在变量提升（即必须先声明后使用），不可重复声明一个变量
2、与let不同的时，声明后必须赋值，且不可修改，否则报错。注：用const声明引用类型的常量时，是传址赋值，而不是传值赋值，因此可以修改其属性值。
if (1) { const name = 'mary'; } alert(name);//失效，const的作用域在{}内，若改为var声明name，则alert为mary const a = 'mary'; a = 'ellen'; //报错 不可修改 const Person = {'name': 'mary'}; Person.name = 'ellen'; console.log(Person.name)//ellen
第三节：解构赋值
概括：解构赋值给我们一种新的变量赋值方式，主要可以利用数组解构赋值和对象解构赋值。它的用途包括：交换变量值，提取函数返回值，函数参数定义，默认值设定等等
ES6允许按照一定模式，从数组和对象取值，对变量进行赋值，这被称为解构。
数组赋值
var [a, b, c] = [1, 2, 3]//把数组的值分别赋给a，b，c，不需要分别声明定义和赋值，使代码大大减少 var [a1, b1, c1] = [1, 2]//不完全解构，此时a1=1,b1=2,c1为undefined，若解构不成功，变量的值为undefined，相当于声明了但未赋值 var [a2,b2,[c21,c23]]=[1,2,[31,32]]//解构赋值可以嵌套 c23=32 var [a3, b3, c3=3] = [1, 2]//允许设定默认值 c3=3;若解构赋值有值匹配会覆盖默认值
对象赋值
同数组赋值一样，也可以嵌套赋值和设定默认值
var {a,b,c}={'a':1,'c':3,'b':2}//a:1,b:2,c:3 对象的解构赋值跟顺序无关，变量名跟属性名一致才可以赋值成功 var {a}={'b':1}//a:undefined
字符串赋值
var [a,b,c,d,e]="我是工程师";//a:我 b:是 c:工 d:程 e:师
解构赋值的用途：交换变量值，提取函数返回值，函数参数定义，默认值设定等等
/*交换变量的值*/ var x=2,y=4; [x,y]=[y,x]; console.log(y);//2 /*提取函数返回的多个值*/ function demo(){ return {'name':'mary','age':24} } var {name,age}=demo(); console.log(name);//mary console.log(age);//24 /*定义函数参数*/ function demo1({a,b,c}) { console.log(a);//1 console.log(b);//3 console.log(c);//4 } demo1({'a':1,'d':2,'b':3,'c':4}); /*函数参数的默认值*/ function demo2({name='mary'}) { console.log(name); } demo2({});
第四节：字符串String的扩展
概括：ES6给字符串带来了很多实用性的扩展：模板字符串，标签模板，repeat函数、includes函数，startsWith函数，endsWith函数，codePointAt函数，String.fromCodePoint函数，String.raw函数
1、模板字符串 ----反引号标识符（`）
a、可以定义多行字符串（注：所有的空格和换行都会被保留在输出中）
//模板字符串写法 let str1 = `my position is： Front-end development engineer`; console.log(str1);//my position is： Front-end development engineer
b、模板字符串中添加变量（${}）
let name="mary"; let position="Front-end development engineer"; //传统拼接字符串拼接 let str="my name is "+name+",my job is "+position; //用模板字符串拼接 let str1=`my name is ${name},my job is ${position}`; //可以把变量放入${}
c、${}中可以js表达式，可以是对象属性，可以是函数的调用
var a=1,b=2; var str=`the result is ${a+b}`;//the result is 3 var obj={"a":1,"b":2}; var str1=`the result is ${obj.a+obj.b}`;//the result is 3 function fn() { return 3; } var str2=`the result is ${fn()}`;//the result is 3
2、标签模板
标签：指某个函数
模板：指模板字符串
标签模板：一个专门处理模板字符串的函数，可以理解为标签函数+模板字符串
var name = "mary"; var position = "Front-end development engineer"; tagFn `我叫${name}，从事${position}。`; //标签模板 //定义一个函数，作为标签 function tagFn(arr, v1, v2) { console.log(arr);//['我加',''，从事,'。'] console.log(v1);//mary console.log(v2);//Front-end development engineer }
3、repeat函数 startsWith函数 endsWith函数 codePointAt函数 String.fromCodePoint函数 String.raw函数
codePoint函数：js中，一个字符固定是为两个字节的，但对于需要四个字节存储的字符，js会认为两个字符，js无法通过chartAt()获取
String.raw函数：返回字符串最原始的样貌，即使字符串含有转义字符，它也视而不见，直接输出
var name = 'mary'; /*repeat函数：重复字符串*/ var name1 = name.repeat(2)//marymary 返回一个新字符串，不影响目标字符 name.includes('m' );//true /*includes函数：判断字符串中是否含有指定的字符串 返回true或false 传统方式indexof 返回-1或首次出现的位置*/ name.includes('m', 1 );//false 第二个参数为开始搜索的位置，选填 /*startWith函数：判断指定的字符串是否出现在目标字符串的开头位置*/ name.startsWith('m' )//true name.startsWith('m', 2 )//false /*endsWith函数：判断指定的字符串是否出现在目标字符串的开头位置*/ name.endsWith('y' )//true name.endsWith('a', 2 )//true 针对前2个字符 name.endsWith('y', 3 )//false 针对前3个字符 /*codePointAt函数：可以正确识别四个字节的字符，并正确返回它码点的十进制*/ var str1 = "前端";//length为2 var str2 = "𠮷";//length为2 str1.charAt(0)//前 str1.charAt(1)//端 str2.charAt(0)//�无法获取 str2.charAt(1)//�无法获取 str2.codePointAt( )//134071，转化为16进制即20bb7，对应的Unicode编码是\u20bb7 String.fromCodePoint(134071 );//𠮷 /*String.raw函数*/ console.log(`hello\nword`);//会把\n解析为换行 console.log(String.raw`hello\nword`);//直接输出 hello\nword
