淘先锋技术网

首页 1 2 3 4 5 6 7

ECMAScript - 初识 ECMAScript

目 录

1、编程语言

人与计算机之间的交流（二进制代码），用于向计算机发出指令,然后按照指令一步步完成响应的数据处理；
 
C
C++
C#
Java
Go
python
……
JS（JavaScript）（脚本编程语言）（基于浏览器的环境）

2、JavaScript 历史

起初它的主要目的是处理以前由服务器端负责的一些表单验证，并没有讲 javaScript 完全的运用起来

3、JavaScript 作用

传统功能：
 
1、表单数据处理；
2、对 HTML、 CSS 添加修改；（对网页动态的修改）
3、检测浏览器平台
……
 
现代功能：
 
1、TV 界面
2、移动端 APP 可以使用JavaScript写出来；(跨平台开发，劣势：性能不如原生开发的强)
3、PC 客户端
4、后端（NodeJS）
……

4、JavaScript 组成部分

1、ECMAScript（核心语法）：

  • 基础语法、变量、数据类型、函数、逻辑处理
  • ES5、ES6、ES7 （ES NEXT）指代的是 ECMAScript 的各种版本
  • 前期核心：ES3、ES6；
     

2、DOM （文档对象模型）

  • 通过 ECMAScript 去修改 HTML 和 CSS
     

3、BOM （浏览器对象模型）

  • 获取浏览器的信息、操作网页的历史记录、URL 处理

5、JavaScript 的使用

5.1 引入方式

  • 直接在标签中执行相应对的事件属性：
    <button type = "button" onclik = "alert(123)">按钮</button>；
  • 在 a 标签中的 href 中执行；
    <a href="javascript:;" target="_blank" rel="external nofollow" >默认超链接</a>
  • 在 HTML 中内嵌 JavaScript
    在 head 标签中加入 <script></script>
  • 将 JavaScript 单独写在一个文件中 （.js） (推荐使用)
    通过 <script src = "当前 JavaScript 文件路径"></script>
  • 浏览器控制台（一般使用于调试）

5.2 JavaScript 位置

  • head 结束标签之前
  • body 结束标签之前 （推荐使用）
  • HTML 渲染过程 ：
    • 多线程拉取资源
    • 渲染网页时单线程
    • 从上往下渲染（读行执行）
      css在头部，先加载样式，然后在加载布局，反之，会出现闪的一下
      JavaScript 在最后面，只有页面加载后才使用交互
  • 重绘、回流
    重绘是一个元素的外观变化所引发的浏览器行为；
    比如颜色改变，背景图片改变，阴影改变等，只要不影响元素本身相对于浏览器文档的位置只会触发重绘。
    重排是引起DOM树重新计算的行为；

5.3、JavaScript 语法规则

  • 区分大小写（A 与 a 的含义不一样）；
  • 命名的规则（小驼峰：backgroundColor）
  • 每条语句以 ；分号结尾
.

5.4、关于 JavaScript 中的输入输出

alert()：弹窗；
prompt()：输入弹窗；
document.write()：直接将内容写入网页进行展示；
console.log()：在控制台输出；

6、变量

6.1 什么是变量？

变化的一个量，高数计算机在内存中开辟一个存储空间，用于对数据进行保存。
 

6.2 创建变量（变量声明）

声明方式：

  • var
  • let
  • const
     

通过 var 关键字声明变量
var 变量名；
var 变量名 = 变量值；
 

注意：变量没有类型限制，可以随时赋予任意的一个值。

           var a = 'abc';
           a = 123;

 
三者之间的区别：

  • var 声明的变量有提升, let 和 const 声明的变量没有提升;
  • let 和 const 增加了块级作用域;
  • 在同一个作用域 var 可以重复声明变量, let 和 const 不能重复声明;
  • const 用于声明常量, 声明的时候必须赋值, 并且不能修改值 (但是引用数据可以修改值, 保证指针不变就可以);
  • let 和 const 会形成 暂时性死区
     

如果当前作用域 使用了变量 a 并且 当前块级作用域 通过 let / const 声明了这个变量, 那么声明必须放在使用之前：

 var a= 123;
   function (){
       console.log(a);
       let a = 456;
   }

6.3 变量命名规则

  • 变量名组成：字母、数字和符号（只能是下划线或测美元符号）组成；
  • 首字符不能是数字，以字母开头；
  • 区分大小写；
  • 小驼峰式命名：从第二个开始，首字母大写
  • 不能使用关键字和保留字；

7、数据类型

7.1 分类

  1. 基本 数据类型
  2. 引用 数据类型（复杂数据类型）
     

7.2 基本数据类型

字符串类型： （string）

       var str = '一只 小网虫'; //单双引号都可

数值类型： （number）

       var num = 123; //由阿拉伯数字组成，不需要添加引号

 
布尔值类型 （Boolean）
只有两个值 true 和 false
 
未定义： （undefined）
表示变量声明后, 并未赋值。
 
空： (Null)
代表没有对象, 可以用于销毁变量;

7.3 引用数据类型 – 对象 （object）

7.3.1 编程方式

面向过程(C语言)

