---

一、let 关键字

特性

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

• 不允许重复声明；
• 块儿级作用域（局部变量）；
• 不存在变量提升；
• 不影响作用域链；

let创建变量代码示例：

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100 ; // 单个声明并赋值
let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值

不允许重复声明：

let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

块儿级作用域（局部变量）：

let cat = "猫";
console.log(cat);
}
console.log(cat);
// 报错：Uncaught ReferenceError: cat is not defined

不存在变量提升：

// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
console.log(people1); // 可输出默认值
console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

不影响作用域链：

// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
{let p = "大哥";var s;               //p的作用域是块(花括号内)级的，而s的作用域为全局function fn() {console.log(p); // 这里是可以使用的}fn();
}

应用场景：

以后声明变量使用 let 就对了；

二、const 关键字

特性

const 关键字用来声明常量 ，const 声明有以下特点：

• 声明必须赋初始值·；
• 标识符一般为大写（习惯）；
• 不允许重复声明；
• 值不允许修改；
• 块儿级作用域（局部变量）；

const创建变量代码示例：

// const声明常量
const DOG = "旺财";
console.log(DOG);
// 1. 声明必须赋初始值；
const CAT;
// 报错：Uncaught SyntaxError: Missing initializer in const  declaration// 2. 标识符一般为大写（习惯）；
const dog = "旺财"; // 小写也不错// 3. 不允许重复声明；
const CAT = "喵喵";
const CAT = "喵喵";
// 报错：Uncaught SyntaxError: Identifier 'CAT' has already been declared//  注意：对数组元素的修改和对对象内部的修改是可以的（数组和对象存的是引用地址）；
// 4. 值不允许修改；
const CAT = "喵喵";
CAT = "咪咪";
// 特例：
const arr = ['55','66'];
arr.push('77');  //arr的中已经接上了‘77’ 这是因为arr指向的地址并没有发生改变
// 报错：Uncaught TypeError: Assignment to constant variable.// 5. 块儿级作用域（局部变量）；
{const CAT = "喵喵";console.log(CAT);
}
console.log(CAT);
// 报错：Uncaught ReferenceError: CAT is not defined

应用场景：

声明对象类型使用 const，非对象类型声明选择 let；

三、变量和对象的解构赋值

什么是解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；

// ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；// 1、数组的解构赋值const F4 = ["大哥", "二哥", "三哥", "四哥"];let [a, b, c, d] = F4;// 这就相当于我们声明4个变量a,b,c,d，其值分别对应"大哥","二哥","三哥","四哥"console.log(a + b + c + d); // 大哥二哥三哥四哥// 2、对象的解构赋值const F3 = {name: "大哥",age: 22,sex: "男",xiaopin: function () { // 常用console.log("我会演小品！");}}let {name,age,sex,xiaopin} = F3; // 注意解构对象这里用的是{}console.log(name + age + sex + xiaopin); // 大哥22男xiaopin(); // 此方法可以正常调用//好像只是一个指向console.log(name===F3.name);//trueconsole.log(xiaopin===F3.xiaopin);//true

应用场景：

频繁使用对象方法、数组元素，就可以使用解构赋值形式；

四、模板字符串

概述：

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

• 字符串中可以出现换行符；
• 可以使用 ${xxx} 形式引用变量

// 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
// 声明
let string = `我也一个字符串哦！`;
console.log(string);
// 特性
// 1、字符串中可以出现换行符
let str =`<ul><li>大哥</li><li>二哥</li><li>三哥</li><li>四哥</li></ul>`;console.log(str);// 2、可以使用 ${xxx} 形式引用变量let s = "大哥";let out = `${s}是我最大的榜样！`;console.log(out);

应用场景：

当遇到字符串与变量拼接的情况使用模板字符串

五、简化对象和函数写法

概述：

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "訾博";
let change = function () {console.log("活着就是为了改变世界！");
}
//创建对象
const school = {// 完整写法// name:name,// change:change// 简化写法name,change,// 声明方法的简化say() {console.log("言行一致！");}
}
school.change();
school.say();

六、箭头函数

概述：

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

箭头函数的注意点：

• 如果形参只有一个，则小括号可以省略；
• 函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；
• 箭头函数 this 指向声明时所在作用域下 this 的值；
• 箭头函数不能作为构造函数实例化；
• 不能使用 arguments；

特性：

• 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
• 不能作为构造实例化对象；
• 不能使用 arguments 变量；

