zoukankan      html  css  js  c++  java

  • day 45 JavaScript

    day 45 JavaScript

    01.JavaScript

    1. 是前端的一门编程语言（也是有逻辑的）与java没有关系
    2. JavaScript是Netscape（网景）公司开发
    3. Node.js 支持前段js代码 跑在后端服务器上
    4. ECMAScript 与 javascript 指相同的
    5. 当前使用较多的版本ECMAScript 5.1 / 6

    02.js语法

    1. 注释

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

    2. 引入方式

      1.在标签内直接书写
<script>
	js代码
</script>	
2.通过标签src书写 引入外部js文件
<script src="js.js"></script>

    3. Js里面的变量

      1. 在Js中声明变量需要使用关键字

        var 声明的是全局有效
let 可以只在局部有效（ES6新语法）

var name = 'jason'
let name = 'oscar'

      2. js中变量的命名规范

        1. 数字 字母 下划线 $

        2. 不能使用关键字作为变量名

        3. 推荐使用驼峰体命名

          python推荐使用下划线（c++）
user_name
js推荐使用驼峰体（前端）
UserName

      3. js代码默认以分号作为结束符

        confirm('are you sure?')
不写分号通常情况下没有问题

      4. 常量const

        const pi = 3.1415; pi的值不能改变，试图更改会报错

        python中没有真正的常量，全大写的变量名只是约定俗成的不改变

      console.log() 作用与 python中的print作用相同

    03.js中的数据类型

    1. 数值类型 Number（包含python中的 int float）

      var x; //此时x是undefined
var x=1;//此时是数字
var x=12.34;//此时类型也是数字
NaN 表示非数字类型，用于判断变量是否为数字

    2. 字符串类型 string

      var a = 'hello';
var b = 'world';
var c = a + b;
console.log(c) // 'helloword'

      字符串的常用内置方法

      var name = '   Jason   '

      1. length 返回长度

        console.log(name.length) == print(len(name))

      2. trim() 移出空白

        name.trim() == name.strip()
区别 trim() 无法传参 只能去空格
trimLeft() 去左侧字符
trimRight() 去右侧字符

      3. charAt(n) 返回第n个字符

        name.charAt(0)

      4. concat(value,......) 拼接

        name.concat('字符串') 会将括号内的字符串和name拼接到一起产生一个新的变量

      5. indexOf 获取元素索引位置

        name.indexOf('a') == name.index('a')

      6. substring(from,to) 根据索引获取子序列

        name.substring(1,5) == name[1:5]
substring() 括号内不能输入负值，会返回''
substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

      7. slice(start,end) 切片

        name.slice(0.-2) == name[0:-2]
name.slice(2) == name[2:] 2前面的都不要
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

      8. toLowerCase 变为全小写

        name.toLowerCase() == name.lower()

      9. toUpperCase 变为全大写

        name.toUpperCase() == name.upper()

      10. split(delimiter,limit) 分割

      11. ES6中引入了模板字符串。

        var name = 'jason' , age = 18;
var res = 'my name is ${name} my age is ${age}' //找不到会报错
==
res = f'my name is {name} my age is {age}'

    3. 布尔值 boolean

      1. 在js中布尔值全部是小写
      2. true
      3. false ''(空字符串)、0、null、undefined、NaN
      null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined 表示当声明了一个变量但未初始化时，改变量的默认值是undefined ，还有就是当函数无法明确的返回值时，返回的也是undefined

    4. 对象 object

      JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript允许自定义对象。
javascript 提供多个内建对象 如 string、date、Array 等等
对象只是带有属性和方法的特殊数据类型

    5. 数组 （python中的list）

      数组对象的作用是，使单独的变量名来储存一系列的值。

      var a = [123,"abc"];
console.log(a[1]);  // 输出结果为"abc"
l = [1, 2, 3, 4, 5, 6, 7, 8, 9]

      1. length 获取数组的长度

        l.length == len(l)

      2. push(ele) 尾部追加元素

        l.push(10) == l.append(10)

      3. pop() 获取尾部元素

        l.pop() == l[-1] //不同点为pop会将元素从数组中删除

      4. unshift(ele) 头部插入元素

        l.unshift(666) == l.insert(0,666)

      5. shift() 头部移除元素

        l.shift() == l[0] //不同点为shift会将元素从数组中删除

      6. slice(start,end) 切片

        l.slice(2,6) == l[2:6]

      7. reverse() 反转

        l.reverse() == l = l[::-1] //reverse() 会将反转的结果保存

      8. join(seq) 将数组拼接成字符串

        l.join('$') == '$'.join(l)

      9. concat(value,....) 连接数组

        l2 = [11, 22, 33, 44, 55, 66]
l.concal(l2) == l.extend(l2)

      10. sort() 排序

        l.sort() == l.sort() //两者完全相同，会将排序后的结果保存

      11. forEach() 将数组的每个元素传递给回调函数

        l.forEach(function(obj){console.log(obj)}) 
会将l里的每一个元素提取出来放到函数中
l.forEach(function(obj,index){console.log(obj,index)}) 
如果传入两个参数的话，第二个值为元素对应索引


        forEach(function(currentValue, index, arr), thisValue)
        参数 描述
        function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
        thisValue 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

      12. splice() 删除元素，并向数组添加新元素

        l.splice(1,2,888,[123,131],999) 
//第一个参数为起始索引，第二个为要删除的个数，后面的参数为插入到改位置的元素


        splice(index,howmany,item1,.....,itemX)
        参数 描述
        index 必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
        howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
        item1, ..., itemX 可选。要添加到数组的新元素

      13. map() 返回一个数组元素调用函数处理后的值的新数组

        map(function(currentValue,index,arr), thisValue)
