javascript学习-基础知识

数据操作常用方法

字符串

  1. 把字符串转为大写:toUpperCase()
  2. 把字符串转为小写:toLowerCase()
  3. 搜索指定字符串出现的位置:indexOf


    image.png
  4. substring,返回指定索引区间的子串;


    image.png

数组

  1. 获取数组长度:length


    image.png
  2. 获取指定元素位置: indexOf
  3. 截取数组部分元素:slice()


    image.png

    如果不给slice传递参数,则复制一个相同的数组

  4. 向数组末尾添加若干元素:push()
    把数组最后一个元素删掉:pop()


    image.png
  5. 向数组头部添加元素:unshift()
    把数组第一个元素删掉:shift()


    image.png
  6. 对数组进行排序:sort()
  7. 数组元素翻转:reverse()
  8. 数组元素切片,从指定的索引开始删除若干元素,然后再从该位置添加若干元素:spice()


    image.png
  9. 把两个数组连接起来返回一个新数组:concat()


    image.png

    image.png
  10. 将数组元素用指定字符连接起来,返回字符串:join()


    image.png

对象

  1. 对象属性的访问:object.prop
  2. 对象属性的添加和删除:


    image.png
  3. 判断一个对象是否拥有某一属性(该属性可能是继承来的),返回true 或 false:in


    image.png
  4. 判断一个对象是否拥有某一属性(该属性是自身拥有的,不是继承的),返回true 或 false:hasOwnProperty()


    image.png

map & set

  1. map:是一组键值对,具有极快的查找速度


    image.png

    一个key只能对应一个value,所以多次对一个key放入value,后面的值会把前面的值冲掉

  2. set:一组key的集合,不可重复


    image.png

    重复元素在set中自动过滤


    image.png

    add(key)方法可以添加元素到set中,delete(key)方法可以

语句

条件判断

  1. if(){...}else{...}


    image.png
  2. 多行条件判断:


    image.png

循环

  1. for


    image.png
  2. for...in


    image.png
  3. while:在每次循环开始判断条件,条件满足,就不断循环,条件不满足则退出循环


    image.png
  4. do...while:在每次循环完成时判断条件,该循环体至少执行一次


    image.png

函数

  1. 定义
    方式一:


    image.png

    方式二:


    image.png

    两种定义完全等价,第二种注意函数体末尾添加分号
  2. 关键字 arguments:只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数,常用来判断入参的个数


    image.png
  3. reset 参数:只能写在最后,前面用...标识,传入的参数先绑定前面定义的参数,多余的参数以数组的形式交给变量reset


    image.png
  4. return 语句:


    image.png

    5、变量声明:在函数内部首先申明所有变量,最常见的做法是用一个var申明内部用到的所有变量
    6、全局变量:不在任何函数内定义的变量具有全局作用域,JavaScript默认有一个全局对象wendow,全局作用域的变量实际上是被绑定到window的一个属性


    image.png

    image.png
  5. 名字空间:全局变量会绑定到window上,不同的JavaScript文件如果使用了相同的全局变量,或定义了相同名字的顶层函数,会造成命名冲突。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中:


    image.png
  6. 局部作用域:在for循环等语句中是无法定义具有局部作用域的变量的,用关键字let 代替var申明一个块级作用域变量:


    image.png

    image.png
  7. 常量关键字:const


    image.png
  8. 方法:绑定到对象上的函数称为方法,内部使用this指向当前对象,可以拿到当前对象的属性


    image.png

高阶函数

  1. map():把f(x)作用在数组的每一个元素,且结果生成一个新的数组


    image.png
  2. reduce:把一个函数作用在这个数组的[x1,x2,x3...]上,这个函数必须接收两个参数,reduce把结果和序列的下一个元素做累计计算


    image.png
  3. filter():用于把数组中的某些元素过滤掉,然后返回剩下的元素
    同map类似,数组的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素


    image.png
  4. sort():把数组中所有元素转换为String类型,再按照ASCII码排序。还可以接收一个比较函数来实现自定义的排序。
    数字大小写排序:


    image.png

    忽略大小写,按照字母序排列:


    image.png

对象

包装对象:

a. 用parseInt()或parseFloat()来转换任意类型到number
b. 用String()来转换任意类型到string,或者直接调用某个对象的toString()方法
c. 通常不必把任意类型转换为boolean再判断,因为可以直接写if(myVar){...}
d. typeof操作符可以判断出number、boolean、string、function和underfined
e. 判断Array要使用Array.isArray(arr)
f. 判断null要使用myVar === null
g. 判断某个全局变量是否存在用 typeof window.myVar === 'underfined' 
h. 函数内部判断某个变量是否存在用 typeof myVar === 'underfinded'

注意:
number对象调用toString(),需要特殊处理


image.png

