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"这个针对是默认暴露