TECH_FRONTEND

JavaScript基础

2015-08-04  本文已影响468人  ting723
1. 本文是在学习廖雪峰先生的JavaScrip教程 后的归纳
2. 本文是第一次采用markdown进行书写
  1. JavaScript简介
    • 网景公司 Brendan Eich 10天内设计出了JavaSrcipt
    • JavaScript 和 Java没有任何关系，当时，借Java名声而已
    • ECMAScript是一个语言标准
    • 最新版ECMAScript 6标准发布于2015年6月
    • 核心语法为没有多大变化，ES6增加部分新特性
  2. JavaScript的引用和调试
    • 引用
      • 常嵌入<head>里,在Html文件中直接写<script>...</script>
      • JavaScript放入一个单独的.js文件,然后在HTML中通过<script src="..."></script>
    • 调试
      • Chrome F12 Chrome自带调试工具，不错的调试工具
      • FireBug FireFox 强大的调试插件，有点卡
    • 开发工具
      • 文本工具: Sublime Text, NotePad++,Vim等
      • IDE: WebStorm,Eclipse
  3. 基本语法
    • 每个语句以;结尾，语句块以{..}，另;可以省略但不建议省略
    • "Hello World!" 这样写仍然可以视为一个完整语句
    • var x=1; var y=2; 不建议一行多语句
    • {...}可以嵌套,大括号内语句具有缩进,通常为4个空格，有助于理解代码层次
    • 单号注释 // 块注释 /**/
    • JavaScript 严格区分大小写
  4. 数据类型、运算符、变量
    • Number类型
      • JavaScript不区分整数和浮点数
        123; 整数 0.456;小数 1.234e3;科学计数法 -99; 负数 NaN; 不是Number Infinity; 无限大
      • 运算符: +、-、*、/、% (求余)
    • 字符串
      • '' 或 "" 表示字符串
    • 布尔值
      • true false
      • 用表达式表示布尔值,如1>2
      • && || !
    • 比较运算符
      • 常见运算符: >、>=、==、<=
      • JavaScript 允许对任意数据类型进行比较
      • 两种相等运算符:
        使用==时，会自动转换数据类型再比较
        使用===时，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
      • 由于JavaScript这设计形式,建议使用===比较
      • 特例：NaN 与所有其他值都不相等，包括他自己:即NaN===NaN;(false)
      • 唯一判断NaN的方法是通过isNaN()函数 isNaN(NaN)
      • 浮点数比较,由于浮点数在运算过程中会产生误差,计算机无法精确表示无限循环小数,要比较两个浮点数是否相等,只能计算它们之差的绝对值，看是否小于某个阈值，如Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
    • null 和 undefined
      • null 表示一个空的值,它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。与Java等语言的null值类似
      • JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。大多数情况下，应该使用null
      • 详细区别可以参照：阮一峰 undefined与null的区别
    • 数组
      • 数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。
      • 数组用[]表示，元素之间用,分隔。
      • 创建数组的方法： 通过Array()函数实现或直接使用
      • 数组的元素可以通过索引来访问，索引起始值为0
    • 对象
      • JavaScript的对象是一组由key-value组成的无序集合,例如:
        var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', zipcode: null };
      • JavaScript对象的键都是字符串类型，值可以是任意数据类型。
      • 通过对象变量.属性名获取对象的值
    • 变量
      • 变量名： a-z,A-Z,0-9,$,_来组成，且数字不能开头
      • 变量名：不能是JavaScript的关键字
      • 变量名可以是中文，但尽量不要这样做
      • = 为变量赋值
      • 可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次
      • 变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。Java即为静态语言。动态语言更灵活即基于此
      • 把赋值语句的等号等同于数学的等号
    • strict模式
      • 引入strict 模式的原因： 如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量
      • 使用var声明的变量，则被限制在声明变量的函数体内
      • 后续的ECMAScript标准推出了strict模式，即强制通过var声明变量，为声明则报错
      • 启用strict模式，在javascript的第一行加入'use strict';
      • 建议采用strict模式
  5. 字符串
    • 字符串表示形式
      • 采用''或""表示字符串
      • 转义字符:\ 例如:'I\'m OK!',\n,\t,\\
      • ASCII字符可以用\x##形式表示,如\x41 //等同于'A'
      • \u####表示一个Unicode字符
      • 多行字符串用...表示,如
        `这是一个
        多行字
        符串`
    • 常用字符串操作
      var s ="Hello, World!"; s.length;//13
      • length 获取字符串的长度
      • 字符串可以通过指定的下标来获取相关的字符值,如s[n] 例如:s[0];//'H'
      • 字符串是固定的，不可通过某个索引赋值,虽不会有错，但不会改变值
      • JavaScript为字符串提供了很多方法,调用这些方法不会改变原有的字符串的值，而是生成一个新字符串
      • toUpperCase()　字符串变成大写
      • toLowerCase() 字符串变成小写
      • indexOf() 返回第一个指定字符串的所在的索引值,没有返回-1
      • substring() 返回指定的索引区间的子串
      • 字符串方法汇总
