成为作者

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,
  sex: '男',
  'birth-date': '1996-12-15', //特殊变量 如中划线 需要用引号括起来声明
  say: function () {
    console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`);
  }
}
//第一种
console.log(Object.keys(people));
//第二种
for (const key in people) {
  console.log(key);
  if (people.hasOwnProperty(key)) {
    const element = people[key];
    console.log(element);
  }
}

删除对象的属性

var people = {
  name: '张三',
  age: 18,
  sex: '男',
  'birth-date': '1996-12-15',
  say: function () {
    console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`);
  }
}
delete people.name
console.log(people);
/**
 * age: 18
 * birth-date: "1996-12-15"
 * say: ƒ ()
 * sex: "男"
 */

构造函数

function People(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
//构造函数声明一个对象
var peo1 = new People("张三", 18, "男")
console.log(peo1); //People {name: "张三", age: 18, sex: 男}

this

var people = {
  name: '张三',
  age: 18,
  sex: '男',
  'birth-date': '1996-12-15',
  say: function () {
    console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`);
    //this指向当前实例本身
  }
}
people.gotoWork = function () {
  console.log(this.name + "去上班");
}
people.gotoWork() //张三去上班
people.say() //我是张三,今年18岁,性别男
//当用箭头函数声明时 this指向当前父级作用域
people.gotoWork = () => {
  console.log(this);
}
people.gotoWork() //当前this指向父级作用域  Window
//在构造函数中箭头函数中的this指向是本身

getters & setters

//对象中使用get set
var people = {
  firstName: "三",
  lastName: "张",
  get fullName() {
    return this.lastName + this.firstName;
  },
  set fullName(fullName) {
    let [lastName, firstName] = fullName.split(" ");
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
console.log(people.fullName);
people.fullName = '李 四'
console.log(people.fullName);
//构造函数中使用 get set
function People(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var peo1 = new People("张三", 18, "男")
Object.defineProperty(peo1, "userInfo", {
  get: function () {
    return `我是${this.name},今年${this.age}岁,性别${this.sex}`
  },
  set: function (info) {
    var [name, age, sex] = info.split(" ")
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
})
console.log(peo1.userInfo); //"我是张三,今年18岁,性别男"
peo1.userInfo= "李四 18 女"
console.log(peo1.userInfo);// "我是李四,今年18岁,性别女"



未完待续...

划线
评论
复制
发布于: 2020 年 08 月 23 日 阅读数: 37

版权声明: 本文为 InfoQ 作者【丶】的原创文章。

原文链接:【http://xie.infoq.cn/article/9e689b38f2ed106d6e4c050b5】。文章转载请联系作者。

JavaScript
用户头像

丶

关注

还未添加个人签名 2020.07.29 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2020, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 |  京 ICP 备 16027448 号 - 5 京公网安备 京公网安备 11010502039052号
JavaScript基础语法