|
一 JavaScript 简介 1 JavaScript基本介绍 1 JavaScript 简称JS，是一种动态的弱类型脚本解释型语言，和HTML,CSS并成为三大WEB核心技术，得到了几乎所有主流浏览器的支持 2 JavaScript 历史 1994年，网景Netscape公司成立并发布了Netscape navigator浏览器，占据了很大的时长份额，网景意识到WEB需要动态，需要一种技术来实现
由于IE的捆绑销售行为，网景的单一浏览器时长萎缩，从1990年的90%下降到2006年的1%,1999年网景被AOL收购，收购不就，netspace公开了浏览器代码，并创建了Mozilla组织，Mozilla组织使用Gelo引擎重写浏览器，当然Mozilla将Geko引擎发布了Firefox浏览器 3 网景的技术 HTTP cookie ，解决HTTP无状态 4 ES ES，ECMAScript是由ECMA国际(前身为欧洲计算机制造协会，英文名称是European Computer Manufactures Association)通过ECMA-262标准化的脚本程序设计语言，该语言被广泛应用于互联网 JavaScript是商品名，目前商标权在Oracle公司手中，ES是标准名。 根据ES标准，有很多实现引擎，其中包括JavaScript或JScript，他们都是ECMA-262标准的实现和扩展。 1997年，制定了首个ECMA-262 1999年12月，EC3，支持更强大的正则表达式 ES4 太过激进，最终被放弃 2009年，ES5发布，得到广泛支持，支持严格模式，支持Json 2015年,ES6发布，引入非常多的新的语言特性，还兼容旧版本的特性，ES6之前按照版本号命名，从ES6开始使用年份作为版本号，ES6 及ECMAscript 2015. 5 之前浏览器中兼容问题 运行HTML，CSS，JS技术都在发展，标准版本很多，浏览器内嵌的引擎实现不太一致，甚至有不按照标准实现，或者减少实现，或者改变实现，或者增加的功能，如IE，就导致了开发人员负担，很难做到一套代码可以兼容的跑在多种浏览器中，甚至不能跑在同一种浏览器的不同版本中。 6 V8 引擎 就在浏览器IE一家独大时，Firefox和Chrome开始变强 2008年9月2日，Google的Chrome浏览器发布，一并发布的js引擎，就是V8引擎，V8使用BSD协议开源 V8引擎支持C++开发，将JavaScript编译成了机器码，而不是字节码，还是用很多优化方式提高性能，因此，V8引擎速度很快。 V8 引擎还可以独立运行，可以嵌入到其他任何C++程序中。 V8 引擎的诞生，使得服务器端运行JS称为了方便的事情。 7 Nodejs nodejs是服务器端运行JavaScript的开源的，跨平台的运行环境 nodejs原始作者瑞安达尔于2009年发布，使用了V8引擎,并采用事件驱动，非阻塞异步IO模型 2010年,npm软件包管理器诞生，通过它，可以方便的发布，分析nodejs的库和源代码。 nodejs4.0引入了ES6的语言特性。 8 安装组件 需要安装nodejs和visual studio code nodejs visual studio code 插件NodeExec和汉化包安装 重新启动软件即可生效， 二 JavaScript基础 1 注释，常量，变量 1 注释 和C 、Java一样 注: 使用快捷键F8运行代码，其代码必须是已经保存的文件，不能是空，F8可能和有道词典快捷键冲突，建议在此运行期间不运行有道词典。 2 常量和变量 1 标识符
2 标识符的声明 var 声明一个变量 JS中的变量声明和初始化时可以分开的 console.log(a) // 后面声明的变量，前面可以使用，但没意义 var a //只是声明，并未赋值，其类型是undefined， let b //声明为块变量 console.log(1,a,b) //打印 a=1 //变量赋值，不规范化操作，不推荐，在严格模式下回导致异常。在赋值之前不能引用，因为未为进行声明，其赋值的结果是全局作用域 b='123' console.log(2,a,b) const c=100 //定义常量 console.log(c) var d=10 //规范声明并初始化 console.log(3,d) c=200 //修改常量值,不可修改，因为其是常量 console.log(4,c) 结果如下 常量和变量的选择 3 函数对作用域的控制 function test(){ var x=10; //声明并初始化x y=20; //声明vi能够初始化y console.log(x,y) } test() console.log(x,y) //此处在函数中，其所有参数皆不能冲破作用域 // x=100 // console.log(x) 结果如下 函数本身天生就是一个作用域 4 提升作用域 其实就是将声明定义到最前面罢了,及就是先调用，再定义 console.log(a) console.log(b) console.log(c) console.log(d) console.log(e) var a=200; // 提升作用域，只有var定义变量的方式可以提升作用域 var b; const c=300; //此处不能提升作用域 let d; e=300; 结果如下 2 数据类型 1 基本数据类型介绍
ES是动态语言，弱类型语言 2 类型转换 1 字符串类型转换 console.log(a=1+'test',typeof(a)) // typeof:打印类型 console.log(a=false+'test',typeof(a)) //和布尔类型运算 console.log(a=null+'test',typeof(a)) //和null比较 console.log(a=true+'test',typeof(a)) console.log(a=undefined+'test',typeof(a)) //和数字 结果如下 2 数字类型转换 console.log(a=1+false,typeof(a)) console.log(a=1+true,typeof(a)) console.log(a=1+null,typeof(a)) console.log(a=1+undefined,typeof(a)) 结果如下 3 布尔类型转换相关 console.log(a=false+undefined,typeof(a)) console.log(a=true+undefined,typeof(a)) console.log(a=false+null,typeof(a)) console.log(a=true+null,typeof(a)) console.log(a=true & '',typeof(a)) //位运算 console.log(a=undefined && true,typeof(a)) //与运算 4 短路 True是透明的，false则直接就是短路，返回直接就是false，类型是布尔。true主要是看后面的情况 console.log(a=false && null,typeof(a)) //如果前面是false，则返回结果是false，且类型是布尔类型 console.log(a=false && 'zhangbing',typeof(a)) console.log(a=true && '32534534',typeof(a)) //如果前面是true，则以后面为准 console.log(a=true && '' ,typeof(a)) 5 总结: 弱类型，不需要强制转换
遇到字符串，加括号就是拼接字符串，所有非字符串隐式转换为字符串 3 字符串定义及操作 1 定义 将一个值一单引号或双引号引用后便形成了字符串 let a="a\"aaaaaa" // 可使用转义符号 let b='adadsaasd' //单引号定义 let c="asfsdfsadfsdf'sdfsdfsdfsdf'" //混合定义 let d=`'abcd'` //反引号定义 let e=`x= ${a} y=${b}` //插值，类似于Java中的替换和python中的format console.log(a,b,c,d) console.log(e) 结果如下 2 转义字符
3 字符串操作 支持索引，切片，查询，替换和链接 console.log('adasddasdasd'.indexOf(1)) //查找位置，若不存在，则返回-1 console.log('abced'.indexOf('c')) //获取对应位置 console.log('12345'.charAt(4)) //索引获取元素 console.log('1234'.concat('666')) // 元素追加 const a='123456' //定义一个常量 console.log(a[3]) //通过索引获取元素 console.log(a.toUpperCase()) //大写转换 console.log(a.slice(1,3)) //切片，左闭右开 1,2处的元素 console.log(a.slice(-3,-1)) //45 const url=' www.baidu.com ' console.log(url.split('.')) //字符串分割 console.log(url.startsWith('www')) //匹配字符串起始，返回false或true console.log(url.substr(3,6)) //从索引为3开始6个字符 console.log(url.substr(3,6)) //从索引为3开始到索引为6结束 console.log(url.replace('com','edu')) //字符串一替换 console.log(url.trim()) //取出两边的空白字符 4 数值类型number
在JS中，数据均为双精度浮点型范围只能在-(2^53-1)和2^53-1之间，整数类型也不例外，数字类型还有三种符号值:+Infinity(正无穷)，-Infinity(负无穷)和Nan(not-a-number非数字) 二进制0b0010,0B100.
常量属性 var biggestNum=Number.MAX_VALUE; //最大值 var smallestNum=Number.MIN_VALUE; //最小的大于0的数 var infiniteNum=Number.POSITIVE_INFINITY; var negInfiniteNum=Number.NEGATIVE_INFINITY; var notANum=Number.NaN; 数字方法
内置数学对象Math console.log(typeof(parseInt('1234123423423')),'134234') //转换为数值类型 console.log(isNaN(10)) //判断是否为NaN console.log(isFinite(10/3)) console.log(Math.abs(-1)) //绝对值 console.log(Math.random()*1000) //生成随机数 三 运算符 1 算数运算符
单目运算符，自增和自减只针对一个参数的运算符 let i=0; a=i++ //此处是先用后加，因此其a的值应该是0，之后加1 console.log(a) b=++i; //此处是先加后用，此处的b的值应该是i为1的基础是加1，及为2 console.log(b) c=i++; //此处是先用，及c为2 console.log(c) 结果如下 其中单目运算符的优先级高于双目运算符。 相关习题 let i=0; a=(++i+i+++i+++i) //其中单目优先级高，则可拆解为 ++i + i++ + i++ +i //++i结果为1 ，i++结果i为1 i++ 结果i为2 i的结果为3 最终为1+1+2+3=7 console.log(a) 结果如下 此题主要考虑两个点 1 单目运算符优先级高于双目运算符 2 比较运算符
console.log('1'==1) //此处为宽松模式，进行类型转换，此处为true console.log('1'===1) //此处为严格模式，此处返回为False console.log('200'>300) //此处为true，进行了类型转换 console.log('2a'<200) //此处为false，此处的2a是不能转换为数字的，因此不能参与比较，因此其返回值为false console.log(Number.MAX_VALUE>10000) //和最大比较，返回为true console.log(Number.MIN_VALUE < 0.00001) //和最小比较，范围为true console.log(Number.MAX_VALUE>Number.MIN_VALUE) //最大和最小比较，返回为true 结果如下 3 逻辑运算符
这些运算符和其他高级语言相同。支持短路。 4 位运算符
5 三元运算符 条件表达式?真值:假值，邓建与简单的if ...else 结构 console.log(('3'>30)?'真':'假') console.log((4<5)?'假':'真') 6 逗号操作符 JS 运行多个表达式写在一起的情况 console.log(a,b,c) var a=100,b=200,c=300 //提升作用域，会定义三个元素 结果如下 7 运算符优先级 8 其他
instanceof 要求必须明确使用类型定义变量，就是对象必须是new关键字声明创建的，它可以用于继承关系的判断 typeof 就是返回对象的类型字符串 delete删除对象，属性，数组元素 a=new String('abcd') b=new Number(123) console.log(a instanceof String) console.log(b instanceof Number) console.log(typeof(a)) console.log(typeof(b)) console.log(typeof(100)) console.log('--------------delete-----------') x=42 var y=43 let z=60 myobj=new Number(); myobj.h=4 //增加属性 console.log(delete x); //隐式声明使用delete能够删除成功 console.log(delete y); //var声明的不能删除 console.log(delete z); //let声明的依然不能删除 console.log(delete myobj.PI) //不能删除预定义的对象， console.log(delete myobj.h) // 自定义的属性变量是可以删除的 console.log(delete myobj) //自定义的对象可以删除，因为其是隐式声明，因此可以删除 console.log('+++++++++++++++++++') var trees = new Array('redwoord','bay','cendar','cak','maple') for (var i=0;i<trees.length;i++) console.log(trees[i]) console.log('====================') delete trees[3];//删除其中的元素,其数组不会少，只会在当前索引对应的数据变为undefined for (var i=0;i<trees.length;i++) console.log(trees[i]) console.log('-------------object----------------') let mycar ={ make:'Honda', model:'Accord',year: 2019 }; console.log('make' in mycar); //true console.log('model' in mycar); //true 结果如下 四 JavaScript控制语句 1 条件判断语句 1 if 判断语句 if (cond1) { } else if (cond2) { } else if (cond3) { } else { } 条件为false的等效 其他的将均被视为True,如空列表。 if ([]) { let d=4;//定义为块变量，其不能穿透if var e=5; //var 定义，能够穿透if f=6; //定义，能够穿透 if (true) { console.log(d); console.log(e); console.log(f); g=10; var h=11; let t=13;//定义为块变量，其不能穿透if } } console.log(h,g,f) console.log(t) 结果如下 2 switch...case 分支语句 switch () { case label_1: statements_1 [break;] case label_2: statements_2 [break;] ... default: statements_def [break;] } let a=3 switch (a) { case 1: console.log(1) break; case 2: console.log(2) break; case 3: console.log(3) break; default: console.log(4) break; } 结果如下 switch的穿透效果，直到碰见break为止。 let a=3 switch (a) { case 1: console.log(1) case 2: console.log(2) case 3: console.log(3) default: console.log(4) } 结果如下 2 循环 1 for 循环 //C风格for循环 for ([initial];[condition];[increment]) { statement } arr=[10,20,30] for (let x=0;x<arr.length;x++){ console.log('i',arr[x]) } console.log('+++++++++++++++++') for (let j=0;j<arr.length;j++,j++) { //注意，此处是逗号(i++,i++) console.log('j',arr[j]) } // for (z=0;z<arr.length;) { // 此处是死循环，因为没有增加条件 // console.log(arr[z]) // } for (let a=0,b=200;a<arr.length;a++,b++) { // 多条件操作 console.log(a,arr[a],b); } for ( let z in arr) { //此处获取到的是索引 console.log(z,arr[z]) } for (let w of arr) { //此处获取到的是值 console.log(w) } let obj={'a':1,'b':2,'c':3} for (let x in obj) { //使用for循环处理对key的访问 console.log('obj',x) } // for (let y of obj) { //此处不能实现，因为其不能迭代对象 // console.log(y) // } 结果如下 注意：for in 循环返回的是索引或者key,需要间接访问到值。 3 while循环和do...while 循环 while 循环一般适用于死循环，while循环是先判断，do...while循环是先执行，后判断。 while (condition){ statement } do { statement } while(condition) 先进入循环，然后判断，为真就继续循环 let x=10; while (x--){ console.log(x) } 结果如下 let x=10; do { console.log(x) }while(x--) 结果如下 3 break 和 continue break 结束当前循环，直接退出这个循环体 练习 for (i=1;i<10;i++) { line=" " for (j=1;j<=i;j++){ line += `${j}*${i} = ${i*j} ` if (i==j) console.log(line); } } 五 函数 1 函数基础 1 基础函数 函数： 函数也是对象
格式如下 function 函数名(参数列表) { 函数体; return 返回值； } 示例如下 function add(x,y){ return x+y; } console.log(add(4,5)) 结果如下 2 函数表达式 使用表达式来定义函数，表达式中的函数名可以省略，如果这个函数名不省略，也只能用于该函数的内部。 1 基础函数表达式 const add =function _add(x,y) { return x+y; } console.log(_add(4,5)) 结果如下 2 递归调用 const add =function _add(x) { if (x==1){ return x; } return _add(x-1)+x //递归调用，该函数只能在其内部被调用 } console.log(add(10)) 结果如下 3 匿名函数 const add =function (x,y) { //匿名函数 return x+y; } console.log(add(4,5)) 4 函数和函数表达式 console.log(show) function show(){ //函数可以提升作用域 console.log('show') } console.log(add) var add=function(){ //函数表达式则不能提升作用域 return 1; } 结果如下 5 总结 函数，匿名函数，函数表达式的差异 2 高阶函数 1 基础 高阶函数：参数为函数或返回值为函数的函数称为高阶函数 function a(){ console.log('a') return function b(){ console.log('b') return 'b' //函数必须有返回值，否则，返回为undefined } } console.log(a()) //调用外层函数 console.log(a()()) //由于a返回值函数，因此可以使用括号来进行相关的调用操作 结果如下 2 计数器 let counter=function() { let i=0; function _fun(){ return ++i; } return _fun } c=counter() console.log(c()) console.log(c()) console.log(c()) console.log(c()) 结果如下 3 练习 实现map函数的功能，传入一个函数，传入一个值，输出一个值处理后的情况，如输入1,2,3,4，输出为1 4 9 16 及平方 const map1= function (fn,arr){ newarry=[]; for (i in arr){ newarry[i]=fn(arr[i]); } return newarry; } const sq = function(x){ return x*x; } console.log(map1(sq,[1,2,3,4])) 3 箭头函数 箭头函数就是匿名函数，它是一种更加精简的格式
箭头函数参数
箭头函数返回值 如果函数体部分有多行，就需要使用{},如果有返回值则使用return。
将上述实例中的函数修改为箭头函数 const map1= (fn,arr) => { newarry=[]; for (i in arr){ newarry[i]=fn(arr[i]); } return newarry; } const sq = (x) => x*x; console.log(map1(sq,[1,2,3,4])) 结果如下 const map1= (fn,arr) => { newarry=[]; for (i in arr){ newarry[i]=fn(arr[i]); } return newarry; } let new1 = map1((function (x) {return x*x}),[1,2,3,4]) //函数 let new2=map1((x)=> {return x*x},[1,2,3,4] ) //去除function ，将后面的变为(x) => {return x}形式 let new3 =map1((x)=> x*x,[1,2,3,4]) //若只有一个返回值，则可以省略{}，但{} 和return是同时存在，因此可以写成如下 let new4 =map1( x => x*x,[1,2,3,4]) //如果只有一个参数，则可以省略() console.log(new1) console.log(new2) console.log(new3) console.log(new4) 结果如下 4 函数参数 1 基本参数传递 const add = (x,y) => x+y; console.log('add',add(4,5)) const add1 = (x,y=5) => x+y; //支持默认参数 console.log('add1',add1(4)) const add2 = (x=6,y) => x+y; console.log('add2',add2(1)) //此处默认会将x=6代替为x=1,而y的值为undefined其传入的值为add2(1,undefined) console.log('add2',add2(1,10)) console.log('add2',add2(y=10,z=20)) //此处的结果为30，其不关心形式参数，此处为add2(10,20) console.log('add2',add2(a=1000,b=3000,c=4000)) //多传递参数没错，只匹配前面的 结果如下 JS 基本参数总结 2 可变参数(rest parameters 剩余参数) const add = (...args) => { // 可变参数 ，默认结果为列表 result=0; console.log(args); for (let x in args) { result += args[x]; } return result; } console.log(add(1,2,3,4,5)) 3 实参解构 和python 类似，JS提供了参数解构，依然使用了...符号来解构。 const add =(...args) => { console.log(args) } add(1,2,3,4) l1=[1,2,3,4] add(l1) //参数解构 console.log(...l1) add(...l1) 结果如下 4 arguments对象 函数的所有参数都会被保存在一个arguments的键值对字典对象中。 (function (p1,...args) { console.log(p1); console.log(args); console.log('---------------'); console.log(arguments,typeof(arguments)); for (let x of arguments) console.log(x); })('abcd',1,2,3,4,5) //此处是调用操作 结果如下 全局对象 console.log(arguments) 结果如下 在函数外，其指的是全局的，在函数内，其是函数中的参数 5 表达式 基本表达式和python差不多 function * inc(){ //使用* 来定义生成器 let i=0; while (1) yield (++i); } g=inc() //实例化生成器 console.log(g.next().value,g.next()) //执行生成器调用 console.log(g.next().value) console.log(g.next().value) console.log(g.next().value,g.next()) 结果如下 每次调用next()方法返回一个对象，这个对象包含两个属性: value和done，value属性表示本次yield表达式的返回值，done属性为布尔值，done是false表示后续还有yield语句执行，如果执行完成或者return后，none为true。 function * inc(){ let i=0; while (true) { yield ++i; if (i>3) return i; } } g= inc() console.log(g.next()) console.log(g.next()) console.log(g.next()) console.log(g.next()) console.log(g.next()) 结果如下 6 语句块 1 概述 JS 使用大括号构成语句块 2 基础代码 function hello(){ let a=1; var b=2; c=3 } let d=100 if (1) { let d=4; //局部和下一级有效，除非被覆盖掉 var e=5 f=6 if (true) { console.log(d) console.log(e) console.log(f) console.log('____________________') g=10 //只要不是函数，都没问题 var h=11 //只要是函数，都没问题 } } //console.log(a) //不可见 //console.log(b) //不可见 //console.log(c) //不可见 console.log(d) //不可见 let 突破不了块作用域，但外界共享 console.log(e) //var可见 console.log(f) //隐式声明，可见 console.log(g) //可见 console.log(h) //可见 结果如下 3 总结 块作用域只对let有效，对var和隐式声明等特性无效 |
|
|
