zhl1232 / daily-frontend Goto Github PK

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2
  }
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25

    var o = { a: 1 };
    o.b = 2;
    //a 和 b 皆为数据属性
    Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}

    var o = { a: 1 };
    Object.defineProperty(o, "b", {value: 2, writable: false, enumerable: false, configurable: true});
    //a 和 b 都是数据属性，但特征值变化了
    Object.getOwnPropertyDescriptor(o,"a"); // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(o,"b"); // {value: 2, writable: false, enumerable: false, configurable: true}
    o.b = 3;
    console.log(o.b); // 2

let res = 100 == '100' ? 'yes' : 'no'   // 'yes'
let res = 100 === '100' ? 'yes' : 'no'   // 'no'

let a = 1, b = 2, c = 3;
console.log( a && b && c )   // 3
console.log( null && 0 )   // null

let a = 1, b = 2, c = 3;
console.log( a || b || c )   // 1
console.log( null && 0 )   // 0

return ( Array.isArray(data) || typeof data === 'string' || [].length)

return (this.state.data || 'default')

console.log( 2 ** 3 )   // 8

// 下面的表达式是等效的
Math.pow(2, n)
2 << (n - 1)
2 ** n

console.log(-139.1 | 0)  
console.log(-139.7 | 0)
console.log(139.6 | 0)
console.log(139.4 | 0)
// 上面的结果都是 139

console.log( ~~-139.1 )  
console.log( ~~-139.7 )
console.log( ~~139.6 )
console.log( ~~139.4 )
// 结果一样都是向下取整

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// 或者这样
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 4));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

if (thisThing) {
    debugger;
}

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd('Timer1');
// Timer1: 25.840087890625ms
// 会打印出从开始到结束用了多少时间

<template>
  <div>
      <button @click="handleNameChange">change this.name</button>
  </div>
</template>
<script>
let name = "world";
export default {
  data() {
    this.name = name;
    return {
    };
  },
  methods: {
    handleNameChange() {
      this.name = "vue" + Date.now();
      console.log("this.name 发生了变化，但是并没有触发组件更新", this.name);
    },
  }
};
</script>

<button @click="handleInfoChange">change this.info</button>

data() {
    return {
      info: {},
    };
  },

handleInfoChange() {
      this.info.number = 1;
      console.log("this.info 发生了变化，但是并没有触发组件更新", this.info);
    },

<button @click="handleListChange">change this.list</button>

data() {
    return {
      list: [],
    };
  },

handleListChange() {
      this.list[0] = 123
      console.log("this.list发生了变化，但是并没有触发组件更新", this.list);
    },

// 1. 把对象里的属性都写进去,这样都会触发响应式
data() {
    return {
      info: {
        number: undefined
      },
    };
  },
handleInfoChange() {
      this.info.number = 1;
  },
// 2. 用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
data() {
    return {
      info: {
      },
    };
  },
handleInfoChange() {
      this.$set(this.info, 'number', 1)
  },

// 1. Vue.set(vm.items, indexOfItem, newValue)
this.$set(this.list, 0, 123);

// 2. 变异数组方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

// 这些方法是 vue 框架重写过的,使用这些方法会触发响应式
this.list.splice(0 , 1, 123)

function fn(person) {
  person.age = 23
  person = {
    name: 'zzz',
    age: 28
  }
  return person
}
const p1 = {
  name: 'xxx',
  age: 25
}
const p2 = fn(p1)
console.log(p1) // -> ?
console.log(p2) // -> ?

let a = 1
function foo(x) {
    x = 2
    console.log(x)
}
foo(a)  // 2
console.log(a)  // 1

let a = {
    abc: 1
}
function foo(x) {
    x.abc = 2
    console.log(x.abc)
}
foo(a)  // 2
console.log(a.abc)   // 2

let a = {
    abc: 1
}
function foo(x) {
    console.log(x) // {abc: 1}
    x = 2
    console.log(x) // 2
}
foo(a)
console.log(a.abc) // 1

let a = {
    abc: 1
}
function foo(x) {
    x.abc = 99
    console.log(x) // {abc: 99}
    x = 2
    console.log(x) // 2
}
foo(a)
console.log(a) // {abc: 99}