// ES6允许使用箭头（=>）定义函数
// 传统写法：无参数
var say = function () {console.log("hello！");
}
say();// ES写法2：无参数
let speak = () => console.log("hello 哈哈！");
speak();// 传统写法：一个参数
var hello = function (name) {return "hello " + name;
}
console.log(hello("pj"));// ES6箭头函数：一个参数
let hi = name => "hi " + name;
console.log(hi("pj"));// 传统写法：多个参数
var sum = function (a, b, c) {return a + b + c;
}
console.log(sum(1, 2, 3));
// ES6箭头函数：多个参数
let he = (a, b, c) => a + b + c;
console.log(he(1, 2, 3));// 特性
// 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
const school = {name: "大哥",
}
// 传统函数
function getName() {console.log("getName：" + this.name);
}
// 箭头函数
getName1 = () => console.log("getName1：" + this.name);
window.name = "訾博";
// 直接调用
getName();
getName1();
// 使用call调用
getName.call(school);
getName1.call(school);
// 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值// 2、不能作为构造实例化对象
let Persion = (name,age) => {this.name = name;
this.age = age;
}
let me = new Persion("pj",24);
console.log(me);
// 报错：Uncaught TypeError: Persion is not a constructor// 3、不能使用 arguments 变量
let fn = () => console.log(arguments);
fn(1,2,3);
// 报错：Uncaught ReferenceError: arguments is not defined

应用场景：

• 箭头函数适合与this无关的回调，定时器，数组的方法回调
• 箭头函数不适合与 this 有关的回调，事件回调，对象的方法

七、ES6中函数参数的默认值

概述：

ES允许给函数的参数赋初始值；

//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a, b, c = 10) {return a + b + c;
}
let result = add(1, 2);
console.log(result); // 13
//2. 与解构赋值结合
// 注意这里参数是一个对象
function connect({//参数host = "127.0.0.1",username,password,port
}) {//函数体console.log(host)console.log(username)console.log(password)console.log(port)
}
connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3306
})

八、rest参数

概述：

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；

// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
// ES5获取实参的方式
function data() {console.log(arguments);
}data("大哥", "二哥", "三哥", "四哥");
// ES6的rest参数...args，rest参数必须放在最后面
function data(...args) {// args是一个数组console.log(args); // fliter some every map
}
data("大哥", "二哥", "三哥", "四哥");

九、扩展运算符

介绍：

… 扩展运算符

能将数组转换为逗号分隔的参数序列；

扩展运算符（spread）也是三个点（…）。它好比rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包；

// ... 扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组 ...
const tfboys = ['易烊千玺', '王源', '王俊凯'];
// => '易烊千玺','王源','王俊凯'
// 声明一个函数
function chunwan() {console.log(arguments);
}
chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')

应用：

//1. 数组的合并
const kuaizi = ['王太利', '肖央'];
const fenghuang = ['曾毅', '玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);//2. 数组的克隆
const sanzhihua = ['E', 'G', 'M'];
const sanyecao = [...sanzhihua]; // ['E','G','M']
console.log(sanyecao);//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // arguments

十、Symbol

概述

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的·第七种数据类型·，是一种类似于字符串的数据类型；

特点

• Symbol 的值是唯一的，用来解决命名冲突的问题；
• Symbol 值不能与其他数据进行运算；
• Symbol定义的对象属性不能使用for…in循环遍历 ，但是可以使用Reflect.ownKeys 来获取对象的所有键名；

基本使用：

//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2 == s3); // false
//Symbol.for 创建
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 == s5); // true
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;//七种数据类型
// USONB you are so niubility// u undefined
// s string symbol
// o object
// n null number
// b boolean

Symbol创建对象属性：

// 向对象中添加方法 up down
let game = {            name: '俄罗斯方块',            up: function () {},            down: function () {}
};
// 我们要往game对象里面添加方法，但是怕game对象已经存在同名方法，所以我们这时使用到了Symbol
// 方式一
// 声明一个对象
let methods = {            up: Symbol(),down: Symbol()
};
game[methods.up] = function () {console.log("我可以改变形状");
}
game[methods.down] = function () {console.log("我可以快速下降!!");
}
console.log(game);
//调用方法
game[methods.up]();// 方式二
let youxi = {            name: "狼人杀", [Symbol('say')]: function () {console.log("我可以发言")            },[Symbol('zibao')]: function () {console.log('我可以自爆');}
}
console.log(youxi);
let say = Symbol('say'); //'say'类似一个注解作用，没有实际意义
let youxi1 = {name: "狼人杀",[say]: function () {console.log("我可以发言")            },[Symbol('zibao')]: function () {console.log('我可以自爆');}
}
// 调用
youxi1[say]();

