阅读 32

javascript基础系列:javascript中的变量和数据类型(一)

今天开始去重新系统温习一遍js基础,并作下记录

javascript是由三部分组成:

  1. ECMASCRIPT(ES): 描述了该语言的语法和基本对象
  2. DOM: 文档对象模型,描述处理网页内容的方法和接口
  3. BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口

js做客户端语言

按照相关的js语法,去操作页面中的元素,有时还要操作浏览器里面的一些功能

  1. ECMAScript3/5/6,js的语法规范(变量、数据类型、操作语句等等)
  2. DOM(document object model):文档对象模型,提供一些js的属性和方法,用来操作页面中的DOM元素
  3. BOM(browser object model): 浏览器对象模型,提供一些js的属性和方法,用来操作浏览器的

变量和数据类型(variable && data type)

变量:
多种定义方式:var/let/const/function/import/class
严谨的命名规范:区分大小写/驼峰命名/关键字保留字
数据类型
基本数据类型:number、string、boolean、null、undefined
引用数据类型:object(数组、对象、正则)、function
Symbol: 唯一值

js中的变量 variable

变量: 可变的量,在编程语言中,变量其实就是一个名字,用来存储和代表不同值的东西。

创建变量的几种方式:

  1. ES3
var a = 12
a = 13
console.log(a) // 输出的是a代表的值13
复制代码
  1. ES6
let b = 100
b = 200
const c = 1000
c=2000 // 报错,const创建的变量,储存的值不能被修改(常量 )
复制代码
  1. 创建函数也相当于在创建变量
function fn() {}
复制代码
  1. ES6中创建类也相当于创建变量
  2. ES6的模块导入也可以创建变量
import B from './b.js'
复制代码
  1. 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中常用的数据类型

  1. 基本数据类型
  • 数字number :常规数字和NaN
  • 字符串string: 所有用 单引号、双引号、反引号包起来的都是字符串
  • 布尔boolean:true/false
  • 空对象指针null
  • 未定义undefined
  1. 引用数据类型

对象 数据类型object

  • {}普通对象
  • []数组对象
  • 正则对象

函数数据类型function

1. number数字数据类型详解

number数字类型:包含:常规 数字、NaN

  1. NaN

NaN:not a number :不是一个数,但 它率属于数字类型
NaN和任何值(包括自己)都不想等,所以我们不能用想等的方式判断是否为有效数字
isNaN:检测一个值是否 为非有效数字,如果不是有效数字返回true,反之是有效数字返回false
在使用isNaN进行检测的时候,首先会验证检测的值是否为数字l类型,如果不是,先基于Number()这个方法,把值转换为数字类型,然后再检测

  1. 把其它类型值转换为数字类型

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字符串数据类型

所有用单引号、双引号、反引号包起来的都是字符串

  1. 把其它类型转换成字符串

[val].tostring()
null 和undefined是禁止直接toString的,
普通对象.toString()的结果是 "[object Object]" 原因:Object.prototype.toString方法不是转换为字符串的,而是用来检测数据类型的

[].toString() // => ""
({name: 'xxx'}) // => "[object Object]"
复制代码
  1. 字符串拼接

四则运算法则中,除加法之外,其余都是数学计算,只有加法可能存在字符串拼接

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

  1. 把其它类型值转换为布尔类型

只有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
复制代码
  1. 设置属性名属性值

属性名不能重复,如果属性名已经存在,不属于新增属于修改属性值

  1. 删除属性名

真删除:把属性彻底干掉
假删除: 属性还在,值为空

let person = {
	name: 'lanfeng',
  age: 23,
  height: '185cm',
  weight: '80kg',
  1: 100
}
// 假的删除
person.weight = null
console.log(person)

// 真删除
delete person[1]
复制代码

7. 数组是特殊的对象类型

  1. 我们设置的是属性值,属性名是默认生成的数字,从零开始递增,而且这个数字代表每一项的位置,我们把其称为“索引”,从零开始,连续递增,代表每一项的位置的数字属性名
  2. 默认一个属性名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)
复制代码

如想了解更多,请关注公众号
qrcode_for_gh_4d3763fa9780_258 (1).jpg