您的位置:首页 > Web前端 > JavaScript

JavaScript基础语法

2020-07-17 20:50 53 查看

1. 引入方式

  • 行内式js
  • 内嵌式js
  • 外部js

2. 注释

  • 单行注释
    //
  • 多行注释
    /* */
  • html注释
    <!-- -->
  • css注释
    /* */

3. 输入输出语句

方法 说明
alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器控制太打印输出信息
string prompt(info) 浏览器弹出输入框,用户可以输入

4. 变量和数据类型

4.1 变量声明和赋值

  • var name;
  • var name=value;
  • 可以一次声明多个变量
  • 特殊情况 只声明,不赋值 --> undefined
  • 不声明,不赋值使用会报错
  • 不声明,赋值可以使用,会变成全局变量
  • 不要使用name作为变量名,name在浏览器中有特殊含义

4.2 数据类型

  • js是弱类型和动态语言
  • 变量的数据类型是可以变化的

4.2.1 简单数据类型(值类型)

简单数据类型 描述
Number 数字型,包含整型和浮点型
Boolean 布尔型
String 字符串型
Undefined 未定义
Null(object) 空值
  • 数字型

    数字型最大值
    Number.MAX_VALUE
  • 数字型最小值
    Number.MIN_VALUE
  • 数字无穷大
    Infinity
  • 数字无穷小
    -Infinity
  • NaN
    非数值
  • 判断是否为数字
    Boolean isNaN(value);
  • 字符串型

      可以利用单双引号实现引号的嵌套关系
    • 转义符号
      \n
      换行
    • \b
      空格
    • \t
      Tab
  • 字符串长度
    int string.length();
  • 字符串拼接
  • 布尔型

  • Undefined 未定义

      undefined+string=undefinedstring
    • underfined+number=NaN
  • null

      null+string=nullstring
    • null+number=number
  • 获取数据类型

    type typeof value

  • 4.2.2 数据类型转换

    • 转换为字符串型
      string value.toString()
    • string String(value)
    • +
      隐式转换
  • 转换为数字型
      int parseInt(string)
      int parseInt(10px) --> 10
      int parseInt(a123) --> NaN
    • float parseFloat(string)
      float parseFloat(10px) --> 10
      float parseFloat(a123) --> NaN
    • number Number(string)
    • -
      *
      /
      隐式转换
  • 转换为布尔型
      boolean Boolean(value)
    • 代表空的、否定的值会转换为false,0、NaN、null、undefined;其它的都是true

    4.2.3 复杂数据类型(引用类型)

    • 对象
    • Array
    • Date
    • ….

    4.2.4 简单数据类型和复杂数据类型的储存

    • 堆和栈 简单数据类型是放在栈中的
    • 复杂数据类型是放在堆中的,先在栈里面存放地址,地址是堆中储存数据的地址

    4.2.5简单数据类型和复杂数据类型的传参

    • 简单数据类型传参是传值
    • 复杂数据类型是传引用

    5. 运算符

    5.1 与C++不同的符号

    符号 描述
    == 隐式转换后判断两边的值是否相同
    != 隐式子转换后判断两边的值是否不相等
    === 数据类型和值完全相同
    !== 数据类型和值不完全相同

    5.2 运算符的优先级

    • () > 一元运算符 > 算数运算符 > 关系运算符 > 相等运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符
    优先级 运算符 顺序
    1 () ()
    2 一元运算符 ++ – !
    3 算数运算符 先* / %后+ -
    4 关系运算符 > >= < <=
    5 相等运算符 == != === !==
    6 逻辑运算符 先&&后||
    7 赋值运算符 =
    8 逗号运算符 ,

    6. 流程控制(和C++差不多)

    • if - else if - else

    • 表达式1 ? 表达式2 : 表达式3;

    • switch - case - default

    • for

    • while

    • do - while

    • continue

    • break

      关键词、操作符之间后加空格

    7. 数组(没写到的差不多和C++相似)

    7.1 创建数组

    • var arr = new Array();
    • var arr=new Array(num)
    • var arr=new Array(2,3) 2,3
    • var arr=[]
    • var arr=[1,“2”,true,4.5]

    7.2 访问和增加(有则修改,无则增加)

    • 索引访问数组中的元素
    • arr[arr.length]=value

    8. 函数

    // 声明函数
    function 函数名(形参1,....){
    ...
    return  需要返回的值;
    }
    
    var func=function(形参1,....){
    ...
    return  需要返回的值;
    }
    // 调用函数
    函数名(实参1,....);    // 此时调用函数就可以得到函数体内return 后面的值
    • 声明函数不使用形参,在调用函数时传入参数,在函数中可以使用arguments

    • arguments类似于数组,但是不可以使用数组的一些方法

    9. 作用域

    9.1 作用域

    • 局部作用域
    • 全局作用域

    9.2 变量作用域

    • 全局变量
    • 局部变量
    • 如果在函数内部没有声明,直接赋值使用的是全局变量

    9.3 作用域链

    • 采取就近原则的方式来查找变量最终的值

    10. 预解析

    • js引擎运行js,先预解析,后执行代码

    10.1 什么是预解析

    • js引擎会把js里面所有的var和function提升到当前作用域的最前面

    10.2 变量提升(变量预解析)

    • 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升

    10.2 函数提升(函数预解析)

    • 函数的声明会被提升到当前作用域的最上面,但是不会调用函数

    11. 对象

    11.1 创建对象

    11.1.1 方法1

    • var obj={}
    • var obj={name: “Jack”,age: 18,hello: function() { } }

    11.1.2 方法2

    • var obj=new Object()
    • 方法和属性,有则调用,无则更新

    11.1.3 方法3

    function people(name,age,sex){
    this.name=name
    this.age=age
    this.sex=sex
    this.eat=function(){
    console.log("I can eat")
    }
    }
    // 创建对象
    var a=new people("Jack",18,"male");

    11.2 调用属性

    • obj.name
    • obj[“name”]

    11.3 调用方法

    • obj.hello()

    11.4 遍历对象的属性和方法

    for(var k in obj){
    console.log(k)
    console.log(obj[k])
    }

    12. js内置对象

    12.1 js的对象分类

    • 自定义对象
    • 内置对象
    • 浏览器对象

    12.2 Math对象(部分)

    //  属性
    Math.E
    欧拉常数,自然对数的底数, 约等于 2.718。
    Math.LN2
    2的自然对数, 约等于 0.693。
    Math.LN10
    10的自然对数, 约等于 2.303。
    Math.LOG2E
    以2为底E的对数, 约等于 1.443。
    Math.LOG10E
    以10为底E的对数, 约等于 0.434。
    Math.PI
    圆周率,一个圆的周长和直径之比,约等于 3.14159。
    Math.SQRT1_2
    1/2的平方根, 约等于 0.707。
    Math.SQRT2
    2的平方根,约等于 1.414。
    //  方法
    Math.abs(x)
    返回 x 的绝对值。
    Math.acos(x)
    返回 x 的反余弦值。
    Math.acosh(x)
    返回 x 的反双曲余弦值。
    Math.asin(x)
    返回 x 的反正弦值。
    Math.asinh(x)
    返回 x 的反双曲正弦值。
    Math.atan(x)
    以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
    Math.atanh(x)
    返回 x 的反双曲正切值。
    Math.atan2(y, x)
    返回 y/x 的反正切值。
    Math.cbrt(x)
    返回 x 的立方根。
    Math.ceil(x)
    返回 x 向上取整后的值。
    Math.clz32(x)
    返回一个 32 位整数的前导零的数量。
    Math.cos(x)
    返回 x 的余弦值。
    Math.cosh(x)
    返回 x 的双曲余弦值。
    Math.exp(x)
    返回 Ex,当x为参数,E 是欧拉常数(2.718...),自然对数的底数。
    Math.expm1(x)
    返回 exp(x) - 1 的值。
    Math.floor(x)
    返回小于 x 的最大整数。
    Math.fround(x)
    返回数字的最接近的单精度浮点型表示。
    Math.hypot([x[, y[, …]]])
    返回其参数平方和的平方根。
    Math.imul(x, y)
    返回 32 位整数乘法的结果。
    Math.log(x)
    返回一个数的自然对数(loge,即 ln)。
    Math.log1p(x)
    返回 1 加上一个数字的的自然对数(loge,即 ln)。
    Math.log10(x)
    返回以 10 为底数的 x 的对数。
    Math.log2(x)
    返回以 2 为底数的 x 的对数。
    Math.max([x[, y[, …]]])
    返回 0 个到多个数值中最大值。
    Math.min([x[, y[, …]]])
    返回 0 个到多个数值中最小值。
    Math.pow(x, y)
    返回 x 的 y 次幂。
    Math.random()
    返回 0 到 1 之间的伪随机数。
    Math.round(x)
    返回四舍五入后的整数。
    Math.sign(x)
    返回 x 的符号函数, 判定 x 是正数,负数还是 0。
    Math.sin(x)
    返回正弦值。
    Math.sinh(x)
    返回 x 的双曲正弦值。
    Math.sqrt(x)
    返回 x 的平方根。
    Math.tan(x)
    返回 x 的正切值。
    Math.tanh(x)
    返回 x 的双曲正切值。
    Math.trunc(x)
    返回 x 的整数部分,直接去除小数点及之后的部分。

    12.3 日期对象(部分)

    //  构造函数
    new Date(); //  当前时间
    new Date(value);
    new Date(dateString);//  字符串时间“2020-7-17 19:50:15”
    new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
    //  Getter
    Date.prototype.getDate()
    根据本地时间返回指定日期对象的月份中的第几天(1-31)。
    Date.prototype.getDay()
    根据本地时间返回指定日期对象的星期中的第几天(0-6)。
    Date.prototype.getFullYear()
    根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)。
    Date.prototype.getHours()
    根据本地时间返回指定日期对象的小时(0-23)。
    Date.prototype.getMilliseconds()
    根据本地时间返回指定日期对象的毫秒(0-999)。
    Date.prototype.getMinutes()
    根据本地时间返回指定日期对象的分钟(0-59)。
    Date.prototype.getMonth()
    根据本地时间返回指定日期对象的月份(0-11)。
    Date.prototype.getSeconds()
    根据本地时间返回指定日期对象的秒数(0-59)。
    Date.prototype.getTime()
    返回从1970-1-1 00:00:00 UTC(协调世界时)到该日期经过的毫秒数,对于1970-1-1 00:00:00 UTC之前的时间返回负值。
    Date.prototype.getYear()
    根据特定日期返回年份 (通常 2-3 位数). 使用 getFullYear() .
    //  Setter
    Date.prototype.setDate()
    根据本地时间为指定的日期对象设置月份中的第几天。
    Date.prototype.setFullYear()
    根据本地时间为指定日期对象设置完整年份(四位数年份是四个数字)。
    Date.prototype.setHours()
    根据本地时间为指定日期对象设置小时数。
    Date.prototype.setMilliseconds()
    根据本地时间为指定日期对象设置毫秒数。
    Date.prototype.setMinutes()
    根据本地时间为指定日期对象设置分钟数。
    Date.prototype.setMonth()
    根据本地时间为指定日期对象设置月份。
    Date.prototype.setSeconds()
    根据本地时间为指定日期对象设置秒数。
    Date.prototype.setTime()
    通过指定从 1970-1-1 00:00:00 UTC 开始经过的毫秒数来设置日期对象的时间,对于早于 1970-1-1 00:00:00 UTC的时间可使用负值。
    Date.prototype.setYear()
    setYear() 方法用于设置年份。请使用 setFullYear() 方法代替。
    • 月份:1月为0
    • 周日为0

    12.4 数组对象(部分)

    //  构造方法
    [element0, element1, ..., elementN]
    new Array(element0, element1[, ...[, elementN]])
    new Array(arrayLength)
    
    //  属性
    Array.length
    Array 构造函数的 length 属性,其值为1(注意该属性为静态属性,不是数组实例的 length 属性)。
    //  方法
    Array.from()
    从类数组对象或者可迭代对象中创建一个新的数组实例。
    Array.isArray()
    用来判断某个变量是否是一个数组对象。
    Array.of()
    根据一组参数来创建新的数组实例,支持任意的参数数量和类型。
    
    //  属性
    Array.prototype.length
    上面说了,因为 Array.prototype 也是个数组,所以它也有 length 属性,这个值为 0,因为它是个空数组。
    //  修改器方法
    Array.prototype.copyWithin()
    在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。
    Array.prototype.fill()
    将数组中指定区间的所有元素的值,都替换成某个固定的值。
    Array.prototype.pop()
    删除数组的最后一个元素,并返回这个元素。
    Array.prototype.push()
    在数组的末尾增加一个或多个元素,并返回数组的新长度。
    Array.prototype.reverse()
    颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。
    Array.prototype.shift()
    删除数组的第一个元素,并返回这个元素。
    Array.prototype.sort()
    对数组元素进行排序,并返回当前数组。
    Array.prototype.splice()
    在任意的位置给数组添加或删除任意个元素。
    Array.prototype.unshift()
    在数组的开头增加一个或多个元素,并返回数组的新长度。
    //  访问方法
    Array.prototype.concat()
    返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。
    Array.prototype.includes()
    判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false。
    Array.prototype.join()
    连接所有数组元素组成一个字符串。
    Array.prototype.toString()
    返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法。
    Array.prototype.indexOf()
    返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。
    Array.prototype.lastIndexOf()
    返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。
    //  迭代方法
    Array.prototype.forEach()
    为数组中的每个元素执行一次回调函数。
    Array.prototype.entries()
    返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。
    Array.prototype.every()
    如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false。
    Array.prototype.some()
    如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。
    Array.prototype.filter()
    将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。
    Array.prototype.find()
    找到第一个满足测试函数的元素并返回那个元素的值,如果找不到,则返回 undefined。
    Array.prototype.findIndex()
    找到第一个满足测试函数的元素并返回那个元素的索引,如果找不到,则返回 -1。
    Array.prototype.keys()
    返回一个数组迭代器对象,该迭代器会包含所有数组元素的键。
    Array.prototype.map()
    返回一个由回调函数的返回值组成的新数组。
    Array.prototype.reduce()
    从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。
    Array.prototype.reduceRight()
    从右到左为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。
    Array.prototype.values()
    返回一个数组迭代器对象,该迭代器会包含所有数组元素的值。

    12.5 字符串对象(部分)

    //  属性。
    String.prototype.length
    返回了字符串的长度。
    //  跟HTML无关的方法
    String.prototype.charAt()
    返回特定位置的字符。
    String.prototype.charCodeAt()
    返回表示给定索引的字符的Unicode的值。
    String.prototype.concat()
    连接两个字符串文本,并返回一个新的字符串。
    String.prototype.includes()
    判断一个字符串里是否包含其他字符串。
    String.prototype.endsWith()
    判断一个字符串的是否以给定字符串结尾,结果返回布尔值。
    String.prototype.indexOf()
    从字符串对象中返回首个被发现的给定值的索引值,如果没有找到则返回-1。
    String.prototype.lastIndexOf()
    从字符串对象中返回最后一个被发现的给定值的索引值,如果没有找到则返回-1。
    String.prototype.localeCompare()
    返回一个数字表示是否引用字符串在排序中位于比较字符串的前面,后面,或者二者相同。
    String.prototype.match()
    使用正则表达式与字符串相比较。
    String.prototype.replace()
    被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串。
    String.prototype.search()
    对正则表达式和指定字符串进行匹配搜索,返回第一个出现的匹配项的下标。
    String.prototype.split()
    通过分离字符串成字串,将字符串对象分割成字符串数组。
    String.prototype.startsWith()
    判断字符串的起始位置是否匹配其他字符串中的字符。
    String.prototype.substr()
    通过指定字符数返回在指定位置开始的字符串中的字符。
    String.prototype.substring()
    返回在字符串中指定两个下标之间的字符。
    String.prototype.toLocaleLowerCase()
    根据当前区域设置,将符串中的字符转换成小写。对于大多数语言来说,toLowerCase的返回值是一致的。
    String.prototype.toLocaleUpperCase()
    根据当前区域设置,将字符串中的字符转换成大写,对于大多数语言来说,toUpperCase的返回值是一致的。
    String.prototype.toLowerCase()
    将字符串转换成小写并返回。
    String.prototype.toSource()
    返回一个对象文字代表着特定的对象。你可以使用这个返回值来创建新的对象。重写 Object.prototype.toSource 方法。
    String.prototype.toString()
    返回用字符串表示的特定对象。重写 Object.prototype.toString 方法。
    String.prototype.toUpperCase()
    将字符串转换成大写并返回。
    String.prototype.trim()
    从字符串的开始和结尾去除空格。参照部分 ECMAScript 5 标准。
    String.prototype.trimStart()
    String.prototype.trimLeft()
    从字符串的左侧去除空格。
    String.prototype.trimEnd()
    String.prototype.trimRight()
    从字符串的右侧去除空格。
  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: