本文共 4938 字，大约阅读时间需要 16 分钟。
一、认识ES6
ES6(ECMAScript 6/ECMAScript 2015)是2015年6月发布的。ES6是对ES5的一个扩展（就是在ES5的基础上添加了一些内容），最典型的内容：Class（类）、Promise（异步）、Symbol（数据类型）等。
学习参考网站：https://es6.ruanyifeng.com/。
二、ECMAScript与JavaScript的区别
前者是后者的规格，后者是前者的一种实现。JavaScript = ECMAScript + DOM + BOM
三、let
1、块级作用域
在ES5中变量只有全局和局部两种作用域，而在ES6增加了块级作用域。
2、let与var的区别（面试问题）
相同点：它们都可以用来定义一个变量。
不同点：
（1）let只在它所在的块中有效（一对｛｝就是一个块），有闭包作用； （2）let不存在变量位置的提升，而var存在变量位置提升； （3）let不允许在相同作用域内重复声明同一个变量，而var可以； （4）var可能会存在变量泄漏。{ let x=123 // let x=true //let不能重复定义 console.log(x); // console.log(y); //y没有被定义 { let y='abc' console.log(x); } // console.log(y); //y没有被定义，不在块级作用域内} 四、const
用来定义一个常量，一般情况下，常量名用大写表示，以表示跟内存变量的区别。const定义的常量为只读。对于单值变量（基本变量）是不能修改它的值，但引用类型（对象、数组等）的常量可以修改值，而不能修改的是内存地址。
{ const PI=3.14159265 //PI=10//不能改变常量 console.log(PI*Math.pow(10,2)); const obj={ name:'Tom', sex:'male' } // 对于单值变量（基本变量）是不能修改它的值， //但引用类型（对象、数组等）的常量可以修改值，而不能修改的是内存地址。 obj.name='Teacher Hou' console.log(obj);} 五、在浏览器环境中顶层对象是window，在Node.js中是global对象。
在ES6环境中，let、const、class和var定义的全局变量，它的顶层对象不再是window。
var str = 'hello'console.log(str);//hello//在ES6环境中，let、const、class和var定义的全局变量，它的顶层对象不再是windowconsole.log(window.str);//undefined
六、ES6声明变量的六种方法
var 变量声明
function 函数声明 let 变量声明 const 常量声明 import 变量导入 class 类的声明var x=10function fn(a,b){ return a*b}let str='abc'const Hi='Say Hi'// import glob from 'glob'class Person{ constructor(x,y){ this.x=x; this.y=y; }} 七、解构赋值
解构赋值本质上属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
（1）数组的解构赋值：数组解构赋值就是下标的匹配模式。
let [a,b,o]=['apple','banana','orange']console.log(a,b,o);//apple banana orangelet [a1,[b1,c1],d1]=['aa',['bb','cc']]console.log(a1,b1,c1,d1);//aa bb cc undefinedlet [a2,b2,...other]=[1,2,3,4,5,6,7]//...必须写到最后console.log(a2,b2,other);//1 2 [3,4,5,6,7]
（2）对象的解构赋值：对象解构赋值就是键名称的匹配模式。
let {a,b}={a:'apple',b:'banana'}console.log(a,b);//apple bananalet {a1,b1}={a1:'apple',c1:'hello',d1:'world',b1:'banana'}console.log(a1,b1);//apple bananalet {a2,xx2:{b2}}={a2:'apple',xx2:{b1:'girl',b2:'boy'},b2:'banana'}console.log(a2,b2);//apple boy （3）函数参数解构赋值：函数参数的解构赋值就是形参与实参之间的匹配。
let fun = ([a, b], { o }) => [a, b, o]let fruits = fun(['apple', 'banana'], { g: 'gap', o: 'orange' })console.log(fruits);//['apple','banana','orange']let apple = { name: 'apple', price: 8, num: 5 };let getTotal = function ({ price, num }) { return price * num}console.log(getTotal(apple));//40 （4）字符串的解构赋值：字符串解构赋值跟数组类似，它匹配的是字符串的下标。
let[a,b,...rest]='banana'console.log(a,b);//b aconsole.log(rest);//["n","a","n","a"]let [index0,name,...rest1]='ab'console.log(index0,name);//a bconsole.log(rest1);//[]
八、字符串的扩展
1、Unicode编码
unicode是一个编码方案，Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。Unicode 编码共有三种具体实现，分别为utf-8,utf-16,utf-32，其中utf-8占用一到四个字节，utf-16占用二或四个字节，utf-32占用四个字节。Unicode 码用于信息交换。
2、新增方法
（1）String.fromCodePoint(16进制编码):获取指定unicode编码所对应的字符
（2）字符串.codePointAt(下标):获取指定字符所对应的unicode编码var str='中国abc'console.log(str.codePointAt(1));//将str字符串中下标为0的字符转换为所对应的unicode编码console.log(String.fromCodePoint(0x20BB7));//ES6的写法，可以得到一个正确的结果
3、字符串遍历
for...of:遍历字符串时，解决含有四个字节的字符出现错误。
var str = '12ab中国𠪩';for(let i of str){ console.log(i);}for(let j of [1,2,3,4,5]){ console.log(j);}let{keys,values,entries}=Objectlet obj={id:'001',name:'张三'}for(let key of keys(obj)){ console.log(key);//ide,name}for(let v of values(obj)){ console.log(v);//001 张三}for(let item of entries(obj)){ console.log(item);} 4、模板语法
在字符串中使用变量。`${变量名}`
let name = "张三", sex = 'man', age = 18let tpl=``;console.log(tpl);document.write(tpl)姓名：${name}
性别：${sex}
年龄：${age}
5、其它方法扩展
normalize()：将字符的多种表示方法统一为同样的形式，即 Unicode 标准化化
includes()：返回布尔值，表示是否找到了参数字符串 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部 endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部 repeat()：表示将字符串重复 n 次，返回字符串 padStart()：字符串前补全长度 padEnd()：字符串后补全长度let str = 'hi! welcome to font-end!'console.log(String.prototype);// normalize()：将字符的多种表示方法统一为同样的形式，即 Unicode 标准化化console.log('\u01D1'.normalize() === '\u004F\u030C'.normalize());//true// includes()：返回布尔值，表示是否找到了参数字符串console.log(str.includes('to'));console.log(str.includes('to', 13));// startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部console.log(str.startsWith('hi!'));console.log('startsWith', str.startsWith('welcome', 4));// 从下标为4的位置开始// endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部console.log('endsWith', str.endsWith('end!'));console.log('endsWith', str.endsWith('font', str.length - 6)); // 前指定个数的字符// repeat()：表示将字符串重复 n 次，返回字符串console.log('*'.repeat(10));console.log('abc'.repeat(3));console.log('123'.repeat(2.9)); // 2.9会自动取整// console.log('*'.repeat(-2)); // 参数不能为负数或Infinityconsole.log('*'.repeat('3aaa')); // 这里的'3aaa'将自动转换为数字0// padStart()：字符串前补全长度console.log('100'.padStart(10, '$'));console.log('100'.padStart(2, '$'));// padEnd()：字符串后补全长度console.log('100'.padEnd(10, '$'));for (let i = 1; i <= 9; i++) { for (let j = 1; j <= i; j++) { let temp = (i * j).toString().padEnd(2, ' '); document.write(`${j}*${i}=${temp} `); } document.write('');}
转载地址：http://qfvrn.baihongyu.com/