第四周 JS 学习笔记

2020-02-27 本文已影响0人丸子小姐__不懂爱

这周老师带我们开始了js的学习之路，挺难的，码了不少代码哈......

一、在HTML中使用js

内联脚本方式

<body>
<script>
  // 内联脚本方式
  function sayHi () {
      console.log('Hi!')
  }
  sayHi()
</script>
</body>

外部链接方式

<script src="example.js" async defer></script>
async 表示立即下载当前链接文件，但不会影响页面的其它操作
defer 表示延迟脚本的加载，等待整个页面都被解析完毕后再加载

二、基本概念

1). 数据类型

typeof 检查数据类型
1.数组和对象皆返回 object ，函数返回 function
2.由于历史原因 typeof null 为 object
3.undefined 派生自null 故 undefined == null 为true
布尔值转换
除 空字符串，false ，0，null，undefined外皆为 true
最大值和最小值
Number.MIN_VALUE ,Number.MAX_VALUE
isNaN number类型检查
NaN与任何值都不相等，包括自身
2.调用isNaN方法时会对参数隐式调用Number进行转换，故 isNaN(true) 返回 false
数字类型转换
1.parseInt转整， parseFloat转浮点，Number
2.方法的第二个参数，表示要转换为几进制
对象创建

  var o = new Object();
    // Object 的实例都包括以下属性和方法
    /**
     * constructor 保存着创建当前对象的函数
     * hasOwnProperty(propertyName) 检查属性是否在当前对象的实例中
     * isPrototypeOf(Object) 检查传入的对象是否是当前对象的原型
     * propertyIsEnumerable(propertyName) 检查属性是否可枚举
     * toLocaleString()  返回对象的字符串表示
     * toString() 返回对象的字符串表示
     * valueOf() 返回对象的字符串、数值或布尔值表示
     */

2). 操作符

一元操作符

前置递增递减 ++a, --a
后置递增递减 a++, a--

短路操作

逻辑非 !0
逻辑与 true && ‘hello’
逻辑或 true || ‘hello’

乘性操作符

20*5 乘
28%6 取余
20/5 除
注意 0/0 为 NaN ，100/0 为Infinity

加性操作符

22+9 加
22-9 减
当运算式中，只要有一个运算子为字符串时则为拼接，特例 true + 123 为 124需要注意， null则不计入， undefined 则为NaN

关系操作符

< , > , <= , >=
字符串比较的是字符编码 ‘hello’ > 'world'

相等操作符

== ， != 会强制转换，比较的是值
=== ，!== 不会转换，比较的是值和类型

三元操作符

var  res = true ? 'yes' : ‘No’;

赋值操作符
*= ，/= , %= , += , -=

3). 流程语句

if语句

  var i = 20;
  if(i < 10){
      console.log('i小于10')
  }else if(i > 30){
      console.log('i大于30')
  }else {
      console.log('i在10和30之间')
  }

do while 语句

 var a = 0;
  do {
      a++;
  }while ( a < 20)

while 语句

 var b = 2;
  while( b<10){
      b += 2;
      console.log(b)
  }

for 语句

 for(var i=0; i<6; i++){
      console.log('当前的i值是：' + i)
  }

for-in 语句
用来枚举对象属性

  for(var propName in window){
      document.writeln(propName)
  }

label 语句
用来跳出指定的循环

 start: for(var p=0; p<10; p++) {
      if(p > 6){
          console.log(p)  // 7
          break start;
      }
  }

break 和 continue

 for (var k=0; k<=10; k++){
      if(k == 5){
          continue;
      }
      console.log(k)
  }

switch 语句

  var g = 12;
  switch (true) {
      case g > 5:
          console.log('g的值大于5')
          break;
      case g > 10:
          console.log('g的值大于10')
          break;
      default:
          console.log('啥也不是')
  }

4). 函数

定义函数

声明式

 function sayHi(name, msg) {
      console.log(name + '说' + msg)
  }

表达式

var sayHi = function (name, msg) {
      console.log(name + '说' + msg)
  }

函数调用，和返回值

使用 函数名+()

sayHi('约翰', '他一整天没吃饭了')

使用return 返回值

function sum(num1, num2) {
      return num1 + num2;
  }

arguments

获取传入的实参

  function doAdd(num1, num2){
    if(arguments.length === 1){
        console.log(num1 + 12)
    }else {
        console.log(arguments[0] +  arguments[1])
    }
  }

函数没有重载功能，定义同名的函数，后面的函数会覆盖前面的函数

第四周 JS 学习笔记

一、在HTML中使用js

二、基本概念

1). 数据类型

2). 操作符

3). 流程语句

4). 函数

猜你喜欢

热点阅读