文章目录
- 一、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() 数组中查找符合条件的数据,如果符合条件退出循环,返回下标索引,找不到返回-1
8.对象新增
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