LET声明变量
//声明变量的格式
let a;
let b,c,d;
- 变量不能重复命名
//let star = 1
//let star = 2
- 块级作用域 全局,函数,Eval
{
let girl = '周杨青'
}
//console.log(girl)无法访问girl变量
- 不存在变量升级,不允许在声明变量之前使用变量
- 不影响作用域链
{
let school = 'siqu'
funtion foo(){
console.log(school)
//在这里依然可以使用school
}
foo()
}
const定义常量
- 一定要赋初值
const A;
- 一般常量使用大写(潜规则)
const a = 100;
- 常量的值不能修改
SCHOOL = "siqu"
- 块级作用域
const PLAYER = 'UZI'
- 对于数组和对象的元素修改,不算作对常量的修改,不会报错
const TEAM = ['UZI','MXLG','Ming','Letme']
变量的解构赋值
允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值
- 数组的解构
const F4 = ['小沈阳','刘能']
let [xiao,liu] = F4
- 对象的解构
const zhao = {
name:'zhao',
age:23
xiaopin:function(){
console.log("我可以演小品")
}
}
let {name,age,xiaopin} = zhao
模板字符串
ES6引入新的声明字符串的方式
- 声明
let str = `这是一个字符串`
console.log(str,typeof str)
- 内容中可以直接出现换行符
let Str = `<ul>
<li>沈腾</li>
</ul>`
- 可以直接进行变量的拼接
let lovest = '魏翔'
let out = "${lovest}是我心目中最搞笑的演员"
console.log(out);
简化对象写法
ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,这样书写更加简洁
let name = "siqu"
let change = function(){
console.log("改变")
}
//如果key和value是相同的,那么可以简写
const school = {
name,
change,
}
箭头函数
ES6允许使用【箭头】(=>)定义函数
//声明函数
let fn = function(){
}
let fn = (a,b) =>{
return a+b
}
//调佣函数
//let result = fn(1,2)
//console.log(result)
- this是静态的,this始终指向函数声明时所在作用域下this的值
function getName(){
console.log(this.name)
}
let getName2 = ()=>{
console.log(this.name);
}
window.name = "siqu"
const school = {
name:"AT"
}
//直接调用
//getName()
//getName2()
//call方法调用
getName.call(school) //
getName2.call(school) //它的this始终是window
- 不能作为构造函数实例化函数
let Person = (name,age) =>{
this.name = name;
this.age = age;
}
let me = new Person("xiao",30) //错误,不能使用箭头函数用来作为构造函数
- 不能使用arguments变量
let fn = () =>{
//console.log(arguments)
}
- 箭头函数的简写
//1.省略小括号,当形参有且只有一个的时候
let add = n=>{
return n+n;
}
//2.省略花括号,当代码体只有一条语句的时候
let pow = (n) => n*n;
//此时return语句必须省略,执行结果就是返回值
- 从数组中返回偶数的元素
const arr = [1,6,9,10,100,25]
const reuslt = arr.filter(item => item % 2 === 0)
console.log(result)
//箭头函数适合于与this无关的回调,定时器,数组的方法回调
//箭头函数不适合与this有关的回调,事件回调,对象的方法
函数参数的默认值设置
- 允许给函数参数赋值初始值
function add(a,c = 10,b){
return a+b+c;
}
- 与解构赋值结合
function conect({host = "127.0.0.1",username})
rest参数
rest参数,用于获取函数的实参,用来代替arguments
//rest 参数
funtion date(...args){
console.log(args);
//args是一个接收参数的数组
}
- rest参数必须要放到参数最后
扩展运算符
扩展运算符能将数组转换为逗号分隔的【参数序列】
//声明一个数组
const tfboys = ['易烊千玺','王源']
//声明一个函数
function chunwan(){
console.log(arguments)
}
chunwan(...tfboys) //相当于chunwan('易烊千玺','王源')
- 扩展运算符的使用
//1.数组的合并
const kuaizi = ['王太利','肖央']
const name = ['san','si']
const s = [...kuaizi,...name]
console.log(s)
//数组的克隆
const kuaizi = ['王太利','肖央']
const san = [...kuaizi]
console.log(san)
//将伪数组编程真正的数组
const divs = document.querySelectorAll("div")
const divArr = [...divs]
console.log(dirArr)
Symbol基本使用
ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,它是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型
Symbol特定
- Symbol的值是唯一的,用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for…in循环遍历,但是可以使用Rflect.ownKeys来获取对象的所有键名
//创建Symbol
let s1 = Symbol('siqu')
let s2 = Symbol('siqu')``
console.log(s1 === s2)
//通过Symbol.for()进行创建
let s3 = Symbol.for("siqu1")
let s4 = Symbol.for("siqu2")
console.log(s3 === s4)
//不能与其他数据进行运算,
//let result = s + 100
迭代
迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作
- ES6创造了一种新的命令for…of循环,Iterator接口主要提供for…of消费,
//声明一个数组
const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
//使用for...of循环进行遍历,遍历的结果是value
for(let v of xiyou){
console.log(v)
}
- 工作原理
- 创建一个指针对象,指向当前数据结构的起始位置
- 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
- 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
- 每调用next方法返回一个包含value和done属性的对象
- 注意:要自定义遍历数据的时候,要想到迭代器
- 迭代器自定义遍历对象
const banji ={
name:"一班",
stus:[
'xiaoming',
'daming',
'xiaotian'
],
//建立迭代器
[Symbol.iterator](){
let index = 0
return {
next:() =>{
if (index < this.stus.length){
const result = {value:this.stus[index],done:false}
index ++
return result
}else{
return {value:undefined,done:true}
}
}
}
}
}
for (let v of banji){
console.log(v)
}
生成器
生成器起始就是一个特殊的函数
用于异步编程
//定义生成器函数
function * gen(){
console.log("hello")
}
//必须调用next方法才能执行
let ite = gen()
ite.next()
- 可以for…of来进行遍历
function *gen(){
yield '疯狂'
yield '世界'
yield '典韦'
}
for(let v of gen()){
console.log(v)
}
//使用next调用
//let ie = gen()
//ie.next()
//ie.next()
//ie.next()
- 可以在生成器函数当中传入参数
function *gen(arg){
console.log(arg)
let one = yield 111;
console.log(one)
let two = yield 222;
console.log(two)
let three = yield 333;
console.log(three)
}
//执行获取迭代器对象
//整体方法传参数
let iterator = gen('AAA')
console.log(iterator.next());
//第一次调用next,参数会作为第一个yield的返回结果
console.log(iterator.next("bbb"))
//第二次调用next,参数会作为第二个yield的返回结果
console.log(iterator.next("ccc"))
//第三次调用next,参数会作为第三个yield的返回结果
console.log(iterator.next("ddd"))
生成器函数实例
//需求:1s后输出111,2s后输出222,3s后输出333
function one(){
setTimeout(() => {
console.log("111")
g.next()
}, 1000);
}
function two(){
setTimeout(() => {
console.log("222")
g.next()
}, 2000);
}
function three(){
setTimeout(() => {
console.log("333")
g.next()
}, 3000);
}
function * gen(){
yield one()
yield two()
yield three()
}
const g = gen()
g.next()
生成器函数案例二
//需求:模拟获取:用户数据 订单数据 商品数据
function getUser(){
setTimeout(() => {
let data = '用户数据'
iterator.next(data)
}, 1000);
}
function getOrders(){
setTimeout(() => {
let data = "订单数据"
iterator.next(data)
}, 1000);
}
function getGoods(){
setTimeout(() => {
let data = '商品数据'
iterator.next(data)
}, 1000);
}
function *gen(){
//获取数据执行相关的处理
let users = yield getUser()
console.log(users)
let orders = yield getOrders()
console.log(orders)
let goods = yield getGoods()
console.log(goods)
}
let iterator = gen()
iterator.next()
Promise
Promise是ES6引入的异步编程的新解决方案,语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果
- Promise 构造函数:
Promise(excutor){}
Promise.prototype.then()
Promise.prototype.catch()
//实例化Promise对象
const p = new Promise(function(resolve,reject){
setTimeout(() => {
let message = "数据读取成功"
//成功则调用resoleve函数,p的状态更新为成功
resolve(message)
}, 1000);
})
//在then方法中
//当p的状态为成功的时候调用,第一个参数方法
//当p的状态为失败的时候调用,第二个参数方法
p.then(function(value){
console.log(value)
},function(reason){
console.log(reason)
})
使用Promise读取文件
//使用node.js
//使用回调函数来进行读取
const fs = require("fs")
// fs.readFile("./test.txte",function(err,data){
// if (err) throw err
// console.log(data.toString())
// })
//使用Promis来读取文件
const p = new Promise(function(resolve,reject){
fs.readFile('./test.txt',function(err,data){
if (err) reject(err)
resolve(data)
})
})
p.then(function(value){
console.log(value.toString())
},function(err){
console.log("读取失败")
})
then方法
调用then方法,then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定
如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功值,状态为失败,返回值是错误值
既然then方法返回的是一个Promise对象,因此就可以进行链式调用
//使用链式调用读取多个文件
const fs = require('fs')
const p = new Promise((reslove,reject)=>{
fs.readFile('./test1.txt',(err,data)=>{
reslove(data)
})
})
p.then(function(value){
return new Promise((reslove,reject)=>{
fs.readFile('./test2.txt',(err,data)=>{
reslove([value,data])
})
})
}).then(value =>{
return new Promise((reslove,reject)=>{
fs.readFile('./test3.txt',(err,data)=>{
value.push(data)
reslove(value)
})
})
}).then(value =>{
console.log(value.join('\n'))
})
catch方法
指定当Promise的状态为失败的时候,所要执行的回调
不使用catch方法也可以,因为使用then方法可以指定两种状态的回调
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
reject("失败")
},1000)
})
p.catch(function(value){
console.warn(value)
})
Set集合
//声明一个set
let s = new Set()
//集合里面的内容是不重复的
let s2 = new Set(['大事儿','小事儿','小事儿'])
//删除元素
s2.delete("大事儿")
//元素个数
s2.size()
//添加新的元素
s2.add("喜事儿")
//检测
console.log(s2.has('糟心事儿'))
//清空
s2.clear()
console.log(s2)
类继承
class Phone{
constructor(brand,price){
this.brand = brand
this.price = price
}
call(){
console.log("我可以打电话")
}
}
class SmartPhone extends Phone{
constructor(brand,price,color){
super(brand,price)
this.color = color
}
photo(){
console.log("我可以拍照片")
}
}
let k = new SmartPhone("小米",1300,"black")
console.log(k.brand)
k.call()
k.photo()
子类重写父类方法
class SmartPhone extends Phone{
constructor(brand,price,color){
super(brand,price)
this.color = color
}
photo(){
console.log("我可以拍照片")
}
call(){
//子类不能去调用父类的同名方法
console.log("智能手机打电话")
}
}
get和set方法
class Phone{
//函数的返回值就是读取属性的值
get price(){
console.log("价格属性被读取了")
return 1300
}
set price(newValue){
console.log("价格属性被修改了")
this.price = value
}
}
let s = new Phone()
console.log(s.price())
数值扩展
Number.EPSILON
是JavaScript表示的最小精度- 二进制和八进制
let b = 0b1010;
let o = 0o777;
let x = 0xff; //十六进制
Number.isFinite
检测一个数值是否为有限数Number.isNaN
检测一个数值是否为NaNNumber.parseInt Number.parseFloat
字符串转整数Number.isInteger
判断一个数是否为整数Math.trunc
将数字的小数部分抹掉Math.sign
判断一个数到底是正数 负数 还是零
对象方法扩展
Object.is
判断两个值是否完全相等
console.log(Object.is(120,120))
Object.assign
对象的合并
Object.assign(config1,congfig2);
//后面的属性会覆盖前面的属性
Object.setPrototypeOf Object.getPrototypeof
//设置原型对象 获取原型
Object.setPrototypeOf(school,l)
模块化
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
ES6之前的模块化规范有:
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
模块化语法
模块功能主要由两个命令构成:export和import
- export 命名用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
//m1.js
//分别暴露
export let school = 'siqu'
export function teach(){
console.log("我们可以交个你开发技能")
}
//统一暴露
let school = 'siqu'
function findJob(){
console.log(hello)
}
export {school,findJob}
//默认暴露
export default{
school:'siqu',
change:function(){
console.log("hello")
}
}
引入模块
//通用的引入方式
import * as m1 from "./.."
//解构赋值形式
import {school,teach} from './..'
//引入默认暴露
import {default as m3} from './..'
//简便形式 只能针对默认暴露
import m3 from './..'
//在html中引入口js文件
<script src = './..' type='module'></script>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容