一、JavaScript概述

1、ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。

次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。

二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。

javascript遵守ECMA指定的标准，换句话说javascript就是ECMAscript的方言。

2、ECMAScript的历史
年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3

添加正则表达式

添加try/catch
  ECMAScript 4 没有发布
2009 ECMAScript 5

添加"strict mode"严格模式

添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7

增加指数运算符（**）

增加Array.prototype.includes

 

3、JavaScript的组成

平常所说的ES6就是指ECMAScript 6

一个完整的JavaScript 实现是由以下 3 个不同部分组成的：

    1.核心（ECMAScript）

    2.文档对象模型（DOM） Document object model (整合js，css，html)

    3.浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

4、JavaScript的特点

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、JavaScript引入方式

1、行内JS

<input type="button" value="点击我" onclick="javascript:alert('我被点击了')">

<!--onclick:点击触发一个事件，alert：弹出一个对话框-->

2、内部JS：script里的程序整个页面都可以用

<head>

    <meta charset="UTF-8">

    <title>JS内部定义</title>

    <script type="text/javascript">

        function Example(){  /*函数*/

            alert('我喜欢你')

        }

    </script>

</head>

3、外部JS

外部样式就是将JS写在一个单独的文件(.js文件)中，然后在HTML页面进行引入。

<script type="text/javascript" src="MyJavascript.js"></script> 

三、JavaScript语言规范

1、注释

单行注释：//

2、多行注释：/*注释内容*/

/*

多行注释

*/

3、对比

HTML注释：<!--注释内容-->

CSS注释：/*注释内容*/    单行多行都是用这个

JavaScript注释：

    单行注释：//

    多行注释：/*注释内容*/

4、结束符

JavaScript中的语句要以分号    ;   为结束符。

四、JavaScript语言基础

1、变量声明

    JavaScript的变量名可以使用数字，字母，_和$组成，不能以数字开头。

    声明变量使用var关键字

var name = "mingzai";

var age = 18;

2、注意事项

    1.变量名是区分大小写的

    2.推荐使用驼峰式命名规则(python中则推荐使用下划线的形式命名)

    3.保留字(关键字)不能用做变量名

    4.javascript和python一样是动态的语言，即定义的变量不需要声明是什么类型，例如：

        var a = 'xiaoming'   //定义一个字符串变量

        a = 18  //可以直接修改成数字类型的变量

3、补充

1.ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

例如：

{

 let a = 100;

 var b = 50;

}

a // Uncaught ReferenceError: a is not defined

b //

for循环的计数器，就很合适使用let命令，例如：

for (let i = 0; i < 10; i++) {

    代码

}

2.ES6新增const用来声明常量。一旦声明，其值就不能改变。

const ID = 1

ID //

ID = 2 //VM602:1 Uncaught TypeError: Assignment to constant variable.

3.保留字列表
abstract

boolean

byte

char

class

const

debugger

double

enum

export

extends

final

float

goto

implements

import

int

interface

long

native

package

private

protected

public

short

static

super

synchronized

throws

transient

volatile

保留字




五、JavaScript数据类型

1、JavaScript动态类型

var x;  // 此时x是undefined

var x = 1;  // 此时x是数字

var x = "xiaoming"  // 此时x是字符串 

2、数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 100   //

var b = 10.5   //10.5

var c = 12.13e3   //

还有一种NaN，表示不是一个数字（Not a Number）

就是说，如果你想把一个字符串转换成数字类型，那么这个字符串必须是全数字组成的才能转换，否则就不能转，

比如字符串'abc' 是不可以转成数字类型的，但是字符串'123'却可以转成数字类型。

常用方法：

parseInt(123)   //

parseInt('123')   //

parseFloat(123)   //

parseFloat('12.3')   //12.3

parseInt('abc')   //NaN

parseFloat('abc')   //NaN

3、字符串(String)

var a = "Hello"

var b = "world;

var c = a + b;

console.log(c);  // Helloworld

1.常用方法：






方法
说明






.length
返回长度




.trim()
移除空白




