一、ECMAScript 6
ECMAScript 6.0,简称ES6,第一个版本是在2015年6月进行发布,所以也称之为《ECMAScript 2015 标准》(简称 ES2015)。
JavaScript是ECMAScript的一种实现(分支),遵循ECMAScript标准的。目前主流浏览器已经可以完美兼容和使用ES6。
二、let 和 const
var 存在的问题:
- var 不能用于定义常量
- var可以重复声明变量
- var 前两存在变量提升
- var 不支持块级作用域
let 和 const 可以解决以上问题
(1) 不可以重复声明变量
let name = 'Astro';let name = 'nurato';console.log(name);//运行结果:Identifier 'name' has already been declared
(2)不存在变量提升
console.log(name);let name = 'Astro';// 运行结果:ReferenceError: name is not defined
(3)可以定义常量
不能给常量重新赋值,但如果是引用类型的话可以进行修改。
const PI = 3.14;PI = 3;console.log(pi);//运行结果:Assignment to constant variable.
//引用类型const GD= {name:'Astro',intro:'Astro 就是阿童木'};GD.name = '阿童木';console.log(GD);// 运行结果:{name: "阿童木", intro: "Astro 就是阿童木"}//intro: "Astro 就是阿童木"//name: "阿童木"//__proto__: Object...........
(4)块级作用域
如果用var定义变量,变量是通过函数或者闭包拥有作用域;但,现在用let定义变量,不仅仅可以通过函数/闭包隔离,还可以通过块级作用域隔离。
块级作用域用一组大括号定义一个块,使用 let 定义的变量在大括号的外部是访问不到的,此外,let声明的变量不会污染全局作用域。
{ let a = '鸣人';}console.log(a);// 执行结果:ReferenceError: a is not defined
if(1){let str = '123';}console.log(str);// 执行结果:ReferenceError: str is not defined
(5)高级排他(不使用闭包)
Title
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
三、解构赋值
用于分解js中对象的机构
(1)用于数组结构
let nameArr = ['张三','李四','王五'];// 普通写法let name1 = nameArr[0];let name2 = nameArr[1];let name3 = nameArr[2];//结构写法let[name1,name2,name3] = nameArr;
(2)对象的解构
//写法1let{name,age,sex} = {name:'张三',age:1,sex:'男'}console.log(name, age, sex);//运行结果:张三 1 男
//写法2:结构重命名let{name:gName,age:gAge,sex:gSex} = {name:'张三',age:1,sex:'男'};console.log(gName, gAge, gSex);//运行结果:张三 1 男
// 写法3: 可以设置默认值let{name,age,sex='女'} = {name:'李四',age:18}console.log(name, age, sex);// 运行结果:李四 18 女
// 写法4 省略结构let [,,sex] = ['王五',20,'男'];console.log(sex);// 运行结果: 男
(3)应用场景举栗子
在封装ajax的GET和POST请求时, 就可以运用到解构的知识点,代码如下:
// 普通写法function ajax(options) {let method = options.method || 'GET';let data = options.data || {};// ..........}// 结构写法function ajax({method="GET", data}) {console.log(method, data);}ajax({method:"POST",data:{"id":1,"name":"张三"}});
四、延展操作符
(1)延展数组
let arr1 = [ 'a', 'b', 'c'];let arr2 = [1, 2, 3];let result = [...arr1, ...arr2];console.log(result); // [ "a", "b", "c", 1, 2, 3 ]
(2)延展对象
let smallDog = {name:'小黑', age: 1};let bigDog = {name: '大白', age: 2};let dog = {...smallDog, ...bigDog};console.log(dog); // {name: "大白", age: 2}// 注意: 如果对象中的属性一致, 会被覆盖
(3)应用场景
function getMinValue() {console.log(Math.min(...arguments));}getMinValue(1,2,7)// 1
五、ES6字符串操作
(1)新增字符串方法
[1]startsWith()
let url = 'http://www.fesco.com.cn';console.log(url.startsWith('http'));// true
[2]endsWith
let url = 'http://www.fesco.com.cn';console.log(url.endsWith('cn'));//true
[3]includes() 判断字符串中是否包含 XX
let str = 'skyblue and astro';console.log(str.includes('ast')); //true
[4]repeat() 拷贝n份
let str = 'hello';console.log(str.repeat(20)); //打印出50个hello
[5]padStart() / padEnd()
padStart()用于头部补全,padEnd()用于尾部补全;
第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
let y1 = '2030'.padEnd(10, '1');console.log(y1);//2030111111let y2 = '11-22'.padStart(10, '2030-MM-DD');console.log(y2); //2030-11-22