# js-basics

**Repository Path**: weiaigewang/js-basics

## Basic Information

- **Project Name**: js-basics
- **Description**: js基础总结和学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-06
- **Last Updated**: 2022-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# js-basics  js基础总结

# 一、介绍

 js基础总结和学习

## 1.1、执行上下文

- 作用域：
   * 产生时机：代码定义的时候产生。
- 执行上下文(execute context): 
   * 概念：代码的执行环境。
   * 执行时机：代码执行之前会进入执行环境。
   * 工作过程：
      * 1.创建变量对象（<1>变量【window,抽象局部对象】、<2>函数和函数参数）
      * 2.确认this指向。（全局->window,局部->调用其对象）
      * 3.创建作用域链。（父级作用域链 + 当前变量对象）
- 执行上下文对象：this。

# 二、js基础

## 1.基本数据类型
```js
number string bool undefind null symbol
```
## 2.复杂数据类型
引用类型数据
```js
Object  Date String Number Array ....
```
### 2.1、String
```js
/**1、字符串翻转**/ 
let str = "1234567890"
console.log(str.split("").reverse().join("")) //0987654321

/**2、字符串分割**/ 
const str2 = "java-html-css-by-id"
const splitArr = str2.split("-")
console.log("splitArr:", splitArr) //splitArr: (5) ['java', 'html', 'css', 'by', 'id']

/**3、字符串首字母大写**/ 
for (let i = 0; i < splitArr.length; i++) {
    splitArr[i] = splitArr[i].charAt(0).toUpperCase() + splitArr[i].substr(1, splitArr[i].length - 1);
}
console.log("splitArr:", splitArr) //splitArr: (5)  ['Java', 'Html', 'Css', 'By', 'Id']

/**4、数组转字符串**/ 
const str3 = splitArr.join("|")
console.log("str3:", str3) //str3: Java|Html|Css|By|Id

/**5、toLocaleUpperCase()**/ 
const str4 = 'abcdefg'
console.log("toLocaleLowerCase:", str4.toLocaleUpperCase())//ABCDEFG【返回新串】
const str5 = 'ABCDEFG'

/**6、toLocaleLowerCase()**/ 
console.log("str5.toLocaleLowerCase:", str5.toLocaleLowerCase())//abcdefg
```
### 2.2、Array
```js
/**1.map()方法*/ 
const list = arr.map(item => item.name)
console.log("map方法返回值：", list) //(5) ['小费', '小费1', '小费2', '小费3', '小费4']
const list2 = arr.map(item => item.id > 1)
console.log("map方法返回值id>1：", list2) // (5) [false, false, true, true, true]
/**2.filter()方法*/ 
const list3 = arr.filter(item => item.age > 24)
console.log("map方法返回值id>1：", list3) //
/**3.fill()方法*/ 
const array = [1,2,3,4,5,6,7,8,9,10]
const list4 = array.fill(0,1,7) 
console.log(list4)
console.log(array) //会改变原数组
/**4.reverse()方法*/ 
const arr2 = [1,2,3,4,5,6,7,8,9]
console.log(arr2.reverse()) //
console.log(arr2) //会改变原数组
/**5.some()方法*/ 
console.log(arr2.some(num => num > 8)) //false
/**6.every()方法*/ 
console.log(arr2.every(num => num > 10)) //false
```
### 2.3、Object
```js
const obj = {
    name: "小费",
    age: 23,
    gender: "男",
    add: function (obj) {
        console.log("添加对象：", obj)
    },
    run() {
        console.log("开始跑········")
    }
}
/**1、Object.keys()*/ 
Object.keys(obj).forEach(key => { 
    console.log(key) 
})
//输出：name  age gender add  run
/**2、Object.values()*/ 
Object.values(obj).forEach(value => {
    console.log(value)
})
//输出：
// 小费 
// 23 
// 男  
// ƒ(obj) { console.log("添加对象：", obj) } 
// ƒ run() { console.log("开始跑········") }
/**3、Object.entries()*/ 
Object.entries(obj).forEach(item => { 
    console.log(item)
})
/**
 输出：
 (2) ['name', '小费']
 (2) ['age', 23]
 (2) ['gender', '男']
 (2) ['add', ƒ]
 (2) ['run', ƒ]
 */
const map = new Map(Object.entries(obj))
console.log(map) 
// Map(5) {'name' => '小费', 'age' => 23, 'gender' => '男', 'add' => ƒ, 'run' => ƒ}
console.log(map['name']) //undefined
const prop = 'address'
let value = ""
const proxy = Object.defineProperty(obj, prop, {
    configurable: true,
    enumerable: true,
    // value:true,
    // writable:true,
    get: function () {
        return value
    },
    set: function (newValue) {
        debugger
        if (Array.isArray(obj[prop])) {
            obj[prop].push(newValue)
        } else {
            obj[prop] = [newValue] 
        }
    },
})
console.log("proxy:", proxy) //name: '小费', age: 23, gender: '男', add: ƒ, run: ƒ, …}
```
### 2.4、Window
### 2.5、Date
```js
const date = new Date()

console.log("date:", date) //Mon Mar 21 2022 22:01:55 GMT+0800 (中国标准时间)
console.log("toDateString:", date.toDateString()) //Mon Mar 21 2022
console.log("toISOString:", date.toISOString()) //2022-03-21T14:01:55.462Z
console.log("toLocaleDateString:", date.toLocaleDateString()) //2022/3/21
console.log("toLocaleString:", date.toLocaleString()) //2022/3/21 22: 01: 55
console.log("toLocaleTimeString:", date.toLocaleTimeString()) //22:01:55
```
### 2.6、Number
Math：它拥有一些数学常数属性和数学函数方法。
 * Math 不是一个函数对象。
 * Math 用于 Number 类型。它不支持 BigInt。
