ECMAScript认识笔记

ECMAScript认识笔记

---

这是个啥东西呢，对于后端来说应该比较陌生但也应该接触过毕竟你至少接触过html,css,Javascript，其中Javascript就包含ECMScript，这个也是Javascript的核心，说到Javascript这个包含三个部分，一个是核心部分就是Javascript，一个是游览器的文本对象，一个是游览器对象

ECMAScrip是一种脚本语言，这种语言在万维网广泛应用，Javascript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的，就算是大名在外的Node.js也有它的一部分，已经出现了ES11

官方已经出现了标准 ECMA-262 ECMAScript 2020语言规范第11版(2020年6月)

好像，平时用的比较多的是ES5或者的ES6,作为一个后端的死宅要做前后端表示无奈，干呗，要有方法论，你得有世界观，先充电

ECMAScript 是一种面向对象程序设计语言，用于在主机环境中执行计算和操作计算对象，最初被设计为一个 Web 脚本语言，提供一种机制来在浏览器中活跃 Web 页面，并作为基于 Web 的客户机-服务器架构的一部分执行服务器计算，它也被服务器支持。

---

先来看看ECMAScript5，感觉之前接触的就像是残缺知识，来一遍大扫除

ECMAScript是基于对象：基本语言和宿主设施都是由对象提供，ECMAScript是一组可通信对象，ECMAScript（Object）是属性的集合，每个属性有零个或多个特性（attributes），它确定了怎样使用此属性，当设置属性的Writable的值设置为false时，任何试图更改此属性值的代码ECMAScript代码的都会运行失败，属性是持有其他对象（object），原始值，函数的容器。原始值是以下内置类型的成员之一（Undefined,Null,Boolean,Number,String）,对象是剩下的内置类型Object的成员，函数是可调用对象，方法是通过属性与对象关联的函数、

更加详细如下

ECMAScript 定义一组内置对象 (built-in objects)，这些内置对象包括 全局对象 (global object) ，Object 对象 ，Function 对象 ，Array 对象 ，String 对象 ，Boolean 对象 ，Number 对象 ，Math 对象 ，Date 对象 ，RegExp 对象 ，JSON 对象，和 Error 对象： Error ，EvalError ，RangeError ，ReferenceError ，SyntaxError ，TypeError ，URIError

ECMAScript中还定义一组内置运算符，包含一元运算符，乘法运算符，按移位运算符，关系运算符，相等运算符，二进制运算符，二进制逻辑运算符，赋值运算符，逗号运算符

ECMAScript 语言类型 是 ECMAScript 程序员使用 ECMAScript 语言直接操作的值对应的类型。ECMAScript 语言类型包括 未定义 （Undefined）、 空值 （Null）、 布尔值（Boolean）、 字符串 （String）、 数值 （Number）、 对象 （Object）。

ECMAScript语法有设计成与java语法类似，语法是松散的使其易于使用的脚本语言，如一个变量不需要有类型声明，属性也不需要与类型关联，定义的函数也不要声明在函数调用词句的前面

---

ECMAScript不使用诸如C++,Smalltalk,Java中的类，相反，对象可以通过各种方式创建，包含字面符号，或通过构造器创建对象然后运行代码初始化其全部或者部分属性，为这些属性分配初始值。每个构造器是一个拥有名为“prototype"的属性的函数，此属性用于实现原型的继承和共享属性，构造器通过new表达式创建对象，例如new date()新的date对象，不使用构造器的结果依赖构造器本身，例如Date()产生一个表示当前日期时间的字符串，而不是一个对象

每个由创造器创建的对象，都有一个隐式引用（对象的原型）链接到构造器的"prototype"的属性的值，原型可能有一个非空（non-null)隐式引用链接到自己的原型

---

下面关于术语定义

类型

---

原始值

未定义（undefined）,空(null)，布尔(boolean)，数字(number)，字符串(String)类型之一

---

对象(object)

对象类型的成员

（对象是属性的集合，并有原型对象，原型可以是空值）

---

构造器（constructor）

创建和初始化对象的函数对象

---

原型

为其他对象提供共享属性的对象

（当构造器创建一个对象，为了解决对象属性引用，该对象隐式引用构造器的"prototype"属性，通过程序表达式constructor.prototype可以引用到构造器的“prototype”属性，并且添加到对象原型里的属性，会通过继承与共享此原型的对象共享，另外，可使用Object.create内置函数，通过明确指定原型来创建一个新对象）