Date:用来表示日期和时间

  1. 当前时间:


    image.png

    注意:当前时间是浏览器从本机操作系统获取的时间,不一定准确,因为用户可以把当前时间设定为任何值
    注意:JavaScript的月份范围用整数表示0~11,0表示一月...

  2. 创建时间:


    image.png
  3. 时间戳:时间戳为一个自增的整数,表示从1970年1月1日零时整的GMT时区开始的那一刻,到现在的毫秒数。假设浏览器所在电脑的时间是准确的,那么世界上无论哪个时区的电脑,它们此刻产生的时间戳数字都是一样的,所以,时间戳可以精确表示一个时刻,并且与时区无关。
    获取时间戳:


    image.png

    image.png

    时间戳转换为时间:


    image.png

RegExp:正则表达式

  1. 正则表达式基本知识
    a.
    \d,可以匹配一个数字;
    \w,可以匹配一个字母或数字;
    . 可以匹配任意字符;
    \s,可以匹配一个空格(包括Tab等空白符)
    b.
    ,表示任意个字符(包括0个);
    +,表示至少一个字符;
    ?,表示0个或1个字符;
    {n},表示n个字符;
    {n,m},表示n-m个字符
    c.
    [0-9a-zA-Z_],可以匹配一个数字、字母或者下划线;
    [0-9a-zA-Z_]+,可以匹配至少由一个数字、字母或者下划线组成的字符串;
    [a-zA-Z_$][0-9a-zA-Z_$]
    ,可以匹配由字母或下划线、开头,后面接任意一个数字、字母或下划线、组成的字符串,也就是JavaScript允许的变量名;
    [a-zA-Z_$][0-9a-zA-Z_$]{0,19}更精确地限制了变量的长度是1-20个字符(前面1个字符,后面最多19个字符);
    d.
    A|B,可以匹配A或B;
    ,表示行的开头,\d表示必须以数字开头;
    ,表示行的结束,\d表示必须以数字结束
  2. JavaScript创建正则表达式
    a. 直接通过/正则表达式/写出来
    b. 通过new RegExp('正则表达式')创建


    image.png

    第二种写法,因为字符串转义问题,字符串的两个\实际上是一个\

  3. 切分字符串


    image.png
  4. 分组,提取子串,用()表示的就是要提取的分组
    如果正则表达式中定义了组,就可以在RegExp对象上用exec()方法提取出子串来,exec()方法在匹配成功后,会返回一个数组,第一个元素始终是原始字符串本身,后面的字符串表示匹配成功的子串;匹配失败时返回null


    image.png
  5. 贪婪匹配,正则匹配默认是贪婪匹配,也就是匹配尽可能多的字符;


    image.png

    非贪婪匹配,尽可能少匹配,加?


    image.png
  6. a. 全局搜索标志:g
    全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当指定g标志后,每次运行exec(),正则表达式本身会更新lastIndex属性,表示上次匹配到的最后索引:


    image.png

    b. 标志:i,表示忽略大小写
    c. 标志:m,表示执行多行匹配

JSON(超轻量级的数据交换格式)

数据类型:


image.png

以及上面的组合。
JSON规定了字符集必须是UTF-8,字符串必须用双引号“”,Object的键也必须用双引号“”
把任何JavaScript对象变成JSON,就是把这个对象序列化成一个JSON格式的字符串;如果收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象。

  1. 序列化


    image.png

    按缩进输出:


    image.png

    结果:
    image.png

    第二个参数用户控制如何筛选对象的键值,可以只输出指定的属性,传入数组:


    image.png

    结果:
    image.png

    可以传入一个函数,这样对象的每个键值都会被函数优先处理:
    image.png
  2. 反序列化
    拿到JSON格式的字符串,直接用JSON.parse()把它变成一个JavaScript对象:


    image.png

    JSON.parse()还可以接收一个函数,用来转换解析出的属性:


    image.png

面向对象编程

JavaScript不区分类和实例的概念,通过原型(prototype)来实现对象编程。


image.png

最后一行代码把xiaoming的原型指向了对象Student。


image.png

JavaScript的原型链和Java的Class区别就在没有“Class”的概念,所有对象都是实例,所谓的继承关系不过是把一个对象的原型指向另一个对象而已。
image.png
  1. 创建对象

    a. 创建一个数组对象:
    image.png

    其原型链:
    image.png

    Array.prototype定义了indexOf()、shif()等方法,因此所有的Array对象上可以直接调用这些方法

    b. 创建函数时,函数也是个对象:
    image.png

    其原型链:
    image.png

    c. 构造函数
    先定义构造函数:
    image.png

    其原型链:
    image.png

    用关键字new来调用这个函数,并返回一个对象:
    image.png

    用new Students()创建的对象还从原型上获得了一个construction属性,指向函数Student本身
    调用构造函数时千万不能忘记写new。为了区分普通函数和构造函数,按照约定,构造函数首字符应当大写,而普通函数首字母应当小写。
    可以编写一个createStudent()函数,在内部封装所有的new操作。一个常用的编程模式:
    image.png

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

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,168评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,094评论 1 32
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,113评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,465评论 1 45