分析解决问题的步骤,把这些步骤一步一步的实现.
       
注重: 解决问题的过程

面向对象(java语言)

把解决问题的方式分成各个对象,每一个对象通过不同的行为去解决问题.

注重: 那个对象能解决这个问题

 

7.3.2 面向对象的两个概念

类:
对拥有共同特征的一类事物进行抽象, 比如说 人类
 

对象:
就是类具体的一个实例(特指某一个). 比如说 法外狂徒张三
 

什么是对象？
可以理解为，一个变量可以存储多个数据。

   var obj = {
       属性：属性值（字符串、数值、布尔值、对象）；
       ...
   }

什么是属性?

  属性就是一个静态数据。

什么是方法?

  就是一个函数，一段可以执行的代码,但是该代码必须主动调用，才会执行。

方法的定义：

   var obj = {
       方法名：function（）{
           //可执行代码
       }
   }

方法的调用：

   obj.方法名（）；

js 中 一切都是对象

7.3.3 创建对象

字面量的方式创建

   var object= {}

构造函数

   var obj = new object()

 

7.3.4 对象结构

属性：静态的数据 (任意类型的数据类型: 字符串 \ 数值 \ 布尔值 \ 对象 \ 数组)
方法：动态的, 也就是函数, 用于执行一些逻辑的。
 

对象结构：

       var 变量名 = {
           属性名：属性值，
           属性名： 属性值，   //  属性值可以是任意数据类型    undefined 和 null 没有意义
           ...
       }

 

7.3.5 对象属性的操作

  var obj = {
  	name: "一只小网虫",
  	age: 20
  }

获取

   对象.属性名
   obj.name;

设置 (赋值)

   对象.属性名 = 属性值
   obj.height = '180cm'

另外一种获取的方法

   对象['属性名']

优势：
 
obj.name 这种写法 不能和关键字冲突, 而 […… ] 内可以写表达式

   var a = 'nam' 
   console.log(obj[a + 'e']);

删除对象属性：

   对象.属性名 = null;     //置空

   delete 对象.属性名;     //删除

7.3.6 对象遍历

for in

   for(var i in obj){  //
       console.log("属性名:", i , "属性值: ", obj[i]);
   }

   Object.keys(对象名)     //返回对象所有的属性名
  
   Object.values(对象名)     //返回对象所有的属性值

7.4 构造函数 (ES5 类)

字面量创建对象：

      var student= {
          name: 'jack',
          age: 16,
          city: '成都',
          grade: '高二'
      }

批量创建对象：

(1) 工厂函数: 批量化创建对象

  	function createStudent(name, age, city, grade){
         //第一步, 创建空对象
         var obj = new  Object()

         //为该对象添加属性添加方法
         obj.name = name;
         obj.age = age;
         obj.city = city;
         obj.grade = grade;

         //第三步、返回该对象
         return obj;
     }

      var s1 = createStudent('lily', 12, '成都', '六年级');
      var s2 = createStudent('lucy', 12, '成都', '六年级');

      console.log(s1);

工厂函数结论： 可以解决 创建多个相似对象的问题,；
但是也有缺点：每次调用工厂函数创建的对象都是独立的 object，不存在联系；
 

(2) 构造函数 (批量化 类)

      function Student(name, age, city, grade){

          //会隐式创建 obj = {}
          //通过 this 修改上下文 指向 obj
          this.name = name;
          this.age = age;
          this.city = city;
          this.grade = grade;

          //隐式操作: return obj;
      }

      Student.prototype.country = '中国'; //可以实现对象继承该属性

      // 使用:  实例化

      var s3 = new Student('john', 14, '成都', '初一');
      var s4 = new Student('boob', 14, '成都', '初二');
      console.log(s3, s4);

 
传递的参数也可以对象的形式：

      function Student(prototype){
  		prototype = prototype || {} // 参数默认值 
          //会隐式创建 obj = {}
          //通过 this 修改上下文 指向 obj
          this.name = prototype.name || 'john';
          this.age = prototype.age || 12;
          this.city = prototype.city || '成都';
          this.grade = prototype.grade || '初一';

          //隐式操作: return obj;
      }

      Student.prototype.country = '中国'; //可以实现对象继承该属性

      // 使用:  实例化

      var s3 = new Student({
  		name：'john',
  		 age：14,
  		 city：'成都',
  		 grade：'初一'
  	  });

      console.log(s3);

这种写法的好处就是可以不用按照第一种方法的参数传递顺序去写;
 

7.4.1 构造函数的写法

  • 构造函数使用大驼峰, 用于区别普通函数;
  • 函数内部使用 this 关键字为对象添加属性和方法;
  • 调用构造函数时 必须通过 new 关键字.
     

7.4.2 new 关键字的作用

1、会在函数内部创建一个对象;
2、修改函数的上下文, 也就是将函数内部的 this 指向刚刚创建的 对象;
3、将空对象内部的原型指向构造函数的原型;
4、如果函数内部没有 return , 那么就会自动返回创建的对象.

7.5 数据类型检测

语法： typeof 变量

       typeof str ；

