ECMAScript：javascript笔记

#七种数据类型

 

undefined、null、Boolean、String、Number、Object、Symbol

 

#Global全局对象

 

encodeURIComponent(uri_str)-----可把字符串作为 URI 组件进行编码。

decodeURIComponent(uri_str)-----encodeURIComponent() 函数编码的 URI 进行解码。

 

 

eval(string)-----函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

 

 

#Boolean对象

 

Boolean(null)-----返回false

Boolean(undefined)-----返回false

Boolean(0)-----返回false

Boolean(false)-----返回false

Boolean("")-----返回false

Boolean(true)-----返回true

Boolean(1)-----返回true

 

 

 

#Number对象

 

Number.MAX_VALUE-----是 JavaScript 中可表示的最大的数,它的近似值为 1.7976931348623157 x 10308。

Number.MIN_VALUE-----是 JavaScript 中可表示的最小的数（接近 0 ，但不是负数）。它的近似值为 5 x 10-324。

Number.NEGATIVE_INFINITY-----表示负无穷大。

Number.POSITIVE_INFINITY-----属性值代表正无穷大。

NaN-----非数字值

number.toFixed(x)-----可把 Number 四舍五入为指定小数位数的数字。=toFixed()=

 

 

 

#String对象

 

str.charAt(index)-----方法可返回指定位置的字符。

string.charCodeAt(index)-----方法可返回指定位置的字符的 Unicode 编码。

string.concat(string1, string2, ..., stringX)-----方法用于连接两个或多个字符串。返回新值 

String.fromCharCode(n1, n2, ..., nX)-----把 Unicode 值转成字符，然后返回一个字符串。

string.indexOf(searchvalue,start)-----返回某个指定的字符串值在字符串中首次出现的位置。

string.lastIndexOf(searchvalue,start)-----返回一个指定的字符串值最后出现的位置。

string.match(regexp)-----在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回数组

str.replace(regexp|substr, newSubStr|function) ----- 替换 

string.search(searchvalue)-----检索字符串中指定的子字符串，searchvalue可以是正则或字符串，返回索引值。

string.slice(start,end)-----截取某个部分，返回被提取的部分，参数为下标。

string.split(separator,limit)-----分割字符串为数组，返回数组。

string.substr(start,length)-----截取某个部分，返回被提取的部分,第一个参数是下标，第二个参数是位数。

string.substring(from, to)-----截取某个部分，返回被提取的部分，参数为下标不支持负数参数。

str.toUpperCase() ----- 把字符串转换为大写。

str.toLowerCase() ----- 把字符串转换为小写。

str.trim()-----去除字符串两边的空白。

codePointAt()-----es6,返回十进制码点。

 

 

 

 

#Array对象

 

=伪数组转为真数组

var arr = Array.prototype.slice.call(element);

let arr = Array.of(1,2,3,4,5,6)----------将一组值，转换为数组
let arr = Array.from(obj)----------用于将两类对象转为真正的数组:类似数组的对象,和可遍历的对象

for...of... ------ 数组遍历
array.forEach(fn(currentValue, index, arr), thisValue)-----遍历数组

Array.isArray(obj)-----判断是否是数组

arr.sort((a, b) => a - b)-----数组排序。

arr.concat(a2,a3,...aX)-----连接两个或多个数组，返回一个新的数组。

array.every(fn(currentValue,index,arr), thisValue)-----检测数组所有元素是否都符合指定条件,返回boolean。

array.filter(fn(currentValue,index,arr), thisValue)-----检查指定数组中符合条件的所有元素,返回新数组。

array.find(fn(currentValue, index, arr),thisValue)-----es6,返回符合条件的数组第一个元素。

array.findIndex(fn(currentValue, index, arr), thisValue)-----es6,返回符合条件的数组第一个元素位置的索引。

array.fill(value, start, end)-----es6,将一个固定值替换数组的元素。

