重抓JS基础知识(码字ing)

·  阅读 987

初步了解JaveSctript

  • Web标准的构成
标题内容说明
结构HTML网页元素的结构和内容
表现CSS网页元素的外观和位置,包括版式和颜色、大小
行为js网页模型的定义和交互
  • Javascript是一种编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等等实现人机交互效果,简单来说,可以通过简短的代码来实现神奇的功能。
  • JavaScript的书写方式,规范是script标签写在body上面
    • 行内JavaScript
    • 内部JavaScript
    • 外部JavaScript
  • 结束符
    • 代表语句的结束,用英文的;表示。
    • 可写可不写。
    • 换行符(回车) 会被识别成结束符,因此在实际开发中有许多人主张书写JavaScript代码时,省略结束符。
    • 但是为了统一风格,要写结束符就每句都写,要么就每句都不写。
  • JavaScript输入输出语句
    • 输出和出入可以理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示给用户,这便是一个输入和输出的过程。
    • 输出语句
      • ducoment.write("要输出的内容")
        • 向body内输出内容
        • 如果输出的内容是标签,也会被解析成网页元素
      • alert(要输出的内容)
        • 页面弹出框,输出对应的内容
      • console.log(要输出的内容)
        • 控制台输出对应的内容,通常帮助我们进行调试。
    • 输入语句
      • prompt("请输入你的姓名")

变量

  • 目标:理解变量是计算机存储数据的容器,掌握变量的声明方式

变量是什么

  • 白话:变量就是一个盒子。
  • 通俗:变量就是计算机存储数据的容器,它可以让计算机有记忆。

变量的基本使用

变量的声明方式

  • 想要使用变量,首先要创建变量(专业的说法叫声明变量)
  • 声明变量有两部分构成:声明关键字、变量名(标识)
  • let即为关键字,let(允许、许可、让、要),所谓关键字就是系统提供的专门用来声明(定义)变量的词语
  • let语法
    //let声明一个变量,例如
    let age
    //let声明变量并赋值
    let age = 18
    //let同时声明多个变量并同时声明
    let age = 18, name = "张三" 
    复制代码
  • 使用let时注意事项
    • 允许声明和赋值同时进行。
    • 不允许重复声明
    • JavaScript中内置的一些关键字不能被当作变量名
    • 允许同时声明多个变量并赋值
  • 变量赋值
    • 定义一个变量后,你就能够初始化它(赋值),在变量名之后加上一个=号,然后跟数值
    • 语法
    let age
    age = 18
    复制代码
  • 更新变量
    • 变量赋值后,还可以给它一个不同的值来更新它。
    • 语法
    let age
    age = 18
    age = 19
    复制代码
    • 注意
      • let能重新赋值但是不能被重复被定义(声明)

变量的本质

  • 内存:计算机中存储数据的地方,相当于一个空间。
  • 变量:是程序在内存中申请的一块拿来存放数据的小空间。

变量的命名规则与规范

规则:必须遵守,不遵守会爆错

  • 不能使用关键字。
    • 关键字:有特殊含义的字符,JavaScript内置的一些英语词汇。例如:let var if for等等。
  • 只能用下划线、字母、数字、$组成,且数字不能开头。
  • 字母严格区分大小写,如Age和age是不同的变量。

规范:建议,不遵守不会报错,但是不符合业内通识

  • 起名要有意义。
  • 遵守驼峰式命名
    • 第一个单词的首字符小写,后面每个单词首字母大写。例如userName

数据类型

  • 计算机世界完事成物都是数据。
  • 计算机程序可以处理大量的数据,为了方便数据的管理(用途不同),将数据分成了不同的类型
数据类型作用表示形式
String(字符串)表示文字内容英文的单引号或者双引号包起来'hello'、“world”
Number(数字)表示数字内容直接写数字10,20
Boolean(布尔)表示对立的两种状态,真或者假,对或者错等等true 和 falseture、false
undefined(未定义)表示未定义undefinedundefined
Object(对象)表示普通对象用大括号包起来的键值对{name:nihao}
Null(空值)表示空对象nullnull
Array(数组)表示数组对象用中括号包起来[1,2,3]
Regex(正则)表述正则对象用反斜杠包起来/^[+-]?/

数字类型(Number)

  • 即我们数学中学习到的数字,可以是整数、小数、正数、负数、NaN(非数字)。

NaN

  • NaN:not a number;意思是不是一个数,但是它属于数字类型。
  • NaN和任何一个值都不相等,包括自己。

isNaN()

  • 检测一个值是否为有效数字,如果不是有效数字返回true,如果是有效数字返回false。
  • 再使用isNaN这个方法时,首先会检测检测值是否为数字,如果不是,它会进行隐式转换,用Number()这个方法将值先转为数字类型然后在进行检测。

Number()转化

  • 将字符串转为数字,只要字符串中包含任意一个非有效数字字符结果都是NAN,空字符串会返回0
  • 把引用数据类型转为数字,是先把他基于toString()方法转换为字符串

