JavaScript基础（基础语法-流程控制-数组-Set数据结构）

一、JavaScript基础

基础语法

JavaScript简介

概念
　　JavaScript 是一种运行在客户端（浏览器）的编程语言　
作用
　　1、网页特效 (监听用户的一些行为让网页作出对应的反馈)　
　　2、表单验证 (针对表单数据的合法性进行判断)　
　　3、数据交互 (获取后台的数据, 渲染到前端)
　　4、服务端编程 (node.js)　
组成
　　ECMAscript　
　　DOM
　　BOM

输入输出语法

输入语法

let username = prompt('请输入姓名：')

输出语法

document.write('<h2>' + username + '</h2>')
// 2. alert 警示
alert('黑马')
// 3. 控制台输出语法
console.log('我是用来测试的')
conso.dir(object) // 可以显示一个对象所有的属性和方法。

变量

概念和作用：容器
变量的本质：在内存中开辟一个空间
命名规则和规范
　　规则：
　　　　由字母、数字、下划线、$符号组成，不能以数字开头
　　　　不能是关键字和保留字，例如：var for while
　　　　严格区分大小写
　　规范：
　　　　变量名必须有意义
　　　　遵守小驼峰式命名法
var声明变量和let的区别(了解)
　　　　let为了解决var的一些问题
　　　　var声明:
　　　　　　可以先使用再声明 (不合理)
　　　　　　var声明过的变量可以重复声明(不合理)
　　　　　　比如变量提升、全局变量、没有块级作用域等等

数据类型

基本数据类型
　　number 数值型
　　string 字符串
　　　　单引号　　双引号　　反引号
　　　　字符串拼接
　　　　　　①’xxx’+ 变量名 +‘xxx’
　　　　　　②模板字符串(ES6)
　　　　　　　　模板字符串中可以解析变量
　　　　　　　　模板字符串中可以换行
　　　　　　　　在模板字符串中可以调用函数

let username = prompt('请输入姓名：')
let age = prompt('请输入年龄：')
document.write(`
	<h2>用户姓名：${username}</h2>
	<h2>用户年龄：${age}</h2>
`)

boolean 布尔型
　　undefined 未定义
　　null 空引用
引用数据类型
　　object 对象
　　function 函数
　　array 数组

let arr = ['001', '002', '003']
for (let string of arr) {
	alert(string)
}
document.write('<h1>' + arr[0] + '</h1>')

检测数据类型

console.log(typeof '123')

数据类型转换

一、显示转换
　　转换成数字
　　　　Number(变量)
　　　　parse系列
　　转换成字符串
　　　　String()
　　　　变量.toString() 【括号里面可以跟进制】

/*************** 转换为数字型 **************/
console.log(Number('10.10')) // number 10.1

// 只能转换数字类型的字符，不能放非数字类型的字符
console.log(Number('10.10abc')) // NaN (not a number)

// 转换为数字型，只保留整数，没有四舍五入
console.log(parseInt('10.5')) // number 10

// 转换为数字型，保留小数
console.log(parseFloat('25.25')) // number 25.25
// 当字符串以数字开头时，才能过滤非数字类型的字符
console.log(parseFloat('width10.10px')) // NaN (not a number)
console.log(parseFloat('10.10px')) // 10.1 （经常用于过滤单位）

/*************** 转换为字符型 **************/
console.log(String(111)) // string '111'
console.log((111).toString()) // string 转换为十进制字符串
console.log((10).toString(2)) // 1010 转换为二进制字符串

二、隐式转换的小技巧
　　+号作为正号解析可以转换成Number

// + 号两边只要有一个是字符串，都会把另外一个转成字符串
// 除了 + 以外的算术运算符比如 – * / 等都会把数据转成数字类型
console.log('2022' + 2022) // string '20222022'
// + 号作为正号解析可以转换成 Number
console.log(10 + +'11') // number 21

操作基本数据类型（进阶&积累）

①去除字符串两侧多余的空格

let str = '    Hello    '
console.log(str) // [    Hello    ]
console.log(str.trim()) // [Hello]

②判断参数字符串是否在原字符串的头部，返回布尔值
③判断参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!') // true

④将原字符串重复n次，返回一个新字符串

'x'.repeat(3) // "xxx" 
'hello'.repeat(2) // "hellohello"

流程控制

运算符

