javascript学习-每天跟新

polarisya

于 2024-08-07 16:59:27 发布

阅读量65

点赞数 1

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/polarisya/article/details/140987565

版权

1.加法运算规则

原始类型
1.有字符串---正常+拼接
2.没有字符串
true+1   true为1,结果2
false +1 false为0,1
null+0  null为0，结果0
undefined + 1  NaN
Symbol虽然为原始数据类型，但是他不能转为数字，所有Symbol（）+1 会报错



含有复杂数据类型
// Symbol.toPrimitive转成原始
  var obj={
    a:1,
    [Symbol.toPrimitive]:function(){
      return 1
      // return {}  直接报错
    },
    // 如果没有Symbol.toPrimitive方法,使用：
    valueOf(){
      return 2
    },
    // or
    toString(){
      return 1
    }
  }
  console.log(obj+1)  //2

2.函数的length属性

function A(a,b){
console.log(A.length)//表示函数的形参数量
// 但是，当把参数设置默认值时，比如b=1,此时长度为1，此时后面再加一个参数c，length依旧为1
// 因此，这个length长度不包括剩余参数，应该是第一个有默认值参数之前的参数的长度
}

3.码点和码元

码元：每一个字符对应一个数字，在计算机内存中储存为16为的二级制（两个字节），而这个空间就称为码元。但是有些生僻字或者emo表情，可能会超出这个范围

码点：文字真正对应的内存空间，一个码点可能对应一个或者两个码元。比如emo表情有5个，那对应5个码点，但却不是五个码元。

因此，用字符串的方法读取长度读取的是码元的长度。可以针对该问题封装一些相应方法解决：

<script>
  let str = '❤️😁'
  // 针对码点进行处理
  // 可以在字符串原型添加方法
  // 得到字符串码点的长度
  String.prototype.pointLength = function () {
    let len = 0
    for (let i = 0; i < this.length;) {
      len++;
      const point = this.codePointAt(i) //码点
      i += point > 0x10FFFF ? 1 : 2  //判断是否大于正常码元
    }
    return len
  }

  // String.fromCodePoint(128513) 该方法可将码点转成字符串
  // 根据下标得到码点的文字  
  String.prototype.pointAt = function (index) {
    let curIndex = 0  //目前遍历到第几个码点
    for (let i = 0; i < this.length;) {
      if (curIndex === index) {
        const point = this.codePointAt(i)
        return String.fromCodePoint(point)
      }
      curIndex++
      const point = this.codePointAt(i)
      i += point > 0x10FFFF ? 1 : 2
    }
  }


  // 做字符串截取(基于码点的截取)
  String.prototype.pointSlice = function (start, end = this.pointLength()) {
    let result = ''
    const len = this.pointLength()
    for (let i = start; i < len&&i<end; i++) {
      result += this.pointAt(i)
    }
    return result
  }

  console.log(str.length) //4
  console.log(str.pointLength()) //2
  console.log(str.pointAt(1)) //
  console.log(str.pointSlice(0,1)) //
</script>

4.元素的函数式排列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container img {
      position: absolute;
      transform: translate(700px, 500px);
    }
  </style>
</head>

<body>
  <div class="container" style="width:1500px;height: 850px;position: relative;background-color: antiquewhite;overflow-y: auto;">
    <img src="./src/assets/imgs/carbon-btn.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/carbon-com.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/carbon-btn.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/carbon-com.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/carbon-btn.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/carbon-com.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <img src="./src/assets/imgs/green-elc.png" alt="" style="width: 100px;height: 100px;" />
    <button class="btns">按钮</button>
  </div>
</body>
<script>
  const container = document.querySelector('.container')
  const doms = document.querySelectorAll('.container img')
  const btnContainer = document.querySelector('.btns')
  const height = container.clientHeight
  const width = container.clientWidth
  //  数学函数 + x范围 + y范围
  // 建一个构造函数
  class Curve {
    /*
    * @param {(x:number)=>number} curveFunc
    * @param {number:[]} xRange [1,???]
    * @param {number:[]} yRange [1,???]
    */
    constructor(curveFunc, xRange, yRange) {
      this.curveFunc = curveFunc
      this.xRange = xRange
      this.yRange = yRange
    }

    /*
    * @param {number} x
    * @return {number}
    */
    getY(x) {
      let y = this.curveFunc(x)
      if (x < this.xRange[0]) {
        y = this.curveFunc(this.xRange[0])
      } else if (x > this.xRange[1]) {
        y = this.curveFunc(this.xRange[1])
      }

      if (y < this.yRange[0]) {
        y = this.yRange[0]
      } else if (y > this.yRange[1]) {
        y = this.yRange[1]
      }
      return y;
    }

  }



  // 页面图片排版通过函数
  function layout(curve, doms, width, height) {
    // 首先需要计算x的步长
    const [minX, maxX] = curve.xRange
    const [minY, maxY] = curve.yRange
    const xSetp = [maxX - minX] / (doms.length - 1)
    const cx = (minX + maxX) / 2
    const cy = (minY + maxY) / 2
    const xScale = width / (maxX - minX)
    const yScale = height / (maxY - minY)
    for (let i = 0; i < doms.length; i++) {
      const dom = doms[i]
      const x = minX + i * xSetp
      const y = curve.getY(x)
      const dx = (x - cx) * xScale
      const dy = (y - cy) * yScale
      dom.style.setProperty("--dx", dx)
      dom.style.setProperty("--dy", dy)
      dom.style.top = dy + 'px'
      dom.style.left = dx + 'px'
    }
    // 此时要注意数学坐标系和页面的坐标系不同,原点需要平移，并且放大缩小
  }

  const curves = {
    wave() {
      const wave = new Curve((x) => Math.sin(x), [0, 3 * Math.PI], [-1, 1])
      layout(wave, doms, width - 100, height / 2)
    },
    line(){
      const line = new Curve((x) => x, [0, 1], [-1, 1])
      layout(line, doms, width - 100, height / 2)
    },
    corssLine(){
      const line1 = new Curve((x) => x, [0, 1], [-1, 1])
      const line2 = new Curve((x) => -x, [0, 1], [-1, 1])
      const midIndex=Math.floor(doms.length/2)
      const doms1=Array.from(doms).slice(0,midIndex)
      const doms2=Array.from(doms).slice(midIndex)
      layout(line1, doms1, width - 100, height / 2)
      layout(line2, doms2, width - 100, height / 2)
    }

  }
// curve.wave()
// curve.line()
// curves.corssLine()
</script>

</html>

polarisya

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习-每天跟新

码元：每一个字符对应一个数字，在计算机内存中储存为16为的二级制（两个字节），而这个空间就称为码元。但是有些生僻字或者emo表情，可能会超出这个范围。码点：文字真正对应的内存空间，一个码点可能对应一个或者两个码元。比如emo表情有5个，那对应5个码点，但却不是五个码元。因此，用字符串的方法读取长度读取的是码元的长度。
复制链接

扫一扫