JavaScript 基础语法

用户头像
关注
发布于: 2020 年 08 月 23 日

配合右上角目录使用,效果更佳!(未完待续,记得点赞收藏哦~)

1、基础

变量

var a = 'hello world';

常量

const A = '我是一个常量,无法修改';
const PI = 3.14;

基础数据类型

  1. bool

  2. number

  3. string

  4. undefined(变量未初始化,未分配内存地址)

  5. null(变量已经初始化,已分配内存地址,值就是null)

var a = true || false //bool
var num = 1 //number
var str = "hello world" //字符串
str1 = str //error:str1 is not defined str1变量未初始化,未分配内存地址
var b = null // 变量已经初始化,已分配内存地址,值就是null

数据类型转换

  1. typeof 查询变量类型

  2. + 当连字符使用时

  3. parseInt

  4. parseFloat

var a = "hello";
console.log(typeof a) //string
var b = 1;
console.log(typeof b) //number
var c = a + b;
console.log(c) //hello1 当连字符使用时会将参与拼接的变量转换为string
console.log(typeof c) //string
var num1 = '1'
console.log(parseInt(num1))// 1 将str转换成number 转换不成功返回 NaN
var num2 = '3.14'
console.log(parseFloat(num2)) // 3.14 将str转换成number 转换不成功返回 NaN

注释

  1. 单行注释

  2. 多行注释

  3. 文档注释

//单行注释
/*
多行注释
多行注释
多行注释
*/
/**
*@param {number} a第一个操作数
*@returns {number}返回一个number类型的值
*/

2、操作符

赋值操作符

var a = 1

一元操作符

// + - ++ --
var a = +1; //+ 表示正数
var b = -1 //- 表示负数
var c = + 'str' //此时 + 作为连字符使用
a++ //表示a自增1
a-- //表示a自减1

算数操作符

// + - * / % **
var a = 9
var b = 2
console.log(a+b)//11
console.log(a-b)//7
console.log(a*b)//18
console.log(a/b)//4.5
console.log(a%b)//1 取余
console.log(a**b)//81 9的二次方

比较操作符

// > >= < <= != == ===
var a =1 ,b=2
console.log(a>b) //false
console.log(a>=b) //false
console.log(a<b) //true
console.log(a<=b) //true
console.log(a!=b) //true
var c=1 ,d='1'
console.log(a==b)//true 只判断数值不判断类型
console.log(a===b)//false 类型和数值都要判断

逻辑操作符

// && || !
var a=1, b=2,c=3
console.log(a>b&&b>c) // && 两个条件全满足才为 true
console.log(a>b||c>b) // || 两个条件满足其中一个就位 true
console.log(!true) // ! 取反

三目运算符

var a=1 , b=2
console.log(a>b?'a>b':'a<b')// 'a<b'

位运算符

了解就行,实际开发很少用

3、流程控制

if...else

var a = 1, b = 2
if (a > b) {
console.log('a大于b');
} else {
console.log('a小于b');
}

switch...case

var a = '汽车'
switch (a) {
case '汽车':
console.log('选择汽车出行,预计10分钟');
break;
case '轮船':
console.log('选择轮船出行,预计40分钟,需换乘');
break;
case '地铁':
console.log('选择地铁出行,预计15分钟');
break;
case '公交':
console.log('选择公交出行,预计30分钟');
break;
default:
console.log('你还没有选择交通工具');
break;
}

while

var a = 1
while (a <= 10) {
console.log(a);
a++
}
console.log('跳出while a=', a); //a=11 先判断循环条件,再执行代码块语句

do...while

var a = 1
do {
console.log(a);
a++
} while (a <= 10);
console.log('跳出while a=', a); //a=11 先执行代码块语句,在判断循环条件

for

var array = [1, 2, 3, 4, 5]
for (let i = 0; i < array.length; i++) {
const element = array[i];
console.log(element); // 1,2,3,4,5
}

break/continue

var array = [1, 2, 3, 4, 5, 6, 7, 8]
for (let i = 0; i < array.length; i++) {
const element = array[i];
if (i == 3) {
break
}
console.log(element); // 1,2,3,4 break跳出当前for循环
}
for (let i = 0; i < array.length; i++) {
const element = array[i];
if (i == 3) {
continue
}
console.log(element); //1,2,3,5,6,7,8 continue跳过本次循环,进行下一次循环
}

4、函数

一般声明与调用

/**
* @param {number} a
* @param {number} b
* @returns {number} 返回a与b的和
*/
function add(a, b) {
return a + b
}
add(5, 2)

变量和函数提升(hoisting)

add(5, 2) //先使用后声明 *变量不建议使用 会降低代码可读性
function add(a, b) {
return a + b
}

默认参数

function printName(name='lp') {
console.log('你好 '+name);
}
printName() // 你好 lp
printName("张三") //你好 张三

