html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// var lastName='first name'
// var person={
// 'first':'zhang',
// [lastName]:'wang'
// }
// console.log(person.first)
// console.log(person[lastName])
// var review={}
// Object.assign(review,{
// type:'a',
// align:'b'
// },{
// type:'ccc'
// })
// console.log(review.type)
// console.log(review.align)
// var person2={
// type:'aaa',
// align:'bbb',
// }
// console.log(person2.type)
let person={
getMiting(){
return '我是person'
}
}
let dog={
getMiting(){
return '我是dog'
}
}
// person原型
var friend=Object.create(person)
console.log(friend.getMiting())
//通过setPrototypeof,将原型设置为dog
Object.setPrototypeOf(friend,dog)
console.log(friend.getMiting())
console.log(Object.getPrototypeOf(friend)===dog)
// 通过call继承原型
let friend2={
getMiting:function () {
return Object.getPrototypeOf(this).getMiting.call(this)+",hello"
}
}
Object.setPrototypeOf(friend2,person)
console.log(friend2.getMiting())
// 通过super继承原型
let friend3={
getMiting(){
return super.getMiting()+",hello3"
}
}
Object.setPrototypeOf(friend3,person)
let ob=Object.create(friend3)
console.log(ob.getMiting())
// super使用方式
class human{
constructor(name){
this.name=name
return name
}
}
class son extends human{
constructor(name,age){
super();
this.age=age;
}
}
console.log(son.constructor('zhan',20))
// 对象解构
// 对象解构语法在赋值语句的左侧使用了对象字面量
let node={
type:'1',
value:'外卖'
}
let {type,value}=node;
console.log(type,value)
// 数组解构
// 数组解构类似于对象解构，在赋值表达式中使用数组解构，但是与对象解构不同，不必将表达式包含在圆括号内
let color=['red','blue','black']
let [a,...b]=color;
let [...colorALL]=color;
console.log(a,b[0],b[1])// red,blue,black
console.log(colorALL); // ["red", "blue", "black"]
// 混合解构
let node2 = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 3
},
end: {
line: 1,
column: 4
}
},
range: [0, 3]
};
let{loc:{start},range:[...index]}=node2
console.log(start.line,start.column)
console.log(index);
// 参数解构
// 解构还有一个特别有用的场景，即在传递函数参数时。当 JS 的函数接收大量可选参数时，一
// 个常用模式是创建一个 options 对象，其中包含了附加的参数，
function setCookie(name,value,option) {
option=option || {}
let secure=option.secure;
let path=option.path;
let domain=option.domain;
let expires=option.expires
}
setCookie('cookie','1',{
secure:true,
path:'/uo.php',
expires:6000,
})
// 简洁版
function setCookie2(name,vaule,{secure,path,domain,expires}={}) {
}
setCookie2('cookie','1',{
secure:true,
path:'/uo.php',
expires:6000,
})
// 符号与符号属性
// 符号起初被设计用于创建对象私有成员，而这也
//是 JS 开发者期待已久的特性。在符号诞生之前，将字符串作为属性名称导致属性可以被轻易
//访问，无论命名规则如何。而“私有名称”意味着开发者可以创建非字符串类型的属性名称，由
//此可以防止使用常规手段来探查这些名称。
let firstName=Symbol();
let pe={};
pe[firstName]='第一个名字';
console.log(pe[firstName])
let symbol=Symbol('ZH');
console.log(typeof symbol)
// map 与set
let set=Object.create(null);
set.foo='va';
let va=set.foo
console.log(va)
// set与数组转换
let set2=new Set([1,2,3,4])
console.log([...set2])
// 去重
function add(items) {
return [... new Set(items)];
}
let number=[1,2,3,3,4,1,5,5],
vuale=[... new Set(number)]
console.log(vuale)
// 迭代器与生成器
//迭代器
function createIterator(items) {
var i=0;
return{
next:function (){
var done=i>=items.length;
var value= !done? items[i++]:undefined;
return{
value:value,
done:done,
}
},
}
}
let created=createIterator([1,2,3])
console.log(created.next())
console.log(created.next())
console.log(created.next())
console.log(created.next())
// 生成器：是能返回一个迭代器的函数，生成器函数由放在 function 关键字之后的一个星号（ * ）来表示，
// 不能将箭头函数创建为生成器
function *createdIterator2(items) {
for(let i=0;ii++){
yield items[i]
}
}
let iterator=createdIterator2([4,5,6])
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
// js中的伪类
class personClass{
// 等价于 PersonType 构造器
constructor(name){
this.name=name;
}
sayName(){
console.log("name:"+this.name)
}
// 等价于 PersonType.create
static number(name){
return name
}
}
class child extends personClass{
constructor(name,age){
super(name);
this.age=age;
}
sayName(){
console.log('name:'+this.name+",age:"+this.age)
}
}
var personi=new personClass('zhang');
personi.sayName()
var person2=new child('qqqqq',90);
person2.sayName()
// ES6 之前，实现自定义类型的继承是个繁琐的过程。严格的继承要求有多个步骤
function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
function Square(length) {
Rectangle.call(this, length, length);
}
Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value:Square,
enumerable: true,
writable: true,
configurable: true
}
});
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // tru
// ES6 继承
class Rectangle2 {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
// 静态继承
static created(length){
return new Rectangle2(length,length)
}
}
class Square2 extends Rectangle2{
constructor(length) {
// 与 Rectangle.call(this, length, length) 相同
super(length, length);
}
}
var square2 = new Square(3);
console.log(square2.getArea()); // 9
console.log(square2 instanceof Square2); // true
console.log(square2 instanceof Rectangle2); // true
// 继承静态成员
var rect=Square2.created(4);
console.log(rect.getArea());
// 增强的数组功能
// Array.of()
//在使用 Array.of() 方法创建数组时，只需将想要包含在数组内的值作为参数传入。第一个
//例子创建了一个包含两个项的数组，第二个数组只包含了单个数值项，而最后一个数组则包
//含了单个字符串项。
let items=Array.of(1,2);
console.log(items)
// Array.form()
//在 JS 中将非数组对象转换为真正的数组总是很麻烦。例如，若想将类数组的 arguments 对
//象当做数组来使用，那么你首先需要对其进行转换。在 ES5 中，进行这种转换需要编写一个函数
function makeArray(arrayLike) {
var result = [];
for (var i = 0, len = arrayLike.length; i < len; i++) {
result.push(arrayLike[i]);
}
return result;
}
function doSomething() {
var args = makeArray(arguments);
// 使用 args
}
// 或者
function makeArray2(arrayLike) {
return Array.prototype.slice.call(arrayLike);
}
function doSomething2() {
var args = makeArray2(arguments);
// 使用 args
}
// es6用法
function doSomething3() {
var args = Array.from(arguments);
// 使用 args
}
// find() 与 findIndex() 方法
// 二者唯一的区别是： find() 方法会返回匹配的值，而 findIndex() 方法则会返回匹配位置的索引。
// promise
//1. pending ：挂起，表示未结束的 Promise 状态。相关词汇“挂起态”。
//2. fulfilled ：已完成，表示已成功结束的 Promise 状态，可以理解为“成功完成”。相关
//词汇“完成”、“被完成”、“完成态”。
//3. rejected ：已拒绝，表示已结束但失败的 Promise 状态。相关词汇“拒绝”、“被拒
//绝”、“拒绝态”。
//4. resolve ：决议，表示将 Promise 推向成功态，可以理解为“决议通过”，在 Promise
//概念中与“完成”是近义词。相关词汇“决议态”、“已决议”、“被决议”。
//5. unsettled ：未决，或者称为“未解决”，表示 Promise 尚未被完成或拒绝，与“挂
//起”是近义词。
//6. settled ：已决，或者称为“已解决”，表示 Promise 已被完成或拒绝。注意这与“已完
//成”或“已决议”不同，“已决”的状态也可能是“拒绝态”（已失败）。
//7. fulfillment handler ：完成处理函数，表示 Promise 为完成态时会被调用的函数。
//8. rejection handler ：拒绝处理函数，表示 Promise 为拒绝态时会被调用的函数。
script>
body>
html>