说明：null 和 object 都会返回 object，是因为底层都是用 二进制 表示，在 JavaScript 中，二进制前三位都为 0 的话，就会判断为 object 类型，null 的二进制表示全都为 0；

7.6 其他

十进制：常用
八进制：以 0 开头的数字，如 017
十六进制：以 0x 开头的数字，如：0xF
二进制：由 0 与 1 组成；
 

浮点数精度问题（浮点数就是小数）

  • 二进制浮点数不能非常精确的表述小数。
  • 先转整数在转小数

8、关于数据类型的转换

8.1 隐式转换

   var n1 = true;
   var n2 = 'true';
   console.log(n1 == n2); // 两个 = 代表相等   //false

   var s1 = '123';
   var s2 = 123;
   console.log(s1 == s2);  //true

   var s3 = '123';
   var n3 = 123;
   var z = s3 + n3;
   console.log(z, typeof z);   //123123  string

8.2 强制转换

主要是三个函数的使用

       Number（）
       String（）
       Boolean（）

(1) 布尔值的转换：
 
Boolean( 变量 )

  • 非空字符串转换都是 true;

  • 任何非 0 值都为 true；

  • 任何对象都为 true；

  • false 为 false；

  • 空字符串 为false；

  • 0 和 NaN 为false；

  • undefined 为false；

 
(2) 字符串的转换：
 
String（变量）

  	console.log(String(str));
  	console.log(String(num)); // '123'
  	console.log(String(bool)); // 'true'
  	console.log(String(obj)); // '[object Object]'

  	变量.toString（） 不可以转换 Null 和 Undefind
  	console.log(typeof num.toString());

(3) 数值的转换：
 
Number(变量)

  • 如果是数值类型，会保留小数点；
  • 如果是字符串，则转为 NaN；
  • 布尔值 true 转为1，布尔值 false 转为 0；
  • 对象是 NaN；
  • NaN（not a number）不是数值，NaN 与 NaN 不相等；
  • 非数值不相等
     

parseInt(变量)

  • 从左往右开始转，只要遇到数值就可以转，如果一开始遇到非数值，就直接返回为 NaN
  • 保留整数位,去掉小数位
     

parseFloat( 变量 )

  • 从左往右开始转，只要遇到数值就可以转，如果一开始遇到非数值，就直接返回为 NaN
  • 保留小数位

9、运算符

9.1 算数运算符

   +：加法运算
   -：减法运算
   *：乘法运算
   /：除法运算
   % ：取余数
   ++：自增
   --：自减

'++' 的理解：

  • 在没有赋值操作的时候，++ 放在变量前面和放在变量后面是一样的；
  • 如果 ++ 放在了变量的前面，先对变量 +1 然后在执行当前这行代码；
  • 如果 ++ 放在了变量后面，则是先执行这行代码，完成之后对变量进行 +1；
  • a++ 先运算在 + 1；
  • ++a 先+1 在运算；
     

9.2 拼接符

'+' 不同于其他的几个符号：

  • 运算中只要有一方是字符串，就会把另一方页转换位字符串，然后链接在一起；
  • 但是 '-'、'*'、'/'、只要一方是数值，另一方也会被转为数值

 

  	1 + '1' == '11';
  	true + true == 2;
  	4 * '3' == 12;
   console.log(4 * {}); // NaN

 

9.3 赋值运算符

   =		//赋值
   +=     //i += 1； -->  i = i + 1;
   -=
   *=
   /=

9.4 关系运算符

   ==          //判断前后两个数据是否相等
   ===         // 判断前后两个数据是否全等，即：值和数据类型是否都相等;
   !=          //不相等
   !==         //完全不相等
   >           //是否大于
   <           //是否小于
   >=          //是否大于等于
   <=          //是否小于等于

9.5 逻辑运算符

只要有逻辑运算符的参与，返回结果就是 true 和 false

   &&      // 与， 同时
   ||      // 或， 二选一
   ！      // 非， 取反   n = 123;  !n = false;

9.6 优先级

  • 逻辑非 优先级最高；
  • 其次是算术运算符；
  • 然后是关系运算符；
  • 然后是 逻辑与、逻辑或；
  • 最后是赋值运算符；
     

通过加 '()'可以调整优先级。
 

9.7 三元运算符

语法：
条件 ？ 条件为 true 执行的表达式 ： 条件为 false 执行表达式；

  	x > y ? '正确' : '错误';

  	x = 1,
  	y = 2,
  	结果： 错误;

  	x = 3,
  	y = 2,
  	结果： 正确

说明：二选一
 

9.8 算数运算比较：

  		表达式					 比值结果
  	* null == undefined     ==>     true
  	* 'NaN' == NaN          ==>     false
  	* 5 == NaN              ==>     false
  	* NaN == NaN            ==>     false
  	* false == 0            ==>     ture
  	* ture == 1             ==>     ture
  	* ture == 2             ==>     false
  	* undefined == 0        ==>     false
  	* unll == 0             ==>     false
  	* '100' == 100          ==>     ture
  	* '100' === 100         ==>     false

10、转义字符

在这里插入图片描述

相关文章

在这里插入图片描述