递归

//函数自己调用自己 *一定要加上跳出条件,不然会死循环
//求1到999的和
function sun(n) {
if (n === 1) {
return 1
}
return n + sun(n - 1)
}
sun(999) //499500
//斐波拉基数列
// 1 1 2 3 5 8 13 ...
function fib(num) {
if (num <= 1) {
return 1
}
return fib(num - 1) + fib(num - 2)
}
fib(6) //13

arguments

function log() {
for (let i = 0; i < arguments.length; i++) {
const element = arguments[i];
console.log(element);
}
}
log('张三', '李四', '王五', '赵六')
//arguments 可以获取不确定个数的参数

作用域

var a = 1; //全局变量
function sum(b) { //b局部变量 只能在函数内部使用
return a + b
}

var/let

/**
* var/let 相同点:
* 1.都能声明变量
* 2.在函数里定义变量,出了函数本身就不能被访问到
* 3.定义的全局变量,在哪里都能被访问
* var/let 不同点:
* 在代码块{}()中 如if{} for{} let出了代码块不能被访问到
*/
var a = true
if (a) {
var n = 1
let m = 2
}
console.log(n); //1
console.log(m); //error:m is not defined 无法访问

箭头函数

//有参
var log = () => {
console.log("hello world");
}
//无参
var logName = (name) => {
console.log("hello world " + name);
}
//有返回值 只有一行表达式并且需要返回时 可直接省略{}
var sun = (a, b) => a + b
//跟上面效果一样
var sun = (a, b) => {
return a + b
}

闭包

//用一个函数包装另外一个函数
//一般使用情况为 当你已经有一个类似功能函数,需要扩展时,使用闭包,进行二次的封装
function sum(a, b) {
function square(num) {
return num * num
}
return square(a) + square(b)
}
sum(3, 4)

柯里化(了解)

//用的不多 个人理解...
function sum(a, b) {
function square(num) {
return num * num
}
return square(a) + square(b)
}
sum(3, 4)
function sum(a,b,c) {
return a+b+b
}
sun(1,2,3)
function sum1(a) {
return function(b){
return function (c) {
return a+b+c
}
}
}
sum1(1)(2)(3)

自执行函数(了解)

(function log() {
console.log('hello ');
})()

回调函数

function log(callback) {
console.log("执行打印");
callback()
}
function cb() {
console.log('执行完毕');
}
log(cb);
log(() => {
console.log('执行完毕--自定义');
})



5、数组

创建数组

var array1 = [1, 2, 3] //字面值创建
var array2 = new Array(4, 5, 6)//构造函数创建
var array3 = Array(7, 8, 9)//数组object创建
var array4 = Array.of(10, 11, 12)//Array.of创建
// 如果是创建一个元素的数组,那么只能使用字面值或者array.of创建
var arr1 = [3] // [3]
var arr2 = new Array(3) //代表创建数组的长度,内容全部为空
var arr3 = Array(3) //同上
var arr4 = Array.of(3) // [3]

访问数组

var array = [1, 2, 3] //字面值创建
console.log(array.[0]); // 使用索引访问元素 索引从0开始到数组length-1结束

添加元素

var array = [1, 2, 3 ] //字面值创建
array.push(4) //向数组末尾添加一个元素
array.unshift(0) //向数组头部添加一个元素
console.log(array); // [0,1,2,3,4]
array.splice(1, 0, 5, 6, 7, 8) //从索引1开始删除0个元素,并添加5,6,7,8
console.log(array); // [0,5,6,7,8,1,2,3,4]

删除元素

var array = [1, 2, 3, 4, 5, 6, 7, 8]
array.length = 5 //通过控制数组长度来删除元素
console.log(array); //[1,2,3,4,5]
array.splice(1, 2) //从索引1开始删除2个元素
console.log(array); //[1,4,5]

数组遍历

var array = [1, 2, 3, 4, 5]
for (let i = 0; i < array.length; i++) {
const element = array[i];
console.log(element);
}
for (const item of array) {
console.log(item);
}
array.forEach((element, index, array) => {
console.log(element); //遍历元素
console.log(index); //索引
console.log(array); //数组本身
});

栈模式(了解)

var array = [1, 2, 3, 4, 5]
array.push(6) //入栈 将元素押入数组末尾
array.pop() //出站 将数组末尾元素移除

队列模式(了解)

var array = [1, 2, 3, 4, 5]
array.push(6) //入队 将元素押入数组末尾
array.shift() //出队 将数组首个元素移除
array.unshift(6) //插队 将元素插入数组头部

反转数组

var array = [1, 2, 3, 4, 5]
array.reverse() // [5,4,3,2,1] 对数组本身进行操作

数组排列

