js基础笔记

一，常用输入输出语法

一，输出语法

1，向body内输出内容，可以输出标签

document.write('<h2>你好</h2>')

2，页面弹出警告对话框

alert('你好')

3，控制台输出

console.log('你好');

二，输入语法

1，prompt输入

prompt('你好')

二，变量

1，let: 块级作用域，不能在声明之前使用，不允许重复声明

2，const: 声明只读的常量，声明必须初始化，不能留到以后赋值，不允许重复声明

一旦声明，无法修改。不会全局污染

3，命名规则

• 不能使用关键字
• 只能用下划线，字母，数字和$组成，数字不能开头
• 字母区分大小写

4，规范

小驼峰命名法

三，数据类型

一，基本数据类型

1，number 数字型

2，string 字符串型

3，boolean 布尔型

4，undefined 未定义型

5，null 空类型

二·，引用数据类型

1，object 对象

2，function 函数

3，array 数组

三，类型详情

1，字符串型

可以是双引号“”，单引号''或者反引号``

遵循内双外单或外双内单原则

字符串拼接用加+号

1.1，模板字符串

符号 ``

内容拼接变量时用${}包住变量

        let name = prompt('你的名字')
        let age = prompt('你的年龄')
        document.write(`你的名字叫${name},你的年龄<strong>${age}</strong>`)  

2，未定义类型（undefined）

只声明不赋值，变量默认为undefined

3，空类型

null 表示值为 空

null和undefined区别

1，undefined 表示没有赋值 开发场景：如果检测到变量是undefined就说明没有值传递过来

2，null表示赋值了，但内容为空 开发场景：如果一个变量确定存放对象，但还没准备好，可以放个null

    let obj = null

四，数据类型检测

使用 typeof

 let aaa
 document.write(typeof aaa)

五，类型转换

1，隐氏转换

+号俩边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符，比如 - * / 都会把数据转换成数字类型

• 号作为正号解析可以转换成Number

console.log(typeof +'20')
// 输出Number

2， 显示转换

1， 转换成数字型

Number(数据)

如果字符里有非数字，转换失败结果为NaN即不是一个数字

NaN也是number类型的数据，代表非数据

parseInt(数据)

只保留整数

parseFlort(数据)

可以保留小数

区别

Number() 只能放数字类型字符，否则返回NaN

parseFloat 经常用于过滤单位

2，转换为字符串型

String(数据)

toString()

        let a = 10
         console.log(String(10));
         console.log(a.toString());

四，算术运算符

一，算术运算符

1，有 +求和 、-求差、 *求积、 /求商、 %取模

2，优先级

先乘除，后加减

乘除取余优先级相同

加减优先级相同

使用（）提升优先级

二，赋值运算符

1，=，+=，-+，*=，/=

三，比较运算符

1，>, <, >=, <=, ==, === 是否类型和值都相等,！== 左右俩边是否不全等

2，比较结果为boolean类型，即只会得到true或false

3，有一个是数字型，比较时另一个也会转换成数字型

4，字符串比较，比较对应的ASCLL码

从左往右依次比较

第一位一样，再比较第二位

5，NaN不等于任何值，包括它本身

四，逻辑运算符

1，&& 逻辑与

|| 逻辑或

！逻辑非

2，有5个值当false来看

false 数字0 ' ' undefined null

3，无论&&还是||，运算结果都是最后被执行的表达式值，一般用在变量赋值

五，表达式和语句

1，区别：

表达式计算出一个值，但语句用来自行以使某件事发生（做什么事）

2，continue和break的区别

continue 结束此次循环，执行下一次

break 结束循环

六，操作数组

1，数组.push()

将一个或多个元素添加到数组的末尾，并返回数组的新长度

        let arr = ['red','blue']
        console.log(arr.push('green'));
        // 返回数字3
        console.log(arr);

2，数组.unshift()

将一个或多个元素添加到数组的开头，并返回数组的新长度

        let arr = ['red','blue']
        arr.unshift('black')
        console.log(arr);

3，数组.pop()

从数组中删除最后一个元素，并返回该元素的值

       let arr = ['red','blue']
        console.log(arr.pop());
        // 返回 blue
        console.log(arr);

4，数组.splice(起始位置，删除几个元素)

起始位置从0开始，删除几个元素可选，如果省略，则从起始位置删除到最后。

        let arr = ['red','blue','yellow']
        arr.splice(1,1)
        console.log(arr);

5，数组.shift()

从数组中删除头部元素，并返回该元素的值

   let arr = ['red','blue']
        console.log(arr.shift());
        // 返回 blue
        console.log(arr);

5，冒泡排序

        let arr = [5,2,33,8,56,0]
    // 外层循环控制 趟数
    for(let i = 0; i < arr.length-1; i++){
        // 里层循环控制交换的次数
        for(let j = 0; j < arr.length-1-i; j++){
            if(arr[j] > arr[j+1]){
                let temp = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = temp
            }
        }
    }

七，函数

一，函数命名规范

1，和变量命名基本一致

2，尽量小驼峰命名法

3，前缀应该为动词

4，命名建议：常用动词约定

二，变量的作用域

1，特殊情况

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

function fn(){
    num = 10
}
console.log(num);

2，变量的访问原则

作用域链：采取就近原则的方式来查找变量最终的值

三，匿名函数

 let fn = function(){
            console.log('11')
        }
        fn()

四，立即执行函数

为了避免全局变量之间的污染

多个立即执行函数要用；隔开

// 方式一
        (function(){
            console.log('ghuih');
        })();
        // 方式二
        (function(){
            console.log('ghuih');
        }());

五，函数小技巧

//实参没值，则为0，有值则为实参的值
function fn(x = 0,y = 0){}
fn()
fn(1,2)

八，对象

1，声明对象

 let gooda = {
            name:'刘德华',
            age:18,
            sex:'男',
            sayHay:function(){
                document.write('你好啊~')
            }
        }

2，调用对象属性

       // 方法一 对象.属性
       console.log(gooda.age);
        console.log(gooda.sayHay());
	 // 方法二 对象['属性']
	console.log(gooda['name']);

3，遍历对象

let gooda = {
    name:'刘德华',
    age:18,
    sex:'男',
    sayHay:function(){
        document.write('你好啊~')
    }
}
// 遍历对象
for(let k in gooda){
    // 获取属性值
    document.write(gooda[k]) //k是属性名
    document.write(`<br>`)
    // 获取属性名
    document.write(k)
    document.write(`<br>`)

}

4，新增属性，方法

       gooda.addre = '张家口'
        gooda.fn = function(){
            console.log('adada');
        }

5，删除属性

delete gooda.age

6，综合案例

document.write(`
<h4>学生列表</h4>
<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
    </thead>
    `)
    for(k in students){
    document.write(`
    <tr>
        <td>1</td>
        <td>${students[k].name}</td>
        <td>${students[k].age}</td>
        <td>${students[k].sex}</td>
        <td>${students[k].hometown}</td>
    </tr>`)
    }
    document.write(`</table>`)

九，内置对象Math

1, random(): 生成0-1之间的随机数(包括0，不包括1)
2，ceil: 向上取整
3，floor: 向下取整
4，max: 找最大数
5，min：找最小数
6，pow: 幂运算
7，abs: 绝对值
8，PI: 圆周率

十，生成任意范围的随机数

1，如何生成N-M之间的随机数

Math.floor(Math.random()*(M-N+1))+N