pareseInt()和parseFloat()

  • parseInt()将其他数据转为数字整数
  • parseFloat()将其他数据转为数字,取到小数点。
var a = '12px'
console.log(parseInt(a))//12
let ary = [13,14]
console.log(parseInt(ary))//13
// 它会将其他数据类型先转化为字符串类型,ary.toString()后返回值为'13,14'。
复制代码

字符串类型(String)

  • 通过单引号''、双引号""或者反引号``包裹的数据都叫字符串,单引号和双引号本质上没有区别,推荐使用单引号。
  • 一个字符串是由零到多个字符组成,每一个字符都有自己位置的索引,由一个length存储字符串的长度。
  • 注意
    • 无论是单引号还是双引号都必须是成对的使用
    • 单引号/双引号都可以互相嵌套,但是不能嵌套自己,外双内单或者外单内双都可以。
    • 必要时可以使用转义符\输出单引号或者双引号

字符串拼接

ES6新增的模板字符串

  • ${}中存放的是js表达式,可以是变量以及变量运算,三元运算符等等。
var x = 15
console.log(`${x}px`)//15px
let b = 3
console.log(`${x*b}px`)//45px

复制代码

利用+拼接

  • +号左右两边有一边出现字符串,结果就是字符串拼接
  • +号左右两边有一个边出现对象(目的是把对象转为数字,进行数学运算)
    • 系统首先会获取对象的[Synbol.toPrimitive]属性值
    • 如果没有这个属性,其次获取他的valueOf();原始值都是基本数据类型。
    • 如果还没有原始值,最后就会把它转为字符串toString,最后就变成字符串拼接了。
let a = 46
console.log(a+'岁')//46岁

let ary = [12,13]
ary[Symbol.toPrimitive]//undefined
ary.valueOf()//[12,13] //这个不是他的原始值,所有的原始值都是基本数据类型

let num = new Number(10)//这是一个对象
console.log(num[Symbol.toPrimitive],num.valueOf) //undefined  10
console.log(num+10)  //20
复制代码
  • +号只出现一边,这样这一边即使是字符串/对象,也是数字运算

字符串的方法

获取字符串中的字符

  • 利用变量[]加索引获取
  • 利用charAt()方法
let str = 'fhcsj'
console.log(str[2])//c
console.log(str[str.legnth-1])//j

console.log(str.charAt(2))//c
复制代码

把其他数据类型转化为字符串类型

  • 利用变量.toString()方法
  • 利用String(变量)
  • 注意:
    • 数组转字符转,返回值是将数组中的每一项用逗号分隔
    • 对于普通对象转为字符串,不论对象中包含的值是什么,最终的返回值都是"[object Object]"
let num = 15,
ary = [11,13]
num.toString()//'15'
String(num)//'15'

ary.toString()//'11,13'

let obj = {}
obj.toString()//"[object Object]"
复制代码

charCodeAt()

  • 返回字符串对应索引的编码

substr(start,end)

  • 字符串截取

slice(start,end)

  • 返回新的字符串,截取从start索引到end,但是不包括end索引。

split(separator,howmany)

  • 利用指定的separator(必须)参数,将字符串分割成数组,howmany(可选)定义数组的长度,如果没写howmany参数,则对数组的长度没有限制。
    let str = 'fdkfhkds'
    console.log(str.split('k'))//[fd,fh,ds]
    console.log(str.split('k',2))//[fd,fh]
    复制代码

replace(regexp/substr,replacement)

  • 用(replacement字符)替换 字符串中的(substr字符)或者替换一个与正则匹配的字符。
    let str = 'fsfsdhfsdfs'
    console.log(str.replace('fs','i'))//ifsdhfsdfs,它只会替换第一个
    
    console.log(str.replace(/fs/),i)//ifsdhfsdfs,这样写它也只会替换第一个
    
    console.log(str.replace(/fs/g),i)//iidhidi,这样写是替换字符串中所有的fs
    
    复制代码

indexOf(searchValue,fromIndex)/lastIndexOf(searchValue,fromIndex)

  • indexOf()
    • 返回规定检索的字符串值(searchValue,必写)的索引,fromIndex(规定从哪个索引值开始检索,可选)
    • 如果在字符串中没有检索到规定的字符串值,则会返回-1。
  • lastIndexOf()
    • 返回规定检索的字符串值从右往左第一次出现的索引,fromIndex规定从第几个字符开始(其中这个字符是从后面往前数的)。注意:它的0索引还是最左边的第一个字符。
    • 如果字符串中检索不到规定的字符值则返回-1
let str = 'fsdhkhds'
console.log(str.indexOf('d'))//2
console.log(str.indexOf('d',3))//6

console.log(str.lastIndexOf('d'))//6
console.log(str.lastIndexOf('d',2))//2
复制代码

includes(searchValue,fromIndex)

  • 判断字符串中是否包含规定的字符值(searchValue),从规定的索引开始(fromIndex),返回值为true或者false
