一、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. linux部署二：网卡配置和Yum源的替换
			
    一,初次登陆: 1.登陆(用root登陆)(1).账户名root(2).密码 ....2.工作界面切换A.Ctrl + alt + F1 : 图形化界面B.Ctrl + alt + F2----F6  ...
    
			
    2. 
						
  2. TS学习随笔（七)->声明文件
			
    now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的就是在HTML中通过script标签引入,然后就可以使用全局变量$或者jQuery了 我们通常这 ...
    
			
    3. 
						
  3. Belgrade Azure 2019-2-11活动感悟
			
    这是<国外线下技术俱乐部建设>系列文章之一.   活动网址:https://www.meetup.com/Azure-UG-Srbija/events/258673179/ 活动内容:Az ...
    
			
    4. 
						
  4. 案例解析｜政府信息化的BI建设应用 .
			
    一.行业背景 某建设厅综合监管信息化平台,是政企业务协同的平台之一,同时兼具协作.门户.办公应用集成.用户权限管理等多项功能.在此要求基础上,选择中间件基础技术平台,可以在最大程度满足平台功能需求的前 ...
    
			
    5. 
						
  5. Android开发中如何使用RecyclerView
			
    介绍 在Android应用程序中,只要您想显示数据列表,就可以使用 RecyclerView . 早期的Android提供 ListView 了同样的东西. RecyclerView 可以被认为是一个 ...
    
			
    6. 
						
  6. C 存储类
			
    存储类定义 C 程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在它们所修饰的类型之前.下面列出 C 程序中可用的存储类: auto.register.static.extern auto  ...
    
			
    7. 
						
  7. Bootstrap -- 表格样式、表单布局
			
    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
    
			
    8. 
						
  8. 爬虫系列二(数据清洗--->正则表达式)
			
    一 正则常识 模式 描述 \w 匹配字母数字及下划线 \W 匹配非字母数字及下划线 \s 匹配任意空白字符,等价于 [\t\n\r\f]. \S 匹配任意非空字符 \d 匹配任意数字,等价于 [0-9 ...
    
			
    9. 
						
  9. vue  路由变化页面数据不刷新问题(缓存)
			
    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...
    
			
    10. 
						
  10. 3.20 总结  java程序流程控制
			
    
			
    11.