关于javascript:JavaScriptJS的坚实基础

6次阅读

共计 6742 个字符，预计需要花费 17 分钟才能阅读完成。

思考到在前面的开发中，须要大量的应用 js 语言去进行开发，所以筹备从新规整一下 javascript 的知识点，专门开了一个 js 的专栏，用来温习一下 js 语言。万事开头难，要是前面写的有问题的，欢送大家在下方有情抽脸！！！

在 JavaScript 中大体存在 2 大类数据类型，值类型 与援用类型;

值类型：String、Number、Boolean、Null、Undefined以及Symbol

值类型是按值存储，数据存储在内存栈中，

Number，String，Boolean,Symbol都对应了一个包装对象，例如：new Number(5)
这也是能用原始数据类型调用办法的原理：

eg：('happy').toString()，’happy’ 是一个根本数据类型，自身没有 toString 的这个办法，所以通过调用 ToObject [spec]将值转换为对象，而后去它的包装对象 new String(‘happy’)中调用，调用实现后包装对象就会隐没，下次须要就会从新创立。
援用类型： Object、Array、Function

援用类型按援用存储的，存储的不是值，而是一个地址，数据存储在内存堆中

typeof 次要用于原始类型的检测

typeof 'seymoe'     // 'string'
typeof true         // 'boolean'
typeof 10           // 'number'
typeof Symbol()     // 'symbol'
typeof null         // 'object' 无奈断定是否为 null
typeof undefined    // 'undefined'
typeof {}           // 'object'
typeof []           // 'object'
typeof(() => {})    // 'function'

instanceof 次要用于检测自定义对象

// 测试构造函数的 prototype 是否在被检测对象 obj 的原型链下面
// obj instanceof 构造函数的 prototype
[] instanceof Array// true
({}) instanceof Object// true
(()=>{}) instanceof Function// true

Object.prototype.toString.call数据类型判断的终极办法

该办法实质就是依靠 Object.prototype.toString() 办法失去对象外部属性 [[Class]]
传入原始类型却可能断定出后果是因为对值进行了包装
null 和 undefined 可能输入后果是外部实现有做解决

// Object.prototype.toString.call(obj)
Object.prototype.toString.call({})              // '[object Object]'
Object.prototype.toString.call([])              // '[object Array]'
Object.prototype.toString.call(() => {})        // '[object Function]'
Object.prototype.toString.call('seymoe')        // '[object String]'
Object.prototype.toString.call(1)               // '[object Number]'
Object.prototype.toString.call(true)            // '[object Boolean]'
Object.prototype.toString.call(Symbol())        // '[object Symbol]'
Object.prototype.toString.call(null)            // '[object Null]'
Object.prototype.toString.call(undefined)       // '[object Undefined]'
Object.prototype.toString.call(new Date())      // '[object Date]'
Object.prototype.toString.call(new Math())      // '[object Math]'
Object.prototype.toString.call(new Set())       // '[object Set]'
Object.prototype.toString.call(new WeakSet())   // '[object WeakSet]'
Object.prototype.toString.call(new Map())       // '[object Map]'
Object.prototype.toString.call(new WeakMap())   // '[object WeakMap]'

最开始应用 javascript 的时候 var 耍的那叫一个炉火纯青，等 es6 进去后提供的 let 和const关键字一开始感觉没有 var 好用，等理论用过后才发现真香！！！(≖ᴗ≖)✧根本当初 var 曾经给淘汰了。

var：全局作用域（函数内），申明存在变量晋升，好用是好用，好受也好受！

执行 javascript 代码时会分为俩个阶段，预编译阶段 和运行时阶段，

其中在预编译阶段时候会进行变量申明晋升，意思就是会将 var 定义的变量申明放到代码顶部，变量赋值则是在代码运行时阶段进行，能够通过上面的实例来了解一下 JS 执行时的变量晋升。
```
console.log(a);
var a = 0;

// 等价于
var a = undefined;
console.log(a);
a = 0;
```
当然，除了变量晋升外，函数晋升也是一样的，大家感兴趣的能够本人试一下。
```
function fun() {}  //  这种申明写法会导致函数晋升，所以不管申明在什么地位，都能够调用它，且它自身不会执行

var foo = function(){}  //  这种写法会导致变量晋升，然而不会导致函数晋升，这时候就必须先申明再调用
```

