JavaScript基础

JavaScript介绍

书写方式

• 内联

  内联
  

• 内部

  一般写在 上面

• 外部

  一般写在 上面

注释

//单行注释
/*多行注释*/

输入输出语句

• 输出

//输出语法
document.write('giao');
//弹窗
alert('giao');
//控制台输出
console.log('giao');

• 输入

//输入
prompt('提示语','默认值');
//确认
confirm('提示语');

变量

声明赋值

//声明变量  
//关键字  变量名
let number ;
//给关键字赋值
//这个数据存入了 number 这个“容器”中
number = 20;

关键字

let

• 允许声明和赋值同时进行
• 不允许重复声明一个变量名
• 允许同时声明多个变量值
• 具有块级作用域
• 不可以先使用，后定义

var

• 允许声明和赋值同时进行
• 允许重复声明一个变量名
• 允许同时声明多个变量值
• 具有块级作用域
• 可以先使用，后定义

区别

• 大部分情况下 区别不大
• 但 let 比 var 更严谨

变量名规则

• 只能是字母，数字，下划线，$，但不能以数字开头
• 字母区分大小写
• 不能使用关键字
• 尽量有语义
• 尽量遵守驼峰命名法

变量数组

• 按顺序保存多个数据

语法

// let 数组名 = ['内容','内容','内容'];
   let arr    = ['内容','内容','内容'];
//				  0      1      2

• 数字是按顺序保存，每个数据都有自己的编号
• 编号从 0 开始，也叫索引或下标
• 可以存储任意类型数据

取值

let arr = ['内容','内容','内容'];
//数组名[下标]
console.log(arr[0]);
//数组长度 length
console.log(arr.length);

• 数组长度 arr.length
• 数组下标长度 arr.length - 1

数据类型

• 基本类型 Number String Boolean null undefined object
• 引用类型 数组 对象

number 数字型类型

let score = 100; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数

字符串类型

let user_name = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let str = '123'; // 看上去是数字，但是用引号包裹了就成了字符串了
let str1 = ''; // 这种情况叫空字符串

• 单引号和双引号本质上没区别
• 推荐使用单引号
• 必要时可以使用转义符 \，输出单引号或双引号

string 字符串拼接

• 用 + 拼接

let name = '小啊giao';
let age = 22;
console.log('我叫'+name+',今年'+age+'了')

• 模板字符串 ``

  可以换行 填写嵌套代码

let name = '小啊giao';
let age = 22;
console.log(`我叫${name},今年${age}了`)

boolean 布尔类型

let isCool1 = true; // 正确
let isCool2 = false; //错误

undefined 未定义类型

let name ; //声明未赋值
document.write(name);  //输出undefined

null 空类型

let name = null ;

• 表示赋值了，但内容为空

检测数据类型

//通过 typeof 关键字检测数据类型
console.log(typeof name);

类型转换

隐式转换

let name = '123';
let age = 123;
//结果  字符类型
console.log(name+age);
//结果  数字类型
console.log(name-age);

• 加号 两边只要有一个是字符串，结果都会是字符串
• 除了加号的运算符 都可以 转换为数字类型

显示转换

let name = '123';
let age = 123;
let age2 = '123.12';

// 0 null Nav undefined 可以转换
let zifu = String(age);
console.log(typeof zifu)  //结果  string

// 0 null Nav undefined 不能用 .toString()转换
let zifu2 = age.toString();
console.log(typeof zifu2)  //结果  string

let zhengshu = parseInt(name);
console.log(typeof zhengshu) //结果  number

let xiaoshu = parseFloat(age2);
console.log(typeof xiaoshu)  //结果  number

运算符

• 加号 减号 乘号 除号 百分比
• 数学那一套

赋值运算符

• = 将等号右边的值赋予给左边, 要求左边必须是一个容器

let n = 1;
n += 4;  //n = n + 5
n -= 4;  //n = n - 5
n *= 4;  //n = n * 5
n %= 4;  //n = n % 5
n /= 4;  //n = n / 5
console.log(n);

一元运算符

• 根据表达数的个数 分为 一元 二元 三元

自增 ++

• 让变量的值加1

自减 --

• 让变量的值减1

前置自增和后置自增

//先赋值后运算
n++;
//先运算后赋值
++n;

比较运算符

>： 左边是否大于右边
<： 左边是否小于右边
>=： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==： 左右两边是否相等
===： 左右两边是否类型和值都相等
!==： 左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

逻辑运算符

• && 与 并且 两边结果都为true 结果才为true
• || 或 或者 两边有一个true 结果为true
• ! 非 取反 true变false false变true

短路

• && 左边为false就不执行
• || 左边为false就不执行

语句

if语句

• 范围判断

单分支

if(条件){
   代码块
}

双分支

if(条件){
   代码块
}else {
   代码块
}

多分支

if(条件){
   代码块
}else if(条件2){
   代码块
}else {
   代码块
}

其他

if(变量){
  代码块
}else {
   代码块
}

• 根据变量的值来判断

三元运算符