方法 说明
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的Unicode值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将字符转换为Unicode值
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组 例如["hello".split("")可以直接将字符串转变成Char数组]
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
  1. 数组
    • Array 简介
      • JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素
      • Array 通过属性length获取Array的长度,直接给Array的length赋值会导致Array大小的变化
      • Array 可以通过索引把对应的元素修改为新值,如果通过索引赋值超过了范围,同样会引起Array大小的变化
        var arr=[1,2,3]; arr[5]='x'; arr;//arr变成[1,2,3,undefined,undefined,'x']
      • 大多数的编程语言不允许直接改变数组的大小,越界会报错,而JavaScript的Array却不会报错,但不建议直接修改Array的大小,访问索引时,要确保索引不越界
    • Array的常用方法
      • indexOf Array也可以通过indexOf()来搜索一个指定元素的位置
      • slice() 对应字符串的substring()版本,截取Array的部分元素,然后返回一个新的Array,例:arr.slice(0,3) 从索引0到2,不包括索引3,arr.slice(3),从索引3到结束
      • slice()的起止参数包括索引,不包括结束索引,无参数时,从头截到尾,利用此点可以复制一个Array
      • push()向Array的末尾添加若干元素
      • pop() 则把Array的最后一元素删除掉,并返回移除的元素,空数组pop后,返回undefined
      • unshift()向头部添加若干元素,shift()方法则把Array的第一个元素删除掉，返回Array的长度,空数组shift(),则返回undefined
      • sort() 对Array排序,直接修改当前Array的元素位置,直接调用时,按照默认顺序排序
      • reverse() 把整个Array元素反转
      • splice() 修改Array的万能方法
        var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']; // 从索引2开始删除3个元素,然后再添加两个元素: arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite'] arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'] // 只删除,不添加: arr.splice(2, 2); // ['Google', 'Facebook'] arr; // ['Microsoft', 'Apple', 'Oracle'] // 只添加,不删除: arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素 arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
      • concat() 方法把当前的Array和另一个Array连接到一起,并返回一个新的Array,concat方法可以接受任意个元素和Array,并自动Array拆开,然后全部添加到新的Array里,如:arr.concat(1,2,[3,4])
      • join方法是一个非常实用的方法,它把当前的Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串,若Array元素不是字符串,也将自动转换为字符串后再连接
        var arr=['A','B','C',1]; arr.join('~');//'A~B~C~1'
      • 多维数组
        var arr=[[1,2,3],[400,500,600],'-'];
  2. 对象
    • 对象的定义及属性访问
      • 对象定义:JavaScript的对象是一种无序的集合数据类型,它由若干键值组成,例如:
        var xiaoming={ name:'test', birth:1980 }
      • JavaScript用一个{...}表示一个对象,键值对以xxx:xxx形式声明,用,隔开,最后一个键值对末尾不需要,
      • 属性访问: a) 通过.操作符来访问,但要求属性名必须是一个有效的变量名 b) 通过xiaoming['xx']来得到变量 c)特殊的形式: 如果含有特殊字符,定义时必须'middle-school':'No.1 Middle Schoole',访问时,只能通过['xx']来访问 d) 属性名尽量使用标准的变量名,这样可以直接通过object.prop的形式访问一个属性
      • JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型
      • JavaScript规定:访问不存在的属性不报错,而是返回undefined
    • 属性的各种操作
      • JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除顺序:
        xiaoming.age=18;//新增一个属性 delete xiaoming.age;//删除一个属性
      • 检测是否拥有某一属性,可以用in操作符
        in 判断一个属性存在,这个属性不一定是xiaoming的,可能是它继承得到的
        'name' in xiaoming;//true 'toString' in xiaoming;//true
      • 要判断一属性是否xiaoming自身拥有的,而不是继承的,可以用hasOwnProperty()方法
  3. 条件判断
    • if() {...} else{...}
    • else 是可选的
    • 仅包含一条语句时,可以省略{},但不建议省略
    • 多重判断 if(){...} else if {...} else{..}
    • 判断条件不是true或false时,JavaScript把null,undefined,0,NaN和空字符串视为fasle,其他的一律视为true
  4. 循环
    • JavaScript的循环有两种,一种for循环,通过初始条件、结束条件和递增条件来循环执行语句块
    • for 循环最常用的地方是利用索引来遍历数组
    • for循环的3个条件都可以省略,当没有退出循环的判读条件,必须使用break退出，否则死循环
    • for...in 可以将一个对象的所有属性依次循环出来,需过滤对象继承的属性，则需要要用hasOwnProperty()实现
    • 由于Array也是对象,每个元素的索引都被视为对象的属性,因此,for...in循环可以直接循环出Array的索引
    • for...in对Array的循环得到的是String而不是Number
    • while循环,for循环在已知循环的初始和结束条件时很有用,而while循环更适合只有一个判断条件的情况
    • do...while 与while循环的唯一区别在于,不是在开始判断条件,而是在结束时判断条件
    • do...while 循环至少循环一次,而for和while可能一次也不执行
    • 编写循环代码时,要注意初始条件和判断条件,尤其边界值,避免陷入死循环
  5. Map和Set
    • 类似Java中的Map,即一组键值对
    • ES6引入Map的目的为了解决对象的键只能为字符串，不能为Number等类型的问题
    • Map是一组键值对的结构,具有极快的查找速度
      var m = new Map(['Micha',94],['Box',12],['Nu',23]); m.get('Micha');
    • 初始化Map需要一个二维数组,或者直接初始化一个空的Map。
    • Map常见方法:
      var m=new Map(); m.set('Adam',3); m.set('Bob',4); m.has('Adam');//true m.get('Adam');//取得Value m.delete('Adam');//删除
    • 一个Key对应一个Value,所有,多次对一个key放入value,后面的值会冲掉前面的
    • Set和Map类似,是一组key的集合,不存储value,没有重复的key
    • 创建Set需要提供一个Array作为输入,或者直接创建一个空Set
      var a1 = new Set(); var a2 = new Set([1,2,3]);
    • 重复元素在Set中自动过滤
    • 添加和删除方法a1.add(1); a1.delete(1);
  6. iterable

    • 为了遍历Map和Set,ES6引入iterable类型

    • Array,Map,Set都属于iterable类型

    • 具有iterable类型的集合可以通过新的for...of循环遍历

    • for...in和for...of区别: for...in是变量对象的属性名称,一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性,当手动添加额外属性后，for...in循环将带来一些意外效果
      var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x in a) { alert(x); // '0', '1', '2', 'name',却没有'length' }
      for...of则修复了上述问题,其仅循环集合本身的元素

    • 更好的方式是直接使用iterable内置对象forEach方法,它接受一个函数,每次迭代就自动回调该函数
      Array
      var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element); });

      Map
      var a =new Map([[1,'A'], [2,'B'], [3,'C']]); a.forEach(function (value, key, map) { // value: 指向当前元素的值 // key: 指向当前key // map: 指向Array对象本身 alert(value); });

      Set
      var a = new Set(['A', 'B', 'C']); a.forEach(function (element,set) { // element: 指向当前元素的值 // set: 指向set对象本身 alert(element); });

    • JavaScript函数不要求参数必须一致,参数可以没有,也可以多(多出的参数会变成undefined),对应顺序必须一致,其余可以忽略

注释:
1. 本文摘自廖雪峰JavaScript教程 廖雪峰网站地址:http://www.liaoxuefeng.com
2. 此笔记仅做个人日后查找使用,如有错误,烦请指正！
3. 欢迎转载哦O(∩_∩)O

上一篇下一篇

猜你喜欢

热点阅读