var array = [2, 1, 5,86, 7,68, 0, 20, 45, 453, 4, 12, 31, 56]
array.sort()
console.log(array); // [0, 1, 12, 2, 20, 31, 4, 45, 453, 5, 56, 68, 7, 86]
//自定义排序
var Arr = [
{ name: '张三', age: 38 },
{ name: '李四', age: 28 },
{ name: '王大娘', age: 68 },
{ name: '爱丽丝', age: 18 }
]
Arr.sort((a, b) => {
if (a.age > b.age) {
return 1
} else if (a.age < b.age) {
return -1
} else {
return 0
}
})

数组连接

var arr1 = [1, 2, 3, 4]
var arr1 = [1, 2, 3, 4]
var arr2 = [2, 3, 4, 5]
var arr3 = arr1.concat(arr2) //不会改变进行拼接的数组,return一个拼接后的新数组
console.log(arr1); //[1,2,3,4]
console.log(arr2); //[2,3,4,5]
console.log(arr3); //[1,2,3,4,2,3,4,5]

数组裁切

var arr = [1, 11, 21, 31, 41, 51]
arr.slice(2,4)
//slice(n,m) n(必填)裁切开始的位置,m(非必填)裁切结束的位置,但不包含该元素,可以为负数
//不会对原数组进行操作,返回一个新数组

map

var Arr = [
{ name: '张三', age: 38 },
{ name: '李四', age: 28 },
{ name: '王大娘', age: 68 },
{ name: '爱丽丝', age: 18 }
]
Arr.map((item, index, Arr) => {
console.log(item); //遍历的元素
console.log(index); //索引
console.log(Arr); //数组本身
return `姓名:${item.name} ,今年${item.age}岁` //重新返回数组元素 直接对数组进行操作
})
console.log(Arr);
/**
*  ["姓名:张三 ,今年38岁",
* "姓名:李四 ,今年28岁",
* "姓名:王大娘 ,今年68岁",
* "姓名:爱丽丝 ,今年18岁"]
*/

reduce

var arr = [1, 11, 21, 31, 41, 51]
arr.reduce((total, num) => {
console.log(total); //初始值,或计算结束的返回值
console.log(num); //当前元素
return total + num //计算公式
}) //不改变原数组 返回最后计算结果
// reduce(callback(total,currentValue,currentIndex,arr),initialValue)
// total 必需。初始值, 或者计算结束后的返回值。
// currentValue 必需。当前元素
// currentIndex 可选。当前元素的索引
// arr 可选。当前元素所属的数组对象。
// initialValue可选,传递给函数的初始值

filter

var arr = [1, 11, 21, 31, 41, 51]
arr.filter(item=>{
if (item>20) {
return true
}else{
return false
}
})
//filter 过滤满足条件的元素 不改变原数组,返回一个新数组

数组测试

//every 所有元素满足要求返回true
var arr = [1, 2, 3];
arr.every(item => item > 0) //所有元素大于0返回true
//some 有一个元素满足要求就返回true
arr.some(item => item > 2) //只要有一个大于2就返回true
arr.some(item => item > 3) //所有都不大于3 返回false

destructuring解构操作符

var arr = [1, 2, 3];
var [a, b, c] = arr //a:1 b:2 c:3

rest操作符

var arr = [1, 2, 3, 4, 5, 6, 7];
var [a, b, ...rest] = arr //a:1 b:2 rest:[3,4,5,6,7]

多维数组

var arr = []
for (let i = 0; i < 5; i++) {
arr[i] = []
for (let j = 0; j < 4; j++) {
arr[i][j] = i + j
}
}
console.log(arr);
/**
* (5) [Array(4), Array(4), Array(4), Array(4), Array(4)]
0: (4) [0, 1, 2, 3]
1: (4) [1, 2, 3, 4]
2: (4) [2, 3, 4, 5]
3: (4) [3, 4, 5, 6]
4: (4) [4, 5, 6, 7]
*/

6、对象

创建对象

//创建对象
//字面值创建
var people = {
name: '张三',
age: 18,
sex: '男',
say: function () {
console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`);
}
}
//new object 创建
var people1 = new Object();
people1.name = "李四"
people1.age = 28
people1.sex = '女'

对象属性

var people = {
name: '张三',
age: 18,
sex: '男',
'birth-date': '1996-12-15', //特殊变量 如中划线 需要用引号括起来声明
say: function () {
console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`);
}
}
//访问对象属性
console.log(people.name); // 张三
console.log(people.age); //18
console.log(people['sex']); //男
console.log(people['birth-date']); // 1996-12-15 取的时候只能使用[]取值
//修改对象属性
people.name='王五'
console.log(people.name); // 王五

省略key

var name="张三";
var people={
//name:name
name //效果与上面一样
}

遍历对象属性

var people = {
name: '张三',
age: 18