Symbol内置值：
概述：
除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方
法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；

Symbol内置值：

概述：

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方
法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行；

方法：

• Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。
• Symbol.species创建衍生对象时，会使用该属性Symbol.match 当执行 str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值。
• Symbol.replace 当该对象被.replace(myObject)方法调用时，会返回该方法的返回值。
• Symbol.search 当该对象被 str. search(myObject)方法调用时，会返回该方法的返回值。
• Symbol.split 当该对象被 str. split(myObject)方法调用时，会返回该方法的返回值。
• Symbol.iterator 对象进行 for…of 循环时，会调用Symbol.iterator 方法，返回该对象的默认遍历
• Symbol.toPrimitive该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
• Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值
• Symbol. unscopables 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

特别的： Symbol内置值的使用， 都是作为某个对象类型的属性去使用 ；

 class Person {static[Symbol.hasInstance](param) {console.log(param);  ///可以自定义类型检测console.log("我被用来检测类型了");return false;}}let o = {};console.log(o instanceof Person);const arr = [1, 2, 3];const arr2 = [4, 5, 6];// 合并数组：false数组不可展开，true可展开arr2[Symbol.isConcatSpreadable] = false;console.log(arr.concat(arr2));

前端面试中常见的ES6新特性(一)相关推荐

1. 前端面试中常见的算法问题

   虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂 ...

2. 【前端学习之路】ES6新特性 Promise基本方法 、async函数（阮一峰老师、小马哥_老师 课程笔记）

   1.Promise.then()方法 Promise 实例具有 then 方法,其第一个参数是 resolve 状态的回调函数,第二个参数是 reject 状态的回调函数,它们是可选的. then 方 ...

3. lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？

   国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...

4. 总结常见的ES6新语法特性

   前言 ES6是即将到来的新版本JavaScript语言的标准,他给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数 ...

5. es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构

   往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...

6. ES6新特性----面试

   ES6新特性 关键字 let关键字 const关键字 解构赋值 变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 用途 模板字符串 箭头函数 ...

7. 前端开发的ES6新特性（学生党必看）

   一:ES6新特性-let&const 1.常量const const常量(声明之后不允许改变,一旦声明必须初始化, 否则报错) 2.let变量 let声明的变量有严格的作用域 var声明的变量 ...

8. ES6新特性（函数默认参数，箭头函数）

   ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

9. html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结

   前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...

最新文章

1. Go 语言编程 — gormigrate GORM 的数据库迁移助手
2. k8s集群部署之环境介绍与etcd数据库集群部署
3. java 复制文件_Java中复制文件的4种方法
4. Uncaught SyntaxError: missing ) after argument list 错误解决
5. 第四届中国外贸电子商务大会：PayPal瞄准B2B2C模式
6. 微软API工作笔记001---API大全查询
7. 关于各操作系统对UVC协议支持的说明
8. matlab 有限域函数,matlab有限域上的运算.docx
9. 获取当周和上周的周一、周日时间
10. linux7设置广播,中标麒麟Linux7 如何关闭广播消息
11. 新兴新能源设施[1]--盐穴压缩空气储能相关配套设施
12. 【业务分析】为什么YouTube广告只看5秒就可跳过，却更赚钱？
13. Eureka解密（1）------ 注册实例服务发现理解
14. 基于凸松弛算法的电力市场策略研究（Matlab代码实现）
15. 我是如何成为一名程序员的？
16. 每天一刷20200602
17. 9Django-----------Django框架------------安装使用、基本介绍
18. Android操作系统简介
19. win10下samba提示windows无法访问
20. PyGame游戏制作： 弹球游戏Pong（附上Python完整代码）

热门文章

1. JavaFx还是Flex
2. 端午节，中国传统佳节的魅力
3. c++语言判断回文字符串,判断一个字符串是否回文
4. 低调的移动互联网出海之王——「茄子快传」成长简史
5. 重学 Java 设计模式：实战桥接模式「多支付渠道(微信、支付宝)与多支付模式(刷脸、指纹)场景」
6. 【第十五届蓝桥杯备赛（bushi，写文凑个数）】蓝桥OJ---排列序数
7. Dlib学习人脸比对
8. POJ 2017 计算公路里程 模拟题
9. 工业视觉中如何定量分析镜头光学性能
10. 一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接