Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
1数据类型:
原始数据:
原始类型: number, string, boolean, undefined, null
原始类型,二大特点:
1. 单值: a = 1, b='a'
2动态: 数据类型,由值的类型确定
console.log(typeof 'php.cn');
console.log(typeof true, typeof false);
let a; // undefined是变量的默认值
console.log(typeof null); /* null 返回是object类型,并非是 Null */
console.log(typeof undefined);
let x = 123;
console.log(typeof x);
x = 'php.cn';
console.log(typeof x);
1.数组: 每个成员可以是原始类型,也可以是引用类型
声明数组:const arr = ['电脑', 2, 5000];
为了看的方便一点,可以给它弄成表格形式:console.table(arr)
返回数组:console.log(arr);
返回数组中的第一个值 0:console.log(arr[0]);
返回数组中的第二个值 1:console.log(arr[1]);
返回数组中的第三个值 2:console.log(arr[2]);
查看当前数组的长度:console.log(arr.length);
判断当前数组是不是个数组:console.log(typeof arr); 返回object,object是个对象,
console.log(Array.isArray(arr)); Array。isArray:是数组的一个原型,,,结果如果返回true说明它是一个数组
----------------------------------------------------------------
const arr = ['电脑', 2, 5000];
console.table(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr.length); /* length:查看当前数字为多少个原型/当前数组的长度 */
console.log(Array.isArray(arr));
2对象
const arr = ['电脑', 2, 5000];,给它语义化一下:
const obj = { /* 语义化: */
/* 名称 */ name: '电脑',
/* 数量 */ num: 2,
/* 价格 */ price: 5000,
'my email': 'a@php.cn',
拿到里的第一个值: console.log(obj['name']);
};
拿到数组中的第二个值:console.log(obj.num);
// 对于符合js标识符命名规范的属性名,可以用点来访问,也可以不用点,用两个单引号访问如:'my email': 'a@php.cn',
}
对象最主要的功能:可以把一些常用操作给他封装进去 :
obj123 = {
/* 名称 */ name: '电脑',
/* 数量 */ num: 2,
/* 价格 */ price: 5000,
'my email': 'a@php.cn',
total: function () { /* total: function:函数声明 */
// this: 当前对象的引用, 和当前对象绑定,,不用更改obj也可以显示,因为this已经和当前对象绑定
return /* :计算 */ this.name + '总价 : ' + this.num * this.price + ' 元';
},
};
console.log(obj123.total());
通常还可以把数组跟对象混到一起用:
console.log(obj123.total());
/*以下是创建的一个数组,,这个数组里所有的数据都是对象;*/
obj = [
{ name: '手机', num: 2, price: 5000 },
{ name: '电脑', num: 5, price: 6000 },
{ name: '相机', num: 4, price: 2000 },
];
console.log(obj); /* 进行访问 */
进行其他操作:求和:
let res = obj.map(item => item.num * item.price).reduce((acc, cur) => acc + cur);
console.log(res);
3.函数:
函数既是数据类型,也是对象
1将函数当成数据类型的优点
// 1. 当成函数的参数: 回调
function f1() {}
function f2(f) {
console.log(typeof f); /* 回调,就是将一个函数做为参数传递到另一个函数去 */
}
// f2是一函数, 它接受一个函数做为参数,可以将上面声明的f1传入
f2(f1);
第二种方法,当作闭包来用:
function f3() {
return function () {
return 'hello world';
};
}
console.log(f3()());
1.分支分支: 本质上来说,就是有条件执行某段代码
1.单分支:
let age = 28;
console.log(age >= 18);
if (age >= 18) {
console.log('成年了允许进入');
}
2.双分支:
/*语法糖: 三元操作
条件 ? true : false
age >= 18 ? console.log('成年了允许进入') : console.log('未成年人禁止进入');*/
age = 17;
console.log(age >= 18);
if (age >= 18) {
console.log('成年了允许进入');
}
// 默认选项
else {
console.log('未成年人禁止进入');
}
age = 126;
/* &&表示且,并且 */
if (age >= 0 && age < 18) {
console.log('未成年人禁止入内');
}
// 默认的第1个分支
else if (age >= 18 && age < 30) {
console.log('可以两人或多人结伴进入');
}
// 默认的第2个分支
else if (age >= 30 && age < 60) {
console.log('建议在孩子陪同下进入');
}
else if (age >=60 && age <120){
console.log('不建议进入网吧')
}
// 默认的第3个分支,进行非法数据的过滤
/*|| 表示或,或者什么什么.... */
else if (age >= 120 || age < 8) {
console.log('非法年龄段');
}
else {
console.log('禁止入内');
}
多分支的语法糖: switch
区间判断,并非单值,一定用true才能进入分支
必须要用true做为switch入口判断条件
/* switch (条件){
每个分支用 case 表示,如第一个分支:case 1;
case 1;
/* 语句......*/
break; 跳出该分支 */
/* 最后还有一个默认分支:
default: */
代码如下:
switch (true) {
case age >=1 && age <18:
console.log('未成年人')
case age >= 18 && age < 35: /* 条件 */
console.log('成年人');/* 语句 */
break;/* 跳出 */
case age >= 35 && age < 60:
console.log('中年人');
break;
case age >= 60 && age < 120:
console.log('老年人');
break;
case age >= 120 || age < 8:
console.log('非法年龄段');
break;
default:
console.log('未成年人');
}
经典应用: 单值判断:
let language = 'html';
language = 'Css';/*都会被转为小写*/
// 实现js/javascript都能正确输出
language = 'javascript';
// language = 'php';
switch (language.toLowerCase()) {
case 'html':
console.log('超文本标记语言');
break;
case 'css':
console.log('层叠样式表');
break;
case 'js':
// case之间没有break,会连续输出,按顺序输出
case 'javascript':
console.log('前端通用脚本语言');
break;
default:
console.log('未定义的选项');
const colors = ['red', 'green', 'blue'];
console.log(colors);
console.log(colors.length);
console.log(colors[0], colors[1], colors[2]);
// 最后一个元素的索引是 当前数组的长度减一: 2=colors.length-1
console.log(colors.length - 1);
console.log(colors[colors.length - 1]);/* 最后一个元素可以用length - 1拿到 */
console.log(colors[colors.length]);
// !号进行 取反
if (!undefined) {
console.log(true);
}
// 数组的遍历:
// 数组起始索引:
let i = 0;
// 遍历的条件:
let length = colors.length;
/* if (i < length) {
console.log(colors[i]);
必须要更新循环条件,否则进入死循环
i = i + 1;
}
if (i < length) {
console.log(colors[i]);
必须要更新循环条件,否则进入死循环
i = i + 1;
i += 1;
i++;
}
if (i < length) {
console.log(colors[i]);
必须要更新循环条件,否则进入死循环
i = i + 1;
}
if (i < length) {
console.log(colors[i]);
必须要更新循环条件,否则进入死循环
i = i + 1;
} else {
console.log('遍历结束');
} */
用循环来简化以上操作:
console.log('----------------');
i = 0;
// 入口判断
while (i > length) {
console.log(colors[i]);
// 必须要更新循环条件,否则进入死循环
i++;
}
console.log('----------------');
console.log(i);
i = 0;
// 出口判断, 至少要执行一次循环体中的代码,哪必条件为false/假
do {
console.log(colors[i]);
// 必须要更新循环条件,否则进入死循环
i++;
} while (i > length);
console.log('===============');
循环三要素:
/* 1. 索引初始化: 0
2. 循环条件: i < length
3. 更新循环条件: i++
for 可以看成 while 语法糖或简化 */
for (let i = 0; i < length; i++) //{全部写进for中
console.log(colors[i]);
}
// es6 : for-of
for (let item of colors) {
console.log('phpcn: ' + item);
}
// 用循环方式来遍历对象
const obj = {
a: 1,
b: 2,
c: function () {},
}
// 不能用for-of, 要用 for -in
for (let key in obj) {
console.log(obj[key]);
}
// 数组也是对象, 也可以用for in
for (let key in colors) {
console.log(colors[key]);
}
// 数组可以用while,for,for-of,for-in
// 对象用for-in