1.0变量与常量
变量的概念：变量用于存储编程所使用的数据和方法。
声明一般变量关键字：var， let， const。其中let和const是es6的语法。
声明其他特殊变量关键字：function，class，import等
声明变量：
<script>
//声明一个变量
let x;
//声明多个变量
let x,y;
</script>
变量用于存储数据，因此可以把变量当成是一个"容器"
存储在变量中的数据，叫做"变量的值"
如何给变量存储数据？
给变量存储数据的过程，叫"赋值"，符号是 "="
变量赋值
<script>
//声明一个变量并赋值
let x = 10;
//声明多个变量并赋值
let x = 10,
y = 20;
</script>请注意：这里的“=”并不是数学上的“=”，而是称为赋值
<script>
// 意思是把10装进x里。或者理解为把x变成10;
// 不是x等于10的意思
x = 10;
// 数学上 a = b 和 b=a 是一个意思，但是在编程世界中不是这样。
// 把b装进a中（把a变成b）
a = b
// 把a装进b中（把b变成a）
b = a
</script>请注意：
变量必须声明后才可以使用，否则报错：x is not defined (x未定义,未声明)。
例如：企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误。
2.0常量
- 常量，意思就是值不能修改的数据。
- 常量的值就是常量本身。
- 例如：10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成11.
- ES6使用const声明一个常量。
- const声明常量时必须同时赋值，并且后续不可再修改。
2.1const
<script>
// let var
// let 不能重复声明
// var 可以重复声明.
// 会报错
let x = 10;
let x = 20;
// 不会报错
var y = 30;
var y = 40;
// const声明.=> 声明常量.
const x = 10;
// const声明的x是不能再通过=修改.
x = 20;
// x的值 => 变量是容器,容器里面放的东西就是值.
// 值有可能会变,用let.永远不变,用const
</script>3.0标识符命名规则
标识符：编程中的各种名字，例如变量名，属性名，函数名，方法名，数组名，对象名等等。
- 编程中起名字（标识符命名）的规则：
- 由数字和英文组成，但是不能以数字开头
- 特殊字符(除了英文和数字之外的字符)只能包含_和$
- 不能和关键字保留字冲突
- 区分大小写。
<script>
// 错,不能数字开头
let 1x = 10;
let x1 = 20;
let x$ = 30;
// 特殊字符不能有*
let x* = 40;
// 不能是-
let margin-left = 100;
// _可以.
let margin_left = 100;
// 关键字不能做标识符
let let = 10;
let var = 10;
// 可以 LET和let不是相同的标识符
let LET = 20;
let a = 10;
// 报错,因为声明时是小写的a
console.log(A);
// ------------------------------
// 驼峰命名:如果一个标识符是多个单词组成,习惯首个单词的首字母小写,其他字母的首字母大写
let margin_left = 100;
let marginLeft = 100;
let getElementById = '获取id';
</script>标识符命名习惯：
1：数据类型+单词。例如：oDiv。表示oDiv的数据类型是对象，它的值是一个div标签。
2：驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写，后续单词首字母大写。
例如：getElementsByTagName
4.0数据类型
顾名思义，数据类型就是数据的种类。不同数据拥有不同的作用.
数据类型 => 数据种类
数据总共 => ES5有6种,ES6新增了一种.
ES5的这6种:
1：number（数字）
2：string（字符串）
3：boolean（布尔值）（用于表示true 和 false）
4：undefined （空的值）（用于表示空的值）
5：null（不存在的对象）（用于描述一个不存在的对象）
6：object（对象）（描述一组数据）
其中object细分，又分为数组（array），函数（function）和纯对象（plain object）3种。
number(数字类型)
<script>
// 声明一个num变量,赋值10.这个num变量是数字类型.
// 一个变量是什么数据类型,只看它的值是什么.
let num = 10;
// 检查一个变量的数据类型.
console.log(typeof num);
</script>string(字符串)
<script>
// 字符串 (文字)
let str = '你好';
// 字符串.string
console.log(typeof str);
</script>boolean（布尔值）
<script>
let flag = true;
console.log(typeof flag);
</script>undefined
<script>
let flag;
// 声明了没有赋值,数据类型就是undefined
console.log(typeof flag);
</script>object(对象)
<script>
// object类型分三小类
// function(函数), array(数组), plain object(纯对象)
alert('你好');
function
console.log(typeof alert);
const arr = [11, 22, 33];
object
console.log(typeof arr);
const obj = { name: '幂幂' };
object
console.log(typeof obj);
const obj = null;
object
console.log(typeof obj);
// typeof 检查数组,纯对象还有null的时候,结果都是object.(typeof 的确定就是这样)
</script>其中：
number，string，boolean，undefined，null为基本类型（简单类型）。（不是对象，理论不能添加属性）
object（包括array，function，plain object以及其他对象）为引用类型（复杂类型）。（是对象，可添加属性）
NaN
<script>
// NaN => not a number => 不是一个数字
let num = NaN;
// num的数据类型是number.
console.log( typeof num );
// NaN表示没有具体值的数字.
// 注意,NaN不是无穷大的意思.
// 无穷大是Infinity;
let n = Infinity;
// number
console.log( typeof n );
</script>字符串
- 字符串用于在编程中描述文字。
- 字符串需要使用引号括起。单引号双引号都可以，但是不能混用。
- ES6中也可以使用字符串模板来表示字符串。符号是反引号 ``.
关于反引号的操作：
<script>
// 字符串 => 文字
// 文字都需要加引号.单引号双引号,反引号都可以.
// 反引号。(英文输入状态下的波浪按键)
let msg = `你好`;
console.log(typeof msg);
// 什么时候用单引号，双引号，反引号？
// 字符串容本身就带双引号,则字符串需要单引号
let str = '小李最帅"不接受反驳"';
// 字符串容本身就带单引号,则字符串需要双引号
let str = "小李最帅'不接受反驳'";
console.log(str);
// 不管字符串内容本身有没有引号,最外面都可以使用反引号
let str = `小李最帅'开挂了'`;
let str = `小李最帅"不接受反驳"`;
</script>字符串拼接：
两个字符都可以通过 + 拼接连城一个新的字符串
<script>
// 拼接两个字符串常量
let x = '你' + '好';
// 拼接两个字符串变量
let str1 = '你';
let str2 = '好';
let word = str1 + str2;
// 在字符串常量中拼接变量
let word = str1 + str2 + '吗？';
let word = '现在' + str1 + str2 + '吗？';
// 使用ES6的字符串模板拼接字符串常量和变量
let word = `现在${str1}${str2}吗？`;
</script>难点：
1：要不要写引号.
2：字符串拼接如果使用es5的 + 进行拼接，如何写 + 和 ''.
空字符串
<script>
// NaN => 没有具体值的数字。
// '' => 空字符串 => 没有字符的字符串
// 初始化一个不知道具体字符的字符串.
// let str = '';
// console.log(typeof str);
// 通过拼接空字符串,可以把一个数组转换为字符串.
let num = 100 + '';
// string
console.log(typeof num);
// 1:怎么写字符串.(用什么引号)
// 2:字符串拼接.(+或者${})
// 3:空字符串.
// 难点: 要不要加引号.
let str = '你好';
// 写什么弹什么
alert('str');
// 弹一个变量str的值.
alert(str);
</script>undefined
- 表示没有值的默认值。
- 一个变量声明后没有赋值，这时候这个变量中的值是什么呢？
- 这时候这个变量没有值，那如何表示这个没有值的状态呢？使用undefined表示
<script>
// 声明变量 => 增
let x;
// 赋值 => 改
// x = 10;
// 查找x的值.
// 一个变量没有赋值,则它默认的值就是undefined
console.log(x);
</script>其实很多时候，本该有值的地方没有值，都显示undefined。
null
- null和undefined很像。一般我们都只用null来表示一个暂时还不存在的对象。
- 例如：获取一个标签，这个标签在页面上不存在，如何描述这个不存在的标签呢？用null表示。
object
- 对象 => 看得见摸得着的东西.
- 面向对象 => 把看不见摸不着的东西,也想象成看得见摸得着的东西.(抽象的过程).
- 纯对象是一种无序的数据结构.
- 纯对象都通过一个{}包裹
- {}内书写的都是对象的属性.
- 属性由属性名和属性值组成.
- age: 35 => age是属性名, 35属性值.
- 属性都是键值对(key-value).
- age: 35 => age是key(键), 35就是value(值)
- 多个属性之间,用,隔开.
- 属性名和属性值之间是:链接.不是=
<script>
let obj = {
cname: '李唐',
ename: 'Li Tan，tang',
nickName: '赵五、王六、顺溜',
age: 35,
height: '166.5 cm',
}
console.log(obj);
// . => 对象的属性访问操作符.(的)
// 打印obj对象的age属性值。
console.log(obj.age);
// 修改obj的age属性值。
obj.age = 100;
console.log(obj.age);
// 删除age属性。
delete obj.age;
console.log(obj);
// 新增一个一开始不存在的属性country。
obj.country = '中国';
console.log(obj);
</script>对象里面的对象（Object）
<script>
// 一个对象的属性可以是别的对象
// oYm的exhusband属性就是另一个对象.
let oYm = {
cname: '杨幂',
age: 35,
// 前夫
exhusband: {
name: '凯威',
age: 42,
brother: {
name: '开挂'
}
}
}
// 打印oYm的exhusband属性的name属性
console.log(oYm.exhusband.name);
// 删除凯威的age
delete oYm.exhusband.age
// 新增属性
oYm.exhusband.height = '170cm';
</script>Object大括号嵌套
<script>
// 1:属性在{}中药缩进一个制表符。
// 2:同级属性要左对齐.
// 3:属性: 后面要有空格.
// BracketPair Colorizer 2 插件可以帮助我们识别匹配的{}
let obj = {
name: '小李',
age: 32,
exhusband: {
name: '京京',
},
}
</script>Object里不存在的对象
<script>
const oYm = {
name: '幂幂',
}
// 访问一个不存在的属性,得到undefinded
// console.log(oYm.age);
// 不能读取undefined的x属性.
// Cannot read property 'x' of undefined
// console.log(oYm.age.x);
// 不能修改undefined的x属性.
// Cannot set property 'x' of undefined
oYm.age.x = 100;
// undefined和null后面是不能接.的.接了就报错
</script>- 注意：
万物皆对象。
- js的6种数据类型中，只有object类型才是对象，理论只有object类型才可以添加和访问属性。
- 但是js中，number,string以及boolean虽然不是object类型，但是他们可以访问属性，但是添加属性会失败。
- js中，唯一不能访问属性和添加属性的是undefined和null。
程序的步骤：
- 程序后面的代码按照前面的代码来进行计算.
- 如何分析程序的步骤,哪个步骤发送了什么事情,各种变量的值是什么,如何分析?
- 如何调试代码?
- 断点分析.(按步骤断点);
- 2种断点.
- 利用浏览器的功能来断点.
- 利用debugger命令来断点.(运行到debugger时,程序会暂时停止)
<script>
let num = 10;
debugger;
// num的值+1
num = num + 1;// 11
debugger;
num = num + 1;// 12
debugger;
num = num + 1;// 13
debugger;
num = num + 1;// 14
debugger;
console.log(num);
</script>检测数据类型：
- 变量的数据类型，意即变量的值的类型。
- 如何检测变量的数据类型？使用typeof操作符。
- 注意，typeof检测数组，null和object对象时不准确。
- typeof检测一个函数，得到的结果是 function。
- typeof检测一个数组，得到结果是 object。
- typeof检测一个null，得到结果是 object。
- typeof检测一个对象，得到结果是object。
扫一扫
6873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