条件 ? 满足条件的代码 : 满足条件的代码

switch 语句

switch (数据) {
    case '1':
        代码
        break;  //直接跳出switch
    case '2':
        代码
        break;
   default:     
    	代码
        break;
}

• switch 的判断条件 必须和 case 一样

  //1.
  switch ('1') {
      case '1':
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }
  //2.
  switch (true) {
      case true:
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }
  //3.
  switch (false) {
      case false:
          代码
          break;  //直接跳出switch
     default:     
      	代码
          break;
  }
  

循环语句

while 循环

while (循环条件) {
  代码块
}

• 先判断，在执行

for 循环

for (变量初始值; 循环条件; 变化值) {
  代码
}

• 把声明起始值、循环条件、变化值写到一起，让人一目了然

continue和break区别

• continue 结束本次循环，继续下次循环
• break 跳出所在循环

双 for 循环

for (变量初始值; 循环条件; 变化值) {
  for (变量初始值; 循环条件; 变化值) {
    代码
  }
}

//九九乘法表
document.write(``);
for (let i = 1; i <= 9; i++) {
document.write(``);
    for (let j = 1; j <= i; j++) {
        document.write(``);         
    }
document.write(``);
}
document.write(`
`);
        document.write(`${i}X${j}=${i*j}`);   
        document.write(`
`);

操作数组

• 查 数组[下标]

• 改 数组[下标] = 新值

• .push() 从后面插入数值

  • array.push('6','7'); 在最后插入两个元素

  .unshift() 从前面插入数值

  • array.unshift('6','7'); 在前面插入两个元素

• .pop() 删除最后一个元素

  • array.pop();

  .shift() 删除第一个元素

  • array.shift();

  .splice(start,deleteCount) 删除指定个数

  • array.splice(1,2)

  • start 开始位置 下标

  • deleteCount 个数 不填默认删到最后

冒泡排序