```js
//【1、绝对值】
const abs = Math.abs(- 200.45)
console.log( abs ) //200.45 
//【2、向下取整】
const ceil = Math.ceil(300.45)
console.log(ceil) // 301 
//【3、向上取整】
const floor = Math.floor(300.45)
console.log(floor) //300  
//【4、取整部分】
const num = 134.34567777
console.log(Math.trunc(num)) //134
```
## 3.面向对象
### 3.1、概念
### 3.2、类
- 类：模具
```js
class clsssName{
    constructor(){}
}
```
### 3.3、对象
- 对象：模具创建的实体。
```js
let obj = new ClassName()
```
### 3.4、创建对象
- 1、字面量创建
  * 缺点：
       * 1、复用性差，产生大量重复代码。
```js
const Person = {
    name:"小明",
    age:23
}
```
- 2、构造函数创建
    * 缺点：
       * 1、构造函数里面私有方法也是方法。
- 3、new Object()
    * 缺点：
       * 1、不能对象识别。
- 4、Object.create({})
    * 缺点：
       * 1、不能对象识别。
- 5、原型创建
    * 缺点：
       * 1、属性和方法全度都挂载在原型上变成了公有。
- 6、工厂类创建
  * 1、不能进行对象识别
- 7、混合模式创建对象
  * 1、公有属性放在原型
  * 2、私有属性放在构造函数
- 8、ES类创建
```js
class Person = {
    constructor(name,age){
        this.name = name
        this.age = age
    }
}
```

### 3.5、对象继承
- 1、构造继承

  复制父类的实例属性给子类

  - 优点：
    * (1)解决了子类构造函数向父类构造函数中传递参数 
    * (2)可以实现多继承（call或者apply多个父类）

  - 缺点：
    * (1)方法都在构造函数中定义，无法复用
    * (2)不能继承原型属性/方法，只能继承父类的实例属性和方法