.trimLeft()
移除左边的空白




.trimRight()
移除右边的空白




.charAt(n)
返回第n个字符




.concat(value, ...)
拼接




.indexOf(substring, start)
子序列位置




.substring(from, to)
切片




.slice(start, end)
切片




.toLowerCase()
小写




.toUpperCase()
大写




.split(delimiter, limit)
分割







2.例子：

//长度

var s1 = 'hello world';

s1.length;  //11(length是属性，不是方法)

//去除空白

var s2 = '  hello  ';

s2;  //"  hello  "

s2.trim();  //"hello"(相当于python的strip())

s2.trimLeft();  //"hello  "(相当于python的lstrip())

s2.trimRight();  //"  hello"(相当于python的rstrip())

//返回第n个字符

var s3 = 'hello girl';

s3.charAt(0);   //"h"   相当于python的按索引找值

s3.charAt(11);   //""    没有值则返回空字符串

//拼接

var s4 = 'hello';

s4.concat('boy','girl');  //"helloboygirl"

//找元素的索引位置，跟python的index相似，但有不同

//indexOf接收两个参数，第一个参数是要找的元素，第二个参数是表示从哪里开始找，找不到就返回-1

var s4 = 'hello';

s4.indexOf('e',0);   //1   从索引为0开始找，找到元素e，e的索引是1

s4.indexOf('e',1);   //1   从索引为1开始找，找到元素e，e的索引是1

s4.indexOf('e',2);   //-1  从索引为2开始找，找不到元素e，返回-1

//切片的两种方式

substring：不支持负数，因为若第一个参数大于第二个参数，则会把两个参数互换，若参数是负数会把这个负数变成0

例如：substring(1,-5)  -->  substring(-5,1)  -->  substring(0,1)

slice：跟我们python中的切片一样，也支持负数

var s5 = 'hello world';

s5.substring(0,5);   //"hello"

s5.substring(0,-5);   //""   从0到0

s5.substring(1,-5);   //"h"  从0到1

s5.slice(1,-5);   //"ello "

//大小写

var s6 = 'Hello World';

s6.toLowerCase();   //"hello world"

s6.toUpperCase();   //"HELLO WORLD"

//分割

var s7 = 'hello world';

s7.split();  //["hello world"]  没有默认参数，不写参数不分割，但是还是生成了列表

s7.split(' ');  //["hello", "world"]   按照空格分割

s7.split(' ',1);   //["hello"]   第二个参数是代表返回的列表的长度

s7.split(' ',2);   //["hello", "world"]

s7.split(' ',3);   //["hello", "world"]   超出列表的长度，也相当于把整个列表的长度都返回

//拼接字符串一般使用“+”

var name = 'xiaoming';

var age = 18;

msg = name + age;   //"xiaoming18"

3.注意：slice和substring的区别

string.slice(start, stop)

string.substring(start, stop)：

两者的相同点：

如果start等于end，返回空字符串

如果stop参数省略，则取到字符串末

如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：

如果 start > stop ，start和stop将被交换

如果参数是负数或者不是数字，将会被0替换

silce()的特点：

如果 start > stop 不会交换两者

如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)

如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

4.模板字符串

ES6中引入了模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识（就是ESC下面那个键），用${}取值

它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

JavaScript模板字符串

var name = '明哥';

var msg = `I am ${name}`;  //"I am 明哥"

var msg2 = `I am ${name}

I am 18 year old`;

结果：

`I am 明哥

I am 18 year old`;

//直接定义多行字符串

var msg3 = 'I am ${name}

I am 18 year old';

结果：Uncaught SyntaxError: Invalid or unexpected token

python模板字符串

f'xxx' 或 F'xxx'  且以大括号 {} 表明被替换的字段，{}里面可以是字符串或者表达式

name = '小白'

msg = f'我叫{name}，今年{18}岁，性别{"男"}'

print(msg)  # 我叫小白，今年18岁，性别男

4、布尔值(Boolean)

区别于Python，JavaStript的true和false都是小写。

var a = true;

var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

5、null和undefined