---

原生对象

ECMAScript实现中，并非由宿主环境，而是完全由规范定义的其语义的对象

(标准的原生对象由规范定义，一些原生对象是内置的，其他的可在ECMAScript程序执行过程中构建)

---

内置对象

由ECMAScript实现提供，独立宿主环境的对象，在程序开始执行时就存在

（所有内置对象是原生对象，一个内置构造器是个内置对象，也是个构造器）

---

宿主对象

由宿主环境提供的对象，用于完备ECMAScript执行环境

（任何对象不是原生对象就是宿主对象）

---

未定义值（undefined value）

说明一个变量没有被分配道一个原始值

---

未定义类型（undefined type）

拥有唯一值“未定义值”的类型

---

空值

代表对象值故意留空的一个原始值

---

空类型

拥有唯一值“空值”的类型

---

布尔值(boolean value)

布尔类型的成员（true和false）

---

布尔类型(boolean type)

由原始值true和false组成的类型

---

布尔对象（boolean object）

对象类型的成员，它是标准内置构造器Boolean的一个实例

（通过使用new表达式，以一个布尔值作为参数调用boolean构造器来创建布尔对象，由此产生的对象包含一个值为此布尔值内部属性，一个boolean对象可以强制转换为布尔值）

---

字符串值（String value）

原始值，它是零个或多个16位无符号整数组成的有限有序序列

---

字符串类型（所有可能的字符串值的集合）

所有可能的字符串值的集合

---

字符串对象

对象类型的成员，它是标准内置构造器String的一个实例

---

数字值

原始值，对应一个64位双精度二进制IEEE754值

（一个数字值是数字类型的成员，直接代表一个数字）

---

数字类型

所有可能数字值的集合，包括特殊的“not-a-number”(nan)值，正无穷，负无穷

---

数字对象

对象类型的成员，它是标准内置构造器number的一个实例

（通过使用new表达式，以一个数字值为参数调用number构造器来创建数字对象，由此产生对象包含一个值为此数字值的内部属性，将number构造器作为一个函数来调用，可将一个number对象强制转换一个数字值）

---

无穷(Infinity)

正无穷数字值

---

NaN

值为IEEE754"Not-a-Number"的数字值

---

函数(function)

对象类型的成员，标准内置构造器Function的一个实例，并且可作为子程序被调用

（函数除了拥有属性，还可以包含执行代码，状态，用来确定被调用时的行为，函数的代码不限于ECMAScript）

---

内置函数(built-in function)

作为函数的内置对象

(parselnt和math.exp就算内置函数，一个实现可以提供本规范没有描述依赖于实现的内置函数)

---

属性（property）

作为对象的一部分联系名和值

（属性可能根据属性值的不同表现为直接的数据值，（原始值，对象，或一个函数对象）或间接的一对访问器函数）

---

方法

作为属性值的函数

---

内置方法

作为内置函数的方法

---

特性

定义一个属性的一些特性的内部值

---

自身属性

对象直接拥有的属性

---

继承属性

不是对象的自身属性，但是是对象原型的属性（原型的自身属性或继承属性）

---

ES6学习的相关记录
ECMS由ECMS国际化组织制定好标准，由各大游览器厂商去实现，所以造成javascript各种版本，找资料应该找相关游览器的相关文档来。

---