arr.includes(searchElement, fromIndex)-----es6,判断一个数组是否包含一个指定的值,返回boolean。

array.indexOf(item,start)-----返回某个指定的字符串值在字符串中首次出现的位置。

arr.join([separator])------用于把数组中的所有元素转换一个字符串，元素是通过指定的分隔符进行分隔的。

array.lastIndexOf(item,start)-----返回一个指定的字符串值最后出现的位置，存在第二个参数向前查找。

array.map(fn(currentValue,index,arr), thisValue)-----创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

array.pop()-----删除数组的最后一个元素并返回删除的元素。

arr.push(element1, ..., elementN)-----将一个或多个元素添加到数组的末尾，并返回新数组的长度。

arr.reverse()-----反转数组的元素顺序。

arr.shift()-----删除并返回数组的第一个元素。

array.slice(start, end)-----截取数组的某一部分，返回新数组。

array.splice(index,howmany,item1,.....,itemX)-----用于插入、删除或替换数组的元素。

array.unshift(item1,item2, ..., itemX)-----可向数组的开头添加一个或更多元素，并返回新的长度。

 

 

 

#Date对象

 

var now = new Date();-----创建当前时间

Date.now()-----返回当前时间的毫秒数
+new Date()-----返回当前时间的毫秒数(兼容写法)

Date.toLocaleString()-----根据本地时间把 Date 对象转换为字符串，并返回结果。
Date.toLocaleDateString()------根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果。

Date.getTime()-----可返回距 1970 年 1 月 1 日之间的毫秒数。

Date.getFullYear() 年-----返回一个表示年份的 4 位数字。

Date.getMonth() 月-----可返回表示月份的数字。返回值是 0（一月） 到 11（十二月） 之间的一个整数。

Date.getDay() 周-----可返回一周（0~6）的某一天的数字。

Date.getDate() 日-----可返回月份的某一天。

Date.getHours() 时-----可返回时间的小时字段。

Date.getMinutes() 分-----可返回时间的分钟字段。

Date.getSeconds() 秒-----可返回时间的秒。返回值是 0 ~ 59 之间的一个整数。

Date.getMilliseconds()-----可返回时间的毫秒。

Date.parse(datestring)-----可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。
 

 

 

#Math对象

 

=随机数公式

const randomInRange = (min, max) => Math.random() * (max - min) + min;  

Math.random()-----可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。

Math.round(x)-----可把一个数字四舍五入。

Math.pow(x,y)-----返回 x 的 y 次幂。

Math.ceil(x)-----可对一个数进行上舍入,取整。

Math.floor(x)-----可对一个数进行向下取整。

Math.max(n1,n2,n3,...,nX)-----可返回两个指定的数中带有较大的值的那个数。

Math.min(n1,n2,n3,...,nX)-----可返回指定的数字中带有最小值的数字。

Math.sqrt(x)-----可返回一个数的平方根。

Math.tan(x)-----可返回一个表示某个角的正切的数字。

Math.sin(x)-----参数 x 的正弦值，返回值在 -1.0 到 1.0 之间。

Math.log(x)-----可返回一个数的自然对数(基于E)。

Math.exp(x)-----可返回 e 的 x 次幂的值。 E 为自然底数 (近似值 2.7183)。

Math.cos(x)-----可返回一个数字的余弦值，返回的是 -1.0 到 1.0 之间的数。

Math.abs(x)-----可返回一个数的绝对值。

Math.acos(x)-----返回一个数的反余弦。返回的值是 0 到 PI 之间的弧度值。

Math.asin(x)-----返回-PI/2 到 PI/2 之间的弧度值。

Math.atan(x)-----以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

Math.atan2(y,x)-----可返回数字的反正切值。

 

#RegExp对象

 

reg.exec(str)-----检索字符串中指定的值。返回找到的值，并确定其位置。

g -----匹配全部
i ----- 忽略大小写