console.log(3 === new Number(3));  // false
console.log(typeof 3);   // number
console.log(typeof new Number( 3 ));   // object

console.log(typeof String('str'));   // string
console.log(typeof new String( 'str' )); // object

    let a
    // 我们也可以这样判断 undefined
    a  = undefined
    // 但是 undefined 不是保留字，能够在低版本浏览器被赋值
    let undefined = 1
    // 这样判断就会出错
    // 所以可以用下面的方式来判断，并且代码量更少
    // 因为 void 后面随便跟上一个组成表达式
    // 返回就是 undefined
    a  = void 0
    
    // 自执行函数建议像下面这样写
    void function() {
        console.log('hello')
    }()
    
    // 这样 function 返回 undefined, void 语义上也比较容易理解
    // 还会避免没加 ; 引起的编译错误

    console.log(true  = new Boolean(true));  // false

	console.log( 0.000000000000001 <= Number.EPSILON ); // false
	console.log( 0.0000000000000001 <= Number.EPSILON ); // true

	console.log( 2.220446049250313e-16.toString(2) );
	// 0.0000000000000000000000000000000000000000000000000001
	// 52位小数(2进制)

	0.1*2=0.2========取出整数部分0
	0.2*2=0.4========取出整数部分0
	0.4*2=0.8========取出整数部分0
	0.8*2=1.6========取出整数部分1
	0.6*2=1.2========取出整数部分1　
	0.2*2=0.4========取出整数部分0
	0.4*2=0.8========取出整数部分0
	0.8*2=1.6========取出整数部分1
	0.6*2=1.2========取出整数部分1
	……

	var o = new Object

	o[Symbol.iterator] = function() {
		var v = 0
		return {
			next: function() {
				return { value: v++, done: v > 10 }
			}
		}
	};

	for(var v of o)
	console.log(v); // 0 1 2 3 ... 9

const a = {}
let b = a
a.c = 666
console.log(b.c)  // 666

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

// router
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true },
    // 布尔模式: props 被设置为 true，此时route.params (即此处的name)将会被设置为组件属性。
    { path: '/static', component: Hello, props: { name: 'world', test: 'zhl' } },
    // 对象模式: 此时就和 params 没什么关系了.此时的name将直接传给Hello组件.注意:此时的props需为静态!
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn },
    // 函数模式: 1,这个函数可以默认接受一个参数即当前路由对象.2,这个函数返回的是一个对象.3,在这个函数里你可以将静态值与路由相关值进行处理.
    { path: '/attrs', component: Hello, props: { name: 'attrs' } }
  ]
})
function dynamicPropsFn(route) {
  const now = new Date()
  return {
    name: now.getFullYear() + parseInt(route.params.years) + '!'
  }
}

// 大概的伪代码
router.beforeEach((to, from, next)=>{
    //路由中设置的 route 信息就在to当中 
    if(window.sessionStorage.data){
    // 查看是否是登录状态,一般会缓存token
      if(to.path === '/'){
        // 这里做逻辑处理,比如权限之类的
        next({path: '/index'});
      }else{
        next();
      }
    }else{
      // 如果没有session ,访问任何页面。都会进入到 登录页
      if (to.path === '/') { // 如果是登录页面的话，直接next() 
        next();
      } else { // 否则 跳转到登录页面
        next({ path: '/' });
      }
    }
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

if (whiteList.indexOf(to.path) !== -1) {
      // 页面在免登录白名单，直接进入,
      // 这里的白名单是用导航守卫判断的,和 meta 没关系
      if (to.meta.title1) {
        // 如果是表单大师更改document title
        document.title = to.meta.title1
      }
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

const router = new VueRouter({
mode:'history',//这个不能忘,默认是hash模式
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
     // to：要进入的目标路由对象，到哪里去.和导航守卫的beforeEach一样
	 //from：离开的路由对象，哪里来
	 //savedPosition: 点击前进/后退的时候记录值{x:?,y:?}.并且只有通过浏览器的前进后退才会触发.
    // return 期望滚动到哪个的位置 { x: number, y: number }或者是{ selector: string, offset? : { x: number, y: number }},这里selector接收字符串形式的hash,如'#foo',同时你还可以通过offset设置偏移,版本需要大于2.6+
	//举个实例
	if(savePosition) { //如果是浏览器的前进后退就,返回之前保存的位置
      return savePosition;
    }else if(to.hash) {//如果存在hash,就滚动到hash所在位置
      return {selector: to.hash}
    }else{
	  return {x:0,y:0}//否则就滚动到顶部
	}
  }
})

// 全部路由
<transition>
  <router-view></router-view>
</transition>

单个路由
const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

// 动态
<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>


// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

function debounce(fn) {
  let timer = null
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, 1000)
  }
}

