一 属性和方法
1.let变量
-
变量不能重复声明
-
块级作用域
-
不存在变量提升
-
不影响作用域链
2.const声明常量
-
一定要赋初始值
-
一般常量使用大写
-
常量的值不能修改
-
块级作用域
-
对于数组和对象的元素修改，不算对常量的修改，指针指向的地址没有改变
3.变量的解构赋值
-
数组的解构
const F4 = ['张三','赵四','王五','马六'];
let{zhang,zhao,wang,ma}=F4;
-
对象的解构
const zhao = {
name:"zhaobenshan",
age:60,
xiaopin:function(){
console.log(我可以演小品);
}
};
let {name,age,xiaopin}=zhao;
console.log(name);
//可以直接,写不用写出zhao.xiaopin()
xiaopin();
4.模版字符串
-
内容中可以直接出现换行符
-
变量拼接
let lovest ='zhangsan';
let out = `${lovest}是我最欣赏的人`;
console.log(out);
5.对象的简化写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
let name = '狂飙';
let change = function(){
console.log('我们可以改变你！');
}
const school ={
name,
change,
improve(){
console.log('我们可以提升你');
}
}
console.log(school);
6.箭头函数=>
let fn = function(){
}
let fn =(a,b)=>{
return a+b;
}
fn(1,2);
-
this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2=()=>{
console.log(this.name);
}
window.name = '硅谷';
const school ={
name:'GUIGU'
}
getName();
getName2();
//Call方法调用
getName.call(school);//GUIGU
getName2.call(school);//硅谷
-
不能作为构造函数实例化对象
-
不能使用arguments变量
-
箭头函数的简写
1.省略小括号，当形参有且只有一个的时候;
2.省略花括号，当代码体只有一条语句的时候,此时return必须省略，语句 的执行结果就是函数的返回值
//let add = (n) =>{
// return n++;
//}
//省略小括号
let add = n =>{
return n++;
}
//省略花括号
let add = n=>n++;
console.log(add(9));
-
箭头函数适合与this无关的回调，如定时器,数组的方法回调
-
箭头函数不适合与this有关的回调，比如事件回调，对象的方法
7.函数参数的默认值
-
形参的初始值,具有默认值的参数，位置一般要靠后
function add(a,b,c=10){
return a+b+c;
}
let result = add(1,2);
console.log(result);//13
-
与解构赋值结合使用
//原始写法
function connect(options){
let host = options.host;
let username=options.username;
let password=options.password;
let port=options.port;
}
//结合后
function connect({host,username,password,port}){
console.log(host);
}
//可以赋初始值
function connect({host='120.0.0.0',username,password,port}){
console.log(host);
}
connect({
host:'localhost',
username:'root',
password:'root',
port:3306
})
8.rest参数
引入rest参数，用于获取函数的实参，用来代替arguments
//ES5获取实参的方式
function date(){
console.log(arguments);
}
date('zhangsan','lisi','wangwu');//对象
//rest参数
function date(...args){
console.log(args);
}
date('zhangsan','lisi','wangwu');//数组
-
rest参数必须放在参数的最后
-
ES9为对象提供了像数组一样的rest参数和扩展运算符
function connect({host,port,...user}){ console.log(host); console.log(port); console.log(user);//包含了除host和port以外的其他参数 } connect({ host:'localhost', port:3306, username:'root', password:'root', type:'master' })
9.扩展运算符
-
...扩展运算符可以将数组转换为逗号分隔的参数序列
const tfboys = ['yi','wang','wang'];
function chunwan(){
console.log(arguments);
}
chunwan(tfboys);//数组
chunwan(...tfboys);//参数序列
-
数组的合并
const kuaizi = ['wangtaili','xiaoyang']; const fenghuan = ['linghua','zhengyi']; //const zuixuanxiaopinggu = kuaizi.concat(fenghuan); const zuixuanxiaopingguo = [...kuaizi,...fenghuan];
-
数组的克隆
const sanzhihua = ['E','G','M']; const sanyecao = [...sanzhihua];
-
将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);
-
ES9为对象提供了像数组一样的扩展运算符
10.Symbol
-
symbol用于创建一个唯一标识，与来解决命名冲突的问题
-
不能与其他数据进行运算
let s = Symbol();
console.log(s);
let s2 = Symbol('硅谷');
let s3 = Symbol('硅谷');
s2!=s3
let s4 = Symbol.for('硅谷');
let s5 = Symbol.for('硅谷');
s4=s5
11.迭代器Iterator
迭代器是一种接口，为各种不同的数据结构提供统一的访问机制
需要自定义遍历数据的时候，要想到迭代器
原生具备Iterator接口的数据类型（可用for of遍历）：Array,Arguments,Set,Map,String,typeArray,NodeList
工作原理：
-
创建一个指针对象，指向当前数据结构的起始位置；
-
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
-
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
-
每调用next方法返回一个包含value和done属性的对象
12.生成器
异步编程解决方案一
ES6提供的异步编程解决方案
生成器是一种特殊的函数
与yield一起使用
function *gen(){
console.log('hello');
}
let iterator = gen();
console.log(iterator);
iterator.next();
13.Promise
异步编程解决方案二
promise是一个构造函数，用来封装异步操作并可以获取成功或者失败的结果
//实例化Promise对象
const p = new Promise(function(resolve,reject){
setTimeout(function(){
//
let data ='服务器返回成功';
resolve(data);
let err = '服务器返回失败';
reject(err);
},1000);
});
//调用promise的then方法
p.then(function(value){
console.log(value);
},function(reason){
console.log(reason);
});
//调用promise的catch方法
p.catch(function(reason){
console.warn(reason)
});
14.Set
let s = new Set(); let s2 = new Set(['x','xx','xxx','xx']);
15.Map
类似于对象，也是键值对的集合，但是键的范围不限于字符串，各种类型的值（包括对象）都可以当作键
let m = new Map();
16.class类
-
class声明类
//ES5写法 function Phone(brand,price){ this.brand=brand; this.price = price; } //添加方法 Phone.prototype.call=function(){ console.log("我可以打电话"); } //实例化对象 let HW = new Phone('hw','5999'); hw.call();//ES6写法 class Phone = { //构造方法 constructor(brand,price){ this.brand=brand; this.price = price; } //方法必须使用该语法，不能使用ES5完整形式 //XXX call:function(){} call(){ console.log("我可以打电话"); } } let oneP = new Phone('1+','1999'); -
constructor定义构造函数初始化
-
extends继承父类
------ ES5 ------ //父级 function Phone(brand,price){ this.brand = brand; this.price = price; } Phone.prototype.call = function(){ console.log(" I Can phone"); } //子级 function SmartPhone(brand,price,color,size){ Phone.call(this,brand,price); this.color = color; this.size = size; } //设置子级构造函数的原型 SmartPhone.prototype = new Phone; SmartPhone.prototype.constructor = SmartPhone; //声明子类的方法 SmartPhone.prototype.photo = function(){ console.log(" I Can photo"); } SmartPhone.prototype.play = function(){ console.log(" I Can play"); } const chuizi = new SmartPhone('chuizi',2499,'black','5inch'); ------ ES6 ------ //父类 class Phone = { //构造方法 constructor(brand,price){ this.brand=brand; this.price = price; } //父类的成员属性 call(){ console.log("我可以打电话"); } } class SmartPhone extends Phone{ //构造方法 constructor(brand,price,color,size){ super(brand,price); this.color = color; this.size = size; } photo(){ console.log("I Can photo"); } play(){ console.log("I Can play"); } //父类方法可以重写 call(){ console.log("I Can Call"); } } const xiaomi = new SmartPhone('xiaomi',2499,'black','5inch'); -
super调用父级构造函数
-
static定义静态方法和属性
-
父类方法可以重写
-
getter和setter
class Phone { get price(){ console.log('价格属性被读取了'); } set price(newVal){ console.log('价格属性被修改了'); } } //实例化对象 let s = new Phone(); console.log(s.price); s.price='free';
17.数值扩展
-
Number.isNaN 检测一个数值是否为NaN
-
Number.parseInt Number.parseFloat 字符串转整数
-
Number.isInteger 判断一个数是否是整数
-
Math.trunc 将数字的小数部分抹掉
-
Math.sign 判断一个数到底为正数，负数 还是零
18.对象方法扩展
-
Object.is 判读两个值是否完全相等
-
Object.assign 对象的合并
-
Object.setPrototypeof 设置原型对象Object.getPrototypeof
19.async和await
异步编程解决方案三
async和await两种语法结合可以让异步代码像同步代码一样
-
async函数
async函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
async function fn(){
return new Promise((resolve,reject)=>{
resolve('成功的数据');
reject('失败的错误');
});
}
const result = fn();
//调用then方法
result.then(value=>{
console.log(value);
},reason=>{
console.warn(reason);
})
-
await表达式
await必须写在async函数中
await右侧的表达式一般为promise对象
await返回的是promise成功的值
await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
const p = new Promise((resolve,reject)=>{
resolve("Success");
})
async funtion main(){
try{
let result = await p;
console.log(result);
}catch(e){
console.log(e);
}
}
20.可选链操作符(？.)
function main(config){
//以前的方式
const dbHost = config&&config.db&&config.host;
//可选链操作符方式
const dbHost = config?.db?.host;
console.log(deHost);
}
main({
db:{
host:'192.168.1.100',
username:'root'
},
cache:{
host:'192.168.1.200',
username:'admin',
}
})
二 模块化
模块功能主要由2个命令组成：export和import
1.分别暴露
//m1.js 分别暴露
export let school = 'guigu';
export function tech(){
console.log(I Can Teach);
}
//html引入
<script type="module">
//引入m1.js模块内容
//1.通用的导入方式
import * as m1 from "./src/js/m1.js";
console.log(m1);
//2.解构赋值的方式
import {school,tech} from "./src/js/m1.js";
console.log(school);
console.log(tech);
</script>
2.统一暴露
//m2.js 统一暴露
let school = 'guigu';
function findJob(){
console.log(I Can Help Work);
}
export {school,findJob};
//html引入
<script type="module">
//引入m2.js模块内容
//1.通用的导入方式
import * as m2 from "./src/js/m2.js";
console.log(m2);
//2.解构赋值的方式
//as 给类一个别名
import {school as guigu,findJob} from "./src/js/m2.js";
console.log(guigu);
console.log(findJob);
</script>
3.默认暴露
//m3.js 默认暴露
export default {
school:'guigu';
change:function(){
console.log('We Can Change The World!');
}
}
//html引入
<script type="module">
//引入m3.js模块内容
//1.通用的导入方式
import * as m3 from "./src/js/m3.js";
//调用多一层default
m3.default.change();
//2.解构赋值的方式
//不能直接使用default，需设置一个别名
import {default as m3} from "./src/js/m3.js";
console.log(m3);
//3.简便形式 只针对默认暴露
import m3 from "./src/js/m3.js";
console.log(m3);
</script>
HTML引用模块化方式二
//app.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";
//通过app.js引入 <script scr="./src/js/app.js" type="module"></script>
-
动态import
//获取元素 const btn = document.getElementById('btn'); btn.onClick = function(){ import ('./hello.js').then(module=>{ module.hello(); }) }
扫一扫
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