//七位数
let array = [3,4,6,2,1,7,5];  
//设置酱油瓶
let temp = [];
// 总循环次数   .length - 1  //  6
for (let i = 1; i < array.length - 1; i++) {
    //需要j做下标 设值 0  每行循环次数 - i次
    for (let j = 0; j < array.length - i; j++) {
        //比较  用酱油瓶  交换
        if (array[j] > array[j + 1]) {
            temp = array[j];
            array[j] = array[j + 1];
            array[j + 1] = temp
        }
    document.write('    '+'内层'+' '+ (j+1)+'次'+'
');
    }
    document.write('外层'+' '+ (i+1)+' '+'行'+'
');
}
document.write('
'+array+'
');

数组去重并赋值新数组

• 方法一

let array = ['a', 'b', 'c', 'a', 'd', 'a', 'c', 'b', 'c', 'd', 'a', 'b', 'c', 'c', 'a',];
//定义新数组
let newArray = [];
// 遍历原数组元素
for (let i = 0; i < array.length; i++) {
     //用indexOf比较  相等返回索引   不等返回-1
     if (newArray.indexOf(array[i]) == -1) {
         // 如果不相等 添加
         newArray.push(array[i]);
     }
}
document.write(newArray);

• 方法二

//遍历原数组元素
for (let i = 0; i < array.length; i++) {
    //判断条件
    let flag = true;
    // 遍历新数组元素  如果新数组无值跳过  有值判断
    for (let j = 0; j < newArray.length; j++) {
        //比较  相等  返回false
        if (newArray[j] == array[i]) {
            flag = false;
        }
    }
    //判断  添加
    if (flag) {
        newArray.push(array[i])
    }
}
document.write(newArray);

函数

• 可以把具有相同逻辑的代码包裹起来，有利于精简代码，方便复用

声明

function 函数名() {
	函数体
}

函数命名

• 和变量基本一致

• 常用动词约定

  can 判断某个动作

  has 判断是否含某个值

  is 判断是否为某个值

  get 获取某个值

  set 设置某个值

  load 加载某些数据

调用方法

• 函数名();

函数参数

声明

• 可以传多个数据
• 参数与参数之间逗号隔开

function 函数名(参数,参数) {
  函数体
}

调用

函数名(参数,参数);

形参和实参

function getname(name) {  //形式参数
    document.write(name)
}
getname('giao'); //实际参数

• 开发中尽量保持形参和实参个数一致

函数返回值

return 数据;

• 能将内部的执行结果交给函数外部使用
• 只能出现一个return 并后面的代码不再执行
• 会结束当前函数
• 默认值 undefined

作用域

全局作用域

• script标签内部有效

局部作用域

• 函数内部有效

块级作用域

• {} 括号里有效 比如 if{} for{}

变量的作用域

全局变量

• script标签内部可以访问修改

局部作用域

• 函数内部可以访问修改

块级作用域

• {} 括号里有效 比如 if{} for{}

注意：var不具有块级作用域的说法 也是全局变量

作用域链

• 自己有自己用
• 自己没有上级找

匿名函数

let 名字 = function (){};

• 函数也是数据
• 把函数赋值给变量
• 调用 名字()

自执行函数

//方法一
;(function (形参) {} )(实参);
//方法二
;(function (形参) {} (实参));

输入数字 转时间

function showTime(shu) {
    //时
    let h = parseInt(shu / 60 / 60);
    //分  去除余下的秒数
    let f = parseInt(shu / 60 % 60);
    //秒  余出来的数
    let m = shu % 60;
    h = h < 10 ? '0' + h : h;
    f = f < 10 ? '0' + f : f;
    m = m < 10 ? '0' + m : m;
    document.write(`转换为：${h}时${f}分${m}秒`);
}
let shu = prompt ('数');
showTime(shu);

对象

什么是对象

• 对象是一种数据类型
• 无序的数据结合
• 可以详细的描述某个事物

声明

let 对象名 = {
  属性名:属性值,
  属性名:属性值,
  方法名:函数
}

• 多属性之间用,分隔

访问属性

//方法一
对象名.属性名
//方法二
对象名.['属性名']

//调用对象的方法
对象名.方法名();

增加属性 / 修改属性

//方法一
对象名.属性名 = '属性值'
//方法二
对象名['属性名'] = '属性值'

//增加对象方法的值
对象名.方法名() = function() {}

删除属性

delete 对象名.属性名
delete 对象名.方法名

遍历对象

//变量  in  对象
for (let key in object) {
     // 输出属性名
     console.log(key);
     //输出值
     console.log(object[key]);
}

遍历对象数据

let students = [
    {name: '小明', age: 18, gender: '男', hometown: '河北省'},
    {name: '小红', age: 19, gender: '女', hometown: '河南省'},
    {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
    {name: '小丽', age: 18, gender: '女', hometown: '山东省'}
];
for (let i = 0; i < students.length; i++) {
    document.write(`
        
            ${i + 1}
            ${students[i].name}
            ${students[i].age}
            ${students[i].gender}
            ${students[i].hometown}
        
    `)
}

求这个字符串里面出现最多的字符是哪个，出现了几次

let str = '132642343739373635384628633124abcdaabca';
//定义一个新对象        
let newStr ={};
//遍历出str的每个值
for (let i = 0; i < str.length; i++) {
    //判断newStr里是否有值  有值true 无值false
    //str[i] 相当于属性名
    if (newStr[str[i]]) {
        //有值  值+1
        newStr[str[i]]++;
    }else{
        //无值  赋值
        // 同时把属性名str[i] 也赋值进去
        newStr[str[i]] = 1;
    }
}
//最大属性名
let max = str[0];
//出现几次
let biJiao = newStr[str[0]]
//遍历newStr 的值
for (let key in newStr) {
    //比较
    if (newStr[key] > biJiao) {
        //如果大于赋值
        biJiao = newStr[key];
        // 同时赋值属性名
        max = key;
    }
}
console.log(biJiao + max);

几种对象

• 自定义对象：基础内容 属于ECMAScript
• 内置对象：指JS语言自带的一些对象
• 浏览器对象：JS独有的 ， JSAPI

Math对象 - 内置对象

//求 n - m 的随机数

//Math.floor  向下取整  
//Math.random 0-1取不到1
//( m - n + 1 ) 因为随机不到1所以加1向下取整
//+ n  从n开始随机
Math.floor(Math.random() * ( m - n + 1 ) + n);

Date对象 - 构造函数

• 必须使用 new 来调用

let now = new Date();

• 参数格式 '2021-11-28'

取值

let date = new Date();
//返回当前年份
console.log(date.getFullYear());
//返回月份小一个月  +1
console.log(date.getMonth() + 1);
//返回几号
console.log(date.getDate());
//返回星期几  从周日返回0 周一至周六 1-6
let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
let day = date.getDay()
console.log(arr[date.getDay()]);
//返回时
let h = date.getHours();
h = h < 10 ? '0' + h : h;
console.log(h);
//返回分
let m = date.getMinutes();
m = m < 10 ? '0' + m : m;
console.log(m);
//返回秒
let s = date.getSeconds();
s = s < 10 ? '0' + s : s;
console.log(s);

时间戳

//获取毫秒 - 距离1970年1月1日过了多少毫秒
//1.通过valueOf() getTime
let date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//2.常见的
let date = +new Date();
console.log(date);
//3.H5 新增
console.log(Date.now());

Array对象

//判断是否为数组
let arr = [];
// 1. instanceof
console.log(arr instanceof Array);
// 2. .isArray H5新增
console.log(Array.isArray(arr));
//反转数组
let arr = ['1','2','3'];
arr.reverse();
console.log(arr);
//数组排序
let arr = ['1','2','3'];
arr.sort(function (a,b) {
    return a - b;  //升序
    return b - a;  //降序
});
//返回数组元素的索引
let arr = ['1','2','3'];
console.log(arr.indexOf('2'));
//转换字符串
//1. .toString()
let arr = ['giao','giao','giao'];
console.log(arr.toString());
//2. .join  可以添加分隔符
console.log(arr.join('-'));