currentValue	必须。当前元素的值
index					可选。当期元素的索引值
arr						可选。当期元素属于的数组对象
        参数 描述
        function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
        thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

    6. 运算符

      1. 算数运算符

        + *- * / % ++ --
var x=10;
x++; // 此时打印结果为10，会先将x赋值给x，+1的值没有被赋给x
x; // 此时这两行的效果与 python 中的 x+=1 相同
++x; == x+=1

      2. 比较运算符

        > >= < <= != == === !==
// 需要注意的是 == 和 != 会将比较的双方转化成相同的数据类型再比较
=== !== // 这两者何python中的 == != 效果相同

      3. 逻辑运算符

        js中		==		python中
&&						and
||						or
!							not

      4. 赋值运算符

        = += -= *= /= 
与python中的效果相同

    04.流程控制

    1. if-else

      var x=10;
if (x>5){
  console.log('yes')
}else{
  console.log('no')
}
// js中没有elif ，else if 来达到elif相同的效果
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

    2. switch

      var day = new Date().getDay();
switch (day){
    case 0;
    console.log('Sunday')
    break;
    case 1;
    console.log('Monday')
    break;
}
// case 后面如果没有加break 程序会将符合条件的case后面的所有case默认成立执行下去

    3. for

      for (var i=0;i<10;i++) {
  console.log(i);
}
// 小括号内放第一个元素为定义变量，第二个为终止条件，第三个为变化条件
// 大括号内放python中for循环缩进内的代码块

    4. while

      var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

    5. 三元运算

      var a = 1;
var b = 2;
var c = a > b ? a : b
// 这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;

// 三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
// x = 10

// python中的三元表达式
a = 10
b = 20
a if a>b else b

    04.函数

    1. 无参函数

      function f1(){
  console.log("Hello Word");
}

    2. 带参函数

      function f2(a,b){
  console.log(arguments);
  console.log(arguments.length);
  console.log(a,b);
}

    3. 带返回值的函数

      function f3(a,b){
  retun a+b ;
}

    4. 匿名函数

      var sum = function(a,b){
  return a+b;
}
sum(1,2)

    5. 立即执行函数

      (function(a,b){return a+b})(1,2)

    6. ES6中支持使用箭头=>来定义匿名函数

      var f = v => v;
// 等同于
var f = function(v){
  return v;
}
var f = () => 15;
// 等同于
var f = function(){
  return 15;
}
var f = (a,b) => a+b;
// 等同于
var f = function(a,b){
  return a+b;
}
// js 中的return只能返回一个值，如果需要返回多个值要手动将其包成一个数组或对象

    7. 函数中的arguments参数

      function add(a,b){
  console.log(a+b);
  console.log(arguments);
}
arguments 相当于将传如的参数包成一个数组接收

    8. 局部变量和全局变量

      1. 局部变量

        在js函数内部声明的变量（使用var）是局部变量，只能在函数内部访问到（改变量的作用域是函数内部）。只要函数运行完毕就会将其删除

      2. 全局变量

        在函数外部声明的变量。页面上所有的脚本和函数都能访问它。

      3. 变量生存周期

        javascript变量的生存周期从被声明开始

        局部变量在函数运行结束后被删除

        全局变量在页面关闭后被删除+

      4. 闭包函数

        var city = "beijing";
function f(){
  var city = "shanghai";
  function inner(){
    console.log(city);
  }
  return inner;
}
var ret = f();
ret();
// 结果为 shanghai

    05.词法分析

    06.内置对象和方法

    1. JavaScript中一切皆对象，字符串、数字、数组、日期等。对象就是拥有属性和方法的数据
      img

    2. 自定义对象

      JavaScript中的对象（Object）本质上是键值对的集合（Hash结构）。只能使用字符串为键。

      var a = {"name":"jason","age":18};
console.log(a.name);
console.log(a.age);
// for 循环对象中的值
for (var i in a){
  console.log(i,a[i])
}
// 创建一个对象
var person = new Object();
person.name = 'jason'; // 为对象添加属性
person.age = 18;

    3. 创建Date对象

      // 方法1；不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
// 2019/11/17 下午12:56:25

//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
// 2004/3/20 上午11:12:00
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
// 2004/3/20 上午11:12:00

//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
// 1970/1/1 上午8:00:05
console.log(d3.toUTCString());
// Thu, 01 Jan 1970 00:00:05 GMT

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
// 2004/3/20 上午11:12:00


      // Date 对象的方法
var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

    4. Json 对象

      var str1 = '{"name":"jason","age":18}'
var obj = {"name":"jason","age":18}
// json 将字符串转换成对象
var obj = JSON.parse(str1);
// json 将对象转化成JSON字符串
var obj = JSON.stringify(obj);

    5. RegExp 对象

      //定义正则表达式的两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/g) // 统计字符串中出现的个数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/
// lastIndex 是当前光标所在位置，匹配成功后，光标会停在结束的位置，再次匹配时会继续从该位置开始匹配

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test(); // 不传参默认传undefined
reg2.test(undefined); 

var reg3 = /undefined/;
reg3.test();
  • 相关阅读:
    Oracle/PLSQL: Creating Functions
    Oracle调优总结(经典实践 重要)
    Lua 简单的IO交互 和迷宫代码
    Lua基础 函数（一）
    Stateless Iterators
    Lua print on the same line
    What is the Best Programming Language to Learn in 2014?
    Using command-line Subversion to access project source files
    Lua 代码编写技巧
    lua语言入门之Sublime Text设置lua的Build System
  • 原文地址：https://www.cnblogs.com/luocongyu/p/11877501.html
Copyright © 2011-2022 走看看