^ ----- 表示以xx开头
$ -----表示以xx结尾
* -----表示匹配0个或者多个
+-----表示匹配1个或多个
?-----表示匹配0个或者1个
[ ]-----表示一个字符的集合

\s -----表示空格
\S-----表示不是空格字符，等价于[^\f\n\r\t\v]

\w-----表示字母或数字等价于[a-zA-Z0-9]
\W-----表示不是字母或不是数字，等价于[^A-Za-z0-9_]

\d-----表示数字，等价于[0-9]
\D----表示不是数字。等价于[^0-9]

(?:x)-----不被捕获

 

 

 

#Symbol对象

 

Object.getOwnPropertySymbols(obj)----------返回一个给定对象自身的所有 Symbol 属性的数组
Reflect.ownKeys(obj)----------返回目标对象的自身属性键的数组。

 

 

 

 

#Promise对象

 

 

 

Promise.all([])-----加载完成在执行
Promise.race([])-----谁先加载完谁执行

 

 

 

 

 

#Proxy对象

#Reflect对象

 

 

#Set&Map数据结构

 

 

=set

mySet.add(value)---------添加某个值，返回 Set 结构本身

mySet.delete(value)---------删除某个值，返回一个布尔值，表示删除是否成功。

mySet.has(value)----------返回一个布尔值，表示该值是否为Set的成员。

mySet.clear()----------清除所有成员，没有返回值。

Set.prototype.constructor----------构造函数，默认就是Set函数。

Set.prototype.size----------返回Set实例的成员总数。

for (let [key,value] of mySet.entries()){}----------返回键值对的遍历器

mySet.forEach(data=>{})----------遍历mySet


WeakSet只支持对象
let ws = new WeakSet()

 

 

 

 

 

=map

 

 

myMap.set(key, value)--------设置键名key对应的键值为value，然后返回整个 Map 结构。

如果key已经有值，则键值会被更新，否则就新生成该键

myMap.get(key)----------读取key对应的键值，如果找不到key，返回undefined。

myMap.has(key)----------返回一个布尔值，表示该值是否为Map的成员

myMap.clear()----------清除所有成员，没有返回值。

myMap.delete(key)----------删除某个值，返回一个布尔值，表示删除是否成功。

Map.prototype.size----------返回Map实例的成员总数。

for (let [key,value] of myMap.entries()){}----------返回键值对的遍历器

myMap.forEach(data=>{})----------遍历myMap


WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。

let wm = new WeakMap()

 

 

 

 

#Function

 

 

arguments-----保存参数的伪数组

length-----长度

callee-----用处，调用自身，比如递归

var fn=(function(n){
  if(n>0){
    return n+arguments.callee(n-1);
  }
  return 0;
})(10);

constructor-----构造函数

prototype-----原型

 

 

 

=apply

 

fun.apply(thisArg, [argsArray])

function getMax(arr){ return Math.max.apply(null,arr)};/*得到最大值*/
function getMin(arr){ return Math.min.apply(null,arr)};/*得到最小值*/

合并数组

var arr1 = new Array('1', '2', '3');
var arr2 = new Array('4', '5', '6');

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); //["1", "2", "3", "4", "5", "6"]

 

apply和call的区别传参不一样，apply第二个参数是数组，call第二个后面都是离散值传参。

 

 

 

=call

 

 

fun.call(thisArg, arg1, arg2, ...)-----1.借用方法,call会修改this指向自身；2.将伪数组改成真数组。

 

function add(a, b) {return a + b;}
function reduce(a, b) {return a * b;}
add.call(reduce, 10, 20)//30

 

=递归

一个方法自己调用自己，用上一次调用得出的结果作为这次的参数

var factorial = (function f(num) {
    return typeof num === "number" ? num <= 1 ? 1 : num + f(num - 1) : "please a number"
  })

 

 

 

=闭包(closure)

是指有权访问另一个函数作用域中的变量的函数。

 

