一、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. Vue的使用
			
    mvc model view controller mvvm m=>model v=>view 双向数据绑定 数据在视图呈现:在表单里用v-model,在表单外用{{}},也可以用v-te ...
    
			
    2. 
						
  2. ajax发送请求跨域 - uri java代理
			
    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...
    
			
    3. 
						
  3. springboot 使用 redis
			
    springboot 自己是实现了一套 redis 缓存框架, 地址: https://www.cnblogs.com/huanggy/p/9473822.html, 通过配置即可轻松愉快地实现 某些 ...
    
			
    4. 
						
  4. (办公)mysql连接不上(java.sql.SQLException: null,  message from server: "Host 'LAPTOP-O0GA2P8J' is not allowed to connect to this MySQL server")(转)
			
    转载自csdn文章:https://blog.csdn.net/Tangerine_bisto/article/details/803461511.对所有主机进行访问授权 GRANT ALL PRIV ...
    
			
    5. 
						
  5. MySQL 使用Navicat连接MySQL8出现1251错误
			
    安装了MySQL8.x.x后使用Navicat连接总是出现1251错误,故在此记录一下解决方法. 错误提示 1251-Client does not support authentication pr ...
    
			
    6. 
						
  6. 07-Vue的基础使用
			
    vue的介绍 前端框架和库的区别 nodejs的简单使用 vue的起步 指令系统 组件的使用 过滤器的使用 watch和computed 钩子函数 渐进式的JavaScript框架 vue react ...
    
			
    7. 
						
  7. Xamarin移动开发的优点和缺点
			
    在考虑iOS或Android应用程序开发时,我们大多数人会首先考虑Objective-C vs Swift和Java.作为本地技术堆栈,当涉及到iOS和Android应用程序开发时,它们自然是最常用的 ...
    
			
    8. 
						
  8. 前后端分离djangorestframework——认证组件
			
    authentication 认证是干嘛的已经不需要多说.而前后端未分离的认证基本是用cookie或者session,前后端分离的一般用token 全局认证 先创建一个django项目,项目名为drf ...
    
			
    9. 
						
  9. Go 语言笔记
			
    Go 语言笔记 基本概念 综述 Go 语言将静态语言的安全性和高效性与动态语言的易开发性进行有机结合,达到完美平衡. 设计者通过 goroutine 这种轻量级线程的概念来实现这个目标,然后通过 ch ...
    
			
    10. 
						
  10. RabbitMQ广播：direct模式
			
    一. 消息的广播需要exchange:exchange是一个转发器,其实把消息发给RabbitMQ里的exchange fanout: 所有bind到此exchange的queue都可以接收消息,广播 ...
    
			
    11.