JavaScript 的学习笔记

一.  JavaScript 的学习

1.js的认识#脚本是逐条执行1. 使用dom获取id为first的div(var 变量名 = document.getElementById(‘id名’); )2. 函数:更改背景颜色function 连接 ( )  { 变量名.style.backgroundColor = "red”; }3. 常规的输出函数的交互alert("hello world”);4. 使用js添加页面元素document.write("

”);5. 使用外部js文件   便于维护和可以缓存6. 浏览器不支持JavaScript,或脚本被禁用了。

2.基本概念1. 语法跟c和类c语言(java)很相似CMAScript中的一切区分大小写,比如变量名称、函数的名称、函数的参数的名称等2. 标识符就是指变量、函数名、属性的名称、或者函数的参数等     3. 标识符定义的规则:1.以字母、下划线、$开头。2. 其他后面的字符可以使用字母、数字、下划线、其他字符(不要使用汉字),推荐使用驼峰命名法:第一个单词首字母小写,之后每个单词首字母大写  parentChild(标识符要见其词,识其意4. 语句,以;结尾1. 使开发人员,放心的使用一些压缩工具,压缩代码(把多余的空格、换行删掉) 2. 增强代码的性能,减小解析器的负担5. 语句块{ var b = 2;var c = 3;var d = b + c; }6. 变量的声明var f = 5, g = 6;

基本数据类型#1. undefined(只声明变量,没有赋值)    2.null,空对象    3. number    4. Boolean(true/false)    5. string      6. 类型转换  ( 1. other -> Boolean  2. string -> number  3. parseInt(string, radix) )引用类型:object

运算符1.算术运算符+ - * / % ++ --++/--在前,先运算,再取值,++/--在后,先取值,再运算2. 赋值运算符= 、+= 、-=、*=、/=、%=c+=d  c = c + d;3、关系运算符>、<、>=、<=、!=、==、===、!====指得是需要对比的变量转换之后是否相同   ===指,类型和值都相同(恒等)4、逻辑运算符&&、||、!  !aa为false的时候,结果为true5. 三元运算符判断条件?条件成立的取值:条件不成立的取值

加法计算器#1.取出第一个输入框的值var firstValue = parseInt(document.getElementById('first').value);2. 获取result输入框var resultInput = document.getElementById('result');

if 语句1.if语句,就是根据对应的条件,选择执行的相应逻辑(相应的代码块),在语句流中会跳跃的执行   2. if (判断条件) { 条件成立需要执行的逻辑 } else { 条件成立需要执行的逻辑 }

例子 : bmi  ,计算器

二.  循环语句

switch语句#流控制语句1、switch语句中的对比是===   2、小心穿透,合理的利用break,不加break默认是穿透   3、注意default,每个switch在最后都有一个default,默认情况下执行default    4.在大多数语言中switch语句只能使用数值,但是在js中可以使用任何数据类型(字符串,对象),每一个case中值不一定是常量,也可能是变量,或者是表达式

for 语句1. for循环,用来处理固定次数的循环  for循环三要素:起始条件,终止条件,变化条件  变化条件可以是多样化的,如i+=5;2. for循环三要素是可选的,省略其中的条件,会创建一个无限循环     3. break 和 continue  continue;跳出当前这次循环     4.  for-in语句,是一种精确的迭代语句for (var propertyName in window) {console.log(propertyName);}

while语句while(表达式(终止条件)){处理的逻辑}while (num < 0 || num > 100) {num = prompt("请输入你的成绩”);}

例子 : 猴子摘桃 , 抓花生

三.

string字符串#1. js中常用的转义字符\n,\\,\',\”\表示需要对之后的字符进行转义,如果后面的字符有转义的话,显示对应的效果,如果没有,不影响后面的字符的正常输出。1.获取字符串的长度str.length2.字符的大小写转化toLowerCase()/toUpperCase()    3、检索 stringObj.indexOf(searchString: string, position?: int)返回值如果是小于0,代表没有找到相应的子字符串peopleId.lastIndexOf("55", 13)4、截取字符串peopleId.substring(6, 14)substr(start,length)length:要截取的字符串的长度peopleId.substr(6,8)5,遍历for (var a = 0 in peopleId) {console.log(peopleId.substr(a,1));}

array数组#1. 数组是一组有序的集合,可以存放多种类型。取值,需要通过下标来获取array[index]        2.定义一个空数组var array2 = [ ];3.获取数组中的长度console.log(array1.length);4.遍历数组for (var a in array1) {console.log('第' + a + '个是' + array1[a]);}5.检索数组中是否包含某个内容console.log(array1.indexOf("abc",5))6.往数组中追加内容group[0] = "高雅兰”;  group.push(["赵宁","魏坤鹏","魏清阳"]); group.pop( );7.shift,取出数组中第一个成员,并把他从数组中删除group.shift();unshift从数组的头部添加成员,并且返回新数组的长度group.unshift("李璐欣","彭付龙","刘哲”)8.concat,往数组中添加新成员,并且返回一个添加后的新数组array3.concat("闫麒麟","范晓东","郭彦松",["陈运发","陈坤","马恒飞"]);9.join,把数组中的每个成员用特殊字符连接成一个新的字符串array4.join("~”);var str1 = "闫媛媛-王俊亚-李明扬-武国庆”;  str1.split("-");10.替换数组中的成员     11.splice(start: int, deleteCount: int, items...: any)  start:开始索引,(内容插入的位置)deleteCount:删除的个数 items:要插入的新成员    12.排序var array6 = ["ab","hj","ba","gd","bcd","Ab”]; array6.sort();     13.反向  array6.reverse();

例子 :校验身份证号,注册register

四.

多维数组数组的嵌套,用来解释实际生活中的问题

object对象#1. 对象是一种无序的数据集合,由若干个键值对,大括号就是定义一个对像,如果内容包含多个属性,需要用逗号隔开。定义对象的属性名称的时候需要按照之前定义操作符的规则(驼峰命名法)2. 对象引用如果不同的变量指向同一对象(指向这个对象的内存地址),那么他们都是这个对象的引用,他们指向了同一块内存修改其中一个,另外一个也被修改  取消一个变量对对象的引用,不影响其他的变量 对原始类型的数据的引用,都是值拷贝3. 添加属性obj3.age = 18;删除属性delete obj3["sex”];判断某个属性是否属于对象console.log('sex' in obj3);遍历对象中的属性for (var property in student) {console.log(property);}对象嵌套  动态属性bite:function () {alert(“汪汪汪“);}

date1.获取当前的时间var date = new Date();获取年date.getFullYear()获取月(0-11)date.getMonth()获取日date.getDate()获取星期date.getDay()时间戳(1970-now)(毫秒级)date.getTime()获取时分秒和毫秒date.getHours()  date.getMinutes()  date.getSeconds() date.getMilliseconds()2.设置datedate.setFullYear(2018);3.对比时间var interval = date2 - date;4.时间相加(转化成毫秒,然后相加)    5.获取本地时间字符串console.log(date4.toLocaleDateString());6.获取标准时区date4.toUTCString()7.把星期转化成汉字var weekDay = ["星期日","星期一","星期2","星期3","星期4","星期5","星期6”];   console.log(weekDay[date4.getDay()]);

计时器#1. setInterval(func,delay);每隔delay(毫秒)触发func2. setTimeout(func,delay)延迟delay(毫秒),触发fund

snakes 贪吃蛇#

五.函数

函数1.文档解析过程是从上到下,依次执行函数对于任何一种编程语言都是核心的内容,特别是对于js,js是面向函数式编程     2. 函数: 1.可以封装任意多条语句, 2. 可以在任何地方,任何时候调用   基本语法:function functionName(arg0,arg1,...argn){逻辑语句}3. 函数的调用functionName(arg0,arg1,....argn);

4. 函数都有返回值,return语句表示当前函数需要返回的内容,函数中遇到return,表示函数结束一个函数中 的返回值,有可能是多条 返回值没有任何内容,这种情况下,函数执行后不需要有任何返回值,这种做法,想要提前停止函数而又不需要有返回值5.  由上面的知识点,我们可以得出,函数有四种"类型”的函数1、无参数无返回值,2、无参数有返回值,3、有参数无返回值,4、有参数有返回值

参数ECMAScript中的函数的参数与其他语言中的参数有所不同1. 不介意传递的参数的个数        2. 不在乎你传递参数的类型   即便函数不需要参数,在调用的时候,你也可以传递参数,   3. 在函数中有arguments对象,传递的参数都存放在arguments,并且是有序的console.log('hello ' + arguments[0] + ',' +arguments[1]);4.在js中没有函数签名(函数签名就是由函数名称、参数的个数、参数的类型以及返回值)由于js中没有函数签名,就没有函数重载,后写的doAdd1会把前面的doAdd1覆盖 传递参数过多,多余部分参数忽略虽然js中函数没有重载,但是我们弥补这一遗憾(用 if else )注意:arguments不是数组,但是可以像数组那样取值     5. arguments和形参可以一起使用console.log(arguments[0] + num2);6. arguments中的值和对应的形参的中一致,注意不要在函数内部更改argments中的值arguments[1] = 10;

变量1.变量其实是存放数据的容器,js中的变量是弱类型以字母,下划线,$开头,后面可以跟字母,下划线,$开头,数字,其他字符,但是不能跟关键字重名(if break)2.js中的变量类型分类: 基本类型:Undefined,null,Number,Boolean,String引用类型:object3.动态属性(仅限于引用类型)基本类型变量不能添加属性4.变量的复制引用类型复制的时候,是复制的对对象的引用5.把变量当成实参传入函数js中所有的函数的参数都是按照值传递的 变量如果是基本类型,那么把值传递到函数中 如果变量是引用类型,把对当前对象的引用传递到函数中

变量作用域1. 全局变量在脚本中任何位置都可以被使用,局部变量,只能在他所在的局部环境中使用。     2. 在js中没有块级作用域if (true) {var a1 = 'hello world’;}相当于全局变量3. 如果在局部环境中,不使用var关键字,来声明变量,那么这个变量就会自动地被添加到全局环     4. 利用查询标识符(变量的名称) 寻找变量,沿着变量的作用域链往上去找,如果找到,那么使用这个变量,如果没有找到,is not defined         5. 变量的声明会上浮,上浮到当前变量所在的环境的上方  函数的声明也会上浮

函数表达式1. 每个函数都是function类型的实例,与其他的引用类型一样,函数的名称就是对函数对象的引用        2. 函数表达式跟上面函数的声明基本上一样,但是,注意在表达式最后,需要加分号var sum2 = function (num1,num2) {return num1 + num2;};3. 函数的名称和函数表达式的区别浏览器中的解析器在解析的过程中,先读取函数的声明,为了让函数在执行之前都可用。 函数表达式,解析的时候,会先解析变量的声明,然后执行到赋值语句的时候,才对变量进行赋值,之后才可以使用函数表达式声明的函数

函数的嵌套#1.函数作为参数      2.函数作为返回值

六. 函数

函数的属性#1.函数参数的默认值(1. 利用if语句设置num2的默认值 if (!num2) {num2 = 10;}     2. 利用三元运算符设置num2的默认值 num2 = !num2 ? 10 : num2;    3. return num1 + (num2 || 10);)2. 在函数内部有两个比较特殊的对象,arguments和this1.arguments对象作用是存储函数调用的时候传递的实参,arguments对象有一个属性为callee,callee属性其实就是一个指针,指向arguments对象的函数    2. 在全局执行环境中this指的是window对象,全局执行环境中的变量是window的属性,全局函数是window对象的方法  函数中的this对象就是指调用函数的执行环境对象(当网页的全局作用域中调用函数,函数中的this值的是window)3. caller保存着调用当前函数的函数的引用,如果说在全局环境中调用函数,caller的值为null     4. length:当前函数的时候传递的形参的个数

函数的方法#1. apply(),有两个参数,第一个参数的是当前的函数的调用者(间接决定了函数的作用域)apply()方法的第二个参数是传递进去的实参,可以是数组,也可以是arguments2. call()方法,也有两个参数第一个参数跟apply() 的第一个参数一样,就是函数的调用者,第二个参数有点区别,是把实参一个一个的传递进去3.总结:apply()和call()重点不在于参数的传递,重点在于第一个参数,第一个参数可以更改函数运行的作用域

立即执行函数#

闭包#1. 在某个函数调用的时候,会创建一个执行环境以及它对应的作用域,然后使用arguments和自己定义的其他的命名参数(形参等)的值来初始化函数的活动对象。    2. 作用域链:当前执行的函数的活动对象--这个函数的外部函数的活动对象--外部函数的外部函数的活动对象--...--全局的执行环境的变量对象3. 当全局环境中的函数执行完毕之后,该函数执行环境和他的活动对象会销毁。对于闭包有所不同。      4. 函数执行完毕之后,它所对应的执行环境被销毁,但是它的活动对象没有被销毁,直到其闭包函数执行完毕的时候,才会销毁闭包函数的执行环境和它对应的作用域链。

闭包和变量  , 闭包练习 , 数组中map的使用#

七. 创建对象

reduce#reduce():数组中的所有成员从左到右依次减少到单一值,使用一个累加器,应用到提供方法

filter#filter():过滤数组中的成员

对象#1. 字面量定义对象     2. 访问对象属性,第一种方式 . 第二种方式 [ ];    3.对象1.对象是对单个具体实物的抽象   2.对象是一个容器,容器内部封装了属性(对象的状态:姓名,身高,体重...)和方法(对象的行为:吃,喝,玩...)   3.对象是一个无序的数据集合(属性:属性名称)

工厂模式创建对象#对象中this是对象本身    工厂模式的弊端,不能清楚地知道对象的具体类型

构造函数#构造函数是一种专门用来创建对象的函数 1.构造函数首字母大写,2.使用的时候,必须使用关键字new,new代表使用构造函数创建新实例,3.返回值是对象   系统原生的构造函数var student = new Object();自定义构造函数function Student1 () {

原型#1.我们创建的每个函数都有一个prototype属性,prototype就是指向当前函数的原型对象,原型对象的作用:存储所有这个函数的实例共享的属性和方法     2. 原型对象中有一个constructor属性,指向原型的构造函数     3.在实例上动态添加属性,会把原型对象中的相同的属性给屏蔽掉

八. 原型

继承

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容