function MyObject(name, message) {
    this.name = name.toString();
    this.message = message.toString();
}
(function() {
    this.getName = function() {
        return this.name;
    };
    this.getMessage = function() {
        return this.message;
    };
}).call(MyObject.prototype);

 

 

 

ECMAScript的所有内置对象的原型链都指向Function对象的原型

 

Object.__proto__ === Function.prototype //true

Function.__proto__ === Function.prototype //true

Array.__proto__ === Function.prototype //true

String.__proto__ === Function.prototype //true

Number.__proto__ === Function.prototype //true

Boolean.__proto__ === Function.prototype //true

Date.__proto__ === Function.prototype //true

Error.__proto__ === Function.prototype//true

RegExp.__proto__ === Function.prototype//true

 

 

自定义对象的原型的原型链指向Object对象的原型

 

Product.prototype.__proto__ === Object.prototype //true

Function.prototype.__proto__ === Object.prototype//true

Object.prototype.__proto__ === null //true 原型链的终点

 

 

 

 

#Object

 

=判断类型

toString.call() ------ 判断所有类型

console.log(Object.prototype.toString.call(123) === "[object Number]");//true
toString.call("")==="[object String]"//true

typeof-----判断基本数据类型

 

instanceof----------用于判断某个变量是否是某个对象的实例，返回值为true或false，判断引用类型
 

console.log(arr instanceof Array)

prototypeObj.isPrototypeOf(object)-----用于测试一个对象是否存在于另一个对象的原型链上。

 

Person.isPrototypeOf(person)//返回true || false

Object.getPrototypeOf(object)-----返回指定对象的原型（内部[[Prototype]]属性的值）。

 

Object.getPrototypeOf(person1) === Person.prototype //返回true || false

 

 

 

=面向对象

 

 

定义对象的两种方式：

function Preson={};
Preson.prototype={
 buy:function(){}
}
Preson.prototype.buy=function(){};

config 保存当前临时变量、避免重复，减少内存

this.config = {
  btn:document.getElementById("id")
}

 

==get、set 取值器和设置器

Object.defineProperty()-----方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty(this,"属性名",{
  get:function(){},
  set:function(){},
  wriable //是否可写
  enuerable //是否可枚举
  configurable //是否可配置
  value
})

Object.defineProperties(obj, props) -----方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

props:{
  get
  set
  wriable //是否可写
  enuerable //是否可枚举
  configurable //是否可配置
  value
}

==公有和私有属性

私有不能被拷贝

function Person(name){ //构造函数
  var className = "用户对象"//私有属性
  this.name = name;//公有属性

  var methodname = function(){}//私有方法
  this.methodname = function(){}//公有方法
}

function Person(){
  var methodname = function(){}
  this.init = function(){
    this.methodname()//公有不加this
  }
}

 

==实例化

 

实例化的过程就是拷贝构造函数属性的过程，除了拷贝属性以外还自动生成constructor属性，用于识别其根据那个构造函数创建的实例。

delete snail.attrname ----- 删除属性,只能删除实例化属性，不能删除原型上的属性。

delete person.propertyname

obj.hasOwnProperty(prop)-----返回一个布尔值，指示对象自身属性中是否具有指定的属性。

person1.hasOwnProperty("name")//如果存在这个属性返回true，没有则false

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

 

"name" in person1 //属性不管是存在于实例对象还是原型中，只要存在就返回true，则false

function hasPrototypeProperty(obj, name) {
  //判断name存在于实例中吗？true：false，得到的值然后取反。如果name存在于实例中为真，在取反为false
  //语句就不成立，也就证明name存在实例中。相反如果不存在返回false取反为true。并且 name in obj
  //前面判断了 实例中是没有name的  ，那么name in obj如果为真  就是说原型中有name属性。
  return !obj.hasOwnProperty(name) && (name in obj);
}

for...in...-----遍历可枚举的对象属性。和Object.keys的区别是for...in会遍历原型上的属性。

 