let：块级作用域，能够看成 {} 造成一个块级作用域

首先 let 申明变量不会进行变量晋升，也就是说如果想要应用 let 申明的变量，必须在应用之前申明该变量；

在 for 循环中能够通过 let 来给每一次循环时的变量调配各自作用域，从而互不影响。
```
// 不存在变量晋升
console.log(a);  // a is not defined.
let a = 1;

// 块级作用域
let b = 1; 
{console.log(b) // 1 作用域内能够拜访作用域外申明的变量
   let c = 1;
}
console.log(c) // c is not defined. 作用域外拜访不到作用域内申明的变量
```

const：块级作用域

和 let 关键字一样会造成块级作用域，然而 const 通常用来申明一个常量！

对于 栈存储类型 数据来说，通过 const 申明赋值之后便不可更改；

对于 堆存储类型 数据来说，通过 const 申明赋值之后堆援用地址不可更改，然而能够更改堆地址对应的数据（比方对象的属性，数组的选项等！）

str.split('-')   // 按 - 宰割字符串返回一个数组
str.substr(startIndex , count)    // 返回截取的新字符串 
str.substring(startIndex , endIndex)     // 返回新字符串（包含 startIndex 不包含 endIndex）str.slice(startIndex , endIndex)     // 返回新字符串（包含 startIndex 不包含 endIndex）str.repalce(旧字符串 , 新字符串)     // 替换字符串
str.toLowerCase()     // 转小写
str.toUpperCase()     // 转大写
str.trim()     // 去除两端空格
str.charAt (index)     // 返回 index 地位的字符
str.concat (str1 , str2 , ...)   // 返回拼接后的新字符串
str.indexOf (str1 , startIndex)    // 返回 str1 的地位索引，没有返回 -1
str.lastIndexOf (str1)   // 从后向前找返回 str1 的地位索引，没有返回 -1

Math.abs(x)   // 返回 x 的绝对值。Math.ceil(x)   // 返回 x，向上舍入为最靠近的整数。Math.floor(x)   // 返回 x，向下舍入为最靠近的整数。Math.max(x, y, z, ..., n)   // 返回值最大的数字。Math.min(x, y, z, ..., n)      // 返回值最小的数字。Math.pow(x, y)   // 返回 x 的 y 次幂值。Math.random()   // 返回 0 到 1 之间的随机数。Math.round(x)   // 将 x 舍入为最靠近的整数。Math.trunc(x)   // 返回数字 (x) 的整数局部。

// splice 会扭转原始数组
array.splice(startIndex , deleteCount , item1,item2, ...)  // 个别用于删除元素（也可替换 (插入) 元素）// slice 返回一个新数组
array.slice(?startIndex , ?endIndex)  // 截取的数组值放入一个新的数组中（不包含 endIndex 地位的元素）// includes:ES7 中的，判断该数组中是否蕴含指定的值
array.includes(elem,[startIndex]) 
// 和 indexOf 的区别是 includes 能够发现 NaN，而 indexOf 不能
[NaN].includes(NaN) // true
[NaN].indexOf(NaN) // -1

array.concat(array1 , array2 , ...)  // 组合返回新数组
array.push(item)  // 插入数组最初地位，返回数组新的长度
array.pop()  // 删除数组最初一个元素，返回删除的这个元素值
array.shift()  // 删除数组的第一个元素，返回删除的这个元素值
array.unshift(item)  // 在数组第一个元素之前插入新元素，返回新数组的长度
array.join('-')  // 以 - 将数组每一项拼成一个字符串，返回拼凑好的字符串
// array.join()  array.toString()
array.reverse()  // 反转数组并返回
array.sort(function(a, b) {return a-b;})  // 排序(升序)

// 循环遍历
array.forEach(function(value){})
array.forEach(function(value,index,newArray){})

// Map 遍历数组的每一项，把执行后的后果全副插入一个新的数组中并返回
array.map(function(value){return value*2;})  

// Filter 返回符合条件的值组成的新数组
array.filter(function(value){return value>3;})

// Every 返回 true/false（只有数组每一项都符合条件才会返回 true）【确定了后果就会进行遍历】array.every(function(value){return value>0;})

// Some 返回 true/false（只有数组中有一项满足条件就会返回 true）【确定了后果就会进行遍历】array.some(function(value){return value>0;})

