简单说说ES6新特性
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。 它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript和JS的关系 ECMAScript是标准,JS是实现
- 类似于HTML5是标准,IE,chrome是实现 例如国家定了医用口罩标准(需要过滤XX,等等各种参数),咱们买的正规口罩是实现
- 目前ECMAScript除了JS还没别的实现,所以ECMAScript==JS也说得过去
- ES6发布于2015年发布,所以也可以叫es2015 去年的ES2021 是ES12 但是主要的改变是在es6,这几年的东西都增加的不多,所以把ES6以及以后的版本统称为es6也合理,ES2022也也即将推出
今天对我目前所知的并且常用的一些做一个总结,适合处于新手村和即将走出新手村的兄弟观看学习,同时也欢迎各位大佬补充
1、声明变量
首先说说在没有es6之前存在的问题,也就是var的问题
- 可以重复定义
- 无法限制修改,有些东西不会变化,没常量
- 没有块级作用域,只有函数作用域
- 变量提示带来的混乱
es6新增了两个声明变量关键字,let和const 这两个关键字就是为了解决es5存在的问题
let
(1)let 声明变量时只在其块级作用域中有效
1 {
2 let a = 10;
3 var b = 1;
4 }
5 console.log(a); //出错 not defined
6 console.log(b); //1
在es5中如果要实现块级作用域,通常借助立即执行匿名函数来实现
1 (function(){
2 var a = 1;
3 }());
4 console.log(a); //出错,not defined
但是有了let之后,就可以解决这么问题
(2)没有变量提升
也正是如此,变量必须在声明后使用,否则就会报错,这里对比var经典的变量提升
//let
console.log(a); //出错, not defined
let a = 1;
//var
console.log(a); //undefined
var a =1;
(3)不可以在相同作用域内重复声明同一个变量,也包括不能和var,const变量名重复
let a = 1;
let a = 1; //出错 let不可重复声明 var b = 1;
let b = 1; //出错 let不可重复声明 const c = 1;
let c = 1; //出错 let不可重复声明
(4)在块级作用域内,若存在用let命令声明的变量,则所在区块对该变量形成封闭作用域,也就是该变量无视外部的同名变量。而又因为不存在变量提升,所以在该区块中,不能在声明前使用该变量。
var a = 1;
if(true){
a = 2; //出错 not defined
let a;
}
var a = 1;
if(true){
a = 2; //var允许重复声明,而且变量提升,故a=2正常赋值
var a;
}
const
const和let的区别在于const声明的变量不能修改,let声明的变量可以修改
const name = "";
//name = '2' //报错 //但是也不是都不能变
const person = {
name:""
}
person.name=""; console.log(person) //const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
//对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。
//但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,
//const只能保证这个指针是固定的(即总是指向另一个固定的地址),
//至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
学会之后推荐声明变量时使用let,可以避免很多不必要的麻烦,const看个人需求
2、Symbol
ES6新增了一个基本数据类型:Symbol,至此ECMAScript的基本数据类型就有了6种: 字符串,数字,布尔,null,undefined,Symbol。
//Symbol 的定义不能使用new 他使用Symbol()函数生成
let a = Symbol(); typeof a // "symbol" //Symbol创建时可以传一个参数,表示对Symbol的描述 let s1 = Symbol('a');
let s2 = Symbol('b'); s1 // Symbol(a)
s2 // Symbol(b)
Symbol表示独一无二的值
1 let s1 = Symbol('a');
2 let s2 = Symbol('a');
3
4 //s1===s2 false;
5 //既然Symbol的值都不相等 那么可以利用他的特性解决对象里同名覆盖的问题
6
7 let obj = {
8 [Symbol()]: 1
9 };
10 //或者
11 let s = Symbol();
12 let obj = {
13 [s]: 1
14 };
Symbol.for() 有时,我们希望重新使用同一个 Symbol 值,Symbol.for()方法可以做到这一点。 它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。 如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。
1 let s1 = Symbol.for('a');
2 let s2 = Symbol.for('a');
3
4 s1 === s2 // true
5
6 //两种写法区别
7 Symbol.for("a") === Symbol.for("a") // true
8
9 Symbol("a") === Symbol("a") //false
3、解构赋值(常用)
1 let [a,b,c] = [1,2,3]
2 var [a,,c]=[1,2,3];
3 console.log(a+' | '+c); //1 | 3
4 var [a,...b]=[1,2,3];
5 console.log(a+' | '+b);//1 | 2,3
6 console.log(b);//[2, 3]
7 // ...将右侧多余的值以数组的形式赋值给左侧变量 rest
8
9 //设置默认值
10 var [a,b,c='default',d='default']=[1,2,3];
11 console.log(a+' | '+b+' | '+c+' | '+d);//1 | 2 | 3 | default
12
13 //找不到的会被赋值为undefined
14 var [a,b,c]=[1,2];
15 console.log(a+' | '+b+' | '+c);//1 | 2 | undefined
对象的解构赋值
1 //对象的解构赋值
2
3 let obj={
4 a:1,
5 b:2
6 }
7 let {a,b}=obj;
8 console.log(a+" | "+b);//1 | 2
9
10 //重命名,把obj.a重命名为A
11 let obj={
12 a:1,
13 b:2
14 }
15 let {a:A,b}=obj;
16 console.log(A+" | "+b);//1 | 2
17 console.log(a);//Uncaught ReferenceError: a is not defined
18
19 //设置默认值
20
21 let {a=1,b=2}={a:10};
22 console.log(a+" | "+b);//10 | 2
23
24 //字符串也可以解构
25
26 var [a,b,c,d,e]='nihao';
27 console.log(a);//
4、函数默认值
1 //es5写法
2 function sum(a,b){
3 b= b||0;
4 console.log(a+b)
5 }
6
7 sum(1)
8
9 //es6
10 function sum(a,b=0){
11 console.log(a+b)
12 }
13 sum(1)
14 function sum(a=2,b=0){
15 console.log(a+b)
16 }
17
18 sum()
5、箭头函数(常用)
箭头函数都是匿名函数
1 function show(num){
2 return num*num
3 }
4 var show = function(num){
5
6 return num*num
7 }
8
9 //如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。 提个参数可以去掉括号
10 var show =(num)=>{
11 return num*num
12 }
13 //如果只有一条return语句,可以省略大括号和return 隐式返回
14
15 var show =num=>num*num;
16
17
18
19 //箭头函数的this继承自他的父作用域
20 //而且与我们原来普通函数不同,原来的函数this是调用时动态指定的,
21 //而箭头函数是词法作用域,他里的this是定义时就指定的 而且不会随着调用方式不同而改变
22
23 //如下例子
24 var log_this = ()=>{
25
26 console.log(this)
27 }
28 var log_this = function(){
29
30 console.log(this)
31 }
32
33 var obj = {
34 hobbies:['code','run','paly game'],
35 logHobbies:log_this
36 }
37
38
39 obj.logHobbies()
40
41
42 log_this()
有几点需要注意
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
- 上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
6、模板字符串(常用)
原来写字符串比较痛苦 特别是拼接变量时
1 const name="小";
2 const age = 2;
3
4 console.log('ta的名字是'+name+',它今年'+age+'了');
5 console.log('<div data-age="'+age+'">'+name+'</div>');//这种更难受
6 console.log(`ta的名字是${name},它今年${age}了`)
7 console.log(`<div data-age="${age}">${name}
8 </div>`)
模板字符串可以嵌套
1 var arr = [{
2 name:"苹果",
3 price:11
4 },{
5 name:"香蕉",
6 price:12
7 }];
8
9
10 var template = `
11 <ul>
12 ${arr.map(v=>`
13 <li>${v.name}
14 <span>${v.price}</span>
15 </li>
16 `).join('')}
17 </ul>
18 `
19
20 console.log(template)
21
22 document.body.innerHTML = template;
7、数组
spread 展开运算符也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
1 const a = [1, 2, 3];
2 const b = [4,5,6];
3 const c = [...a] // [1,2,3]
4 //轻松拼接两个数组
5 const d = [...a,...b] // [1,2,3,4,5,6]
6
7
8 //类数组对象变成数组
9 var list=document.getElementsByTagName('a');
10 var arr=[...list];
其实不单单是参数可以展开,对于对象和字符串同样可以展开
1 const obj1 = { a: 111, b: 222 };
2 const obj2 = { c: 333, d: 444 };
3 const merged = { ...obj1, ...obj2 };
4 console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }
5 //或者这样
6 const others = {third: 3, fourth: 4, fifth: 5}
7 const items = { first:1, second:1, ...others }
8 items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
9
10
11 //展开字符串
12
13 const str = 'hello'
14 const array_str_ = [...str] //
- Array.from
1 //Array.from方法用于将两类对象转为真正的数组
2 var args = Array.from(arguments);
3 var list = Array.from(document.querySelectAll('li'));
- Array.of()
1 //这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
2 Array() // []
3 Array(3) // [, , ,]
4 Array(3, 11, 8) // [3, 11, 8]
5
6 Array.of(3, 11, 8) // [3,11,8]
7 Array.of(3) // [3]
8 Array.of(3).length // 1
8、for of 循环
1 看一下咱们会的循环方法
2 for 无法循环对象
3 for in 存在问题 他会遍历所有可遍历属性 如果为原型加了一些属性,那也会遍历出来
4 forEach 循环数组 无法终止
5
6 最终es6为了统一,也借鉴了c++,java,python语言引入了for of循环 作为遍历所有数据结构的统一的方法。
7 for...of循环可以使用的范围包括数组、Set 和 Map 结构、
8 某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、
9 后文的 Generator 对象,以及字符串。
10 -- 对象不能使用for of
1 for(let v of [1,2,3]) {
2 console.log(v); // 1 2 3
3 }
4 let p = document.querySelectorAll("p");
5 for (let x of p) {
6 console.log(x);
7 }
9、set
1 //ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
2
3 const set = new Set([1, 2, 2, 4, 4]);
4 [...set]
5 //用Set 去重非常方便 ,数组去重面试常考题
6
7 [...new Set(arr)]
今天先写这么多,剩下的面向对象、promise、模块化和map等以后有机会再补充,公司又有新需求了,我得去写代码了(表示是被迫停下来,不是故意留一些不写的),后边的这些都是个人感觉都是重点,等我代码写完再来补充,同时有哪些问题欢迎各位大佬提醒,毕竟我也还只是一只菜鸟,只是对自己的理解做一下总结
简单说说ES6新特性的更多相关文章
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- ES6新特性概览1
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
随机推荐
- 『学了就忘』vim编辑器基础 — 97、vim使用技巧
目录 1.在vim中导入其他文件内容或命令结果 (1)导入其他文件内容 (2)在vim中执行系统命令 (3)导入命令结果 2.设定快捷键 3.字符替换 4.多文件打开 vim使用技巧,就是vim编辑器 ...
- CS起源-havana地图红方打法分析
作者:海底淤泥 havana是美国第一人称射击游戏<反恐精英>中的地图之一,编号为cs_havana,这张地图发生在古巴哈瓦那的某座城市中,恐怖分子们挟持了几名美裔的重要政治人物,以此为筹 ...
- Java+Eclipse+MySQL+Swing实现学生会考成绩管理系统(免费完整项目)
版权声明:原创不易,本文禁止抄袭.转载,侵权必究! 目录 一.需求开发文档 二.数据库设计文档 三.功能模块部分代码及效果展示 四.完整源码下载 五.作者Info 一.需求开发文档 项目完整文件列表: ...
- MyBatis练习——使用MyBatis查询所有职员信息
实现要求: 使用MyBatis查询所有职员信息 create table employee( id int not null auto_increment, name varchar(255) not ...
- Windows下SQL Server数据库的安装
由于工作需要出一版教程,记录一下安装过程,用到的数据库是SQL Server2014版本 下载地址为:SQL Server2014下载 提取码:6666 下载好安装包,首先右键,装载 装载完, 会有这 ...
- 使用.NET 6开发TodoList应用(17)——实现数据塑形
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...
- Ubuntu18.04编译Zircon
1.获取源代码 git clone https://fuchsia.googlesource.com/zircon 2.安装编译环境 sudo apt-get install texinfo libg ...
- 初识python: 递归函数 - 分解质因数
分解质因数: 任何一个合数都可以写成几个质数相乘的形式.其中每个质数都是这个合数的因数,叫做这个合数的分解质因数.分解质因数只针对合数. 比如: 8 分解质因数是:2*2*2 10分解质因数是:2*5 ...
- [转]Python3字符串前缀u、b、r
1.无前缀 & u前缀 字符串默认创建即以Unicode编码存储,可以存储中文. string = 'a' 等效于 string = u'a' Unicode中通常每个字符由2个字节表示 ...
- Mybatis实现分包定义数据库
Mybatis实现分包定义数据库 背景 业务需求中需要连接两个数据库处理数据,需要用动态数据源.通过了解mybatis的框架,计划 使用分包的方式进行数据源的区分. 原理 前提: 我们使用mybati ...