今天开始去重新系统温习一遍js基础,并作下记录
javascript是由三部分组成:
- ECMASCRIPT(ES): 描述了该语言的语法和基本对象
- DOM: 文档对象模型,描述处理网页内容的方法和接口
- BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口
js做客户端语言
按照相关的js语法,去操作页面中的元素,有时还要操作浏览器里面的一些功能
- ECMAScript3/5/6,js的语法规范(变量、数据类型、操作语句等等)
- DOM(document object model):文档对象模型,提供一些js的属性和方法,用来操作页面中的DOM元素
- BOM(browser object model): 浏览器对象模型,提供一些js的属性和方法,用来操作浏览器的
变量和数据类型(variable && data type)
变量:
多种定义方式:var/let/const/function/import/class
严谨的命名规范:区分大小写/驼峰命名/关键字保留字
数据类型
基本数据类型:number、string、boolean、null、undefined
引用数据类型:object(数组、对象、正则)、function
Symbol: 唯一值
js中的变量 variable
变量:可变的量,在编程语言中,变量其实就是一个名字,用来存储和代表不同值的东西。
创建变量的几种方式:
- ES3
var a = 12
a = 13
console.log(a) // 输出的是a代表的值13
- ES6
let b = 100
b = 200
const c = 1000
c=2000 // 报错,const创建的变量,储存的值不能被修改(常量 )
- 创建函数也相当于在创建变量
function fn() {}
- ES6中创建类也相当于创建变量
- ES6的模块导入也可以创建变量
import B from './b.js'
- Symbol
js命名规范
- 严格区分大小写
- 使用数字、字母、下划线、$,数字不能作为开头
let $box ; // 一般用jQ获取的以$开头
let _box ; // 一般公共变量都是_开头
let 2box; //不可以,但是可以写成box2
- 使用驼峰命名法:首字母小写,其余每一个有意义单词的首字母都要大写(命名尽可能语义化明显,使用英文单词)
常用的缩写:add/insert/create/new(新增)、updata(修改)、delete/del/remove/rm(删除)、sel/select/query/get(查询)、info(信息)
- 不能使用关键字和 保留字
js中常用的数据类型
- 基本数据类型
- 数字number :常规数字和NaN
- 字符串string: 所有用 单引号、双引号、反引号包起来的都是字符串
- 布尔boolean:true/false
- 空对象指针null
- 未定义undefined
- 引用数据类型
对象 数据类型object
- {}普通对象
- []数组对象
- 正则对象
函数数据类型function
1. number数字数据类型详解
number数字类型:包含:常规 数字、NaN
- NaN
NaN:not a number :不是一个数,但 它属于数字类型
NaN和任何值(包括自己)都不想等,所以我们不能用想等的方式判断是否为有效数字
isNaN:检测一个值是否 为非有效数字,如果不是有效数字返回true,反之是有效数字返回false
在使用isNaN进行检测的时候,首先会验证检测的值是否为数字l类型,如果不是,先基于Number()这个方法,把值转换为数字类型,然后再检测
- 把其它类型值转换为数字类型
Number([val])
parseInt/parseFloat([val],[进制])
Number(val): 把字符串转换为数字,只要字符串中包含任意一个 非有效数字字符(第一个点除外),结果都是NaN,空字符串会变为数字0
把引用数据类型转换为数字,是先基于toString方法转换为字符串,然后再转换为数字
parseInt/parseFloat([val],[进制]):也是转换为数字的方法,对于字符串来说,它是从左到右依次查找有效数字字符,直到遇到非有效数字字符,停止查找(不管后面是否还有数字,都不再找了),把找到的当做数字返回
console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(null)) // 0
console.log(Number(undefined))NaN
console.log(Number({age: 10})) // NaN {} .toString() => "[object Object]" => NaN
console.log(Number({})) // NaN
console.log(Number([])) // [].toString() => "" => 0
console.log(Number([12])) // 12
console.log(Number([12,13])) // NaN
console.log(parseInt('12.5px')) // 12
console.log(parseFloat('12.5px')) // 12.5
console.log(parseFloat(true)) // NaN
2. string字符串数据类型
所有用单引号、双引号、反引号包起来的都是字符串
- 把其它类型转换成字符串
[val].tostring()
null 和undefined是禁止直接toString的,
普通对象.toString()的结果是 "[object Object]" 原因:Object.prototype.toString方法不是转换为字符串的,而是用来检测数据类型的
[].toString() // => ""
({name: 'xxx'}) // => "[object Object]"
- 字符串拼接
四则运算法则中,除加法之外,其余都是数学计算,只有加法可能存在字符串拼接
let a = 10 + null + true + [] +undefined + "岚枫" + null + [] + 10 + false
connsole.log(a) // 11undefined岚枫null10false
/*
* 10 + null => 10 + 0 => 10
* 10 + true => 10 + 1 => 11
* 11 + [] => 11 + '' => '11' 空数组变为数字,先要经历变为空字符串,遇到字符串,直接变为字符串拼接了
* ‘11’ + undefined => '11undefined'
* ....
* 11undefined岚枫null10false
*/
3. boolean布尔类型
只有两个值true/false
- 把其它类型值转换为布尔类型
只有0、NaN、''、null、undefined五个值转换为false, 其余的都转换为true(而且没有任何的特殊情况)
- Boolean([val])
- !/!!
- 条件判断
// !:取反(先转为布尔,然后取反)
// !!: 取反再取反,相当于只转换为布尔
console.log(!1) // false
console.log(!!1) // true
如果条件只是一个值,不是==/===/!=/>=等这些比较,是要把这个值先转换为布尔类型,然后验证真假
if('3px' - 3) { //'3px' - 3 => NaN-3 => NaN => false
...
}
5. null/undefined
null和undefined都是代表的是没有
- null:意料之中(一般都是开始不知道值,我们手动先设置为null,后期再给赋值操作)
let num = null //=> let num=0; 一般最好用nul作为初始的空值,因为零不是空值,它在栈内存中有自己的存储空间(占了位置)
num = 12
- undefined:意料之外
let num; // 创建一个变量没有赋值,默认的值是undefined
num = 12
6. object对象数据类型-普通对象
{ [key]:[value], .... } 任何一个对象都是由零到多组键值对(属性名:属性值)组成的(并且属性名不能重复)
获取属性名对应的属性值
- 对象.属性名
- 对象[属性名], 属性名是数字或者字符串 或者变量
- 如果当前属性名不存在,默认的属性值是undefined
- 如果属性名是数字,则不能使用点的方式获取属性值
let person = {
name: 'lanfeng',
age: 23,
height: '185cm',
weight: '80kg',
1: 100
}
//获取属性名对应的属性值
// =》 对象.属性名
console.log(person.name)
// =》 对象[属性名], 属性名是数字或者字符串 或者变量
console.log(person['age'])
console.log(person.sex) // undefined
console.log(person.1) //SyntaxError: missing ) after argument list
- 设置属性名属性值
属性名不能重复,如果属性名已经存在,不属于新增属于修改属性值
- 删除属性名
真删除:把属性彻底干掉
假删除:属性还在,值为空
let person = {
name: 'lanfeng',
age: 23,
height: '185cm',
weight: '80kg',
1: 100
}
// 假的删除
person.weight = null
console.log(person)
// 真删除
delete person[1]
7. 数组是特殊的对象类型
- 我们设置的是属性值,属性名是默认生成的数字,从零开始递增,而且这个数字代表每一项的位置,我们把其称为“索引”,从零开始,连续递增,代表每一项的位置的数字属性名
- 默认一个属性名length,存储数组长度
let arr = [12, '哈哈', true, 13]
console.log(arr.length)
console.log(arr[length])
// 第一项索引 0, 最后一项索引 arr.length - 1
console.log(arr[0])
console.log(arr[length-1])
// 向数组末尾追加内容
arr[arr.length] = 100
console.log(arr)
如想了解更多,请关注公众号