null表示有值的，但是值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

var name    //此时声明了变量，但未初始化，默认值是undefined

6、对象(Object)

1.概念

JavaScript和python一样都是一切皆对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

2.数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [1234, "heiheihei"];

console.log(a[1]);   // "heiheihei"

3.数组的常用方法：






方法
说明






.length
数组的大小




.push(ele)
在尾部追加元素




.pop()
删除尾部的元素并返回删除的元素




.unshift(ele)
在头部插入元素




.shift()
在头部移除元素




.slice(start, end)
切片




.reverse()
反转




.join(seq)
将数组元素连接成字符串




.concat(val, ...)
连接数组




.sort()
排序




.forEach()
将数组的每个元素传递给回调函数




.splice()
删除元素，并向数组添加新元素。




.map()
返回一个数组元素调用函数处理后的值的新数组







4.数组的例子

//切片

var a1 = [1,2,3,4];

a1[1];   // 2

a1[6];   // undefined   超出范围就返回undefined

//数组的大小

a1.length;   //4

//增加删除元素

var a2 = [1,2,3];

//在尾部追加

a2.push(4);   //[1, 2, 3, 4]

//在尾部删除

a2.pop();   // [1, 2, 3]

//在头部增加

a2.unshift(0);   //[0, 1, 2, 3]

//在头部删除

a2.shift();   //[1, 2, 3]

//切片

var a3 = [1,2,3,4,5];

a3.slice(1,3);   //[2, 3]

a3.slice(1,-1);   //[2, 3, 4]

//把数组反过来

a3.reverse();   //[5, 4, 3, 2, 1]

//将数组元素连接成字符串

a3.join('+')   //"5+4+3+2+1"

//Python中的join

list1 = [11, 22, 33, 44]

ret = '+'.join([str(i) for i in list1]))

//连接数组(形成新的数组)

var a4 = [1,2,3,4];

new_a4 = a4.concat(5,6,7);   //[1, 2, 3, 4, 5, 6, 7]

new_a4_2 = a4.concat(['a','b','c']);   //[1, 2, 3, 4, "a", "b", "c"]

//关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

比较函数应该具有两个参数 a 和 b，其返回值(sort有函数作为参数时会按返回值进行比较)如下：

若 a 小于 b，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值

var a5 = [11,2,12,19,13];

a5.sort();   // [11, 12, 13, 19, 2]   默认按ASCII排序

function sortNumber(a,b){

return a -b }  // 定义一个排序函数

a5.sort(sortNumber);   // [2, 11, 12, 13, 19]

数组的删除splice接收三个参数：

第一个参数：从哪个位置开始删

第二个参数：删除数组的个数

第三个参数：在删除的位置新增的元素(可多个)

var a6 = [1,2,3,4,5,6];

a6.splice(0,1);

a6;    //[2, 3, 4, 5, 6]

a6.splice(0,2);

a6;    // [4, 5, 6]

a6.splice(0,1,7);

a6;    // [7, 5, 6]

a6.splice(0,1,8,9,10);

a6;    // [8, 9, 10, 5, 6]

补充：

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

5.JS中自定义对象，类似于python中的字典，key可以不加引号，key默认是字符串
var d1 = {'name':'小明',age:18};  //{name:'小明',age:18}

7、类型查询：typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句

对变量或值调用 typeof 运算符将返回下列值之一：

object - 如果变量是一种引用类型或 Null 类型的

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

例如：

typeof [1,2,3];   //"object"

typeof null;   //"object"

typeof NaN;   //"number"

typeof 1;   //"number"

typeof undefined;   //"undefined"

typeof 'a';   //"string"

typeof true;   //"boolean"

六、运算符

1、算数运算符

+   -   *   /   %   ++   --

2、比较运算符

>     >=    <     <=     !=     ==    ===    !==

注意：双等号比较的是值是否相同，三等号比较的是值和类型是否都相同

1 == “1”  // true

1 === "1"  // false

3、逻辑运算符

and    or    not

&&    ||      !

4、赋值运算符

