JS复习

Js复习

1. 数据类型

var name = ‘…’;
var length = 100;
多行字符串

var line =  ` 
多行
字符串
`

在现代的 JavaScript 中, 汉字也是字母

2. 定义函数

(1) 方法一：

var 	square = function() {
...
}

// Ada
var square = function(n, length) {
	var len = length;
	var angle = 180 - ((n - 2)* 180 / n);
	var i = 0;
	while(i < n) {
		i++;
		forward(len);
		right(angle);
	}
}
square(3, 10);

(2) 方法二：

function square(n, length) {
...
}
square(3, 10)

3.输出到终端

(1) console.log(…)

(2) 用自己的log

【1】

在js中，函数里有一个特殊的变量叫 arguments
//它保存了函数所有的参数，这是套路
//在js中，函数声明的时候可以不声明参数
//依然可以使用参数

【2】

小例子

1. 实现函数, 用上题的函数来画一个正方形方阵, 参数如下

x, y 是第一个正方形左上角坐标
space 是两个正方形之间的间距
 l 是正方形的边长
n 是横向正方形的个数
m 是纵向正方形的个数
 square_square(x, y, space, l, n, m)

// Ada
var square = function(x, y, l) {
    jump(x, y)
    // 设置朝向, 确保箭头朝向 右边
    // 当然如果是用 goto 来画的话, 就不用关心朝向
    setHeading(0)
    // 循环画正方形
    // 当然, 你可以用 goto 来画
    // 只需要计算一下四个顶点的坐标 (这很简单)
    var i = 0
    while(i < 4) {
        i++
        forward(l)
        right(90)
    }
}

var square_line = function(x, y, n, space, l) {
    jump(x, y)
    setHeading(0)
    // 循环画正方形
    var len = l
    var margin = space
    var i = 0
    while(i < n) {
        var x1 = (len + margin) * i + x
        var y1 = y
        square(x1, y1, len)
        i++
    }
}

var square_square = function(x, y, space, l, n, m) {
    var i = 0
    while(i < m) {
        var x1 = x
        var y1 = y + i * (l + space)
        square_line(x1, y1, n, space, l)
        i++
    }
}

square_square(-100, -100, 10, 30, 3, 4)

2. 实现函数, 画圆。参数如下

x, y, r 分别是 圆心坐标 和 半径
circle(x, y, r)在这里插入图片描述

解答
1.已知圆心，但要知道最左上角的起点
假设圆为正 36 边形。只是画出近似图形, 当然不是完美圆
周长 c 是 2 * PI * r
PI 设为 3.14 ==》算出 边长

由图可知，已知圆心位置，通过算出角度，可先让箭头左转90度，再左转一半的角度。然后向前走一个r的长度，即可到达最左上角的位置【也可以让其走y - r这么长，刚好到圆的最下方。】

// Ada
setDelay(0)
// setDelay()用来控制动画、
// setDelay(0) 没有延时
var circle = function(x, y, r) {
   var n = 36
   var angle = 360 / n 
   var c = 2 * 3.14 * r //周长
   var l = c / n //边长

   jump(x, y)
   setHeading(0)
   //找圆的边缘点
   left(90)
   left(angle / 2)

   penup()
   forward(r)
   pendown()
   //penup、pendown防止留下forward这条痕迹

   //画圆
   for(var i = 0; i < n; i++) {
       forward(l)
       right(angle)
   }
}

4.语法规范

1. 等于 ==和严格等于 ===
   JS是弱类型
   1 == ‘1’ =》 true
   1 === ‘1’ =》false
2. 伪随机
   按照一定的公式计算出来，但是完全符合随机的概念
3. 括号两边不空格，运算符两边要空格
4. Js一般拿驼峰方式命名->首字母不大写，剩下每个单词首字母大写
5. 读文档： mdn … =>搜索
6. script 放在最后一行是确保执行程序时一定存在页面元素

5.数组和字符串

6.有关画图时常见的角度问题

以正五边形为例，正多边形的内角和公式为：（n - 2）* 180 / n 红色

而画正多边形的时候是用的外角 黄色 即 180 - （n - 2）* 180
更为简单的方法是： 外角直接为 360 / n 得到

