JavaScript学习总结
JavaScrip总结
1、概念
JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境。
如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用最广泛的浏览器语言。运行JavaScript有多种方式,可以直接在浏览器的控制台编写运行;也可以编写一个独立的js文件,然后在Html文件中引入,(这两种方法由浏览器解释执行,是以前唯一的方式)。也可以用编辑软件如Webstrom或VSCode编写独立的js文件,由安装好的Node.js解释执行运行( node-v10.11.0-64位下载)。
2、基本语法
大小写敏感
标识符
注释
语句
关键字/保留字
变量
我们可以使用 var、let 或 const 声明变量来存储数据。
let — 现代的变量声明方式。
var — 老旧的变量声明方式。一般情况下,我们不会再使用它。但是,我们会在 旧时的 “var” 章节介绍 var 和 let 的微妙差别,以防你需要它们。
const — 类似于 let,但是变量的值无法被修改。
变量应当以一种容易理解变量内部是什么的方式进行命名。
3、操作符
一元操作符
++ --
布尔操作符
&& || !
除下列值为假外其余皆为真:
false、null、undefined、''、0、NaN
&&和||都属于 短路操作!
算术操作符
+ - * / %
关系操作符
<> <=>= == === != !==
注意: ===称为全等(值和类型)。
条件(问号)操作符
? :
赋值操作符
= += -+ *= /= %=
4、语句
if do-while while for for-in for-of break continue switch
另外,
for-of、forEach
能简洁的遍历集合中的元素,
5、函数
函数声明方式如下所示:
function name(parameters, delimited, by, comma) {/* code */}
作为参数传递给函数的值,会被复制到函数的局部变量。
函数可以访问外部变量。但它只能从内到外起作用。函数外部的代码看不到函数内的局部变量。
函数可以返回值。如果没有返回值,则其返回的结果是 undefined。
为了使代码简洁易懂,建议在函数中主要使用局部变量和参数,而不是外部变量。
与不获取参数但将修改外部变量作为副作用的函数相比,获取参数、使用参数并返回结果的函数更容易理解
6、对象Object
对象 Object 是ECMAScript 中使用最多的一个类型。我们常将数据和方法封装在对象中。
创建对象有如下两种方式,我们常用第二种。
//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){ //设置对象的方法/函数,注意此处console.log(this.name);
};
//方式二字面量
var person = {name: 'Lary Page',age: 47,job: 'Software Engineer',sayName: function(){ //注意此处console.log(this.name);}
};
console.log(person.job);
person.sayName();
缺点:
Object 构造函数或对象字面量都可以用来创建单个对象,但使用同一个接口创建很多对象,会产生大量的重复代码。优化方法:
为解决这个问题,人们开始使用工厂模式的一种变体。代码如下:
function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){console.log(this.name);};return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');
7、数组
除了 Object 之外, Array 类型恐怕是 ECMAScript 中最常用的类型了。
数组是一种特殊的对象,适用于存储和管理有序的数据项。
声明:
方括号 (常见用法)
let arr = [item1, item2...];
new Array (极其少见)
let arr = new Array(item1, item2...);
调用 new Array(number) 会创建一个给定长度的数组,但不含有任何项。
length 属性是数组的长度,准确地说,它是数组最后一个数字索引值加一。它由数组方法自动调整。
如果我们手动缩短 length,那么数组就会被截断。
我们可以通过下列操作以双端队列的方式使用数组:
push(...items)
在末端添加 items 项。pop()
从末端移除并返回该元素。shift()
从首端移除并返回该元素。unshift(...items)
从首端添加 items 项。
遍历数组的元素:
for(let i=0; i<arr.length; i++)
— 运行得最快,可兼容旧版本浏览器。for (let item of arr)
— 现代语法,只能访问 items。for (let i in arr)
— 永远不要用这个。
比较数组时,不要使用 == 运算符(当然也不要使用 > 和 < 等运算符),因为它们不会对数组进行特殊处理。它们通常会像处理任意对象那样处理数组,这通常不是我们想要的。
但是,我们可以使用 for..of
循环来逐项比较数组。
创建数组的方法
元素联合
var colors = ['red', 'green', 'blue']; console.log(colors.join(',')); //red,green,blue console.log(colors.join('||')); //red||green||blue
堆栈方法
栈是一种 LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。
ECMAScript 为数组专门提供了 push() 和 pop() 方法,以便实现类似栈的行为。
var colors = []; // 创建一个数组 var count = colors.push('red', 'green'); // 末尾推入两项 console.log(count); //2 colors.push('black'); // 末尾推入另一项 console.log(colors); //3 var item = colors.pop(); // 末尾弹出最后一项 console.log(item); //'black' console.log(colors); //2
队列方法
栈数据结构的访问规则是 LIFO(后进先出),而队列数据结构的访问规则是 FIFO(First-In-First-Out,先进先出)。队列在列表的末端添加项,从列表的前端移除项。
由于 push() 是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 shift() ,它能够移除数组中的第一个项并返回该项,同时将数组长度减1。
ECMAScript 还为数组提供了一个 unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。
总结: push、pop操作在数组末,而 unshift、shift操作在数组头;push、unshift压入而pop、shift弹出。
反转数组项
var values = [1, 2, 3, 4, 5]; values.reverse(); console.log(values); //5,4,3,2,1
链接方法
var colors1 = ['red', 'green', 'blue']; var colors2 = ['yellow', 'black']; console.log(colors1.concat(colors2)); console.log(colors2.concat(colors1)); console.log(colors2.concat('brown')); console.log(color2)//注意:concat返回一个新数组,原数组没改变
分片方法
slice()
,它能够基于当前数组中的一或多个项创建一个新数组。slice()
方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,
slice()
方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
注意,slice()
方法不会影响原始数组。splice方法
splice()
方法恐怕要算是最强大的数组方法了,它可对数组如下3种操作。注意, splice() 方法直接更改原始数组。
删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。 例如,
splice(0,2)
会删除数组中的前两项。插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如,
splice(2,0,'red','green')
会从当前数组的位置 2 开始插入字符串'red' 和 'green'
。替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起 始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,
splice (2,1,'red','green')
会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串'red' 和 'green'
。
8、链式语法
链式语法已变得非常流行。实际上这是一种非常容易实现的模式。基本上,你只需要让每个函数返回 this代表包含该函数的对象,这样其他函数就可以立即被调用。
例如:
//链式语法var bird = {//定义对象字面量catapult: function() {console.log( 'Yippeeeeee!' );return this;//返回bird对象自身},destroy: function() {console.log( "That'll teach you... you dirty pig!" );return this;}};bird.catapult().destroy();//destroy()后还可以再链接吗?
9、闭包
闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。
当在一个函数内定义另外一个函数就会产生闭包。
例如:
function greeting(name) {var text = 'Hello ' + name; // local variable// 每次调用时,产生闭包,并返回内部函数对象给调用者return function() { console.log(text); }//注意该函数无名称,称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么?
sayHello(); // 注意此处的使用方法。通过闭包访问到了局部变量text
上述代码的执行结果是:Hello Closure,因为sayHello指向了greeting函数对象,sayHello()则对其进行调用,greeting函数执行完毕后将返回greeting函数内定义的匿名函数对象,而该匿名函数仍然可以访问到了定义在greeting之内的局部变量text,注意此时我们已从greeting函数中退出了(但请留意,也只有该内部匿名函数能访问,其它任何代码都不能访问)。
JavaScript学习总结相关推荐
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 《Javascript入门学习全集》 Javascript学习第二季(实战4)
Javascript学习第二季(实战4) 上章的例子虽然实现了功能,也做了相应的判断,也符合标准了.但还有一个问题就是: Choose an image. 在html中只是为了图片切换 而做的,而 ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- JavaScript学习知识点归纳
JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程 以下依次为各版块相关内容==&g ...
- JavaScript学习笔记(五)
JavaScript学习笔记(五) ①Array类 本地对象 ②Date类 ①Global对象 对象的类型 内置对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天内置对象Global对 ...
- JavaScript学习笔记(备忘录)
JavaScript学习笔记(备忘录) ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
- Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- JavaScript学习笔记(十)——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
- JavaScript 学习笔记(1)
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...
最新文章
- 10.5 考试 (感觉比较难)
- iPhone7p与iPhoneX布局出现右边白边问题
- unity 批量导入模型工具_如何将VMD舞蹈导入桌面萌娘MMD
- vmware不能和主机相连
- ajax将数据显示在class为content的标签中_利用selenium实现自动翻页爬取某鱼数据
- 【重难点】【JUC 05】线程池核心设计与实现、线程池使用了什么设计模式、要你设计的话,如何实现一个线程池
- 公共网关接口CGI(Common GatewayInterface)
- Linux命令(2):ls命令
- eeprom和编程器固件 k2_斐讯K2刷不死breed与第三方固件教程
- VR、RTMP播放器SGPlayer原理详解
- fw313r手机登录_迅捷(FAST)fw313r路由器手机设置教程
- php中如何获得当前周数,PHP中根据输入的周数获取到该周的日期范围
- 老牌安全公司CYBER ARK眼中的RPA部署安全问题
- 关机时候计算机更新,电脑关机时提示更新,能否强制关机?
- 企业微信CRM管理系统的优势
- Gradle 1.12用户指南翻译——第五十章. 依赖管理
- unity 中 c# 与 object-c 交互
- springboot+vue3健身房管理系统实战
- Opengl Lesson 1 心形曲线
- [架构之路-199] - 可靠性需求与可靠性分析:鱼骨图、故障树分析法FTA、失效模式与影响DFMEA,找到影响故障的主要因素