```js
function Animal(){
    this.species = "动物";
}
function Cat(name,color){
	Animal.apply(this,arguments);
	//Animal.call(this,arguments);
	this.name = name;
	this.color = color;
}
var cat = new Cat("小花猫","白色");
console.log(cat);
```
- 2、原型继承
```js
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat = new Cat("小花猫","橘色");
console.log(cat);
//Cat{species: "动物", name: "小花猫", color: "橘色"}
alert(Cat.prototype.constructor == Animal); //true
alert(cat1.constructor == Cat.prototype.constructor);//true
```
- 3、class类继承
```js
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

```
- 4、混合方式继承
```js
function People(name,age){
  this.name = name || 'wangxiao'
  this.age = age || 27
}
People.prototype.eat = function(){
  return this.name + this.age + 'eat sleep'
}

function Woman(name,age){
  People.call(this,name,age)
}
```
- 5、拷贝继承
```js
function extend(Child,Parent){
	var parent = Parent.prototype;
	var child = Child.prototype;
	for(var i in parent){
		child[i] = parent[i];
	}
	child.uber = parent;
}
extend(Cat,Animal);
var cat2 = new Cat("小花猫","白色");
console.log(cat2);//Cat {species: "动物", name: "小花猫", color: "白色"}

```
### 3.6、原型和原型链
#### 1、原型
- 1、JavaScript 只有一种结构：对象。
- 2、每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。
#### 2、原型链：
- 1、该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。
- 2、根据定义，null 没有原型，
- 3、并作为这个`原型链`中的最后一个环节。

## 4.事件和事件流

### 4.1、事件
### 4.2、事件流
### 4.3、默认事件和事件冒泡

## 5.宏任务微任务
### 5.1、事件循环
### 5.2、宏任务
- 1.概念：
  在主线程上面执行的任务。
- 2.分类：    
```js
 script
 postMessage
 UI
 I/O
 MessageChannel
 requestAnimationFream(window新特性) 
 setTimeout() setInterval()
 Immadiate() //node
```
### 5.3、微任务
 宏任务队列处理完毕，就会立即执行微任务队列。
```js
Object.observe() //已废弃
MutationObserver //
promise.then()   //
process.nextTick()//node
```
### 5.4、任务队列
单线程就意味着，所有的任务都要排队，前一个结束，才会执行后面的任务。
- 1）所有的同步任务都在主线程上执行，线程是一个执行栈。
- 2）除了主线程之外，还存在一个任务列队，只要一步任务有了运行结果，就在任务列队中植入一个时间。
- 3）主线程完成所有任务，就会读取列队任务，并将其执行。
- 4）重复上面三步。
# 三、ES6新特性

## 3.1、块级作用域
- 1.不能变量提升。
```js
let name = "小明";
const tag = "TAG_NAME"

```
## 3.2、箭头函数
 - 1、没有this。
 - 2、不能做构造函数。
```js
const sun = (x,y) => x + y
```
## 3.3、解构赋值
```js
const obj = {
    id:0,
    name:"小明",
    age:23
}
const { id, age, name } = obj
```
## 3.4、扩展运算符[...]
```js
const arr = [1,2,3,4,5,6,7]
const array = [...arr]
const obj = {
    id:0,
    name:"小明",
    age:23
}
const newObj = {...obj}
console.log(newObj) //{id: 0, name: '小明', age: 23}
```
## 3.5、promise
```js
new promise((resolve,reject)=>{})
promise.then(res => {})
promise.catch(error => {})
promise.finally()
 
Promise.resolve(value)
Promise.reject()
Promise.race(iterable) 
Promise.any(iterable) 
Promise.all(iterable) 
Promise.allSettled(iterable) //任何一个rejected就结束
```
## 3.5、proxy
```js
const target = {
    id:0,
    name:"小明",
    age:23
}
const handler = {
    set: function (target, propKey, value, receiver) {
        return Reflect.set(target, propKey, value);
    },
    get: function (target, propKey) {
        return Reflect.get(target, propKey)
    }
}
const proxy = new Proxy(target,handler)
```
## 3.7、reflect
## 3.8、set和WeakSet
## 3.9、map和WeakMap