前端的一些随笔总结

js 数据类型

7种原始数据类型： String, Number, Boolean, Null, Underfined, BigInt, Symbol
1种引用类型： Object
原始类型的值本身不可变

symbol类型：es5的对象属性名是字符串，容易造成属性名的冲突，如果有一种机制，保证每个属性的名字都是独一无二的，就可以从根本上防止属性名的冲突。所以在es6引入symbol
Number类型：最大可表示 2^53 - 1（9007199254740991），可通过Number.MAX_SAFE_INTEGER获得。
BigInt: 可操作超出Number.MAX_SAFE_INTEGER的整数值，以n结尾，不可与Number类型进行计算。

12种内置类型（ECMAScript3）
判断一个原生对象属于哪种内置类型：
Object.prototype.toString.call(somevalue)
—>：" [object [[Class]] ]"

[[Class]] 即内置类型，一个字符串值。
ES3中, [[Class]] 值一共有12个： Array, Object, String, Boolean, Number, Date, Error, Math, RegExg, Funtion, Null, Underfiend
eg：
Object.prototype.toString.call([])
—>：‘[object Array]’
Object.prototype.toString.call(new Date())
—>：‘[object Date]’
Object.prototype.toString.call(new Error())
—>：‘[object Error]’
Object.prototype.toString.call(1)
—>：‘[object Number]’
Object.prototype.toString.call(‘’)
—>：‘[object String]’

浅拷贝和深拷贝的区别

浅拷贝即传址，传递指针地址，指向原来的值，对指针操作时，是对原来的值直接操作，所以对原来的值有影响。

深拷贝 传值，即复制一个副本，重新分配内存空间，操作这个副本对原来的值无影响。

js中，对象和数组的赋值或作为函数参数传参均为浅拷贝；基础类型的赋值或函数传参为深拷贝。

// 浅拷贝示例1,数组作为函数参数：

const f2 = (arr) => { arr[0]=0}

const arr1 = ['2']

f2(arr1) // -> [‘0’]
// 浅拷贝示例2，数组赋值：const a = ['a']

const a2 = a

a2[0] = 'a2'a // -> ‘a2’

// 浅拷贝示例3，对象赋值,对象作为函数参数：

const o = { name : 'o' }

const lili = o

lili.name = 'lili'

o // {name: 'lili'}

const f3 = (o)=>{ o.name = 'f3' }

f3(o)o // {name: ’f3’}



// 深拷贝示例，基础类型赋值：const a = 1

let c = a

c = 3

a // -> 1

c // -> 3



// 深拷贝示例，基础类型作为函数参数：

const f4 = (v)=>{ v = 'f4' }

f4(c)

c // -> 3

判断属性所有权

hasOwnProperty 判断该属性是否直接属于某个对象（自身属性），而不是通过原型链继承的

示例：

const object1 = {};

object1.property1 = 42;

object1.hasOwnProperty('property1') // true

object1.hasOwnProperty('toString') // false

in 运算符，如果指定的属性在指定的对象或其原型链中，则 in 运算符返回 true。

示例：

'property1' in object1 // true

'toString' in object1 //true

call 的使用场景

对于原型链的属性名，javascript并没有保护，如果一个对象定义了与原型链同样的属性名时，则需要使用原型链上真正的属性，才不会出错。

示例：

var foo = {

  hasOwnProperty: function() {

    return false;

  },

  bar: 'Here be dragons'

};



foo.hasOwnProperty('bar'); // 始终返回 false



// 如果担心这种情况，

// 可以直接使用原型链上真正的 hasOwnProperty 方法

({}).hasOwnProperty.call(foo, 'bar'); // true



// 也可以使用 Object 原型上的 hasOwnProperty 属性

Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

// 注意，只有在最后一种情况下，才不会新建任何对象。

对于前端项目，你是如何设计与构建的呢？从项目结构组成：比如入口页设计、公共样式、公共方法、组件、路由(动态路由)

统一代码风格： eslint

解决与后端对接难题：mock