初步了解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 和 false	ture、false	undefined（未定义）	表示未定义	undefined	undefined	Object（对象）	表示普通对象	用大括号包起来的键值对	{name:nihao}	Null（空值）	表示空对象	null	null	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

初步了解JaveSctript

变量

变量是什么

变量的基本使用

变量的声明方式

变量的本质

变量的命名规则与规范

规则：必须遵守，不遵守会爆错

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

数据类型

数字类型（Number）

NaN

isNaN()

Number()转化

pareseInt()和parseFloat()

字符串类型（String）

字符串拼接

ES6新增的模板字符串

利用+拼接

字符串的方法

获取字符串中的字符

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

charCodeAt()

substr(start,end)

slice(start,end)

split(separator,howmany)

replace(regexp/substr,replacement)

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

includes(searchValue,fromIndex)

布尔类型（Boolean）

未定义类型（undefined）

Symbol（表示唯一值，属于基本数据类型）

对象数据类型

普通对象

数组对象

正则对象

日期对象

函数Function

检测数据类型

typeof

JS算数运算符

数据类型转换

隐式转换

显式转换

ES6知识点

解构赋值

数组结构赋值

对象的解构赋值

常见问题FAQ

掘金(Everything_is_none) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式

利用`+`拼接

`charCodeAt()`

`substr(start,end)`

`slice(start,end)`

`split(separator,howmany)`

`replace(regexp/substr,replacement)`

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

`includes(searchValue,fromIndex)`