Eg：画五角星
转过的角度是外角 黄色 而中间有一个正五边形，内角和108 ，则五角星内角 （180 - 108）/ 2 = 36。所以需转过的角度为180 - 36 = 144

7.debug()大法

1. 学会用自己的log()来找问题

Eg：var log = function() {
console.log.apply(concole, arguments)
}

2. 学会有条理的针对性解决问题

1. 程序是否被执行了？
开头：log('程序开始了')
结尾：log('程序结束了')
2. 用log慢慢缩小范围针对性排查，去接近自己出问题的地方

3. 整个js应全是定义函数，只有一个调用函数。程序只有一个入口

8.测试

用预先写好的函数来调用自己写好的函数，看结果是否正确

// Ada
//自己写的函数
var sum = function(array) {
    console.log('sum开始了吗？')
    var s = 0
    var a = array
    for(var i = 0; i < a.length; i++) {
        s = s + a[i]
    }
    return s
}
//测试函数
var testSum = function() {
    var a = [1, 2, 3, 4]
    var value = 10
    enSure(value == sum(a), 'sum错误')
}
//看是否出错
// condition 是满足的条件
// message 是返回的消息
// 如果条件成立，就通过
// 如果条件不成立，就将message当作错误的输出打印出来
var enSure = function(condition, message) {
    if(!condition) {
        console.log(message);
    }
}
// 更精准的测试函数
// 如果不相等，看其值是什么
var enSureEquale = function(a, b, message) {
	if(a != b) {
		console.log(message, a, b)
	}
}

testSum()

将js放入HTML中，浏览器打开HTML，在终端查看js
小例子

3.实现 applyOps 函数, 参数如下

expression 是一个 array
expression 中第一个元素是上面几题的 op, 剩下的元素是和 op 对应的值
根据 expression 运算并返回结果

// Ada
// 实现 applyOps 函数
var applyOps = function(expression) {
    var op = expression[0]
    if (op == '+' || op == '-' || op == '*' || op == '/' ) {
        var oprands = expression.slice(1)
        // 切片，取到从第一个元素开始直至最后一个元素。即得到后面的新的数组oprands
        return applyList(op, oprands)
    } else if(op == '<' || op == '>' || op == '==' ) {
        return applyCompare(expression)
    }
}

// 实现 applyCompare 函数
// 参数如下
// expression 是一个 array(数组), 包含了 3 个元素
// 第一个元素是 op, 值是 '>' '<' '==' 其中之一
// 剩下两个元素分别是 2 个数字
// 根据 op 对数字运算并返回结果(结果是 true 或者 false)
// 

var applyCompare = function(expression) {
    var op = expression[0]
    var a = expression[1]
    var b = expression[2]
    if (op == '<') {
        return a < b
    }
    if (op == '>') {
        return a > b
    }
    if (op == '==') {
        return a == b
    }
}

// 实现 applyList 函数
// op 是 '+' '-' '*' '/' 其中之一
// oprands 是一个只包含数字的 array
// 根据 op 对 oprands 中的元素进行运算并返回结果
// 例如, 下面的调用返回 -4
// var n = applyList('-', [3, 4, 2, 1])
// log(n)
// 

var applyList = function(op, oprands) {
    var fir = oprands[0]
    if(op == '+') {
        return fir + s(oprands)
    }
    else if(op == '-') {
        return fir - s(oprands)
    }
    else if(op == '*') {
        return fir * s(oprands)
    }
    else if(op == '/') {
        return fir / s(oprands)
    }
}
var s = function(oprands) {
    var sum = 0
    for(var i = 1; i < oprands.length; i++) {
        sum += oprands[i]
    }
    return sum
}

9. 对象

不能用点语法的情况
一般都是使用点语法，因为书写更简便。但也有不适合用点语法的情况

1.变量名有空格之类奇怪的符号

Eg：

此时就无法访问 a b c 的值 1

2.当Key存在一个变量中

Eg：
这时如果用taoer.k就无法访问，因为点语法把k当成了字符串。
taoer[k]是把k当成变量

访问不存在的 key 会得到 undefined