let变量声明及声明特性
let a;
let b,c,d;
特性：
1.变量不能重复声明
2.块级作用域 全局 函数 eval
if else while for
{
let girl = '张一'
}
console.log(girl) //报错 girl is nod defined
3.不存在变量提升
4.不影响作用域链
const声明常量及其特点
const SCHOOL = '学校'
特点：
1.一定要赋初始值
2.一般常量使用大写（潜规则）
3.常量的值不能修改
4.块级作用域
5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值
1.数组的解构
[a,b,c] = [1,2,3]
console.log(a,b,c)
2.对象的解构
let person = {
name:'张三',
age:18
}
let {name,age} = person
console.log(name,age)
模板字符串
ES6引入新的声明字符串的方式 ``
let str = haha
特性
1.内容中可以直接出现换行符
let str = `<ul>
<li>111</li>
<li>222</li>
</ul>`
2.变量拼接
let name = '张三'
console.log(我的名字是${name})
对象的简化写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
这样的书写更加简洁
let name = '尚硅谷'
let change = function(){
console.log('change')
}
let person = {
name,
change,
//函数简写
improve(){
console.log('improve')
}
}
console.log(person)
箭头函数以及声明特点
let fn = (a,b) => {
return a+b
}
console.log(fn(1,2))
特点：
1.this是静态的，this始终指向函数声明时所在的作用域下的this的值
2.不能作为构造实例化对象
不能用new
3.不能使用arguments变量
4.箭头函数的简写
//省略小括号
let add = n => {
return n+n
}
//省略花括号
let pow = (n) => n*n
箭头函数适合与this无关的回调，定时器，数组的方法回调
箭头函数不适合与this有关的回调，事件回调，对象的方法
rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments
rest参数必须要放到最后
function fn(a,b,...args){
console.log(args) //[3,4,5]
}
fn(1,2,3,4,5)
扩展运算符
...
//数组的合并
const arr1 = [1,2]
const arr2 = [3,4]
const arr = [...arr1,...arr2]
console.log(arr)
//数组的克隆
const arr3 = ['E','G','M']
const arr4 = [...arr3]
console.log(arr4)
//将伪数组转为真正的数组
const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)
Symbol的介绍与创建
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。
Symbol 特点
- Symbol的值是唯一的,用来解决命名冲突的问题
- Jymbol值不能与其他数据进行运算
- Symbol 定义的对象属性不能使用 for ... in 循环遍历,但是可以使用Reflect.ownKeys 来获取对象的所有键名
对象添加Symbol类型的属性
let game = {
up(){
console.log('up')
},
down(){
console.log('down')
}
}
let methods = {
up:Symbol(),
down:Symbol()
}
game[methods.up] = function(){
console.log('new up')
}
game[methods.down] = function(){
console.log('new down')
}
console.log(game)
let person = {
name:'张三',
[Symbol('say')]:function(){
console.log('say')
}
}
console.log(person)
迭代器
迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。
任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
- ES6创造了一种新的遍历命令for ... of循环,Iterator 接口主要供for ... of消费
- 原生具备 iteiator接口的数据(可用for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e)String
f)TypedArray
g) NodeList - 工作原理
a)创建一个指针对象,指向当前数据结构的起始位置
b)第一次调用对象的next方法,指针自动指向数据结构的第一个成员
c) 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
d)每调用next方法返回一个包含value和done属性的对象
注：需要自定义遍历数据的时候，要想到迭代器
解决回调地狱问题
function one(){
setTimeout(()=>{
console.log(111)
iterator.next()
},1000)
}
function two(){
setTimeout(()=>{
console.log(222)
iterator.next()
},2000)
}
function three(){
setTimeout(()=>{
console.log(333)
iterator.next()
},3000)
}
function * gen(){
yield one()
yield two()
yield three()
}
//调用生成器函数
let iterator = gen()
iterator.next()
Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果。
- Promise 构造函数:Promise(excutor)份
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
let data = '数据读取成功'
resolve(data)
// let error = '数据读取失败'
// reject(error)
},1000)
})
p.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
Promise封装AJAX请求
const p = new Promise((resolve,reject)=>{
const xhr =new XMLHttpRequest()
xhr.open('GET','http://jsonplaceholder.typicode.com/posts')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
resolve(xhr.response)
}else{
reject(xhr.response)
}
}
}
})
p.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
Set 集合介绍与API
let s = new Set()
let s2 = new Set([1,2,2,3,4,5,5,]) //自动去重
//元素个数
console.log(s2.size)
//添加新的元素
s2.add('new')
//删除元素
s2.delete('new')
//检测
console.log(s2.has(2))
//清空
// s2.clear()
console.log(s2)
for( let v of s2){
console.log(v)
}
集合实践
let arr = [1,2,3,4,5,4,3,2,1]
//1.数组去重
let newArr = [...new Set(arr)]
console.log(newArr)
//2.交集
let arr2 = [4,5,6,5,6]
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(result)
//3.并集
let result2 =[...new Set( [...arr,...arr2])]
console.log(result2)
//4.差集
let chaArr = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
let chaArr2 = [...new Set(arr2)].filter(item => !(new Set(arr).has(item)))
console.log(chaArr,chaArr2)
Map
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象),都可以当作键。Map也实现了 iterator 接口,所以可以使用「扩展运算符』和【for ... of .... 』进行遍历。Map的属性和方法:
- size 返回Map的元素个数|
- set 增加一个新元素,返回当前Map
- get 返回键名对象的键值
- has 检测Map中是否包含某个元素,返回boolean 值
- clear 清空集合,返回 undefined
let m = new Map()
m.set('name','尚硅谷')
m.set('age',18)
m.set([1,2,3],{a:1,b:2})
console.log(m.get('age'))
console.log(m.has('age'))
// m.delete('age')
// m.clear()
console.log(m)
console.log(m.size)
class介绍与初体验
ES6 提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
//ES5
function Phone(brand,price){
this.brand = brand
this.price = price
}
Phone.prototype.call = function(){
console.log('我可以打电话')
}
let xiaomi = new Phone('小米',4999)
xiaomi.call()
console.log(xiaomi)
//ES6
class Phone{
//构造方法 名字不能修改
constructor(brand,price){
this.brand = brand
this.price = price
}
// 方法必须使用该语法，不能使用ES5的对象完整形式
call(){
console.log('我可以打电话')
}
}
let HUAWEI = new Phone('华为',6999)
HUAWEI.call()
console.log(HUAWEI)
class的类继承
class SmartPhone extends Phone{
constructor(brand,price,color){
super(brand,price)
this.color = color
}
photo(){
console.log('我可以拍照')
}
}
let oneplus = new SmartPhone('1+',4999,'白色')
oneplus.photo()
console.log(oneplus)
数值扩展
Number.EPSILON
Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为NaN
Number.parseInt 字符串转整数
Number.parseFloat
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小鼠部分抹掉
Math.sign 判断一个数到底为正数 负数 还是零
对象方法扩展
Object.is 判断两个值是否完全相等
Object.assign 对象的合并
Object.setPrototypeOf 设置原型对象 Object.getPrototyeOf 获取原型
console.log(Object.is(120,120))
const config1 = {
host:'localhost',
port:3306,
name:'root',
pass:'root',
b:200
}
const config2 = {
host:'http://atguigu.com',
port:33060,
name:'atguigu.com',
pass:'iloveyou',
a:100
}
console.log(Object.assign(config1,config2))
const school = {
name:'尚硅谷'
}
const cities = {
xiaoqu :['北京']
}
Object.setPrototypeOf(school,cities)
console.log(school)
console.log(Object.getPrototypeOf(school))
ES6模块暴露数据语法汇总
m1.js
//分别暴露
export let school = '尚硅谷1'
export function change(){
console.log('m1')
}
m2.js
//统一暴露
let school = '尚硅谷2'
function findJob(){
console.log('m2')
}
export {school,findJob}
m3.js
//默认暴露
export default{
school : '尚硅谷3',
change(){
console.log('m3')
}
}
html
<script type="module">
//1.通用的导入方式
//引入m1.js 模块内容
import * as m1 from "./src/js/m1.js"
import * as m2 from "./src/js/m2.js"
import * as m3 from "./src/js/m3.js"
console.log(m1)
//2.解构赋值的形式
import {school,change} from './src/js/m1.js'
import {school as guigu,findJob} from './src/js/m2.js'
import {default as m3} from './src/js/m3.js'
console.log(school,change,guigu,findJob)
console.log(m3)
//3.简便形式 针对默认暴露
import m3 from './src/js/m3.js'
console.log(m3)
</script>
浏览器使用ES6模块化方式二
app.js
//入口文件
//模块引入
import * as m1 from './m1.js'
import * as m2 from './m2.js'
import * as m3 from './m3.js'
console.log(m1,m2,m3)
html
<script src="./src/js/app.js" type="module"></script>
ES7新特性
includes 之前用 indesOf
const arr = [1,22,333,444]
console.log(arr.includes(1))
** 次方
console.log(2 ** 3)
console.log(Math.pow(2,3))
ES8新特性
async await
async和 await 两种语法结合可以让异步代码像同步代码一样
async 函数
- async函数的返回值为 promise对象,
- promise 对象的结果由async函数执行的返回值决定
await 表达式
1.await必须写在async函数中
2.await 右侧的表达式一般为promise对象
3.await返回的是promise成功的值
4.await的 promise失败了,就会抛出异常,需要通过try ... catch捕获处理
async 与 await 结合发送AJAX请求
//发送AJAX请求，返回的结果是Promise对象
function sendAJAX(url){
return new Promise((resolve,rejcet)=>{
const x = new XMLHttpRequest()
x.open('GET',url)
x.send()
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >= 200 && x.status < 300){
resolve(x.response)
}else{
reject(x.status)
}
}
}
})
}
//promise then方法测试
// sendAJAX('http://jsonplaceholder.typicode.com/posts').then(value=> {
// console.log(value)
// }, reason => {
// console.log(reason)
// })
//async await 测试
async function main(){
let result = await sendAJAX('http://jsonplaceholder.typicode.com/posts')
let result2 = await sendAJAX('http://jsonplaceholder.typicode.com/posts/2')
console.log(result2)
}
main()
ES8对象方法扩展
Object.keys()
Object.values()
Object.entries()
const school = {
name:'尚硅谷',
cities:['北京','上海']
}
console.log(Object.keys(school))
console.log(Object.values(school))
console.log(Object.entries(school))
const m = new Map(Object.entries(school))
console.log(m.get('name'))
ES10 字符串方法扩展
trimStart trimEnd
ES10 数组方法扩展
flat 将多维数组转化为低位数组
flatMap
const arr1 = [1,2,3,4,[5,6,[7,8]]]
//参数为深度 是一个数字
console.log(arr1.flat(2))
const arr2 = [1,2,3,4]
const result = arr2.flatMap(item => [item * 10])
console.log(result)
ES10 Symbol.prototype.description
let s = Symbol('尚硅谷')
console.log(s.description)
ES11 私有属性
class Person {
//公有属性
name;
//私有属性
#age;
#weight;
constructor(name, age, weight){
this.name = name
this.#age = age
this.#weight = weight
}
}
const girl = new Person('小红', 18, '45kg')
console.log(girl)
console.log(girl.#age) //报错
ES11 Promise.allSettled
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('商品数据 - 1')
},1000)
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('商品数据 - 2')
},1000)
})
const result = Promise.allSettled([p1,p2])
// const result = Promise.all([p1,p2]) //两个任务必须都成功
result.then(value => {
console.log(value)
},reason => {
console.log(reason)
})
console.log(result)
ES11 动态import
//import * as m1 from './hello.js'
import('./hello.js').then(module => {
module.hello()
})
ES11 BigInt类型
//大整形
let n = 521n;
console.log(n, typeof(n))
//函数
let n2 = 123;
console.log(BigInt(n2))
// console.log(BigInt(1.2)) //报错
//大数值运算
let max = Number.MAX_SAFE_INTEGER
console.log(BigInt(max) + BigInt(1))
console.log(BigInt(max) + BigInt(2))
