博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Day46 前端基础--JavaScript
阅读量:6429 次
发布时间:2019-06-23

本文共 5387 字,大约阅读时间需要 17 分钟。

一,JavaScript初识

  1.ECMAScript和JavaScirpt的关系

    前者是后者的规格,后者是前者的一种实现

  2.JavaScript概述:

    ECMAScript是一个重要的标准,但是它并不是JavaScript唯一的部分,当然,也不是唯一被标准化的部分,实际上,一个完整的JavaScript实现是有以下3个不同部分组成的:

    1.核心:ECMAScript

    2.文档对象模型(DOM):Document object model (整合js,css,html)

    3.浏览器对象模型(BOM):Broswer object model(整合js和浏览器)

    总结:

      ECMAScript描述了JavaScript语言本身的相关内容

      JavaScript是脚本语言,是一种轻量级的编程语言,是可插入HTML页面的编程代码,

插入HTML页面后,可由所有的现代浏览器执行。

二,JavaSript引入方式

  1.script标签内写代码

  2.引入外部的JS文件

 

三,JavaScript语言规范

  1.注释

//单行注释/*多行注释*/

  2.结束符

/*JS中的语句要以分号";"为结束符*/

 

四,JavaScript语言基础

  1.变量声明

    JS的变量名可以使用_,数字,字母,$组成2,不能以数字开头。

    声明变量使用var变量名;的格式来进行声明

    注意:

      变量名是区分大小写的

      推荐使用驼峰式命名规则

      保留字不能用做变量名

var name = "alex";var age = 18;

  2.let声明变量

    用于声明变量,其用法类似于var,但是所声明的变量只在let命令所在的代码内有效。

    例如:for循环的计数器就很适合使用let命令