//声明变量
let a,b,c,d
//变量不能重复声明，下面是错误的
let star='海王';
let star='大海';
//块级作用域，全局，函数，eval
{let girl='周杨青'}
//常量
//声明常量
const A
//一般常量使用大写
const B=100
//常量的值不能修改
B='aaaaaaa'
//块级作用域
{
    const PLAYER='SSSSS'
}
//对于数组和对象元素修改，不算做对常量的修改，不会报错
const TEAM=['SSSS','CCCC','SSSS']
TEAM.push('xxxxx')
//ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为结构赋值
//数组的结构
const F4=['sss','sfde','eftsfda']
let [xiao,liu,zhao,song]=F4
const zhao={
    name:'sss',
    age:function(){}
}
let {name,age,zhao}=zhao
****   
//模板字符串,``,'',""
const A=`哈哈哈哈哈`
//内容可以出现换行符号
const B='<ul>
		 <li>决斗</li>
		</ul>`
//变量拼接
let lovest='想想'
let out=`${lovest} 是谢谢谢谢谢谢绝对是`
//ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
let name='尚硅谷'
let change=function(){
    console.log('我们可以改变世界')
}
const school={
    name,
    change
    //可以将冒号和function省略
    hello(){
        
    }
}
//ES6允许使用箭头函数(=>)
let fn=function(a,b){
    
}
let fn=(a,b)=>{
    return a+b
}
//调用函数
let result=fn(1,2)
//this是静态的，this始终指向函数声明时所在的this的值
//不能作为构造实例化对象
let person=(name,age)=>{
    this.name=name;
    this.age=age;
}
let me=new person('xiao',30)
console.log(me)
//箭头函数的简写
1）省略小括号，当形参有且只有一个的时候
let add=n=>{
    return n+n;
}
console.log(add(9))
//省略花括号，当代码体只有一条语句的时候
******
//ES6允许给函数参数赋值初始值
//形参初始值
function add(a,b,c=10){
    return a+b+c
} 
let result=add(1,2)
//与解构赋值结合
function connect({host="127.0.0.1",username,password,port}){
    console.log(host);
    console.log(password);
    console.log(port)
}
*****
//rest参数，用于获取函数的实参，用来代替arguments
//rest参数
function date(...args){
    console.log(args)
}
//rest参数必须要放到参数最后
function fn(a,b,c,...args){
    console.log(a)
    console.log(b)
    console.log(c)
}
//...扩展运算符能够将数组转为逗号分隔的参数序列
const tfboys=['易烊千玺','王源','激肽酶']
function chunwan(){
    console.log(arguments)
}
chunwan(...tfboys)
//数组的合并
const kuaizi=['王太利','肖央']
const fenghuang=['曾毅','玲花']
const ssssss=kuaizi.concat(fenghuang)
const aaa=[...kuaizi,...fenghuang]
console.log(aaa)
//数组的克隆
const sanzhihua=['e','g','m'];
const sanyecao=[...sanzhihua];
console.log(sanyecao)
//将伪数组转成真正的数组
const divs=document.querySelectorAll('div');
const divArr=[...divs]
**********
Symbol基本使用
/*ES6引入一种新的原始数据类型Symbol,表示独一无二的值，它是javascript语言的第七种数据类型，是一种类似于字符串的数据类型
Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算
Symbol定义的对象属性不能使用for..in循环遍历，但是可以使用reflect.ownkeys来获取对象的所有键名
*/
let s1=Symbol()
console.log(s1,typeof s1)
let s2=Symbol('')
//迭代器 Iterator
//ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for..of消费
array
arguments
set
map
string
typedarray
nodelist
/*工作原理
创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用NEXT方法，指针一直往后移动，直到指向最后一个成员
*/
let aa=['aaaa','bbbb','cccc','dddd'];
let iterator=aa[Symbol.iterator]();
console.log(iterator.next())
//用其类自动遍历其中的数组呢
const banji={
    name:'终极桑落',
    stus:[
        'ssssss',
        'dfsdfasf',
        'kningt'
    ],
    [Symbol.iterator](){
        let index=0;
        let _this=this;
        return {
            next: function () {
                if (index<_this.stus.length){
                    const result=  {value:_this.stus[index],done:false}
                    index++;
                    return result;
                }else {
                    return {value:undefined,done:true}
                }

            }
        }
    }
}
for (let v of banji){
    console.log(v)
}
//生成器函数，异步函数
function * gen(){
    console.log("hello world")
}
let iterator=gen();
console.log(iterator)
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处
模块化的优势有以下几点
防止命名冲突
代码复用
高维护性

模块化规范产品
commonjs=>nodejs,browserify
amd=>requirejs
cmd=>seajs

//模块化语法
//模块化功能主要由两个命令构成export和import
//export命令用于规定模块的对外接口
//import命令用于输入其他模块提供的功能
/*默认暴露
export default{
school:'atguigu',
change:function(){
console.log("我们可以改变你")
}
}
*/
//导入方式
//通用导入
//import * from "xxxx"
//解构赋值形式
import {school,teach} from "./src/js"
import {default as m3} from "xxxxxx"这个是针对默认暴露的
简便形式 import m3 from "xxxxxx"这个针对是默认暴露

---