es6新增--变量定义与变量类型

Posted 2023-04-19

参考技术A 1.新增let,const，import变量的定义,其实class也算是一种变量的定义
2.新增数据类型：Symbol数据类型；set和map数据类型
3.字符串扩展，字符串新增方法
4.变量的解构
5.运算符的扩展
15.Iterator和for..0f循环

6.数组的扩展
7.对象的扩展，对象新增方法,Proxy,Reflect

8.函数的扩展
函数参数默认值设置，reset参数
箭头函数
Generator函数的语法
async函数
Promise对象

9.数值的扩展
10.正则的扩展

14.class基本语法，继承
14.module语法，module的加载实现

特点：
（1）块级作用域，没有变量提升，存在暂时性死区；
（2）let定义变量，const定义常量

import引入js的model文件，数据单项，没有联动

定义：用来表示对象独一无二的属性；没有任何两个symbol值是相同的；
例如let a= Symoble('mySymbole');let b= Symoble('mySymbole'). a==b. //false

定义：它类似于数组，但是成员的值都是唯一的，可以用来数组的去从 Array.from(new Set(arr))

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
M.size
m.add(key,valu)
M.has(key)
M.deltet(key)
M.clear()
M.keys(set)
M.values(set)
M.foreach(set)

定义：它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
const m = new Map();

常用方法
M.size
m.set()
m.get()
M.has()
M.deltet()
M.clear()
M.keys()
M.values()
M.foreach()

map与数组互相转换：解构和重定义
map与对象互相转换：如果健值不是字符串,先把key转成字符串，在转对象；
map与json的互相转换：如果健值不是字符串，可以先通过数组结构map，在转json，如果健值全是字符串，可直接转json

从数组和对象中提取值，对变量进行赋值，这被称为解构；吧等号右边的转换成对象，数组进行解构；

1.数组的解构
2.对象的解构
3.字符串的解构：字符串转数组，在解构
4.数值和布尔值的解构赋值：先转对象，在结构
5.函数的返回值，参数都可以进行解构

备注：
（1）等号前后的数据结构相同，不是可遍历的结构使用解构会报错
（2）如果解构不成功，变量的值就等于undefined
（3）结构可以设置默认值
（4）而对象的属性没有次序，变量必须与属性同名
（5）对象结构，可以指定属性名称，用:号标识，例如let foo: baz=foo:1
（6）对象和数组结构可以混合使用。
（7）大括号在行首的解构，必须放在打括号内
（8）数组也可以进行对象结构，因为数组也是对象
（9）undefined和null无法转为对象，对它们进行解构赋值，都会报错

用途
1.交换变量的值
2.函数返回多个值
3.函数的参数定义
4.提取 JSON 数据
5.输入模块的指定方法

ES基础知识与高频考点梳理

知识点梳理目录列表

• 变量类型
  • JS的数据类型分类和判断
  • 值类型和引用类型
• 原型与原型链(继承)
  • 原型和原型链的定义
  • 继承写法
• 作用域和闭包
  • 执行上下文
  • this
  • 闭包是什么
• 异步
  • 同步VS异步
  • 异步和单线程
  • 前端异步的场景
• ES6/7新标准的考查
  • 箭头函数
  • module
  • class
  • set和map
  • promise

变量类型

JavaScript是一种弱类型脚本语言，所谓弱类型指的是定义变量时，不需要什么类型，在程序运行过程中会自动判断类型

ECMAScript中定义了6种原始类型

• boolean
• string
• number
• undefined
• null
• symbol

题目：类型判断用到哪些方法？

typeof

typeof xxx得到的值有一下类型：undefined、boolean、number、string、object、function、symbol

• typeof null结果是object，实际这是typeof的一个bug，null是原始值，非引用类型
• typeoof [1,2]结果是object，结果中没有这一项，引用类型除了function其他的全部都是object
• typeof Symbol()用typeof获取symbol类型的值得到的是symbol，这是ES6新增的知识点

instanceof

用于实例和构造函数的对应。例如判断一个变量是否是数组，使用typeof无法判断,但可以使用[1,2] instanceof Array来判断。因为,[1,2]是数组,它的构造函数就是Array：同理

function Foo(name) {
    this.name = name
}
var foo = new Foo(‘bar‘)
console.log(foo instanceof Foo) // true

constructor

object.prototype.toString.call()

题目：值类型和引用类型的区别

值类型VS引用类型

除了原始类型，ES还有引用类型，上文提到的typeof识别出来的类型中,只有object和function是引用类型，其他都是值类型

