JavaScript学习笔记（一）

内容提要

  • JavaScript介绍
  • 基本语法与基本类型
  • 运算符
  • 常用内置对象
  • 闭包与变量作用域
  • JavaScript学习资源

学习目标

  • 掌握JavaScript基本语法
  • 掌握常用内置对象的使用
  • 理解闭包的概念，掌握闭包的使用方法
    掌握JavaScipt的学习方法

1.1、JavaScript介绍

  • JavaScript是一种Web脚本羽凡，广泛用于Web应用开发。
  • JavaScript是弱类型语言，其设计简单即凑。
    JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

2、基本语法与类型

2.1、变量

var a = 1;
  • 声明变量a，将数值1赋值给变量a。
  • 声明变量用var，JavaScript是弱类型语言，所有变量都是用var声明。
  • var关键字省略，不利于表达意图，而且容易不知不觉地创建全局变量，所以总是使用var命令声明变量。

2.1、标识符（一）

  • 标识符（identifier）是用来识别具体对象的一个名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

  • 标识符命名规则：
    1、第一个字符，可以是任意Unicode字母（包括英文字母和其他语言字母），以及美元符号（$）和下划线（_）。
    2、第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。

2.2、标识符（二）

2.3、基本数据类型

的数据类型共有6中：

  • Undefined：值undefined，出现场景已声明未赋值的变量，获取对象不存在的属性
  • null：值null，表示对象不存在
  • Number：整数，浮点数，NaN，Infinnity（1/0）
  • String：字符组成的文本（比如“Hello World”）
  • Boolean：true，false2个特定的值
  • Object：一组无需的键值对集合

3、运算符

  • 严格相等运算符（===）要求类型一样，比较过程不执行类型转换。
  • 相等运算符（==）比较两个值是否相等，类型不一样会执行类型转换。
  • 相等运算符（=）隐藏的类型转换，会带来一些违反直觉的结果。
0 == ' '        //true
0 == 0        //true

2 == true        //false
2 == false        //false

以上表达式很容易出错，因此不要使用相等运算（==），最好只使用严格相等运算符（===）。

4、内置对象

4.1、字符串

  • str.length，返回字符串长度
'abc'.length   // 3
  • str.slice()，用于从原字符串去除子字符串并返回，不改变原字符串
'JavaScript'.slice(0,4)  // "Java"
  • str.indexOf()，用于确定一个字符串在另一个字符串中的位置，返回一个整数，表示匹配开始的位置。
'hello world'.indexOf('o')  // 4
'JavaScript'.indexOf('script')  //-1  未匹配到

  • str.trim()，trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原来字符串。该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。

  • str.toLowerCase()，toLowerCase方法用于将一个字符串全部改为小写，返回一个新字符串，不改变原字符串。

  • str.toUpperCase()，toUpperCase方法用于将一个字符串全部改为大写，返回一个新字符串，不改变原字符串。

'Hello World'.toLowerCase()  //  "hello world"
'Hello World'.toUpperCase()  //  "HELLO WORLD"
  • STR.SPLIT()，split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
'a|b|c'.split('|')  //["a","b","c"]

4.2、对象

  • 创建对象
var o1 = {};
var o2 = new Object();
  • 添加属性和方法
var o = {
  p: 123,
  m: function() {...},
}
  • 访问属性和方法
var o = {
  p: 'Hello World'
};

o.p  // "Hello World"
o['p']  //  "Hello World"
  • 增加属性和方法
var o = {};
o.p = 1;
o.f = unction () {...}
  • 修改属性和方法
var o = {
p: 'Hello World'
};
o.p = 'abc';
  • 删除属性和方法
var o = {p: 1};
delete o.p  //  true
o.p  //  undefined

4.3、数组

  • 创建数组
var arr = [];
var arr = [1, 2];
  • 获取数组元素

arr.push()，push仿佛用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变源数组。

var a = [];

a.push(1)  //  1
a.push('a')  //  2
a.push(true, {})  //4
a  //  [1, 'a', true, {}]

arr.pop()，pop方法用于删除数组的最后一个元素，并返回该元素。注意，饭方法同样会改变数组。

var a = ['a', 'b', 'c'];
a.pop()  //  'c'
a  //  ['a', 'b']
s.

arr.join()，join方法以参数作为分隔符，将所有数组成员组成一个字串返回。如果不提供参数，默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ')  //  '1 2 3 4'
a.join(' | ')  //   "1 | 2 | 3 | 4"
a.join()  //  "1,2,3,4"

arr.shift，shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原来数组。

var a = ['a', 'b', 'c'];
a.shift()  // 'a'
a  //  ['b', 'c']

arr.unshift()，unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原来数组。

for...in遍历数组

var a = [1, 2, 3];
for (var i in a) {
  console.log(a[i]);
}
//  1
//  2
//  3

4.4、函数

  • 声明函数
function print(s){
  console.log(s);
}

var print = function(s) {
  console.log(s);
};

function命令声明的代码块，就是一个函数。function明龙后面是函数名，函数名后面是一对括号，里面是传入函数的参数。函数体放在大括号里面。

  • 函数调用
print();

4.5、Math

  • Math.abs()，方法返回参数值的绝对值。
Math.abs(1)  //  1
Math.abs(-1)  //  1
  • Math.min()，Math.max()，接受多个参数，返回其中最大（最小）的参数。
Math.max(2, -1, 5)  //  5
Math.min(2, -1, 5)  //  -1
  • Math.floor()，Math.ceil()，Math.round()，分别对参数进行向下取整、向上取整、四舍五入
Math.floor(3.2)  //  3
Math.floor(-3.2)  //  -4
Math.ceil(3.2)  //  4
Math.ceil(-3.2)  //  -3
  • Math.random，返回0到1之间的一个随机数，可能等于0，但是一定小于1。
