文章目录
- 一、es6是什么
- 1. 官方回答
- 2. 本人理解
- 二、版本新增
- 1. let 和 const 和 var 的区别
- 2.解构赋值
- 3.模板字符串
- 4.字符串新增
- 5.函数的新增
- 6.箭头函数
- 7.数组新增
- 8.对象新增
- 1.对象的简洁：
- 2.方法的简洁：
- 3.新增对象方法：
- 9.扩展运算符
- 10.promise
- 11.async await
- 12.class类构造器
- 13.class静态属性和静态方法
- 14.set和map数据结构
- set数据结构
- map数据结构
- 15.模块化
一、es6是什么
1. 官方回答
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。
2. 本人理解
es6.0版本
js版本，2015年六月推出的版本
ECMAScript组织 javascript 1.0 2.0 3.0 4.0 5.0
es6比es5,有更强的语法。以及增强和新增，它泛指js的下一个版本
每年六月会发布一次新版本
二、版本新增
1. let 和 const 和 var 的区别
var： 弱类型语言
1. 重复声明使用，第二次声明会覆盖之前的
2. 存在变量提升
let:
1. 不允许重复声明使用，否则报错
2. 不存在变量提升
const:(常量)
1.声明时必须要有初始值 不允许重复声明使用，否则报错
2. 不存在变量提升
3. 不可改变，改变报错使用场景：
const num = 3
const arr = [];
const obj = {}作用域：全局作用域
var
局部作用域
function
块级作用域
{}2.解构赋值
//数组解构赋值：
let [a,b,c] = [1,2,3]
//作用：快速声明变量，数组对数组，值对值
//扩展运算符：
...
let [a = 1,b,...c] = [,2,3,4,5,6]
console.log(a,b,c)
//对象解构赋值：
//作用：快速获取数据
//方式一：
let obj = {
name:'张飞',
age:18,
sex:'男'
}
console.log(obj.name) //张飞
let{name,age,sex} = obj
console.log(name) //张飞
console.log(age) //18
console.log(sex) //男
//方式二：
function add({ name, age }) {
console.log(name, age) //111,222
}
add({ name: 111, age: 222 })
//如果遇到敏感关键字或浏览器封装好的关键字
let {delete:del = '默认'} = {delete:'删除'}
console.log(del) //删除3.模板字符串
语法：
`hello ${变量}`4.字符串新增
'hello'.includes('l') //判断字符串是否包含特定字符 如果包含返回true,否则返回false
indexOf() //查找字符串在字符串中的位置，如果找到了返回索引，否则返回-1
startWith() //判断字符串中是否以特定字符开头，如果是，返回true，否则false
endsWith() //判断字符串中是否以特定字符结尾，如果是，返回true，否则false
padStart() //在字符串开始位置填充
padEnd() //在字符串结尾位置填充
repeat() //重复字符串 方法不可以传负数，整数向下取整5.函数的新增
函数默认值：
let f = function(a=100){
console.log(a) //100
}
f()函数参数rest用法：
let f = function (...arr) {
// console.log(arguments)
// let arr = [];
// for(let i = 0;i<arguments.length;i++){
// arr.push(arguments[i])
// }
console.log(arr)
}
f(1,2,3,4)
//通过...arr在函数传参中，就可以在函数内部拿到一个数组，数组中就是参数的集合6.箭头函数
//箭头函数：
语法：() =>{
//代码块
}
//普通函数
let fn = function({str}) {
console.log(str)
}
//this指向 ：传统的函数内部this指向谁调用方法，this指向谁
//箭头函数
let fn2 = ({str}) =>{
console.log(`箭头函数${str}`)
}
fn({str:'函数'})
fn2({str:'厉害'})作用：解决this指向问题，this定义时(上下文中的this),this的指向
特点：1.this指向的是定义时(上下文中的this)
2. 箭头函数中不能使用arguments
3. 箭头函数不可用构造器(工厂函数)
箭头函数简写：
箭头函数参数，只有一个可以把()省略，函数体只有一行代码，可以省略{}7.数组新增
es5
for(){} 可以循环数组，可以循环伪数组
forEach() 可以循环数组，不可以循环伪数组
map()(映射) 可以循环数组,批量处理数据，循环具备return,返回新数组
filter() 过滤循环 return 就是过滤条件，循环会把每一项符合条件的数据，返回一个新数组中
some() 循环每一条数据，循环条件如果有一个符合，返回true，否则返回false
every() 循环每一条数据，循环条件都符合，返回true，否则返回false
es6新增
fill() 数组填充 方法第一个参数为填充的内容，第二个参数填充起始位置，第三个参数结束位置
includes() 数组数据是否包含，判断数组中是否包含某个特定字符，对比的是每一项，如果有返回true，否则返回false
indexOf() 数组中查找，如果有返回索引，如果没有返回-1
find() 数组中查找符合条件的数据，如果符合条件退出循环，将符合条件的数据返回成新的值，找不到返回undefined
findIndex() 数组中查找符合条件的数据，如果符合条件退出循环,返回下标索引，找不到返回-18.对象新增
1.对象的简洁：
let name = '张飞'
let obj = {
name
}
console.log(obj)
//总结：属性的总结，使用的变量和属性名相同时，那么可以省略成一个属性2.方法的简洁：
let name = '张飞'
let obj = {
name,
// say:function(){
// alert('你好'+this.name)
// }
say(){
alert('你好'+this.name)
}
}
console.log(obj)
obj.say()
//总结：可以直接省略成say(){}3.新增对象方法：
Object.is() //判断两个对象，是否一样
Object.assign() //对象合并方法
Object.keys() //拿到对象中属性集合
Object.values() //拿到对象中属性值集合
Object.entries() //拿到对象中键值对集合
//浅拷贝实现方式：
Object.assign()
//扩展运算符...
//最简单深拷贝
let a = [1,2,3,{name:'张飞'}]
let b = JSON.parse(JSON.stringify(a))
a[3].name = 123
console.log(a,b)9.扩展运算符
语法：...
1. 可以展开字符串，字符串转换数组
2. 可以浅拷贝，对象和数组都可以进行展开实现浅拷贝
3. 伪数组可以转换成数组
4. 可以用rest方式，在函数中可以快速拿到所有参数集合生产一个数组，在数组结构中，可以将剩余的值，当到变量10.promise
Promise是异步编程的一种解决方案，比传统的回调函数更强大和高效，最早是由社区提出并实现 ECMA觉得不错，就把promise加到api,他其实就是一个对象，对象中装载着未来某个状态
异步表现形式：
1. 定时器
2. ajax请求
3. 回调函数
回调地狱：函数嵌套
promise可以解决回调地狱问题
浏览器提供构造函数，在定义一个promise对象时，注意：参数是回调函数，回调函数第一个参数为成功resolve,失败回调为reject
通过原型上的then方法，可以拿到resolve返回的参数
通过原型上的catch方法，可以拿到reject返回的参数
使用方式：
let p = new Promise((resolve,reject)=>{
resolve('成功')
})
console.log(p)
p.then((res)=>{
console.log(res)
})特点：1. 一旦创建，立即执行
2. 返回结果不受外界影响11.async await
async 异步
await 等待
作用：async也是异步编程的一种方式，更好的解决异步编程
特点：async返回的一直是promise对象,可以结合结构赋值进行预处理响应数据
let fun = async function () {
let { data } = await request()
}
fun()12.class类构造器
ECMA推出的构造函数，语法糖(功能不变，用法有变化)
java和.net后端语言都具备面向对象 class类的方式进行构造
语法：
class Person { //原型对象
constructor(name) { //构造方法
this.name = name
}
}
let p = new Person('张飞')
//继承：
class Child extends Person {
constructor(name,age) { //构造方法
super(name) //作用就是调用了Person中的constructor
this.age = age
}
}
let c = new Child('刘备',18)13.class静态属性和静态方法
在类构造函数中，static关键字定义属性和方法、
然后使用 构造函数中直接调用属性或方法
Person.user
Person.fun()
继承之后，子构造器，继承父构造器的静态属性和静态方法14.set和map数据结构
set数据结构
语法：
let set = new Set()特点：
set数据结构中不允许重复值，去重
// set数据结构转换成数组
Array.form(set)
[...set]方法或属性：
size属性：返回的就是set数据结构中的数量
has()：判断set数据结构中是否有特定的值
add():向set数据结构中添加一个数据
delete():删除指定数据
clear():清空数据结构
//最简单数组去重：
let arr = [1,2,6,1,7,4,2,7,7,5,4,5,8,55,5,2,2,3,1,1,1,2,3,1,8,9,9,8,4,4,5,1]
let newArr = [...new Set(arr)]map数据结构
语法：
let map = new Map()特点：可以以任意数据类型进行key value形式存储
具备的方法：
size属性:返回数据数量
set(),向map数据结构中进行存储，第一个参数为key,第二个参数为valve
delete():删除指定的数据
get()在map数据结构中获取相应数据
clear():全部清除
has(),判断是否有这条数据15.模块化
在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。
我们先来创建一个test.js文件，来对这一个变量进行输出：
export let str ="hello es6";然后可以创建一个index.js文件，以import的形式将这个变量进行引入:
import { str } from "./test.js";
console.log(str);//hello es6
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
