Javascript初识
Posted tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript初识相关的知识，希望对你有一定的参考价值。
一、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 // 50 for循环的计数器，就很合适使用let命令，例如： for (let i = 0; i < 10; i++) { 代码 } 2.ES6新增const用来声明常量。一旦声明，其值就不能改变。 const ID = 1 ID //1 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 //100 var b = 10.5 //10.5 var c = 12.13e3 //12130 还有一种NaN，表示不是一个数字（Not a Number） 就是说，如果你想把一个字符串转换成数字类型，那么这个字符串必须是全数字组成的才能转换，否则就不能转， 比如字符串‘abc‘ 是不可以转成数字类型的，但是字符串‘123‘却可以转成数字类型。 常用方法： parseInt(123) //123 parseInt(‘123‘) //123 parseFloat(123) //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可以不加引号
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、赋值运算符 = += -= *= /=