########## -> 目录 <- ##########
讲义内容概括
1 - 包括：
a - JavaScript 语法 【 初级 】
b - ES6 语法 【 初级 】
c - MVVM 框架讲解
d - VUE 原理讲解
e - VUE 语法 【 初级 】
f - VUE 脚手架 及 webpack 配置 【 基础 】
g - chrome 调试方法 【 初级 】
2 - 不包括：
a - HTML HTML5 语法
b - CSS CSS3 语法
c - CSS 拓展语言 【 less sass 】
d - 编码规范
########## -> 内容 <- ##########
a - JavaScript 语法 【 初级 】
1 - 赋值
var x = 1;
2 - 注释
// var x = 1;
/*
var x = 1;
var y = 2;
*/
3 - 数据类型
3.1 - Number
1
0.1
-99
NaN // NaN 表示 Not a Number，当无法计算结果时用 NaN 表示，如 0/0
Infinity // Infinity 表示无限大，如 2/0
3.2 - 字符串
'abc'
"abc" // 推荐 单引号 因为输入比较快
'a' + 'b' // 'ab'
var str = 'C'
var strNew = `12${str}34` // 模版字符串 'aCb' 【 ## ES6 新增 ## 】 *********
console.info(strNew)
长度
.length
字符串常用方法
.toUpperCase()
.toLowerCase()
.indexOf('xxx') // 返回索引
.substring(startIndex, endIndex) // 指定索引区间的子串 【 不含 endIndex | 原字符串不变 】
3.3 - 布尔
true false
3.4 - null 和 undefined
null 表示一个空值
undefined 表示未定义
区分两者的意义不大。
大多数情况下，我们都应该用 null。
undefined 仅仅在判断函数参数是否传递的情况下有用。
3.5 - 数组
var ls = [1, 'a', false, null]
new Array(1, 'a', true) // [1, 'a', true] 出于代码的可读性考虑，强烈建议直接使用[]
索引初始值为 0，即 ls[0] = 1
长度
.length
数组常用方法
.indexOf('x')
.slice(startIndex, endIndex) // 截取 Array 的部分元素，返回新 Array 【 不含 endIndex | 原数组不变 】
.push() // 向 Array 的末尾添加若干元素 返回 插入后的长度 【 原数组改变 】
.pop() // 把 Array 的最后一个元素删除掉 返回 删除的元素 【 原数组改变 】
.unshift() // 向 Array 的头部添加若干元素 返回 插入后的长度 【 原数组改变 】
.shift() // 把 Array 的第一个元素删除掉 返回 删除的元素 【 原数组改变 】
.sort() // 默认排序 [1, 3, 2].sort() // [1, 2, 3] 【 可自定义规则 ## 见 函数 -> 高阶函数 ## | 原数组改变 】
.reverse() // 反转 [1, 3, 2].reverse() // [2, 3, 1] 【 原数组改变 】
.splice(index, howmany, item1, ...) 【 *** 非常好用 ***】
var arr = ['a', 'b', 'c']
arr.splice(0, 1) // 返回 删除的元素 ['a'] arr->['b', 'c'] 【 原数组改变 】
arr.splice(0, 0, 'd') // 返回 删除的元素 [] arr->["d", "a", "b", "c"]
.concat(arr2) // 将 Array 与 另一个 Array 连接 返回 拼接后数组 【 原数组不变 】
.join(string) // 把 Array 的每个元素都用指定的字符串连接起来，返回 连接后的字符串 【 原数组不变 】
var arr = ['A', 'B', 'C', 1, 2, 3]
arr.join('-'); // 'A-B-C-1-2-3'
3.6 - 对象
var obj = {
name: 'Jack',
city: 'Shenyang'
xk-key: 'abc'
}
obj.name // 'Jack'
obj.name = 'Tom'
obj.xk-key // error
obj['xk-key'] // 'Tom'
删除属性
delete obj.name // obj.name -> undefined
属性是否存在
'city' in obj // true
注意：
如果 in 判断一个属性存在，这个属性不一定是 obj 的。
它可能是 obj 继承得到的：
'toString' in obj // true
因为 toString 定义在 object 对象中，而所有对象最终都会在原型链上指向 object，所以 obj 也拥有 toString 属性
## 原型链原理略 ##
判断一个属性是否是 obj 自身拥有的，而非继承得到的，可以用 hasOwnProperty() 方法：
var objNew = {
name: 'abc'
}
objNew.hasOwnProperty('name') // true
objNew.hasOwnProperty('toString') // false
3.7 - 变量
变量名是大小写英文、数字、$和_的组合，且不能用数字开头。
变量名也不能是 JavaScript 的关键字，如 if、while 等。
申明一个变量用 var 语句。
var $b = 1
弱类型
$b = 'abc'
3.8 - 比较运算符
>
<
>=
<=
== 比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果。
=== 它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
NaN 这个特殊的 Number 与所有其他值都不相等，包括它自己。
NaN === NaN // false
判断 NaN 的方法
isNaN(NaN) // true
最后要注意浮点数的相等比较
1 / 3 === (1 - 2 / 3) // false
这不是 JavaScript 的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。
要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001 // true 【 JavaScript Math（算数）对象 】
4 - 条件判断
if (case1) {
// do something
} else {
// do something
}
if (case1)
console.info('do something') // 如果语句块只包含一条语句，可省略 {} 【不建议这样写，一旦超过一行就会容易出错】
else
console.info('do something')
if (case1) {
// do something
} else if (case2) {
// do something
} else {
// do something
}
5 - 循环
a -
var ls = [1, 2, 3]
for (var i = 0; i < ls.length; i++) {
console.info(ls[i])
}
for 循环的 3 个条件都是可以省略，如果没有退出循环的判断条件，就必须使用 break 语句退出循环，否则就是死循环
var x = 0
for (;;) { // 将无限循环下去
if (x > 100) {
break // 通过 if 判断来退出循环
}
x++
}
b -
for...in 把一个对象的所有属性依次循环出来
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
}
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}
由于 Array 也是对象，而它的每个元素的索引被视为对象的属性，因此，for...in 循环可以直接循环出 Array 的索引
var a = ['A', 'B', 'C']
for (var i in a) {
console.log(i) // '0', '1', '2'
console.log(a[i]) // 'A', 'B', 'C'
}
注意，for...in 对 Array 的循环得到的是 String 而不是 Number
c -
var n = 99
while (n > 0) {
// do something
n = n - 1 // n--
}
d -
do {...} while()，它和 while 循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件
var n = 0
do {
// do something
n = n + 1 // n++
} while (n < 100)
注意，用 do {...} while() 循环要小心，循环体会至少执行1次，而 for 和 while 循环则可能一次都不执行
6 - 函数
a - 定义
function funA (params) {
return
}
var funA = function (params) {
// return
}
注意，函数体内部的语句在执行时，一旦执行到 return 时，函数就执行完毕，并将结果返回。
因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。
如果没有 return 语句，函数执行完毕后也会返回结果，结果为 undefined。
b - 调用
funA()
funA(123, 'xyz') // JavaScript 允许传入任意个参数而不影响调用，参数个数不影响调用
c - 变量作用域与解构赋值
## 略 ##
d - 高阶函数
1 - map
var ls = [11, 22, 33]
ls.map(item => {
console.info(item) // 11 22 33
})
var ls = [11, 22, 33]
ls.map((item, index, ls) => {
console.info(index) // 0 1 2
console.info(item) // 11 22 33
console.info(ls) // 11 22 33
})
2 - reduce
## 略 ##
3 - filter 【 原数组不变 】
var arr = [1, 2, 4, 5, 6, 9, 10, 15]
var r = arr.filter(function (x) {
return x % 2 !== 0 // 据返回值是 true 还是 false 决定保留还是丢弃该元素
})
console.info(r) // [1, 5, 9, 15]
4 - sort
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
无法理解的结果
因为 Array 的 sort() 方法默认把所有元素先转换为 String 再排序，
结果 '10' 排在了 '2' 的前面，因为字符 '1' 比字符 '2' 的 ASCII 码小
var a = '1'
var b = '2'
a.charCodeAt() // 49 String.fromCharCode(49)
b.charCodeAt() // 50
通常规定，对于两个元素 x 和 y，
如果 x < y，则返回 -1，
如果 x === y，则返回 0，
如果 x > y，则返回 1
var arr = [10, 20, 1, 2]
console.info(arr.sort())
arr.sort(function (x, y) {
if (x < y) {
return -1
}
if (x > y) {
return 1
}
return 0
})
console.log(arr) // [1, 2, 10, 20]
arr.sort(function (x, y) {
if (x < y) {
return 1
}
if (x > y) {
return -1
}
return 0
})
console.log(arr) // [20, 10, 2, 1]
5 - Array
除了 map()、reduce、filter()、sort() 这些方法可以传入一个函数外，Array对象还提供了很多非常实用的高阶函数。
5.1 - every 判断数组的所有元素是否满足测试条件
var arr = ['Apple', 'pear', 'orange']
console.log(arr.every(function (s) {
return s.length > 0
})) // true 因为每个元素都满足s.length>0
console.log(arr.every(function (s) {
return s.toLowerCase() === s;
})) // false 因为不是每个元素都全部是小写
5.2 - find 用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回 undefined
var arr = ['Apple', 'pear', 'orange']
console.log(arr.find(function (s) {
return s.toLowerCase() === s
})) // 'pear' 因为pear全部是小写
console.log(arr.find(function (s) {
return s.toUpperCase() === s
})) // undefined 因为没有全部是大写的元素
5.3 - findIndex 和 find 类似，也是查找符合条件的第一个元素，返回这个元素的索引，如果没有找到，返回-1
5.4 - forEach 和 map 类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组
var arr = [0, 2, 4, 6, 8]
var str = arr.map(function(item, index, arr) { // 原数组arr
console.log("原数组arr:", arr)
return item/2
}, this)
console.log(str) // [0, 1, 2, 3, 4]
var arr = [0, 2, 4, 6, 8]
var sum = 0
var str = arr.forEach(function(item, index, arr) { // 原数组arr
sum += item
console.log("sum的值为：", sum) //0 2 6 12 20
},this)
console.log(str); // undefined
网友评论