根据JavaScript中的变量类型传递方式，又分为值类型和引用类型
值类型包括：Boolean、string、number、undefined、null;
引用类型包括：object类的所有，如Date、Array、function等。
在参数传递方式上，值类型是按值传递，引用类型是按地址传递

// 值类型
var a = 10
var b = a
b = 20
console.log(a)  // 10
console.log(b)  // 20

上述代码中，a b都是值类型，两者分别修改赋值，相互之间没有任何影响。再看引用类型的例子：

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}...

上述代码中，a b都是引用类型。在执行了b = a之后，修改b的属性值，a的也跟着变化。因为a和b都是引用类型，指向了同一个内存地址，即两者引用的是同一个值，因此b修改属性时，a的值随之改动。
再借助题目进一步讲解一下。

题目：说出下面代码的执行结果，并分析其原因。

function foo(a){
    a = a * 10;
}
function bar(b){
    b.value = ‘new‘;
}
var a = 1;
var b = {value: ‘old‘};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new...

通过代码执行，会发现：

• a的值没有发生改变
• b的值发生了改变
  这就是因为Number类型的a是按值传递的，而Object类型的b是按地址传递的。

** JS 中这种设计的原因是：**按值传递的类型，复制一份存入栈内存，这类类型一般不占用太多内存，而且按值传递保证了其访问速度。按共享传递的类型，是复制其引用，而不是整个复制其值（C 语言中的指针），保证过大的对象等不会因为不停复制内容而造成内存的浪费。...

引用类型经常会在代码中按照下面的写法使用，或者说容易不知不觉中造成错误！

var obj = {
    a: 1,
    b: [1,2,3]
}
var a = obj.a
var b = obj.b
a = 2
b.push(4)
console.log(obj, a, b)

虽然obj本身是个引用类型的变量（对象），但是内部的a和b一个是值类型一个是引用类型，a的赋值不会改变obj.a，但是b的操作却会反映到obj对象上。

原型和原型链

JavaScript 是基于原型的语言，原型理解起来非常简单，但却特别重要，下面还是通过题目来理解下JavaScript 的原型概念。

题目：如何理解JavaScript的原型

对于这个问题，可以从下面这几个要点来理解和回答，下面几条必须记住并且理解

• 1.每一个函数数据类型（函数、类）都天生自带一个prototype属性，prototype的属性值是一个对象数据类型的；
• 1. prototype 属性中天生自带一个constructor属性，属性值是当前原型所属的类；
• 3.每一个对象数据类型值（对象、数组、arguments...）天生自带一个__proto__属性，属性值指向当前实例所属类的原型；
• 4.所有的函数数据类型（普通函数、类（内置的、自定义））都是Function的一个实例；Function是所有函数的基类；
• 5.所有的对象数据类型（实例、prototype、对象）都是Object的一个实例；Object是所有对象数据类型的基类；

// 要点一：自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;
// 要点二：__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
// 要点三：函数有 prototype
console.log(fn.prototype)
// 要点四：引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype)...

原型

// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function () {
    alert(this.name)
}
// 创建示例
var f = new Foo(‘zhangsan‘)
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()...

执行printName时很好理解，但是执行alertName时发生了什么？这里再记住一个重点 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找，因此f.alertName就会找到Foo.prototype.alertName。...

那么如何判断这个属性是不是对象本身的属性呢？使用hasOwnProperty，常用的地方是遍历一个对象的时候。

var item
for (item in f) {
    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议大家还是加上这个判断，保证程序的健壮性
    if (f.hasOwnProperty(item)) {
        console.log(item)
    }
}...

题目：如何理解JS的原型链

原型链

还是接着上面的示例，如果执行f.toString()时，又发生了什么？

// 测试
f.printName()
f.alertName()
f.toString()

因为f本身没有toString()，并且f.__proto__（即Foo.prototype）中也没有toString。这个问题还是得拿出刚才那句话——当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。

如果在f.__proto__中没有找到toString，那么就继续去f.__proto__.__proto__中寻找，因为f.__proto__就是一个普通的对象而已嘛！...

• f.__proto__即Foo.prototype，没有找到toString，继续往上找
• f.__proto__.__proto__即Foo.prototype.__proto__。Foo.prototype就是一个普通的对象，因此Foo.prototype.__proto__就是Object.prototype，在这里可以找到toString...
• 因此f.toString最终对应到了Object.prototype.toString

这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”。如果一直找到最上层都没有找到，那么就宣告失败，返回undefined。最上层是什么 —— Object.prototype.__proto__ === null

原型中的this

所有从原型或更高级原型中得到、执行的方法，其中的this在执行时，就指向了当前这个触发事件执行的对象。因此printName和alertName中的this都是f。