Math.random()
  • 任意范围的随机整数生成函数
function getRandomInt(min,max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(1, 6)  //  5

4.6、JSON格式

JSON格式，是一种用于数据交换的文本格式，格式规则：

1、复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2、简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN、Infinity、-Infinity和undefined）。
3、字符串必须使用双引号表示，不能使用单引号。
4、对象的键名必须放在双引号里面。
5、数组或对象最后一个成员的后面，不能有逗号。
6、数值前不能加0.

JSON格式描述的文件，本身是个字符串，并非对象。

4.7、JSON对象

JSON对象，用于对JSON进行解析和序列化

  • JSON.parse()，此方法接受一个JSON字符串，返回解析后的JavaScript对下那个，通常为Object或Array。
    var shipData = '[{"name":"Richelieu","shipClass":"Battleship"},{"name":"Missouri","shipClass":"Battleship"}]';
    var ship = JSON.parse(shipData);

    console.log(ship[0].name);  //  Richelieu
    console.log(ship[0].shipClass);  //  Battleship

    console.log(ship[1].name);  //  Missouri
    console.log(ship[1].shipClass);  //  Battleship
  • JSON.stringfy()，此方法可接受一个JavaScript值并转化为JSON字符串，此字符串可被JSON.parse还原。
var ships = [{
      "shipName": "Missouri",
      "shipClass": "Battleship",
      "number": 63
    }, {
      "shipName": "Richelieu",
      "shipClass": "Battleship",
      "number": 3
    }, {
      "shipName": "Enterprise",
      "shipClass": "Carrier",
      "number": 6
    }];

    JSON.stringify(ships);
    console.log(ships);

4.8、正则表达式

正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用作按照“给定模式”匹配文本的工具。

新建正则表达式

var telRegex1 = /^1[3|5|7|8]\d{9}$/;  //  字面量形式

var telRegex2 = new RegExp('/^1[3|5|7|8]\d{9}$/');  //  构造函数形式
  • 考虑到书写的便利和直观，实际应用中，基本上都采用字面量的写法。
  • 有一点需要注意，使用构造函数创建正则表达式时，传入的参数是字符串形式的，在字符串内部，\本身也是一个转义符，因此需要在使用一个\来对其进行正则表达式的转义。
4.8.1、元字符
4.8.2、修饰符
  • g修饰符：g修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。
var regex = /b/g;
var str = 'abba';

regex.test(str);  //  true
regex.test(str);  //  true
regex.test(str);  //  false
  • i修饰符：默认情况下，正则对象区分字母大小写，加上i修饰符以后表示忽略大小写（ignorecace）* m修饰符*：加上m修饰符以后，'^' 和'$'还会匹配行首和行尾，即^和$会识别换行符（\n）。
4.8.2、正则对象方法
  • test()，正则对象的test对象接收一个字符窜，表示测试字符串，返回一个布尔值，表示此字符串是否满足匹配条件。
testRegex1('12323213216');  //  true
testRegex2('12323278616');  //  false
testRegex3('12743265416');  //  false
  • exec()，正则对象的exec方法，可以返回匹配结果。如果发现匹配，就返回一个数组，成员是每一个匹配成功的子字符串，否则返回null。
var ipReg = /(\d{1,3}\.){3}(\d{1,3})/
var ipStr = 'My ip is "192.168.118.47", please tell me yours.';

ipReg.exec(ipStr);  //  ["192.168.118.47", '118", "47"]

5、闭包与变量作用域

5.1、变量作用域

JavaScript有两张作用域：全局作用域和函数作用域。函数内可以直接读取全局变量，但是，在函数外部无法读取函数内部声明的变量。

var n = 999;

function f1() {
  console.log(n);
}
f1()  //  999

function f1() {
  cvar n = 999;
}
console.log(n);

5.2、闭包

在Javascript语言中，只有函数内部的子函数才能读取内部变量，因此可以吧闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是他可以“记住”诞生的环境。

function f1(){
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}
var result = f1();
result();  //  999

闭包的最大用处有两个，一个是可以去函数内部的变量，另一个用处，是封装对象的私有属性和方法。

  function Ship(){
    var shipName;
    var setShipName = function(name){
      this.shipName = name;
    }

    var getShipName = function(){
      console.log(this.shipName);
    }

    return{
      reShipName: shipName,
      reSetShipName: setShipName,
      reGetShipName: getShipName
    }
  }
  var ship1 = Ship();
  ship1.reSetShipName("Missouri");
  ship1.reGetShipName()  //  Missouri
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容

  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0赞 4
  • FreeCodeCamp - Basic JavaScript
    FreeCodeCamp - Basic JavaScript 写在前面： 我曾经在进谷前刷过这一套题，不过当时只...
    付林恒阅读 16,428评论 5赞 28
  • JS高级程序设计3学习笔记（一）
    有人说过，很多弯路到最后都成了直路，所有的坑到最后也都成了坦途；所谓的直路和坦途并不是摆在眼前的，都是不断的的...
    老衲法号一眉道人阅读 1,311评论 0赞 4
  • 诗和远方
    远方是我的表妹 而且是表妹中最漂亮的 我混迹于尘世 除了表妹不想任何人 旁人都认定我是傻子 有一天村里最有学问的耄...
    楊孜阅读 384评论 0赞 0
  • 我还是喜欢你中央空调的样子
    鸡 肉 先 生 与 萝 卜 小 姐 文/望京 鸡肉先生，粉色，温柔和浪漫。 他细心、贴心、更让人安心。可惜却是个中...
    Citrus望京阅读 375评论 3赞 6