=   +=    -=   *=   /=


												


											
Javascript初识之数据类型的更多相关文章
	

    
								
  1. JavaScript 中的数据类型
		
    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
    
		
    2. 
						
  2. 初识redis数据类型
		
    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
    
		
    3. 
						
  3. javaScript中的数据类型
		
    一.综述 javaScript中的数据类型分为两类: 简单类型:Boolean,Number,String 引用类型:Object 其他:undefined代表变量没有初始化,null代表引用类型为空 ...
    
		
    4. 
						
  4. Javascript中的数据类型之旅
		
    虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型, ...
    
		
    5. 
						
  5. JavaScript基础：数据类型的中的那些少见多怪
		
    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
    
		
    6. 
						
  6. 【译】Javascript中的数据类型
		
    这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...
    
		
    7. 
						
  7. ArcGIS API for JavaScript 中的数据类型【vs】GPServer的数据类型
		
    熟悉GPServer的同学肯定知道,GPServer在10.1的ArcMap后需要执行成功一次才能发布. 发布GPServer,可以是ArcMap的工具箱的工具,也可以是自己写的模型. 不管是ArcM ...
    
		
    8. 
						
  8. JavaScript 基本语法 -- 数据类型 & 变量
		
    JavaScript都有哪些数据类型呢? 在JavaScript里面,数据类型分为两类:原始类型(primitive type)和对象类型(object type) 1. 原始类型(我的理解,不可分割 ...
    
		
    9. 
						
  9. JavaScript中基本数据类型和引用数据类型的区别
		
    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 用 async/await 来处理异步
			
    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...
    
			
    2. 
						
  2. #WEB安全基础 : HTML/CSS | 0x8.1CSS继承
			
    CSS的一大特性——继承,怎么样没听说过吧,没了它我们修饰网页时就变得十足的麻烦 这是本节课准备的文件   这是others文件夹   先看看index.html,代码如下 <!DOCTYPE  ...
    
			
    3. 
						
  3. 关于Skyline沿对象画boundingbox的探讨
			
    先来说说为什么要搞这个?项目中经常遇到的一个操作就是选定对象,以前都是通过Tint设置对象颜色来标识选定对象,但是随着图层中模型增多,模型色彩丰富,会出现选定色与对象颜色对比不明显的情况.因为看到Te ...
    
			
    4. 
						
  4. TCP客户端
			
    TCP通信客户端-解决数据包接收不全的过程 背景:5个串口条码枪,通过MOXA Nport系列转换器,以TCPServer的形式推送扫描到的条码到客户端.5个条码枪均位于流水线上方的支架上,流水线货物 ...
    
			
    5. 
						
  5. 微信小程序（二）登录授权实现
			
    相对于上一节,这一节主要是动态获取数据,主要是对登陆信息的接收,以及页面获取授权按钮的相对相应(未授权时,显示,授权后不显示) 关键在于状态值的判断,以及对页面的不同响应(m-->v) wxml ...
    
			
    6. 
						
  6. Oracle 12c RAC 静默安装文档
			
    参考文档: https://docs.oracle.com/en/database/oracle/oracle-database/12.2/cwlin/index.html https://docs. ...
    
			
    7. 
						
  7. GCD多线程的一个全面的题目
			
    GCD多线程的一个全面的题目  
    
			
    8. 
						
  8. [RHEL 6]GPT分区--parted
			
    对于2T以上的硬盘,划分分区表需要GPT分区,RHEL 6中使用parted进行分区 用法:parted [选项]... [设备 [命令 [参数]...]...] 将带有“参数”的命令应用于“设备”. ...
    
			
    9. 
						
  9. CentOS7 Docker私有仓库搭建及删除镜像 【转】
			
    文章来源:centos7 Docker私有仓库搭建及删除镜像 如果不想用私有镜像库,你可以用docker的库 https://hub.docker.com 环境准备 环境:两个装有Docker 17. ...
    
			
    10. 
						
  10. 推荐六款炫酷的HTML5效果插件
			
    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...
    
			
    11.