let str = 'fdsds'
console.log(str.includes('a'))//false
console.log(str.includes('s'))//true
复制代码

布尔类型(Boolean)

  • 表示肯定或者否定时,在计算机中对应的就是布尔类型,它有两个固定的值true或者false。
  • 把其他数据类型转化为布尔类型的两种方式
    • Boolean(value)
    • !!value
  • 注:只有0、NaN、空字符串、undefined变为布尔类型的值为false,其他的都是true。

未定义类型(undefined)

  • 未定义类型是一种比较特殊的类型,只有一个值undefined。
  • 什么情况出现未定义类型?
    • 只声明变量没有赋值的情况下,变量的默认值为undefined,一般很少为某个变量赋值undefined。

Symbol(表示唯一值,属于基本数据类型)

let a = Symbol(0)
let b = Symbol(0)
console.log(a==b)//false
复制代码

对象数据类型

普通对象

  • {}包着键值对表示,类数组、实例、原型对象......

数组对象

  • []包着表示

正则对象

  • //包着表示

日期对象

函数Function

  • 函数:被设计为执行特定任务的代码块
  • 说明:函数可以把具有相同或者类似逻辑的代码块包裹起来,通过函数调用执行这些代码逻辑,这么做的优势是有利于精简代码,方便复用。
  • 语法
    function 函数名() {
        函数体
    }
    //函数调用,函数体内的代码逻辑会被执行
    函数名()
    // 可重复调用,次数不限。
    复制代码
    • 函数的命名规范
      • 和变量命名基本一致
      • 尽量使用驼峰式命名
      • 前缀一般为动词
      • 命名建议:常用动词约定。
常用的动词含义
can判断是否可执行某个动作
has判断是否含义某个值
is判断是否为某个值
get获取某个值
set设置某个值
load加载某些数据

检测数据类型

typeof

  • 语法let age = 18;console.log(type age)
  • 注意
    • typeof能能检测基本数据类型。
    • typeof undefined的返回值是undefined。
    • type null的返回值是一个object。

JS算数运算符

  • 数学运算符也叫运算符,主要包括假、减、乘、除、取余(求模)。
描述符号
求和+
求差-
求积*
求商/
取余数(求模)%
    • 运算符比较特殊
      • +运算符在数字型中是求和运算
      • +运算符在字符串型中是拼接。

数据类型转换

隐式转换

  • 某些运算符被执行时,系统内部自动将数据类型进行转换,这种类型称为隐式转换。
  • 规则
    • +号两边只要有一个是字符串类型,就会自动把另一个转为字符串。
    • 除了+号以外的所有算术运算符都会把数据转成数值类型。

显式转换

  • 编写程序时过度依靠系统内部的隐式转换是不严谨的,最好是通过显式转换比较好。
  • Number(数据)
    • 转成数字类型
    • 如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字。
    • NaN也是number类型的数据,代表非数字
  • Boolean(数据)
    • 转成布尔类型
    • 0、空字符串、NaN、undefined、null转成false,其他的都是true。
  • 变量.toString()

ES6知识点

解构赋值

  • ES6中的解构赋值,主要是针对对象和数组,左侧定义和右侧值类似的结构,这样声明几个变量,快速获取到每一部分的信息。

数组结构赋值

let arr = [1, 2, 3, 4]
let [x, y] = arr
console.log(x, y)//1, 2

//如果在下面接着用x,y变量结构赋值,则会报错,说x,y已存在
let[y,...x] = arr//报错

//...代表剩余运算符,意思是剩下的数组都拿到并放到b中
let [a,...b] = arr
console.log(a, b)//1, [2, 3, 4]

//逗号代表前面的每一项
let[, , , x, y] = arr
console.log(x, y) // 40 undefined

//也可以给结构赋值的变量赋予一个默认值,如果没有值就等于默认值
let [, , , , b = 0] = arr
console.log(b)//0
复制代码

对象的解构赋值

//默认情况下声明的"变量"需要和"属性名一致",这样对象才可以获取到指定成员的值
let obj = {
    name:'珠峰培训',
    age:11,
    teacher:'fc',
    0:100
}
let {name,age} = obj
console.log(name, age) // '珠峰培训' 11

//声明一个x变量,并将obj.name 赋值给x
let {name: x} = obj

//解构赋值时,可以给变量设置默认值
let { x = 0 } = obj
//如果不存在这个属性值,则给赋值默认值0
console.log(x)//0

//对与数字属性名,我们则重新命名一个新的变量接收值即可
//如果直接写会报错,下面两种方式都会报错
let {0} = obj
let {[0]} = obj
//正确写法
let{0: x} = obj
console.log(x)//100

//快速获取网站的域名和网址
let {hostname:domain, pathname:path} = location;

//数组结构赋值和对象结构赋值的合并使用
let ary  = [100,'你好',{name: 'hello',score:[12, 13]}]
let [, y, {score:[, math]}]
console.log(y,math)//'你好',13
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改