for (let i=0;i

  3.const声明常量

    使用const声明常量,一旦声明,其值就不能改变,常量声明默认使用大写

const PI = 3.1415PI //3.1415PI = 3// TypeError: "PI" is read-only

 

五,JavaScript数据类型

  1.JavaScript拥有动态类

var x; //此时x是undefinedvar x = 1; //此时x是数字var x = "Alex"  //此时x是字符串

  

  2.数字类型:数值(Number)

    1.JS不区分整型和浮点型,就只有一种数字类型

var a = 12.34;var b = 20;var c = 123e5; //12300000var d = 123e-5 //0.00123

    2.还有一种NaN,表示不是一个数字(Not a Number)

    3.数字类型的常用方法

parseInt("123")  // 返回123parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。parseFloat("123.456")  // 返回123.456 parseFloat('123.4567891111111111111111') //返回123.4567891111111,浮点数同样有精度

  

  3.字符串类型(String)

var a = "Hello";var b = "world";var c = a+b;console.log(c);  //等到Helloworld

     字符串的常用方法:

//length():返回长度,空格也会被计算长度var s1 = 'hello sg';si.length();   //返回8//trim():移除空白var s2 = '  hello ';s2.trim() //返回'hello'//trimLeft():移除左边的空白var s3 = '     hello  's3.trimLeft()  //返回'hello  '//trimRight():移除右边的空白var s4='    hello  's4.trimRight() //返回'     hello'//charAt(n):返回第几个字符var s5 = 'hello sg';s5.charAt(0); //返回'h's5.charAt(100); //返回''s5.charAt(4); //返回'o'//concat(value,...):拼接var s6 = 'hello';s6.concat('哈哈'); //返回'hello哈哈'//indexOf(substring,start):substring参数:子序列的值,开始查找的位置,返回子序列位置var s7 = 'hello sg';s7.indexOf('sg')  //返回6s7.indexOf('sg',4)  //返回6s7.indexOf('sg',7) //不存在就返回-1s7.indexOf('sg',8)  //不存在就返回-1//substring(from,to):根据索引获取子序列,顾首不顾尾var s8 = 'hello sq';s8.substring(0,5);  //返回'hello's8.substring(0,-5); //返回"",不支持倒序//slice(start,end):切片,顾首不顾尾var s9 = 'hello sq';s9.slice(0,5); //返回'hello's9.slice(0,-5) //返回''hel",支持倒序//toLowerCase():转换为小写var s10 = 'Hello sg';s10.toLowerCase(); //返回'hello sq'//toUpperCase():转换为大写var s10 = 'Hello sg';s10.toUppercase(); //返回'HELLO SG'//split(delimiter,limit):分割,分割的第二个参数指的时返回结果的长度var s11 = 'hello sq';s11.split(' ') //返回(2) ['hello','sg']s11.split(' ',1) //返回['hello']s11.split(' ',2) //返回(2)['hello','sg']s11.split(' ',3) //返回(2)['hello','sg'] 
string.slice(start, stop)和string.substring(start, stop):两者的相同点:如果start等于end,返回空字符串如果stop参数省略,则取到字符串末如果某个参数超过string的长度,这个参数会被替换为string的长度substirng()的特点:如果 start > stop ,start和stop将被交换如果参数是负数或者不是数字,将会被0替换silce()的特点:如果 start > stop 不会交换两者如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

    拼接字符串一般使用"+"

//字符串拼接var a1 = [4,3,2,1]a1.join('+') //返回"4+3+2+1"

    模板字符串

    注意:如果模板字符串中需要使用反引号,则在其前面要用反斜杠转义

//模板字符串var name = '帅哥';var s2 = '${name} gay in gay out!}';s2 //返回''帅哥 gay in gay out!"

 

  4.布尔值(Booleam)

  注意:0,null,'',undefined,NaN都是false

//js的布尔值都是小写var a = true;var b = false;

  

  5.null和undefined

    null:表示值为空,通常都是手动赋值

    undefined:表示值只声明没有赋值

           函数没有指定返回值,默认返回undefined

 

  6.object(对象)

    JS中的所有事物都是对象:字符串,数组,数值,函数...此外JS允许自定义对象

    JS提供多个内建对象,比如String、Date、Array等等

    对象只是带有属性和方法的特殊数据类型

    1.Array:数组

      var a1 = [11,22,33]

    2.自定义对象

      var o = {'name':'alex','age':18}

      js中自定义对象,类似于python中的字段key可以不加引号

      var o = {name:'alex',age:18}

    3.常用方法:

//数组的切片var a1 = [1,2,3,4];a1[1] //返回2//length:数组大小var a2 = [1,2,3,4];a2.length //返回4//push(ele):尾部追加元素var a3 = [1,2,3,4];a3.push(5);a3 //返回(5)[1,2,3,4,5] //pop():弹出尾部的元素var a4 = [1,2,3,4];a4.pop(); //返回4a4   //返回(3) [1,2,3]//unshift(ele):头部插入元素var a5 = [1,2,3,4];a5.unshift(5); //返回4,元素总数//shift():弹出头部元素var a6 = [1,2,3,4];a6.shift(); //返回元素1//slice(start,end):切片var a7 = [1,2,3,4];a7.slice(1,3);  //返回(2) [2,3]a7.slice(1,-1); //返回(2) [2,3]//reverse():反转var a8 = [1,2,3,4];a8.reverse(); //返回[4,3,2,1]//join(seq):将数组元素连接成字符串var a9 = [1,2,3,4];a9.join('+') //返回"1+2+3+4"//concat(val,...):连接数组var a10 = [1,2,3,4];a10.concat(5,6,7); //返回(7) [1,2,3,4,5,6,7]a10.concat(['a','b']); //返回(6) [1,2,3,4,'a',''b]/*sort():排序,如果不使用参数,默认将按字符顺序对数组中的元素进行排序如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。若 a 等于 b,则返回 0。若 a 大于 b,则返回一个大于 0 的值。*/function sortNumber(a,b){    return a - b}var ar1 = [11, 2,12,19];ar1.sort(); //返回(4)[11,12,19,2]ar1.sort(sortNumber) //返回(4)[2,11,12,19]//splice():数组元素的删除,三个参数,开始删的位置,删除个数,追加的元素(可多个)var a1 = [11,2,12,19];a1.splice(1,1); //返回[2]a1.splice(0,1,120,121,122); //返回[11]a1 //返回(4) [12,19,120,121,122]

    4.类型查询

typeof "abc"  // "string"typeof null  // "object"typeof true  // "boolean"typeof 123 // "number"typeof NaN //"number"typeof [11,22,33] //"object"typeif null //"object"typeof undefined //"undefined"

 

六,运算符

  1.算数运算符

+ - * / % ++ --

  2.比较运算符

> >= < <= != == === !==//==:弱等于,只判断值相不相等//===:强等于,既判断类型相不相等还判断值相不相等

  3.逻辑运算符

&& || !

  4.赋值运算符

= += -= *= /=

 

 

 

 

 

 

 

    

转载于:https://www.cnblogs.com/lianyeah/p/9779079.html

你可能感兴趣的文章
python实现二分查找算法
查看>>
Kubernetes的污点和容忍(下篇)
查看>>
[解题报告]10038 - Jolly Jumpers
查看>>
使用samba搭建便利的web开发环境
查看>>
TEST DESIGN TECHNIQUES: AN OVERVIEW
查看>>
线段树模板
查看>>
第94天:CSS3 盒模型详解
查看>>
HDU 2200
查看>>
关于函数参数
查看>>
iOS--Runtime--Method Swizzling
查看>>
Oracle - 函数
查看>>
牧师与修女的那些事
查看>>
安全加固SELinux
查看>>
pyramid安装和开始
查看>>
在Pyramid的Mako模板中引入helper
查看>>
SqlServer 重置自动编号起始值
查看>>
mysql数据导入导出语句
查看>>
Android 动态类加载
查看>>
sql中的in与not in,exists与not exists的区别
查看>>
百度Ueditor在Nginx环境下目录创建问题
查看>>