js 实用基础讲义（一）

########## -> 目录 <- ##########

讲义内容概括

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