算术运算符

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++　　–　　!
3	算数运算符	先 * / % 后 + -
4	关系运算符	>　　>=　　<　　<=
5	相等运算符	==　　!=　　===　　!==
6	逻辑运算符	先 &&　　后 ||
7	赋值运算符	=
8	逗号运算符	,

比较运算符
　　> , >= , < , <= , == , != , === , !==
　　== 判断，只要值相等，不要求数据类型一样即可返回true
　　 ===全等，要求值和数据类型都一致才返回true
　　特殊说明
　　　　如果是数字和"其他值"的比较 则其他值会自动转换成数字去比较

console.log(5 == '5') // true

涉及到"NAN"都是false （NaN）

/************** NaN 和任何数据都不一样 **************/
console.log(NaN === NaN) //false

如果是"字符串"和"字符串"比较 则会比较每一个字符的ASCII码,同时是按位进行比较

console.log('pink' > 'red') // false

如果是布尔值参与比较 布尔值会转换成数字0和1

逻辑运算符

/**
 * 逻辑运算符里面的短路：
 *      && 左边为 false 就短路，右边代码不再执行
 *      || 左边为 true 就短路，右边代码不再执行
 *      运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，一般用在变量赋值
 * 以下五个值是被当作 false
 *      false  0  ''  undefined  null
 */
console.log('逻辑运算符里面的短路：')
console.log(false || 20) // 20
console.log(10 || 20) // 10


/************** 案例 判断数据是否被整除 **************/
console.log('案例 判断数据是否被整除：')
let num = prompt('请输入一个数')
console.log(num)
num = num || 0
console.log(num) // 当用户未输入值时，默认num=0
console.log(num % 4 === 0 && num % 100 !== 0)

语句

顺序语句

分支语句
　　if分支
　　　　三元运算符
　　　　switch case
　　　　　　一般需要配合break关键字使用 没有break会造成case穿透
　　　　　　比较的值全等 ===

let num = +prompt('请输入1-2的数字：')
switch (num) {
	case 1:
		alert(`您输入了数字${num}`)
		break
	case 2:
		alert(`您输入了数字${num}`)
		break
	default:
		alert(`您输入了错误信息`)
}

循环语句
　　while
　　循环语句的跳出
　　　　break: 一般用于结果已经得到, 后续的循环不需要的时候可以使用
　　　　continue: 一般用于排除或者跳过某一个选项的时候, 可以使用continue

数组

操作数组

/**
 * 声明语法
 *      let 数组名 = [数据1, 数据2, ..., 数据n]
 *      例： let names = ['小明', '小刚', '小红', '小丽', '小米']
 * 数组是按顺序保存，所以每个数据都有自己的编号
 * 计算机中的编号从O开始，所以小明的编号为0，小刚编号为1，以此类推
 * 在数组中，数据的编号也叫索引或下标
 * 数组可以存储任意类型的数据
 */
let names = ['小明', '小刚', '小红', '小丽', '小米']

/** 数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点) */
let length = names.push(`小峰`)
console.log("length", length)

/** 数组.unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(重点) */
length = names.unshift('华为')
console.log("length", length)

/** 数组. pop()方法从数组中删除最后一个元素，并返回该元素的值 */
let deleteName = names.pop()
console.log('删除的元素', deleteName)

/** 数组.shift()方法从数组中删除第一个元素，并返回该元素的值 */
deleteName = names.shift()
console.log('删除的元素', deleteName)

/**
 * 数组.splice()方法删除指定元素
 * arr.splice(start, deleteCount)
 * arr.splice(起始位置, 删除几个元素)
 * start:
 *      起始位置
 *      指定修改的开始位置（从0计数)
 * deleteCount:
 *      表示要移除的数组元素的个数
 *      可选的，如果省略则默认从指定的起始位置删除到最后
 */
names.splice(2, 2)

遍历数组

冒泡排序

/** 冒泡排序是一种简单的排序算法。
 * 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。
 * 走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
 * 这个算法的名字由来是因为越小的元素会经由交换慢慢”浮“到数列的顶端。
 */
let arr = [5, 6, 9, 4, 6, 3, 8]
// 外层循环控制趟数
for (let i = 0; i < arr.length - 1; i++) {
    // 内层循环控制每趟比较的次数
    for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
        }
        console.log(`第${i + 1}趟，第${j + 1}次`, arr)
    }
}