for (var key in object) {...}

Object.keys(obj)-----遍历实例对象上的可枚举属性,返回数组。

 

var keys = Object.keys(Person.prototype);

Object.getOwnPropertyNames()-----返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

let keys = Object.getOwnPropertyNames(Person.prototype)

Object.defineProperty(定义属性的对象注意原型, 属性的名称, 被定义或修改的属性描述符)-----更改原型属性。

 

Object.defineProperty(Person.prototype, "constructor", {

  enumerable: false,//是否可枚举，默认为false

  value: Person //该属性对应的值，默认undefined

  configurable:false  //是否可配置，默认为 false

  writable:false //是否可重写，默认false，为true时value的值才能被修改

  get:function(){
    return bvalue
  }

  set:function(newvalue){
    bvalue=newvalue
  }
})

==原型

 

原型对象不管实例化多少次都生成一次，
原型对象里的属性、方法是共享的，修改一个，都被修改。

 

function Snail(){}
Snail.prototype={
  info:{
    name:"abc";
  }
}
var snail1 = new Snail()
var snail2 = new Snail()
snail1.info.name = "aaa";
snail2.info.name = "bbb";
console.log(snail1.info.name,snail2.info.name);//bbb bbb
//为什么输出的都是bbb？？？  因为snail1和snail2实例共享了Snail构造函数的原型属性info，也是共享了同一内存。

原型对象属性
Snail.prototype.attrname = "";

 

 

 

==封装

函数是一个工具，对象是一个工具包。

 

 

==继承

 

1.可以访问父类的属性和方法
2.可以定义自己的一些属性和方法

 

Object.create(proto[, propertiesObject])-----方法会使用指定的原型对象及其属性去创建一个新的对象。

 

实现组合继承,常用方式：

 

//基类 Person 也是父类
    var Person = function() {
      this.name = '张三';
      this.age = 18;
    };
    //person的原型方法
    Person.prototype = {
      say: function() {
        console.log('===');
      }
    };
    //实现继承Person的属性
    var Student = function() {
      //继承父类的核心
      Person.call(this, arguments);
      //实现自己的属性
      this.sID = '000001'
      this.jiemu = '唱歌'
      this.luobenTimes = 0
    };
    //实现继承Preson的方法
    Student.prototype = new Person();
    //实现constructor赋值
    Student.prototype.constructor =  Student
    //实现自己的方法
    Student.prototype.com = function() {
      console.log('123');
    };

    var x = new Student();
    x.say(); //===
    x.com(); //123
    console.log(x.sID) //000001
    console.log(x.jiemu) //唱歌

寄生组合式继承

 

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype); //创建对象
    prototype.constructor = subType; //增强对象
    subType.prototype = prototype; //指定对象
  }

  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    console.log(this.name);
  };

  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
  inheritPrototype(SubType, SuperType);
  SubType.prototype.sayAge = function() {
    console.log(this.age);
  };
  var person1 = new SubType("bbb", 18);
  console.log(person1.name);
  console.log(person1.age);
  console.log(person1.sayName());
  console.log(person1.sayAge());
  console.log(person1.colors);

 

 

==多态

 

一个引用类型（变量）在不同情况下的多种状态。多态是指通过指向父类的引用，来调用在不同子类中实现的方法。

 

==重载

 

js不支持重载
判断传参个数做相应操作来实现重载

 

 

 

==原型链 __proto__

 

 

构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

 

 

 

==命名空间

 

var yw = {
      version: '1.0'
    };
    yw.common = {};

    yw.ui = {};
    yw.ui.mobile = {};

    yw.page = {};
    yw.page.user = {};

 

==链式访问

 

定义，return this;
在方法的里返回当前对象

 

 

 

 

Object.entries()----------返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

Object.assign()----------浅拷贝，用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象(target)。

Object.is()----------用来比较两个值是否严格相等