// indexOf()返回查找元素从前往后的第一个元素地位索引
var index = ['tang','fu','qiang','fu'].indexOf('fu'); // index 为 1；// lastIndexOf()返回查找元素从后往前的第一个元素地位索引
var lastIndex = ['tang','fu','qiang','fu'].lastIndexOf('fu'); // lastIndex 为 3

// Array.from 办法将俩类对象转化为真正的数组。// 相似于数组的对象 和 可遍历 (Iterable) 的对象(包含 ES6 中的数据结构 Set 和 Map)
Array.from(new FormData(from))

Object.keys(obj)  // 办法会返回由一个给定对象的本身【可枚举属性】组成的数组
    var arr = ['a', 'b', 'c'];
  console.log(Object.keys(arr));       --- ['0', '1', '2']

  var obj = {0: 'a', 1: 'b', 2: 'c'};
  console.log(Object.keys(obj));  // console: ['0', '1', '2']

    var anObj = {100: 'a', 2: 'b', 7: 'c'};
    console.log(Object.keys(anObj));  // console: ['2', '7', '100']

Object.assign()  // 办法用于将所有可枚举属性的值从一个或多个源对象复制到指标对象。它将返回指标对象。eg: Object.assign(target, ...sources)

Object.getPrototypeOf(obj)  // 返回指定对象的原型（外部 [[Prototype]] 属性的值）obj.hasOwnProperty(prop)  // 返回一个布尔值，批示对象本身属性中是否具备指定的属性。Object.create(创建对象的原型 , {对象本身可枚举属性(可选)} ) // eg: Object.create(Array.prototype)
Object.defineProperty(Obj, prop, descriptor) // 返回被批改的对象
  descriptor：value：默认 undefined，该属性对应的值，能够是任何无限的 JavaScript 值，(函数、数字、对象等)
            writable：默认 false，设置为 true 时 value 才可能被赋值运算符扭转
          configurable：默认为 false 不可批改，设置为 true 能够批改，也能删除该属性
      enumerable：默认为 false, 设置为 true 该属性才可能呈现在对象的枚举属性中
            
// 循环遍历：// for in: 遍历时候不仅能读取对象本身的成员属性，还能够读取原型链上对象的原型属性，所以能够应用 hasOwnProperty 判断一个属性是不是本身上的属性, 返回 true 示意这个属性是对象的成员属性，不是原型属性
for(key in obj){if(obj.hasOwnProperty(key)){object[key] = 1;
  }   
}

// for of: 遍历所有数据机构的对立办法
// 一个数据结构只有部署了 Symbol.iterator 属性，就被视为具备 iterator 接口，就能够用 for...of 来遍历它的成员, 也就是说,for...of 循环外部调用的是数据结构的 Symbol.iterator 办法

const myDate = new Date([params]); // params 可取值(月份 0~11)：空  2019,9,20  '2019/9/20' '2019-9-20'  '2019-9-20 17:27:30'  

myDate.getYear();                           // 获取以后年份(2 位)
myDate.getFullYear();                       // 获取残缺的年份(4 位,1970-????)
myDate.getMonth();                          // 获取以后月份(0-11,0 代表 1 月)
myDate.getDate();                           // 获取以后日(1-31)
myDate.getDay();                            // 获取以后星期 X(0-6,0 代表星期天)
myDate.getTime();                           // 获取以后工夫(从 1970.1.1 开始的毫秒数)
myDate.getHours();                          // 获取以后小时数(0-23)
myDate.getMinutes();                        // 获取以后分钟数(0-59)
myDate.getSeconds();                        // 获取以后秒数(0-59)
myDate.getMilliseconds();                   // 获取以后毫秒数(0-999)
myDate.toLocaleDateString();                // 获取以后日期
myDate.toLocaleTimeString();                // 获取以后工夫
myDate.toLocaleString( );                   // 获取日期与工夫

以上就是总结的 javascript 根底中一部分了，对于 javascript 根底还有很多内容，这边就不再具体介绍了，下一篇讲一下 JS 的事件循环（Event Loop）, 感兴趣的小伙伴能够关注一下，想要理解哪些内容也能够下方评论留言，以上内容如有谬误也能够留言告知自己。ヽ(~▽~)ﾉ

正文完