操作数组（进阶&积累）

let arr = [1, 2, 3, 4, 5];
/************** forEach 迭代数组 **************/
arr.forEach(function (value, index, array) {
 console.log('数组当前项的值' + value)
 console.log('数组当前项的索引' + index)
 console.log('数组对象本身' + array)
 if (value === 3) {
     console.log('找到了该元素');
     return true; // 在forEach 里面 return 不会终止迭代
 }
})

/************** filter 筛选数组 直接返回一个新数组 **************/
let newArr2 = arr.filter(function (value, index, array) {
console.log('数组当前项的值' + value)
console.log('数组当前项的索引' + index)
console.log('数组对象本身' + array)
if (value === 3) {
  console.log('找到了该元素');
  return true; // filter 里面 return 不会终止迭代
}
return value >= 3
})
console.log(newArr2) // [3, 4, 5]

/**
 * 检测数组中的元素是否满足指定条件
 * 返回值是布尔值 ,如果查找到这个元素, 就返回 true ,如果查找不到就返回 false
 * 如果找到第一个满足条件的元素,则终止循环. 不在继续查找
 */
let flag = arr.some(function (value, index, array) {
    if (value === 3) {
        console.log('找到了该元素');
        return true; // some 里面 return 会终止迭代
    }
    return value >= 6
})
console.log(flag) // false

/************** find 找出第一个符合条件的数组成员, 如果没有找到返回 undefined **************/
let ary = [{id: 1,name: '张三'}, {id: 2,name: '李四'}, {id: 2,name: '王五'}];
let target = ary.find(item => item.id === 2);
console.log(target) // {id: 2, name: '李四'}

/************** findIndex() 找出第一个符合条件的数组成员的位置, 如果没有找到返回-1 **************/
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index) // 1

/************** includes() 表示某个数组是否包含给定的值，返回布尔值 **************/
[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

扩展运算符

// 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let array = ["a", "b", "c"];
console.log(...array); // a b c
console.log("a", "b", "c") // a b c

// 扩展运算符可以应用于合并数组
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// 方法一
let ary3 = [...ary1, ...ary2];
console.log(ary3) // [1, 2, 3, 4, 5, 6]
// 方法二
ary1.push(...ary2);
console.log(ary1) // [1, 2, 3, 4, 5, 6]

// 将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div');
let ary4 = [...oDivs];
console.log(ary4);

构造函数方法：Array.from()

/** 将类数组或可遍历对象转换为真正的数组 */
let arrayLike = {
   "0": "张三",
   "1": "李四",
   "2": "王五",
   "length": 3
}
let ary = Array.from(arrayLike);
console.log(ary) // ['张三', '李四', '王五']

/** 方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组 */
let arrayLike2 = {
   "0": "1",
   "1": "2",
   "length": 2
}
let ary2 = Array.from(arrayLike2, item => item * 2)
console.log(ary2) // [2, 4]

Set数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构
　　const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化
　　const s = new Set([“a”,“a”,“b”,“b”]);

const s = new Set();
s.add(1).add(2).add(3); /** 向 set 结构中添加值，返回 Set 结构本身 */
s.delete(2)             /** 删除 set 结构中的2值，返回一个布尔值，表示删除是否成功 */ 
s.has(1)                /** 表示 set 结构中是否有1这个值 返回布尔值 */ 
s.clear()               /** 清除所有成员，没有返回值 */

/** Set函数可以接受一个数组作为参数，用来初始化 */
const s = new Set(["a","a","b","b"]); 
console.log(s.size) // 2
console.log([...s]) // ['a', 'b']

/** 向 set 结构中添加值，返回 Set 结构本身 */
s.add(1).add(2) 
console.log([...s]) // ['a', 'b', 1, 2]

/** 删除 set 结构中的2值，返回一个布尔值，表示删除是否成功 */ 
const r1 = s.delete('a'); 
console.log(r1); // true
console.log([...s]) // ['b', 1, 2]

/** 表示 set 结构中是否有1这个值 返回布尔值 */
const r2 = s.has('b'); 
console.log(r2) // true

/** 遍历set数据结构中的值 */
s2.forEach(value => {
 console.log(value)
})

/** 清除所有成员，没有返回值 */
s.clear(); 
console.log([...s]); // []