function sayHi(params) {
  console.log('Hi');
}
  
let ObjDIV = document.getElementById('div')
ObjDIV.addEventListener('click', debounce(sayHi))

function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}

/**
 * underscore 节流函数，返回函数连续调用时，func 执行频率限定为 次 / wait
 *
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间窗口的间隔
 * @param  {object}     options   如果想忽略开始函数的的调用，传入{leading: false}。
 *                                如果想忽略结尾函数的调用，传入{trailing: false}
 *                                两者不能共存，否则函数不能执行
 * @return {function}             返回客户调用函数
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的时间戳
    var previous = 0;
    // 如果 options 没传则设为空对象
    if (!options) options = {};
    // 定时器回调函数
    var later = function() {
      // 如果设置了 leading，就将 previous 设为 0
      // 用于下面函数的第一个 if 判断
      previous = options.leading === false ? 0 : _.now();
      // 置空一是为了防止内存泄漏，二是为了下面的定时器判断
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 获得当前时间戳
      var now = _.now();
      // 首次进入前者肯定为 true
	  // 如果需要第一次不执行函数
	  // 就将上次时间戳设为当前的
      // 这样在接下来计算 remaining 的值时会大于0
      if (!previous && options.leading === false) previous = now;
      // 计算剩余时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果当前调用已经大于上次调用时间 + wait
      // 或者用户手动调了时间
 	  // 如果设置了 trailing，只会进入这个条件
	  // 如果没有设置 leading，那么第一次会进入这个条件
	  // 还有一点，你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
	  // 其实还是会进入的，因为定时器的延时
	  // 并不是准确的时间，很可能你设置了2秒
	  // 但是他需要2.2秒才触发，这时候就会进入这个条件
      if (remaining <= 0 || remaining > wait) {
        // 如果存在定时器就清理掉否则会调用二次回调
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        // 判断是否设置了定时器和 trailing
	    // 没有的话就开启一个定时器
        // 并且不能不能同时设置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

import { debounce } from "@/utils/index";

onCreateSubmit: debounce(
  function() {
    createIntegralGoods(this.form).then(res => {
      this.$message.success("商品创建成功");
      this.$router.push({
        path: "/campaign/active/integral-mall/index"
      });
    });
  },
  1000,
  true
)

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var str = 'hello world'
str instanceof String // false
// 没有.运算符并不会做装箱转换

var str1 = new String('hello world')
str1 instanceof String // true

class PrimitiveString {
  static [Symbol.hasInstance](x) {
    return typeof x === 'string'
  }
}
console.log('hello world' instanceof PrimitiveString) // true

var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log([o, n, s, b, d, arg, r, f, arr, e].map(v => Object.prototype.toString.call(v))); 

var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + "");  
// 加法字符串,对象拆箱会先调用Object.prototype.toString
// 结果返回 [object MyObject]
console.dir(o)   // Symbol(Symbol.toStringTag): "MyObject"

class ValidatorClass {
  get [Symbol.toStringTag]() {
    return "Validator";
  }
}
// 也可以这样自定义类型标签

class ValidatorClass {}

Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"

Object.prototype.toString.call('foo');     // "[object String]"
Object.prototype.toString.call([1, 2]);    // "[object Array]"
Object.prototype.toString.call(3);         // "[object Number]"
Object.prototype.toString.call(true);      // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null);      // "[object Null]"

Object.prototype.toString.call(new Map());       // "[object Map]"
Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"

http://store.company.com/dir/page.html

http://store.company.com/dir2/other.html  // 路径不同,同源
http://store.company.com/dir/inner/another.html  // 路径不同,同源
https://store.company.com/secure.html   // 协议不同,不是同源
http://store.company.com:81/dir/etc.html   // 端口不同,不是同源
http://news.company.com/dir/other.html    // 域名不同,不是同源

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

proxyTable: {
  '/apis': {
    // 测试环境
    target: 'http://www.thenewstep.cn/',  // 接口域名
    changeOrigin: true,  //是否跨域
    pathRewrite: {
        '^/apis': ''   //需要rewrite重写的,
    }              
  }

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false

Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上

// 设置axios请求的token
axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"

this.$axios.post('/apis/test/testToken.php',data).then(res=>{
        console.log(res)
})

Access-Control-Allow-Credentials: true  
// 表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以。
Access-Control-Allow-Headers: Content-Type, X-REST-CORS, X-Auth-Token,data,ak,sign,time,token
// 在正式请求中可以使用的请求头，如果请求头中使用了没有在表中的请求头就会报错
Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS
// 规定了所要访问的资源允许使用的方法。如果使用了不在列表的请求方式会报错
Access-Control-Allow-Origin: *
// 规定了资源可以被请求的域，“*”表示所有域都可以访问，但要符合上面的其他规定
Access-Control-Max-Age: 86400
// 规定了这个资源预请求的缓存时间，在时间内再次发起请求不会发预请求，会直接发正式请求拿到数据。

1 + '1' // '11'
true + true // 2
4 + [1,2,3] // "41,2,3"

'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"
console.log('a' + - 'b')  // aNaN

4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN

5 > '4' // true
// 等同于 5 > Number('4')
// 即 5 > 4

true > false // true
// 等同于 Number(true) > Number(false)
// 即 1 > 0

2 > true // true
// 等同于 2 > Number(true)
// 即 2 > 1

1 > NaN // false
1 <= NaN // false
'1' > NaN // false
'1' <= NaN // false
NaN > NaN // false
NaN <= NaN // false

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  }
}
a > -1 // true

let a = {
  valueOf() {
    return {}
  },
  toString() {
    return {}
  }
}
a > -1  // TypeError

let a = {}
a > 1 // false

let a = {}
a + 1  // [object Object]1

1 === 0x1 // true
true === "true" // false
NaN === NaN  // false
+0 === -0 // true

{} === {} // false
[] === [] // false
(function () {} === function () {}) // false

var v1 = {};
var v2 = v1;
v1 === v2 // true

var obj1 = {};
var obj2 = {};

obj1 > obj2  // false
obj1 < obj2  // false
obj1 === obj2  // false

var v1;
var v2;
v1 === v2  // true

1 == NaN // false
'1' == NaN // false
NaN == NaN // false
[] == NaN // false
{} == NaN // false

false == null // false
false == undefined // false

0 == null // false
0 == undefined // false

undefined == null // true

1 == true // true
// 等同于 1 === Number(true)

0 == false // true
// 等同于 0 === Number(false)

2 == true // false
// 等同于 2 === Number(true)

2 == false // false
// 等同于 2 === Number(false)

'true' == true // false
// 等同于 Number('true') === Number(true)
// 等同于 NaN === 1

'' == 0 // true
// 等同于 Number('') === 0
// 等同于 0 === 0

'' == false  // true
// 等同于 Number('') === Number(false)
// 等同于 0 === 0

'1' == true  // true
// 等同于 Number('1') === Number(true)
// 等同于 1 === 1

'\n  123  \t' == 123 // true
// 因为字符串转为数字时，省略前置和后置的空格

// 对象与数值比较时，对象转为数值
[1] == 1 // true
// 等同于 Number([1]) == 1

// 对象与字符串比较时，对象转为字符串
[1] == '1' // true
// 等同于 String([1]) == '1'
[1, 2] == '1,2' // true
// 等同于 String([1, 2]) == '1,2'

// 对象与布尔值比较时，两边都转为数值
[1] == true // true
// 等同于 Number([1]) == Number(true)
[2] == true // false
// 等同于 Number([2]) == Number(true)

最后来几个题看一下
[] == ![]
// 首先 [] 为对象，则调用 ToPrimitive 函数将其转化为字符串 ""；
// 对于右侧的 ![]，首先会进行显式类型转换，将其转化为 false。
// 然后在比较运算中，会将运算符两侧的运算对象都转化为数值类型，即都转化为了 0，因此最终的比较结果为 true。

['0'] == false   ？？
[null] == false  ？？
[] + {}   ？？
1 + {a:1}  ？？

    var symbolObject = (function(){ return this; }).call(Symbol("a"));

    console.log(typeof symbolObject); // object
    console.log(symbolObject instanceof Symbol); // true
    console.log(symbolObject.constructor   Symbol); // true

    var symbolObject = Object((Symbol("a"));

    console.log(typeof symbolObject); // object
    console.log(symbolObject instanceof Symbol); // true
    console.log(symbolObject.constructor   Symbol); // true

    var symbolObject = Object((Symbol("a"));

    console.log(Object.prototype.toString.call(symbolObject)); //[object Symbol]

[Symbol.toPrimitive](hint)

    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }

    o * 2
    // valueOf
    // toString
    // Uncaught TypeError: Cannot convert object to primitive value

    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }

    o + ""
    // toString
    // valueOf
    // Uncaught TypeError: Cannot convert object to primitive value

     const b = {
        [Symbol.toPrimitive](hint) {
          console.log(`hint: ${hint}`)
          return {}
        },
        toString() {
          console.log('toString')
          return 1
        },
        valueOf() {
          console.log('valueOf')
          return 2
        }
      }

      alert(b) // hint: string
      b + '' // hint: default
      b + 500 // hint: default
      ;+b // hint: number
      b * 1 // hint: number

    var o = {
        valueOf : () => {console.log("valueOf"); return {}},
        toString : () => {console.log("toString"); return {}}
    }

    o[Symbol.toPrimitive] = () => {console.log("toPrimitive"); return "hello"}


    console.log(o + "")
    // toPrimitive
    // hello

// 随便写几个例子
var o = { [Symbol.toStringTag]: 'MyObject' }
console.log(o + '');   // [object MyObject]
// + '' hint 为 string  调用 toString 方法, [Symbol.toStringTag] 改变了 [Object Object]

console.log( o * 2 )   // NaN
//  hint 为 number, 调用 valueOf 方法, 返回对象本身, 再调用 toString方法. 返回字符串'[object MyObject ]'
// '[object MyObject ]' 转 Number 为 NaN, NaN * 2  还是 NaN

let fn = function test(params) {
 return 1
}
let object = {}
let arr = [
 123,
 123,
 'string',
 'string',
 true,
 true,
 undefined,
 undefined,
 null,
 null,
 object,
 object,
 NaN,
 NaN,
 {},
 {},
 fn,
 fn
]

// 1. es6 set
console.log([...new Set(arr)])
// [123, "string", true, undefined, null, {…}, NaN, {…}, {…}, ƒ(test)]
// Set是ES6里一种新的数据结构。它类似于数组，但是成员的值都是唯一的，没有重复的值。
// 扩展运算符（...）能将一个数组转为用逗号分隔的参数序列。
// 扩展运算符（...）内部使用for...of循环，所以自定义对象是不能使用 （...），当然手动添加迭代器之后可以使用。
// 在Set里，同一引用对象是相等的，不同引用的对象不相等。

或者用Array.from
console.log(Array.from(new Set(arr)))
// Array.from 可以把类数组转成数组
// 类数组和数组都有length属性和非负整数下标，不同的是类数组没有数组方法。

[...new Set('ababbc')].join('')
// "abc"
// 上面的方法也可以用于，去除字符串里面的重复字符。

// 2. 暴力双层循环
function unique(array) {
 // res用来存储结果
 var res = []
 for (var i = 0; i < array.length; i++) {
   for (var j = 0; j < res.length; j++) {
     if (array[i] === res[j]) {
       break
     }
   }

   if (j === res.length) {
     res.push(array[i])
   }
 }
 return res
}
//  [123, "string", true, undefined, null, {…}, NaN, NaN, {…}, {…}, ƒ(test)]
// 因为是用 === 判断的,所以NaN不会去重。对象同一引用会去重，不同引用不去重。

3. indexOf
function unique(array) {
  var res = []
  for (var i = 0, len = array.length; i < len; i++) {
    var current = array[i]
    if (res.indexOf(current) === -1) {
      res.push(current)
    }
  }
  return res
}
// [123, "string", true, undefined, null, {…}, NaN, NaN, {…}, {…}, ƒ(test)]
// 结果和 === 一样

// 利用filter的特性返回一个符合条件的数组
function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}
//  [123, "string", true, undefined, null, {…}, {…}, {…}, ƒ(test)]

// 4. 利用Object键值对
function unique(array) {
  var obj = {};
  return array.filter(function(item, index, array){
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
//[ 123, "string", true, undefined, null, {…}, NaN, ƒ(test)]

// 这个会去重所有。包括不是同一引用但是表现相同的对象。

// filter 会返回符合表达式的数组，创建一个空对象obj。如果obj 没有自身属性 typeof item + item,那把typeof item + item添加为obj 的 [key],[value]为true,并且为真返回到filter的数组里。
//下一个,如果有[key]为typeof item + item,说明有重复的,返回false并且不返回到filter的数组。

let object1 = {
  a: 1,
  obj: {
    b: 'string'
  }
}

// 最简单的浅拷贝
let object2 = object1;  // 两个对象指向一个引用地址，改一个另一个也会改变

let object2 = Object.assign({}, object1)
object1.a = 666
object1.obj.b = 'newString'
console.log( object2.a )  // 1
console.log( object1.a )  // 666
console.log( object2.obj.b )  // 'newString'

function Parent() {
	this.name = 'parent'
	this.a = 1
}

function Child() {
	this.name = 'child'
	this.b = 2
}

Child.prototype = new Parent()

let child1 = new Child()
console.log(child1.a, child1.name); // 1 "child"

console.log(Parent.prototype); 
console.log(Child.prototype); 

Object.defineProperty(child1, 'name', {writable: false, value: 'ARRON'})
// 更改child1的描述符writable为false
let child2 = Object.assign({}, child1)

console.log(Object.getOwnPropertyDescriptor(child2, 'name'));
// Object{value: "ARRON", writable: true, enumerable: true, configurable: true}
// 这里描述符的可赋值writable已经变成true

child1.name = 'newName'; // 严格模式下报错，普通模式下无效
child2.name = 'newName'; // 可以赋值
console.log( child1.name ); //  ARRON
console.log( child2.name ); // newName

// 查看 child1 和 child2 的原型，我们也会发现它们的原型也是不同的
console.log(child1.__proto__);  // Parent
console.log(child2.__proto__);  // Object

var object2 = Object.assign({}, object1);

function shallowCopyOwnProperties(source) {
  var target = {}
  var keys = Object.getOwnPropertyNames(original)
  for (var i = 0; i < keys.length; i++) {
    target[keys[i]] = source[keys[i]]
  }
  return target
}

function shallowCopy(source) {
  // 用 source 的原型创建一个对象
  var target = Object.create(Object.getPrototypeOf(source))
  // 获取对象的所有属性
  var keys = Object.getOwnPropertyNames(source)
  // 循环拷贝对象的所有属性
  for (var i = 0; i < keys.length; i++) {
    // 用原属性的描述符创建新的属性
    Object.defineProperty(target, keys[i], Object.getOwnPropertyDescriptor(source, keys[i]))
  }
  return target
}

var array = [1, 'string', {a: 1,b: 2, obj: {c: 3}}];
// 直接复制
var array1 = array;
// 遍历直接复制
var array2 = [];
for(var key in array) {
  array2[key] = array[key];
}
// 改变原数组元素
array[1] = 'newString';
array[2].c = 4;

console.log(array1[1]); // newString
console.log(array1[2].c); // 4
console.log(array2[1]); // string
console.log(array2[2].c); // 4

var array = [1, 'string', {a: 1,b: 2, obj: {c: 3}}];
// slice()
var array1 = array.slice();
// concat()
var array2 = array.concat();
// 改变原数组元素
array[1] = 'newString';
array[2].c = 4;

console.log(array1[1]); // string
console.log(array1[2].c); // 4
console.log(array2[1]); // string
console.log(array2[2].c); // 4

var obj = { a: 1, b: { c: 2 }};
// 深拷贝
var newObj = JSON.parse(JSON.stringify(obj));
// 改变原对象的属性
obj.b.c = 20;

console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }

let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)  // 循环引用会报错

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

var obj = {a: 1, b: {
    c: b
}}
// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
(async () => {
  const clone = await structuralClone(obj)
})()