JavaScript基础
JS基础:
1.1易错代码
一元运算符案例中:++前置和++案例中
var num = 2;
var r = num++ + 2 - --num;
console.log(r);
代码的执行顺序是这样的:
① r = 2 + 2 - --num; // 第一个运算符是后置,所以先参加运算 所以显示2+2
② num = num + 1; num = 3; // 运算完第一步后 num = 3
③ r = 4 - --num; // 根据运算符的优先级 先执行自减 num = 2;
④ num = num -1; num = 2; // 第一步执行完的结果是 4 - num
⑤ r = 4-2; r = 2; // 所以最后的结果是 2
1.2易错单词
prompt / document.write
1.3易错知识点
1、对于优先级的理解 2、前置++ 和 后置++ 的理解和实际应用
2.1 易错代码
逻辑运算符案例中:
var a = 3
console.log(a==1) //false
console.log(a=1) //1
注意这里第一个console中 a == 1 是逻辑运算符, 第二个console 中 a = 1 是赋值运算,两者并不同
详情看控制台结果:
2.2 易错单词
confirm
2.3 易错知识点
理解应该没问题,但是大家写的时候容易出错
3.1 易错代码
在数据类型转换案例中
var age = prompt('请输入你的年龄');
console.log(age + 5);
当用户输入4 是 等到结果:
是不是已经疑惑了,这是因为? 这是因为你用prompt 接收到用户传人的是字符串形式的”4” 然后”4”+5 字符串和数字 之间的加号已经不是运算符号,此时的+号是连接符号。
3.2 易错单词
Number、 typeof、parseInt、undefined
3.3 易错知识点
注意+号什么时候是连接符,什么时候是运算符
4.1 易错代码
在数据类型转换Boolean案例中
console.log(Boolean(-1));
console.log(Boolean(' '));
在此案例中需要记住的是: true:其他情况
‚ false: 0、''、NaN、undefined、null
注意一下第二个console 并不是空的,而是有空格的,所以这两个console.log 的输出都是true.
4.2 易错单词
Boolean/ parseFloat
4.3 易错知识点
数据类型之间的转换记住特殊情况。
5.1 易错代码
分支结构案例中
var num = prompt('请输入一个合法的数字(1-7)');
switch(num){
case 1:
alert('周一');
break;
default:
alert('你输入的不合法');
}
如果用户输入 1 控制台得到的结果 “你输入的不合法”
原因是: 你输入的 1 是字符串 你case 的值是数字类型的,不全等 所以会走default 所以输出结果是 “你输入的不合法”
5.2 易错单词
default
5.3 易错知识点
在分支语句中case 的值必须要和输入的值全等。
6.1 易错代码
数组的操作案例中
var arr = [2,4,3]
arr[0] = '一晚'; //给数组添加元素 通过下标的方式
arr[arr.length] = "123" //在数组的最后一项加入
console.log(arr); //输出结果是["一晚", 4, 3, "123"]
arr[arr.length] = '一万五'; // 是在原来的基础上在此加入
console.log(arr); //输出结果是 ["一晚", 4, 3, "123", "一万五"]
总结是:数组在原来的基础上增加,通过下标的方式增加;如果是 arr[arr.length]增加,再次增加是在第一次的基础上,并不会冲突。
6.2 易错单词
length
6.3 易错知识点
数组的增、删、改、查
7.1 易错代码
冒泡排序案例中
var nums = [40,8,15,18,12];
for(var i =1;i<nums.length;i++ ){ //描述重复的趟数
for(var j = 0;j<nums.length-i;j++){ //每趟比较的次数 为什么要减 i
if(nums[j]>nums[j+1]){ //比较大小,是否交换位置
var temp = nums[j];
nums[j] = nums[j+1];
nums[j+1] = temp;
}
}
}
console.log(nums);
以上的是最好理解的一版,最容易出错的是在第二个循环中为什么要减i
其实也可以不减i的只不过每趟要多比较一次,可以这样理解,因为自己没有必要跟自己比。
7.2 易错单词
temp
7.3 易错知识点
两次循环中,循环趟书、循环次数
8.1 易错代码
函数的参数案例中
function getSum(n,m){
var sum = 0; //总和
for(var num = n;num<=m;num++){
sum+=num;
}
return sum; //函数返回值
console.log(1)
}
getSum(1,100);
输出结果是 为什么没有输出
函数只是做了调用,函数外部没有输出,还是内部是有输出,但是输出是在return 后面的,所以不会执行,想输出只要修改函数的调用 console.log(getSum(1,100)) 输出结果:
函数的返回值 关键字是return 有两个效果 1、函数的返回值 2、函数内部阻断(return 后面的代码不会执行)
8.2 易错单词
return
8.3 易错知识点
函数的返回值的应用和理解
9.1 易错代码
函数体内的arguments 案例中
function getSum(){
// console.log(arguments);
var sum = 0; //累计的值
for(var index = 0;index<arguments.length;index++){
sum+=arguments[index];
}
return sum;
}
console.log(getSum(2,1,4,6,7,8));
首先要注意两点: arguments必须要用到函数的内部 ‚ argumnets 的意思是代码函数调用时传人实参的个数。
9.2 易错单词
arguments
9.3 易错知识点
arguments 的理解和应用
10.1易错代码
在回调函数案例中
function fn(a){ 回调函数就是把函数当做另一个函数的参数
a(); 在此案例中 a 相当于形参 函数 funtion(){alert(“hello”)}
} 相当于实参 所以其实回调函数跟普通的函数没有区别的
fn(function(){
alert('hello');
});
等价于
function fn(){
(function(){
alert('hello');
})()
}
fn()
10.2 易错单词
无
10.3 易错知识点
回调函数的理解 和使用
11.1易错代码
作用域和预解析案例中
var a = 123;
function fn(){
console.log(a); //a的值?
var a = 456;
}
fn();
console.log(a); //a的值?
预解析的过程:
- 预解析中的变量提升,说是提升到当前执行环境的顶部。 当前执行环境指的是当前作用域。
- 在局部作用域中使用一个变量时,若局部变量 和 全局变量重名时,在局部作用域中会优先使用局部变量。
11.2 易错单词
无
11.3 易错知识点
变量提升的理解和使用
12.1 易错代码
作用域链 案例中
If (true){
var num = 123;
console.log(num); //123
}
console.log(num); //123;
在ES5 之前 第一次输出的是123 ,第二次输出的也是123,在ES6中有块级作用域的概念 第一次输出是123 第二次会输出 undifined ,原因是:var num 提示也不会提示到全局,所以后来的console 会输出undifined
12.2 易错单词
Undifined
12.3 易错知识点
块级作用域的理解
13.1 易错代码
在fon .....in 案例中
var obj = {
name:'张三',
age:17
}
for(var key in obj){
console.log(obj.key);
}
执行代码后会:
原因就是 key 是定义的变量,访问对象属性有两种方式:一是:点的访问方式 二是:[] 的方式,当访问未知属性时用的是[]这种方式。
13.2 易错单词
For(var key in obj)
13.3 易错知识点
属性的访问方式
14.1 易错代码
在基本数据类型和复杂数据类型的区别中
var obj1 = {name:'悟空',age:10}; //引用数据类型
var obj2 = obj1;
obj2.name = '八戒';
console.log(obj1);
输出结果是:
原因就是:obj1 和 obj2 是复杂数据类型,两个变量里面是存的同一块空间地址,所以修改了obj2.name 就是修改了整块的空间内容,所以obj2 也会跟着变化。
14.2 易错单词
无
14.3 易错知识点
复杂数据类型的存储方式